Change <header> CSS and fonts

- Change <header>
    - to have a bottom border
    - Dedication is now left-aligned
    - Margin stuff
- Change fonts
    - Title, subtitle = Playfair Display
    - Rest = Linux Libertine

19 files changed, 73 insertions, 58 deletions

@@ -41,6 +41,11 @@
             $if(title)$<h1 class="title">$title$</h1>$endif$
             $if(subtitle)$<h1 class="subtitle">$subtitle$</h1>$endif$
 
+            $if(dedication)$
+                <!-- dedication -->
+                <div class="dedication">$dedication$</div>
+            $endif$
+
             $if(epigraph.content)$
                 <!-- epigraph -->
                 <div class="epigraph">
@@ -55,11 +60,6 @@
                 $endif$
                 </div>
             $endif$
-
-            $if(dedication)$
-                <!-- dedication -->
-                <div class="dedication">$dedication$</div>
-            $endif$
         </header>
 
         $if(ekphrastic.image)$
@@ -34,12 +34,12 @@
             <h1 class="title">About the author</h1>
             <h1 class="subtitle">(not pictured)</h1>
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     The body that surrounds him is his, but his insides are not.
                 
                                 </div>
-            
                     </header>
 
         
@@ -34,12 +34,12 @@
             <h1 class="title">AMBER alert</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://www.boston.com/bostonglobe/ideas/articles/2008/07/20/abducted/?page=full">Apparently it does nothing.</a>
                 
                                 </div>
-            
                     </header>
 
                     <div class="ekphrastic">
@@ -34,6 +34,7 @@
             <h1 class="title">And</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://www.theguardian.com/lifeandstyle/2011/oct/28/margaret-atwood-q-a"><p>“What is your favorite word?”</p>
@@ -41,7 +42,6 @@
                 
                                     <div class="attrib">Margaret Atwood</div>
                                 </div>
-            
                     </header>
 
         
@@ -34,12 +34,12 @@
             <h1 class="title">Call me</h1>
             <h1 class="subtitle">aural pleasure</h1>
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="https://www.facebook.com/kittensruleforever38"><p>compiled thru Facebook statuses of the author</p></a>
                 
                                 </div>
-            
                     </header>
 
         
@@ -34,9 +34,9 @@
             <h1 class="title">Cold wind</h1>
             
 
-            
                             <!-- dedication -->
                 <div class="dedication">Justin</div>
+            
                     </header>
 
         
@@ -14,7 +14,7 @@ html, body {
     margin: 0;
     padding: 0;
 
-    font-family: "Fira Sans", sans-serif;
+    font-family: "Linux Libertine O", sans-serif;
     font-size: 12pt;
 }
 html { height: 100%; }
@@ -31,6 +31,8 @@ header {
     max-width: 39em;
     margin: auto;
     text-align: center;
+    border-bottom: 1px solid black;
+    padding: 1em 0;
     margin-bottom: 1em;
 }
 .title {
@@ -42,13 +44,16 @@ header {
     display: block;
 }
 .dedication {
-    text-align: right;
+    text-align: left;
 }
 #container {
     /* max-width: 39em; */
     margin: 0 auto;
     padding-bottom: 30px;
 }
