Clean up style

1 files changed, 21 insertions, 36 deletions

diff --git a/_css/franklin.css b/_css/franklin.css
index bb54a1e..e0b0128 100644
--- a/_css/franklin.css
+++ b/_css/franklin.css
@@ -4,8 +4,6 @@
 
 :root {
   --block-background: #f8f8f8;
-  --small: 14px;
-  --normal: 19px;
   --text-color: hsv(0, 0%, 20%);
 }
 
@@ -14,9 +12,20 @@
 ================================================================== */
 
 html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: var(--normal);
+  box-sizing: border-box;
   color: var(--text-color);
+  max-width: 36rem;
+  margin: auto;
+  padding: 1rem;
+}
+
+/* Keep minimum font size to the usual default of 16px */
+@media (min-width: 800px) {
+  html {
+    font-size: 2vw;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 /* ==================================================================
@@ -60,7 +69,6 @@ html {
 
 .page-foot {
   font-size: 80%;
-  font-family: Arial, serif;
   color: #a6a2a0;
   text-align: center;
   margin-top: 6em;
@@ -78,38 +86,10 @@ html {
   margin: 0.6rem 0;
 }
 
-.franklin-content {
-  position: relative;
-  padding-left: 12.5%;
-  padding-right: 12.5%;
-  line-height: 1.35em;
-}
-
-/* On wide screens, fix content width to a max value. */
-@media (min-width: 940px) {
-  .franklin-content {
-    width: 705px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/* On narrow device, reduce margins. */
-@media (max-width: 480px) {
-  .franklin-content {
-    padding-left: 6%;
-    padding-right: 6%;
-  }
-}
-
 /* ==================================================================
     TITLES
 ================================================================== */
 
-.franklin-content h1 { font-size: 24px; }
-.franklin-content h2 { font-size: 22px; }
-.franklin-content h3 { font-size: 20px; }
-
 .franklin-content h1,
 h2,
 h3,
@@ -159,7 +139,7 @@ h6 {
 
 .franklin-content th,
 td {
-  font-size: var(--small);
+  font-size: 75%;
   padding: 10px;
   border: 1px solid black;
 }
@@ -172,8 +152,15 @@ td {
   font-style: italic;
 }
 
+.franklin-content p {
+  hyphens: auto;
+  text-align: justify;
+}
+
 .franklin-content blockquote p {
   display: inline;
+  hyphens: auto;
+  text-align: justify;
 }
 
 /* ==================================================================
@@ -204,7 +191,6 @@ td {
 .franklin-content sup {
   font-size: 70%;
   vertical-align: super;
-  line-height: 0;
 }
 
 .franklin-content table.fndef {
@@ -296,7 +282,6 @@ code {
 
 .hljs {
   font-size: var(--small);
-  line-height: 1.35em;
   border-radius: 10px;
 }