Mostly fix #11: Dedication/epigraph alignment

So the issue is solved in terms of how it looks, though
it adds a gross extra div into every page and uses :only-child,
which I don't think is super-supported. But it's the best I can
do that I know of until we get to better flexbox support.

Or you know, maybe later I can try doing some templating fixes--
injecting classes so that normally, .dedication is right-aligned
but when an epigraph is present, change the class to .dedication-left
or something. IDK. Either way is sort of ugly. :(

1 files changed, 23 insertions, 10 deletions

@@ -15,7 +15,7 @@ html, body {
     padding: 0;
 
     font-family: "Libertine", serif;
-    font-size: 12pt;
+    font-size: 100%; /* = 12pt = 16px */
 }
 html { height: 100%; }
 body {
@@ -66,7 +66,7 @@ nav {
     text-align: center;
 }
 .footnotes {
-    font-size: 10pt;
+    font-size: 0.85em;
     width: 100%;
     position: absolute;
     top: 100%;
@@ -85,7 +85,7 @@ nav {
 /* HEADINGS {{{ */
 .title {
     font-family: "Playfair Display", Georgia, serif;
-    font-size: 18pt;
+    font-size: 1.5em;
     /* font-weight: bold; */
     font-weight: 400;
     letter-spacing: 0.1em;
@@ -94,7 +94,7 @@ nav {
 }
 .subtitle {
     font-family: "Playfair Display", Georgia, serif;
-    font-size: 15pt;
+    font-size: 1.25em;
     font-style: italic;
     font-weight: 400;
     /* position: relative; */
@@ -104,7 +104,7 @@ nav {
 }
 h2 {
     font-family: "Playfair Display", Georgia, serif;
-    font-size: 12pt;
+    font-size: 1em;
     font-weight: 600;
 }
 header {
@@ -146,7 +146,7 @@ a[href^="http"]:active {
 /* IMAGES {{{ */
 .ekphrastic {
     max-width: 41em;
-    margin-top: -1em;
+    /* margin-top: -1em; */
     margin-bottom: 1em;
     margin-left: auto;
     margin-right: auto;
@@ -161,18 +161,31 @@ img {
 /* DEDICATION {{{ */
 .dedication {
     font-style: italic;
-    font-size: 11pt;
+    font-size: 0.92em;
     margin-top: 1em;
 }
 .dedication::before {
     content: 'for ';
     font-style: italic;
 }
+.dedication:only-child {
+    text-align: right;
+}
 /* dedication }}} */
+.header-extra {
+    text-align: right;
+}
+.dedication,.epigraph {
+    vertical-align: bottom;
+    display: inline-block;
+    margin-left: 2%;
+    margin-right: 2%;
+    width: 45%;
+}
 /* EPIGRAPH {{{ */
 .epigraph {
     text-align: right;
-    font-size: 11pt;
+    font-size: 0.92em;
     font-style: italic;
     margin-top: 1em;
 }
@@ -182,7 +195,7 @@ img {
 .epigraph .attrib {
     text-align: right;
     margin-top: 0;
-    font-size: 11pt;
+    font-size: 0.92em;
     font-style: normal;
 }
 .epigraph .attrib::before {
@@ -199,7 +212,7 @@ nav .prevlink, nav .nextlink {
     margin: 0 0.5em;
     width: 20%;
     display: block;
-    font-size: 10pt;
+    font-size: 0.85em;
     font-family: "Playfair Display", Georgia, serif;
     font-style: italic;
     text-transform: lowercase;