new shit

static/style.css

@@ -1,33 +1,33 @@
-@font-face {
-  font-family: Roboto;
-  src: url('static/fonts/Roboto-Regular.ttf');
-}
 
 :root {
-    --site-width: 700px;
-    --vert-content-margin: 0.3rem;
-    --accent1: #2596be;
-    --link: #2527EA;
-    --black: #222;
-    --white: #FBFBFB;
-    --grey: #EFEFEF;
-    --background: #EAEFFF;
-    --font-size: 1.35rem;
-    --line-height: 1.8rem;
-    --font-family: "Roboto";
+  --site-width: 800px;
+  --vert-content-margin: 0.3rem;
+  --accent1: #2596be;
+  --link: #2527EA;
+  --black: #000;
+  --white: #FBFBFB;
+  --grey: #EFEFEF;
+  --background: #EAEFFF;
+  --background-toc: #E1EFFF;
+  --shadow-toc: #6E868F;
+  --font-size: 20px;
+  --line-height: 1.55rem;
+  --font-family: "Source Serif Pro";
 }
 
 body {
-  text-align: justify;
+//  text-align: justify;
   font-family: var(--font-family);
   font-size: var(--font-size);
   line-height: var(--line-height);
   color: var(--black);
   background-color: var(--background);
+  word-spacing: 0.25ch;
+  font-weight: 400;
 }
 
 code {
-   font-size: calc(var(--font-size) * 0.9);
+  font-size: calc(var(--font-size) * 0.9);
 }
 
 hr {
@@ -58,7 +58,7 @@ a, a:visited {
 
 
 #content h2, #content h3, #content h4, #content h5 {
-    margin-bottom: -0.8rem;
+  margin-bottom: -0.8rem;
 }
 
 #content h2 {
@@ -86,6 +86,11 @@ a, a:visited {
   margin: auto;
 }
 
+#footer {
+  margin-top: 1.5rem;
+}
+
+
 #content {
   padding-left: 7%;
   padding-right: 7%;
@@ -100,6 +105,63 @@ a, a:visited {
   font-size: 1rem;
 }
 
+.outline-3.orgjq-contracted h3::before {
+  content: "🡒";
+}
+
+.outline-4.orgjq-contracted h4::before {
+  content: "⤳";
+}
+
+.outline-5.orgjq-contracted h5::before {
+  content: "⇝";
+}
+
+/* TOC */
+
+#table-of-contents {
+  z-index: 1;
+  margin-top: 105px;
+  margin-right: 5%;
+  font-size: calc(var(--font-size) * 0.8);
+  position: fixed;
+  right: 0em;
+  top: 0em;
+  background: var(--background-toc);
+  text-align: right;
+  min-height: 3rem;
+
+  box-shadow: 0 0 0.5em var(--shadow-toc);
+  -webkit-box-shadow: 0 0 0.5em var(--shadow-toc);
+  -moz-box-shadow: 0 0 0.5em var(--shadow-toc);
+  -webkit-border-bottom-left-radius: 5px;
+  -moz-border-radius-bottomleft: 5px;
+  /* ensure doesn't flow off the screen when expanded */
+  max-height: 80%;
+  overflow: auto;
+
+}
+#table-of-contents h2 {
+  font-size: 13pt;
+  max-width: 9em;
+  border: 0;
+  font-weight: normal;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-top: 0.05em;
+  padding-bottom: 0.05em; }
+#table-of-contents #text-table-of-contents {
+  display: none;
+  text-align: left; }
+#table-of-contents:hover #text-table-of-contents {
+  display: block;
+  padding: 0.5em;
+  margin-top: -1.5em;
+  padding-right: 20px;
+}
+
 /* Set the colors in <pre> blocks from the Leuven theme */
 pre                                      {background-color:#FFFFFF;}
 pre span.org-builtin                     {color:#006FE0;font-weight:bold;}