Clean up styling, again

3 files changed, 277 insertions, 439 deletions

diff --git a/_css/basic.css b/_css/basic.css
deleted file mode 100644
index d18a9e3..0000000
--- a/_css/basic.css
+++ /dev/null
@@ -1,126 +0,0 @@
-/* ==================================================================
-    Header and Nav
-================================================================== */
-
-nav {
-  display: inline-block;
-}
-
-nav ul {
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-nav li {
-  display: inline-block;
-}
-
-nav li a {
-  color: #004de6;
-  text-decoration: none;
-  font-weight: bold;
-  display: inline-block;
-  float: center;
-  padding-top: 10px;
-  padding-right: 2px;
-  padding-left: 2px;
-  padding-bottom: 5px;
-  margin-left: 7px;
-  margin-right: 7px;
-  border-bottom: 2px solid #4c9cf1;
-  transition: color 0.3s ease;
-}
-
-header {
-  margin: 2rem 0;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-header .blog-name a {
-  color: #436e58;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-header li a:hover {
-  color: black;
-  border-bottom: 2px solid black;
-}
-
-#menu-icon {
-  display: none;
-}
-
-/*
- * narrow display: collapse the header (don't show the menu items)
- * instead, display a burger menu.
- */
-@media (max-width: 320px) {
-  nav {
-    display: inline-block;
-  }
-
-  nav ul,
-  nav:active ul {
-    display: none;
-    position: absolute;
-
-    /* padding: 20px; */
-    background: #fff;
-    border: 1px solid #444;
-    right: 50px;
-    top: 60px;
-    width: 30%;
-    border-radius: 4px 0 4px 4px;
-    z-index: 1;
-  }
-
-  nav li {
-    text-align: left;
-    display: block;
-    padding: 0;
-    margin: 0;
-  }
-  header li a { border-bottom: none; }
-  header li a:hover { border-bottom: none; }
-
-  nav:hover ul {
-    display: block;
-  }
-
-  #menu-icon {
-    display: inline-block;
-  }
-}
-
-table {
-  line-height: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  border-collapse: collapse;
-  text-align: center;
-  margin-bottom: 1.5em;
-}
-
-tr:first-of-type {
-  background: #eae9f4;
-}
-
-tr:first-of-type > th {
-  text-align: center;
-}
-
-tr,
-th,
-td {
-  padding: 10px;
-  border: 1px solid lightgray;
-}
-
-table tbody tr td {
-  border: 1px solid lightgray;
-}
diff --git a/_css/franklin.css b/_css/franklin.css
deleted file mode 100644
index 6e32afc..0000000
--- a/_css/franklin.css
+++ /dev/null
@@ -1,313 +0,0 @@
-/* ==================================================================
-    VARIABLES
-================================================================== */
-
-:root {
-  --block-background: #f8f8f8;
-  --text-color: hsv(0, 0%, 20%);
-}
-
-/* ==================================================================
-    DEFAULT FONT AND LAYOUT
-================================================================== */
-
-html {
-  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: min(23px, 2vw);
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/* ==================================================================
-    BASIC GRID FOR PROFILE PIC
-================================================================== */
-
-.franklin-content .row {
-  display: block;
-}
-
-.franklin-content .left {
-  float: left;
-  margin-right: 15px;
-}
-
-.franklin-content .right {
-  float: right;
-}
-
-.franklin-content .container img {
-  width: auto;
-  padding-left: 0;
-  border-radius: 10px;
-}
-
-.franklin-content .footnote {
-  position: relative;
-  top: -0.5em;
-  font-size: 70%;
-}
-
-/* ==================================================================
-    FOOT / COPYRIGHT
-================================================================== */
-
-.franklin-content .page-foot a {
-  text-decoration: none;
-  color: #a6a2a0;
-  text-decoration: underline;
-}
-
-.page-foot {
-  font-size: 80%;
-  color: #a6a2a0;
-  margin: 3rem 0;
-}
-
-/* ==================================================================
-    TEXT GEOMETRY
-================================================================== */
-
-.franklin-toc li {
-  /* Avoid clickable elements being too close together. */
-  margin: 0.6rem 0;
-}
-
-/* ==================================================================
-    TITLES
-================================================================== */
-
-.franklin-content h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-align: left;
-}
-
-.franklin-content h1 {
-  padding-bottom: 0.5em;
-  border-bottom: 3px double lightgrey;
-  margin-top: 1.5em;
-  margin-bottom: 1em;
-}
-
-.franklin-content h2 {
-  padding-bottom: 0.3em;
-  border-bottom: 1px solid lightgrey;
-  margin-top: 2em;
-  margin-bottom: 1em;
-}
-
-.franklin-content h1 a { color: inherit; }
-.franklin-content h1 a:hover { text-decoration: none; }
-.franklin-content h2 a { color: inherit; }
-.franklin-content h2 a:hover { text-decoration: none; }
-.franklin-content h3 a { color: inherit; }
-.franklin-content h3 a:hover { text-decoration: none; }
-.franklin-content h4 a { color: inherit; }
-.franklin-content h4 a:hover { text-decoration: none; }
-.franklin-content h5 a { color: inherit; }
-.franklin-content h5 a:hover { text-decoration: none; }
-.franklin-content h6 a { color: inherit; }
-.franklin-content h6 a:hover { text-decoration: none; }
-
-.franklin-content table {
-  margin-left: auto;
-  margin-right: auto;
-  border-collapse: collapse;
-  text-align: center;
-}
-
-.franklin-toc ol ol {
-  list-style-type: lower-alpha;
-}
-
-.franklin-content th,
-td {
-  font-size: 75%;
-  padding: 10px;
-  border: 1px solid black;
-}
-
-.franklin-content blockquote {
-  background: var(--block-background);
-  border-left: 7px solid #a8a8a8;
-  margin: 1.5em 10px;
-  padding: 0.5em 10px;
-  font-style: italic;
-}
-
-.franklin-content p {
-  hyphens: auto;
-  line-height: 1.4rem;
-  text-align: justify;
-}
-
-.franklin-content blockquote p {
-  display: inline;
-  hyphens: auto;
-  text-align: justify;
-}
-
-/* ==================================================================
-    GENERAL FORMATTING
-================================================================== */
-
-/* Spacing between bullet points. */
-.franklin-content li p {
-  margin: 10px 0;
-}
-
-.franklin-content a {
-  color: #004de6;
-  text-decoration: none;
-}
-
-.franklin-content a:hover {
-  text-decoration: underline;
-}
-
-/* ==================================================================
-    HYPERREFS AND FOOTNOTES
-================================================================== */
-
-.franklin-content .eqref a { color: green; }
-.franklin-content .bibref a { color: green; }
-
-.franklin-content sup {
-  font-size: 70%;
-  vertical-align: super;
-}
-
-.franklin-content table.fndef {
-  margin: 0;
-  margin-bottom: 10px;
-}
-
-.franklin-content .fndef tr,
-td {
-  padding: 0;
-  border: 0;
-  text-align: left;
-}
-
-.franklin-content .fndef tr {
-  border-left: 2px solid lightgray;
-}
-
-.franklin-content .fndef td.fndef-backref {
-  vertical-align: top;
-  font-size: 70%;
-  padding-left: 5px;
-}
-
-.franklin-content .fndef td.fndef-content {
-  font-size: 80%;
-  padding-left: 10px;
-  width: 100%;
-}
-
-/* ==================================================================
-    IMAGES in CONTENT
-================================================================== */
-
-.franklin-content img {
-  width: 100%;
-}
-
-.franklin-content .img-small img {
-  width: 50%;
-  text-align: center;
-  padding-left: 20%;
-}
-
-/* ==================================================================
-    KATEX
-================================================================== */
-
-body { counter-reset: eqnum; }
-
-.katex { font-size: 1em !important; }
-
-.katex-display .katex {
-  /* Overwrite KaTeX settings. */
-  display: inline-block;
-
-  /* Allow display equations to wrap on small screens. */
-  white-space: normal;
-}
-
-/*
- * No numbering, for now
- * .katex-display::after {
- *   counter-increment: eqnum;
- *   content: "(" counter(eqnum) ")";
- *   position: relative;
- *   float: right;
- *   padding-right: 5px;
- * }
- */
-
-/* ==================================================================
-    CODE & HIGHLIGHT.JS
-================================================================== */
-
-code {
-  background-color: var(--block-background);
-  padding: 0.1em 0.2em;
-  border-radius: 2px;
-  font-size: var(--small);
-}
-
-/* .franklin-content code { */
-
-/* background-color: rgba(27,31,35,0.05); */
-
-/* padding: 0.1em 0.2em; */
-
-/* border-radius: 2px; */
-
-/* font-size: 90%; } */
-
-.hljs {
-  font-size: var(--small);
-  border-radius: 10px;
-}
-
-.hljs-meta,
-.hljs-metas,
-.hljs-metap { font-weight: bold; }
-
-.hljs-meta { color: rgb(25, 179, 51); }
-
-.hljs-metas { color: red; }
-
-.hljs-metap { color: rgb(51, 131, 231); }
-
-/* ==================================================================
-    BOXES
-================================================================== */
-
-.franklin-content .colbox-blue {
-  background-color: #eef3f5;
-  padding-top: 5px;
-  padding-right: 10px;
-  padding-left: 10px;
-  padding-bottom: 5px;
-  margin-left: 5px;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  border-radius: 0 10px 10px 0;
-  border-left: 5px solid #4c9cf1;
-}
diff --git a/_css/style.css b/_css/style.css
new file mode 100644
index 0000000..ebe942c
--- /dev/null
+++ b/_css/style.css
@@ -0,0 +1,277 @@
+/* Variables */
+:root {
+  --block-bg: #eeeeec;
+  --fade-fg: #888a85;
+  --link-fg: #436e58;
+  --text-fg: #2e3436;
+}
+
+/* Default font and layout */
+html {
+  box-sizing: border-box;
+  color: var(--text-fg);
+  max-width: 36rem;
+  margin: auto;
+  padding: 1rem;
+}
+
+/* Keep minimum font size to the usual default of 16px */
+@media (min-width: 800px) {
+  html {
+    font-size: min(23px, 2vw);
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.franklin-content .row { display: block }
+
+.franklin-content .left {
+  float: left;
+  margin-right: 1rem;
+}
+
+.franklin-content .right { float: right }
+
+.franklin-content .container img {
+  width: auto;
+  padding-left: 0;
+}
+
+.franklin-content .footnote {
+  position: relative;
+  top: -0.5em;
+  font-size: 70%;
+}
+
+/* Foot/copyright */
+.franklin-content .page-foot a {
+  text-decoration: none;
+  color: var(--fade-fg);
+  text-decoration: underline;
+}
+
+.page-foot {
+  font-size: 80%;
+  color: var(--fade-fg);
+  margin: 3rem 0;
+}
+
+/* Text geometry */
+.franklin-content p {
+  hyphens: auto;
+  line-height: 1.4rem;
+  text-align: justify;
+}
+
+/* Titles */
+.franklin-content h1 {
+  padding-bottom: 0.5em;
+  border-bottom: 3px double lightgrey;
+  margin-top: 2em;
+}
+
+.franklin-content h2 {
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid lightgrey;
+  margin-top: 2em;
+}
+
+.franklin-content h1 a,
+.franklin-content h2 a,
+.franklin-content h3 a,
+.franklin-content h4 a,
+.franklin-content h5 a,
+.franklin-content h6 a {
+  color: var(--text-fg);
+}
+
+.franklin-content h1 a:hover,
+.franklin-content h2 a:hover,
+.franklin-content h3 a:hover,
+.franklin-content h4 a:hover,
+.franklin-content h5 a:hover,
+.franklin-content h6 a:hover {
+  text-decoration: none;
+}
+
+.franklin-content table {
+  margin-left: auto;
+  margin-right: auto;
+  border-collapse: collapse;
+  text-align: center;
+}
+
+.franklin-toc ol ol {
+  list-style-type: lower-alpha;
+}
+
+.franklin-content th,
+td {
+  font-size: 75%;
+  padding: 10px;
+  border: 1px solid black;
+}
+
+.franklin-content blockquote {
+  background: var(--block-bg);
+  border-left: 7px solid #a8a8a8;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  font-style: italic;
+}
+
+.franklin-content blockquote p {
+  display: inline;
+  hyphens: auto;
+  text-align: justify;
+}
+
+/* General formatting */
+/* Spacing between bullet points. */
+.franklin-content li p {
+  margin: 10px 0;
+}
+
+.franklin-content a {
+  color: var(--link-fg);
+  text-decoration: none;
+}
+
+.franklin-content a:hover {
+  text-decoration: underline;
+ }
+
+/* Hyperrefs and footnotes */
+.franklin-content .eqref a { color: green; }
+.franklin-content .bibref a { color: green; }
+
+.franklin-content sup {
+  font-size: 70%;
+  vertical-align: super;
+}
+
+.franklin-content table.fndef {
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.franklin-content .fndef tr,
+td {
+  padding: 0;
+  border: 0;
+  text-align: left;
+}
+
+.franklin-content .fndef tr {
+  border-left: 2px solid lightgray;
+}
+
+.franklin-content .fndef td.fndef-backref {
+  vertical-align: top;
+  font-size: 70%;
+  padding-left: 5px;
+}
+
+.franklin-content .fndef td.fndef-content {
+  font-size: 80%;
+  padding-left: 10px;
+  width: 100%;
+}
+
+/* Images */
+.franklin-content img {
+  width: 100%;
+}
+
+.franklin-content .img-small img {
+  width: 50%;
+  text-align: center;
+  padding-left: 20%;
+}
+
+/* KaTeX */
+body { counter-reset: eqnum; }
+.katex { font-size: 1em !important; }
+
+.katex-display .katex {
+  /* Overwrite KaTeX settings. */
+  display: inline-block;
+
+  /* Allow display equations to wrap on small screens. */
+  white-space: normal;
+}
+
+/*
+ * No numbering, for now
+ * .katex-display::after {
+ *   counter-increment: eqnum;
+ *   content: "(" counter(eqnum) ")";
+ *   position: relative;
+ *   float: right;
+ *   padding-right: 5px;
+ * }
+ */
+
+/* Code highlight */
+code, .hljs {
+  background-color: var(--block-bg);
+  padding: 0.1em 0.2em;
+  font-size: inherit;
+}
+
+.hljs-meta {
+  color: var(--link-fg);
+  font-weight: bold;
+}
+
+/* Boxes */
+.franklin-content .colbox-blue {
+  background-color: #eef3f5;
+  padding-top: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  padding-bottom: 5px;
+  margin-left: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-radius: 0 10px 10px 0;
+  border-left: 5px solid #4c9cf1;
+}
+
+/* Header */
+header {
+  margin: 2rem -0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header a {
+  border-bottom: solid;
+  color: var(--link-fg);
+  font-weight: bold;
+  margin: 0 0.5rem;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+header li a:hover { color: var(--fade-fg) }
+
+nav, nav li { display: inline-block }
+nav ul { margin: 0 }
+
+/* Table */
+table {
+  line-height: 1em;
+  margin-left: auto;
+  margin-right: auto;
+  border-collapse: collapse;
+  text-align: center;
+  margin-bottom: 1.5em;
+}
+
+tr, th, td, table tbody tr td { border: 0.1rem solid var(--fade-fg) }
+tr, th, td { padding: 0.69rem }
+tr:first-of-type { background: var(--block-bg); }
+tr:first-of-type > th { text-align: center }