+.content p:first-child {
+    margin-top: 0
+}
 nav {
     height: 24px;
     width: 100%;
@@ -74,6 +79,35 @@ nav {
     border-bottom: none;
 }
 /* layout }}} */
+/* HEADINGS {{{ */
+.title {
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 18pt;
+    /* font-weight: bold; */
+    font-weight: 400;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin: 0;
+}
+.subtitle {
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 15pt;
+    font-style: italic;
+    font-weight: 400;
+    /* position: relative; */
+    /* top: -0.5em; */
+    margin-top: 0;
+    margin-bottom: 0;
+}
+h2 {
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 12pt;
+    font-weight: 600;
+}
+header {
+    position: relative;
+}
+/* headings }}} */
 /* LINKS {{{ */
 a:link {
     padding-top: 1px;
@@ -106,46 +140,24 @@ a[href^="http"]:active {
 /* links }}} */
 /* IMAGES {{{ */
 .ekphrastic {
-    max-width: 39em;
-    margin: auto;
+    max-width: 41em;
+    margin-top: -1em;
+    margin-bottom: 1em;
+    margin-left: auto;
+    margin-right: auto;
     text-align: center;
 }
+.ekphrastic a:link { border: none; }
 img {
     max-width: 100%;
     margin: auto;
 }
 /* images }}} */
-/* HEADINGS {{{ */
-.title {
-    font-family: "Playfair Display", Georgia, serif;
-    font-size: 16pt;
-    /* font-weight: bold; */
-    font-weight: 400;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-}
-.subtitle {
-    font-family: "Playfair Display", Georgia, serif;
-    font-size: 15pt;
-    font-style: italic;
-    font-weight: 400;
-    position: relative;
-    top: -0.5em;
-    margin-top: 0;
-    margin-bottom: 0;
-}
-h2 {
-    font-family: "Playfair Display", Georgia, serif;
-    font-size: 12pt;
-    font-weight: 600;
-}
-/* headings }}} */
 /* DEDICATION {{{ */
 .dedication {
     font-style: italic;
-    font-size: 10pt;
+    font-size: 11pt;
     margin-top: 1em;
-    margin-bottom: 1em;
 }
 .dedication::before {
     content: 'for ';
@@ -155,8 +167,10 @@ h2 {
 /* EPIGRAPH {{{ */
 .epigraph {
     text-align: right;
-    font-size: 10pt;
+    font-size: 11pt;
     font-style: italic;
+    /* font-family: "Playfair Display", Georgia, serif; */
+    margin-top: 1em;
 }
 .epigraph p {
     margin: 0;
@@ -164,8 +178,8 @@ h2 {
 .epigraph .attrib {
     text-align: right;
     margin-top: 0;
-    font-size: 10pt;
-    font-style: italic;
+    font-size: 11pt;
+    font-style: normal;
 }
 .epigraph .attrib::before {
     content: '– ';
@@ -173,6 +187,7 @@ h2 {
 /* epigraph }}} */
 /* NAV {{{ */
 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 */
@@ -29,6 +29,6 @@ blockquote ul li::before {
 
 /* Emphasis = handwritten */
 em {
-    font-family: "Playfair Display", Georgia, sans-serif;
+    /* font-family: "Playfair Display", Georgia, sans-serif; */
     font-style: italic;
 }
@@ -34,13 +34,13 @@
             <h1 class="title">The Death Zone</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://www.npr.org/blogs/13.7/2013/11/19/245996903/embracing-life-and-death">And my life became death.</a>
                 
                                     <div class="attrib">Philip Gould</div>
                                 </div>
-            
                     </header>
 
                     <div class="ekphrastic">
@@ -34,13 +34,13 @@
             <h1 class="title">Death’s trumpet</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <p>So Death plays his little <a href="apollo11.html">fucking</a> trumpet. So what, says the boy.</p>
                 
                                     <div class="attrib">Larry Levis</div>
                                 </div>
-            
                     </header>
 
         
@@ -34,12 +34,12 @@
             <h1 class="title">Ex machina</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://ngm.nationalgeographic.com/2013/08/sugar/cohen-text">with lines from National Geographic</a>
                 
                                 </div>
-            
                     </header>
 
         
@@ -34,12 +34,12 @@
             <h1 class="title">Look</h1>
             <h1 class="subtitle">a found typewriter poem</h1>
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <p><a href="http://books.google.com/books?id=ALdlAAAAMAAJ&amp;focus=searchwithinvolume&amp;q=older+than">Is he older</a>? I asked her. And I never got an answer, because at the moment she disappeared in a puff of smoke. I like to think nothing ever happened to her save that she went over to the spirit realm. I usually know better though.</p>
                 
                                 </div>
-            
                     </header>
 
         
@@ -34,9 +34,9 @@
             <h1 class="title">A hard game</h1>
             
 
-            
                             <!-- dedication -->
                 <div class="dedication">Jim Henson</div>
+            
                     </header>
 
         
@@ -34,12 +34,12 @@
             <h1 class="title">I think it’s you (but it’s not)</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="i-think-its-you.html">When you fall in love everyone looks the same.</a>
                 
                                 </div>
-            
                     </header>
 
         
@@ -34,13 +34,13 @@
             <h1 class="title">L’appel du vide</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://books.google.com/books?id=yybDMC0TRIwC&amp;pg=PR12&amp;lpg=PR12#v=onepage&amp;q&amp;f=false">You can never go home again.</a>
                 
                                     <div class="attrib">Thomas Wolfe</div>
                                 </div>
-            
                     </header>
 
         
@@ -34,9 +34,9 @@
             <h1 class="title">Something</h1>
             <h1 class="subtitle">about all music being performances of <em>4′33″</em> in places where other bands happen to be playing</h1>
 
-            
                             <!-- dedication -->
                 <div class="dedication"><a href="https://xkcd.com/1199/">Randall</a></div>
+            
                     </header>
 
         
@@ -34,13 +34,13 @@
             <h1 class="title">Ouroboros of Memory</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://www.bet-tal.com/index.aspx?id=2315"><p>He used his body to remember his body, but in the end could only remember the string.</p></a>
                 
                                     <div class="attrib">Jonathan Safran Foer</div>
                                 </div>
-            
                     </header>
 
         
@@ -34,15 +34,15 @@
             <h1 class="title">The Sixteenth Chapel</h1>
             
 
+                            <!-- dedication -->
+                <div class="dedication">Max</div>
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="https://www.youtube.com/watch?v=PI_pwLyeoqk">Canadian High School!</a>
                 
                                     <div class="attrib">David Letterman</div>
                                 </div>
-            
-                            <!-- dedication -->
-                <div class="dedication">Max</div>
                     </header>
 
         
@@ -34,12 +34,12 @@
             <h1 class="title">Table of contents</h1>
             
 
+            
                             <!-- epigraph -->
                 <div class="epigraph">
                                     <a href="http://www.npr.org/blogs/13.7/2013/11/05/243081116/dark-matter-eludes-capture-science-and-the-unseen">We are awash in the unseen and science has made us aware of the flood.</a>
                 
                                 </div>
-            
                     </header>