From df0d5f3cb03f8bf7d72e067c0fd7ee54ce4b86eb Mon Sep 17 00:00:00 2001
From: Case Duckworth
Date: Tue, 24 Mar 2015 22:53:18 -0700
Subject: Change template and CSS for flatter structure

- Change CSS to one file
- Change template to reflect CSS flattening
---
 style.css | 491 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 491 insertions(+)
 create mode 100644 style.css

(limited to 'style.css')

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..14f8b88
--- /dev/null
+++ b/style.css
@@ -0,0 +1,491 @@
+/* CSS for Autocento at the breakfast table
+ * Case Duckworth | autocento.me
+ * vim: fdm=marker
+ */
+/* COMMON CSS */
+/* @IMPORTS {{{ */
+/* Playfair Display: headings */
+@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic&subset=latin,latin-ext);
+/* Linux Libertine: body text */
+@import url(fonts/libertine.css);
+/* Courier New: typewriter text */
+@import url(fonts/courier-prime.css);
+/* @imports }}} */
+/* MAIN LAYOUT ELEMENTS {{{ */
+/* HTML + BODY {{{ */
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: "Libertine", Georgia, serif;
+    font-size: 100%;
+}
+html {
+    height: 100%;
+}
+body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: 100%;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+/* html + body }}} */
+/* HEADER + .CONTAINER + .CONTENT {{{ */
+header {
+    max-width: 39em;
+    margin: auto;
+    text-align: center;
+    border-bottom: 1px solid black;
+    padding: 1em 0;
+    margin-bottom: 1em;
+    position: relative;
+}
+.container {
+    margin: 0 auto;
+    padding-bottom: 30px;
+    text-align: center;
+}
+.content {
+    line-height: 1.3em;
+}
+/* header + .container + .content }}} */
+/* NAV + .FOOTNOTES {{{ */
+nav {
+    height: 24px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    overflow: hidden;
+}
+.footnotes {
+    font-size: 0.85em;
+    width: 100%;
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+/* nav + .footnotes }}} */
+/* main layout elements }}} */
+/* HEADER ELEMENTS {{{ */
+/* .TITLE + .SUBTITLE {{{ */
+.title {
+    text-align: left;
+    display: inline-block;
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 1.5em;
+    font-weight: 400;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin: 0;
+}
+.subtitle {
+    text-align: center;
+    display: block;
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 1.25em;
+    font-style: italic;
+    font-weight: 400;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+/* .title + .subtitle }}} */
+/* .HEADER-EXTRA {{{ */
+.header-extra {
+    text-align: right;
+}
+.dedication,.epigraph {
+    vertical-align: bottom;
+    display: inline-block;
+    margin-left: 2%;
+    margin-right: 2%;
+    width: 45%;
+}
+/* DEDICATION {{{ */
+.dedication {
+    font-style: italic;
+    font-size: 0.92em;
+    margin-top: 1em;
+}
+.dedication::before {
+    content: 'for ';
+    font-style: italic;
+}
+.dedication:only-child {
+    text-align: right;
+}
+/* dedication }}} */
+/* EPIGRAPH {{{ */
+.epigraph {
+    text-align: right;
+    font-size: 0.92em;
+    font-style: italic;
+    margin-top: 1em;
+}
+.epigraph p {
+    margin: 0;
+}
+.epigraph .attrib {
+    text-align: right;
+    margin-top: 0;
+    font-size: 0.92em;
+    font-style: normal;
+}
+.epigraph .attrib::before {
+    content: '– ';
+}
+/* epigraph }}} */
+/* header-extra }}} */
+/* header elements }}} */
+/* .EKPHRASTIC {{{ */
+.ekphrastic {
+    max-width: 41em;
+    /* margin-top: -1em; */
+    margin-bottom: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+.ekphrastic a:link { border: none; }
+/* .ekphrastic }}} */
+/* .CONTENT ELEMENTS {{{ */
+/* BLOCK ELEMENTS {{{ */
+.content :first-child {
+    margin-top: 0;
+}
+h2 {
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 1em;
+    font-weight: 600;
+}
+blockquote {
+    border-left: 1px solid gray;
+    padding-left: 2em;
+    margin-left: 2em;
+    font-style: italic;
+}
+img {
+    max-width: 100%;
+    margin: auto;
+}
+/* block elements }}} */
+/* LINKS {{{ */
+a:link {
+    padding-top: 1px;
+    color: inherit;
+    text-decoration: none;
+    border-bottom: 1px dotted black;
+}
+a:visited {
+    color: inherit;
+}
+a:hover {
+    /* text-decoration: underline; */
+    border-bottom: 1px solid black;
+}
+a:active {
+    /* text-decoration: underline; */
+    border-bottom: 1px solid black;
+}
+/* External Links */
+a[href^="http"]:link {
+    text-decoration: none;
+    border-bottom: 1px dotted #a1a3a1;
+}
+a[href^="http"]:visited {
+}
+a[href^="http"]:hover {
+    border-bottom: 1px dashed black;
+}
+a[href^="http"]:active {
+    border-bottom: 1px dashed black;
+}
+/* links }}} */
+/* .content elements }}} */
+/* NAV ELEMENTS {{{ */
+nav a:link { border-bottom: none; }
+nav a:active { border: none; }
+nav .prevlink { float: left; text-align: left; }
+nav .nextlink { float: right; text-align: right; }
+/* Properties both types of navlinks share */
+nav .prevlink, nav .nextlink {
+    margin: 0 0.5em;
+    width: 20%;
+    display: block;
+    font-size: 0.85em;
+    font-family: "Playfair Display", Georgia, serif;
+    font-style: italic;
+    text-transform: lowercase;
+    height: 20px;
+    text-decoration: none;
+    position: relative;
+    display: table;
+    vertical-align: top;
+}
+nav .prevlink::before {
+    content: ' «';
+    font-style: normal;
+    display: table-cell;
+    vertical-align: top;
+    text-align: left;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+nav .nextlink::after {
+    content: ' »';
+    font-style: normal;
+    display: table-cell;
+    vertical-align: top;
+    text-align: right;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+#lozenge {
+    position: absolute;
+    left: 50%;
+    text-decoration: none;
+}
+/* nav elements }}} */
+/* .FOOTNOTES ELEMENTS {{{ */
+.footnotes li {
+    margin-right: 2em;
+    border-bottom: 1px solid gray;
+    max-width: 45em;
+    margin: auto;
+}
+.footnotes li:last-child {
+    border-bottom: none;
+}
+.footnotes p::first-line {
+    font-variant: normal !important;
+}
+.footnotes a[href^="#fnref"] {
+    float: right;
+}
+a.footnoteRef {
+    border: none;
+}
+/* .footnotes elements }}} */
+/* GENRE CSS */
+/* .PROSE {{{ */
+.prose {
+    display: inline-block;
+    text-align: justify;
+    max-width: 39em;
+    margin: auto;
+    hyphens: auto;
+    -moz-hyphens: auto;
+}
+.prose p::first-child::first-line {
+    font-variant: small-caps;
+    letter-spacing: 0.1em;
+}
+/* .prose }}} */
+/* .VERSE {{{ */
+.verse {
+    display: inline-block;
+    text-align: left;
+}
+/* .verse }}} */
+/* PROJECT CSS */
+/* #COVER {{{ */
+/* Flexboxing {{{ */
+#cover {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-content: center;
+    -ms-flex-line-pack: center;
+    align-content: center;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    }
+#cover .title {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -webkit-order: 0;
+    -ms-flex-order: 0;
+    order: 0;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    -webkit-align-self: auto;
+    -ms-flex-item-align: auto;
+    align-self: auto;
+}
+#cover .byline {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -webkit-order: 0;
+    -ms-flex-order: 0;
+    order: 0;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    -webkit-align-self: auto;
+    -ms-flex-item-align: auto;
+    align-self: auto;
+}
+#cover .lozenge {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -webkit-order: 0;
+    -ms-flex-order: 0;
+    order: 0;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    -webkit-align-self: auto;
+    -ms-flex-item-align: auto;
+    align-self: auto;
+}
+/* }}} */
+#cover {
+    color: #b2d9e5;
+    background-image: url('img/black-streak.jpg');
+    background-position: 0 0;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-clip: border-box;
+    background-color: black;
+}
+#cover header {
+    border: none;
+}
+#cover .content {
+    max-width: 39em;
+    margin: auto;
+}
+#cover a {
+    text-decoration: none;
+    border: none;
+}
+#cover a:link {
+    color: #b2d9e5;
+}
+#cover a:visited {
+    color: #b2b2e5;
+}
+#cover a:hover {
+    color: #e5bfb2;
+}
+#cover a:active {
+    color: #e5e5b2;
+}
+#cover li {
+    list-style: none;
+}
+#cover .title {
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 1.8em;
+    letter-spacing: 0.5em;
+    color: #efefb2;
+}
+#cover .byline {
+    font-style: italic;
+    text-align: center;
+    font-size: 1.3em;
+    letter-spacing: 0.2em;
+    color: #e5bfb2;
+}
+#cover .lozenge {
+    text-align: center;
+    font-size: 1em;
+    color: #e5bfb2;
+}
+/* #cover }}} */
+/* .ELEGIES {{{ */
+.elegies {
+}
+/* .elegies }}} */
+/* .HEZEKIAH {{{ */
+/* .hezekiah }}} */
+/* .STARK {{{ */
+/* TODO: Change to Everything Changes? */
+table { border-collapse: collapse; }
+td {
+    vertical-align: top;
+}
+tr {
+    border-bottom: 1px solid #aaa;
+    border-top: 1px solid #aaa;
+}
+/* .stark }}} */
+/* .PAUL {{{ */
+/* Blockquote = typewriter */
+.paul blockquote {
+    font-family: "Courier Prime", "Courier New", Courier, monospace;
+    font-style: normal;
+    font-size: 10pt;
+    border: 1px solid black;
+    max-width: 30em;
+    margin: auto;
+    padding: 1em;
+    text-align: left;
+}
+.paul blockquote :last-child {
+    margin: 0;
+}
+.paul blockquote p::first-line {
+    font-variant: normal !important;
+}
+.paul blockquote ul {
+    list-style-type: none;
+}
+.paul blockquote ul li::before {
+    content: '- ';
+}
+
+/* Emphasis = handwritten */
+.paul em {
+    /* font-family: "Playfair Display", Georgia, sans-serif; */
+    font-style: italic;
+}
+/* .paul }}} */
+/* .AUTOCENTO {{{ */
+.autocento {
+    background-image: url('img/white-streak.jpg');
+    background-position: 0 0;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-clip: border-box;
+    background-color: white;
+}
+/* .autocento }}} */
-- 
cgit 1.4.1-21-gabe81