From 97e72f111a2716debf9946cac0f4ed06fa05681d Mon Sep 17 00:00:00 2001
From: Phil Bajsicki <phil@bajsicki.com>
Date: Sat, 28 Sep 2024 00:42:29 +0200
Subject: [PATCH] Sidenotes, fonts, sizing, dimensions.

---
 assets/scss/components/brand.scss |  4 +++
 assets/scss/components/nav.scss   |  2 +-
 assets/scss/general.scss          | 21 ++++++++++++----
 assets/scss/tufte.scss            | 42 +++++++++++++++++++------------
 4 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/assets/scss/components/brand.scss b/assets/scss/components/brand.scss
index 7fdb514..4cadbbb 100644
--- a/assets/scss/components/brand.scss
+++ b/assets/scss/components/brand.scss
@@ -2,3 +2,7 @@
     padding-top: 1rem;
     padding-bottom: 1rem;
 }
+
+.brand > h1 {
+    font-size: 2.5em;
+}
diff --git a/assets/scss/components/nav.scss b/assets/scss/components/nav.scss
index 605a0e6..ba2c0c1 100644
--- a/assets/scss/components/nav.scss
+++ b/assets/scss/components/nav.scss
@@ -8,7 +8,7 @@
     padding: 0;
     max-width: 45rem;
     /* Width is the same as tufte.css body */
-    font-size: 1.2rem;
+    font-size: 2rem;
     width: 87.5%;
 }
 
diff --git a/assets/scss/general.scss b/assets/scss/general.scss
index fb9cf56..be6dc1c 100644
--- a/assets/scss/general.scss
+++ b/assets/scss/general.scss
@@ -43,8 +43,8 @@ hr {
     margin-left: 0;
     margin-top: 1.4rem;
     margin-bottom: 1.4rem;
-    width: 75%;
-    max-width: 45rem;
+    width: 100%;
+    max-width: 90rem;
     border-style: solid none none none;
     border-color: #ddd;
 }
@@ -65,23 +65,34 @@ mark {
 /* ------------------------------------------------------------------------ */
 .list-page {
     ul {
-        list-style-type: none;
         margin: -0.25em;
-        width: 87.5%;
+        width: 100%;
         max-width: 45rem;
     }
     li {
         margin: 0;
         /*font-size: 95%;*/
     }
+
 }
 .list-page .list-date {
     display: inline;
-    font-size: 0.75em;
+    font-size: 0.9em;
     /* padding-right: 2em; */
     /* margin-right: 2em; */
 }
 
+.list-page > ul > ul > ul > li > a {
+  display: block;
+  margin-left: 3em;
+}
+
+.list-date a {
+  display: block;
+  font-size: 0.85em;
+  width: 100%;
+}
+
 table:not(.lntable) {
     margin-top: 1.4em;
     font-size: 1.4rem;
diff --git a/assets/scss/tufte.scss b/assets/scss/tufte.scss
index 0798192..ef1d141 100644
--- a/assets/scss/tufte.scss
+++ b/assets/scss/tufte.scss
@@ -60,17 +60,17 @@ $mono-fonts: Consolas, "Liberation Mono", Menlo, Courier, monospace, "Noto Emoji
 
 /* Tufte CSS styles */
 html {
-    font-size: 15px;
+    font-size: 0.65rem;
 }
 
 body {
     margin-left: auto;
     margin-right: auto;
     padding-left: 5%;
-    font-family: $serif-fonts;
+    font-family: $mono-fonts;
     background-color: #151515;
     color: #ddd;
-    max-width: 1400px;
+    max-width: #{"min(90vw, 1400px)"};
 }
 
 h1, h2, h3 {
@@ -81,7 +81,7 @@ h1, h2, h3 {
 h1 {
     margin-top: 1rem;
     margin-bottom: 1rem;
-    font-size: 3.2rem;
+    font-size: 2.4rem;
 }
 
 h2, h3 {
@@ -95,7 +95,7 @@ h2 {
 }
 
 h3 {
-    font-size: 1.7rem;
+    font-size: 2rem;
     margin-top: 2rem;
 }
 
@@ -293,36 +293,46 @@ img {
 // }
 
 .sidenote {
+    box-sizing: border-box;
     float: right;
-    position: absolute;
-    left: calc(100vw - 46vw);
-    right: 2.5vw;
-
     width: auto;
+    position: absolute;
+
+    left: 57.5%;
+    right: 2.5%;
+
     border-style: solid;
     border-width: 2px;
     border-color: #333333;
 
+    padding: 8px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+
     font-size: 1rem;
     line-height: 1.3;
 }
 
-
-
 .marginnote {
+    box-sizing: border-box;
     float: right;
+    width: auto;
+    position: absolute;
+
+    left: 57.5%;
+    right: 2.5%;
+
     border-style: solid;
     border-width: 2px;
     border-color: #333333;
+
     padding: 8px;
     padding-bottom: 0;
     padding-top: 0;
-    left: 57.5%;
-    right: 2.5%;
+
     margin-top: 10px;
     margin-bottom: 10px;
-    width: auto;
-    position: absolute;
+
 }
 
 .marginnote p {
@@ -397,7 +407,7 @@ div.table-wrapper {
     font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif, "Noto Emoji";
 }
 
-@media screen and (max-width: 760px) {
+ @media screen and (max-width: 760px) {
     h2,
     h3,
     p,