2 files changed, 36 insertions, 109 deletions

diff --git a/_css/basic.css b/_css/basic.css
index 3b2ffc5..15046be 100644
--- a/_css/basic.css
+++ b/_css/basic.css
@@ -3,7 +3,6 @@
 ================================================================== */
 
 nav {
-  width: 64%;
   display: inline-block;
 }
 
@@ -20,7 +19,6 @@ nav li {
 nav li a {
   color: #004de6;
   text-decoration: none;
-  font-size: 18px;
   font-weight: bold;
   display: inline-block;
   float: center;
@@ -35,24 +33,17 @@ nav li a {
 }
 
 header {
-  text-align: right;
-  margin-top: 50px;
-  margin-bottom: 50px;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
 }
 
-header .blog-name {
-  width: 35%;
-  display: inline-block;
-  text-align: left;
-  font-size: 18px;
-  font-family: "Lucida Console", Monaco, monospace;
-  padding-top: 10px;
-}
-
 header .blog-name a {
-  color: #a6a2a0;
+  color: #436e58;
+  font-weight: bold;
   text-decoration: none;
 }
 
@@ -65,65 +56,13 @@ header li a:hover {
   display: none;
 }
 
-@media (max-width: 480px) {
-  header {
-    padding-left: 6%;
-    padding-right: 6%;
-  }
-}
-
-@media (min-width: 481px) {
-  header {
-    padding-left: 12.5%;
-    padding-right: 12.5%;
-  }
-}
-
-/* wide display: enforce maximum width of header to match content */
-@media (min-width: 940px) {
-  header {
-    width: 705px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/*
-medium display: nav goes under name
-*/
-@media (max-width: 760px) {
-  header { display: block; }
-
-  header .blog-name {
-    display: block;
-    width: 100%;
-    padding-bottom: 10px;
-  }
-
-  nav {
-    width: 100%;
-  }
-}
-
 /*
-narrow display: collapse the header (don't show the menu items)
-instead, display a burger menu.
-*/
-@media (max-width: 500px) {
-  header {
-    height: 35px;
-    display: flex;
-    align-items: center;
-  }
-
-  header .blog-name {
-    display: inline-block;
-    width: 70%;
-  }
-
+ * narrow display: collapse the header (don't show the menu items)
+ * instead, display a burger menu.
+ */
+@media (max-width: 480px) {
   nav {
     display: inline-block;
-    width: 27%;
   }
 
   nav ul,
@@ -156,8 +95,6 @@ instead, display a burger menu.
 
   #menu-icon {
     display: inline-block;
-    margin-right: 10px;
-    margin-top: 5px;
   }
 }
 
@@ -188,3 +125,8 @@ td {
 table tbody tr td {
   border: 1px solid lightgray;
 }
+
+.note {
+  background-color: aliceblue;
+  padding: 0px 1em;
+}
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;
 }