lots more little typography tweaks

2 files changed, 66 insertions, 50 deletions

diff --git a/assets/style.css b/assets/style.css
index 200f8d3..167c29e 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -28,42 +28,13 @@ body {
   max-width: 50rem;
   padding: 2rem;
   margin: 0 auto;
-  line-height: 1.6;
+  line-height: 1.8;
   background: var(--bg);
   color: var(--fg);
   font-family: serif;
 }
 
-h1,
-h2,
-h3,
-h4 {
-  margin-block-end: 0.25em;
-  line-height: 1.3;
-  font-family: sans-serif;
-
-  a,
-  a:visited {
-    color: var(--fg);
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: var(--link);
-    text-decoration: underline;
-  }
-}
-
-ul {
-  margin-block-start: 0;
-}
-
-p {
-  margin-block-start: 0;
-  text-align: justify;
-  hyphens: auto;
-}
-
+/* structural stuff */
 #main-nav {
   line-height: 1.3;
 
@@ -80,46 +51,91 @@ p {
 }
 
 #site-title {
-  font-family: sans-serif;
-  font-weight: bold;
   font-size: 150%;
-  line-height: 1.3;
   margin: 0;
 }
 
 footer {
-  margin: 2em 0 0;
+  margin: 1.5rem 0 0;
 }
 
 header {
-  margin-bottom: 1em;
+  margin: 0 0 1.5rem;
+}
 
-  h1 {
-    margin: 0;
-    font-size: 2em;
+.chroma {
+  border: 1px solid var(--overlay);
+  border-radius: 8px;
+  padding: 1rem;
+  display: block;
+  overflow-x: auto;
+}
+
+article h1 {
+  margin: 0;
+  font-size: 2em;
+}
+
+h1 {
+  font-size: 150%;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 1.5rem 0 0.5rem;
+
+  a,
+  a:visited {
+    color: var(--fg);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--link);
+    text-decoration: underline;
   }
 }
 
+#site-title,
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.3;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+/* normal type stuff */
+
+p {
+  margin: 0.5rem 0 0;
+}
+
+p + p {
+  margin-block-start: 1.5rem;
+}
+
 a,
 a:visited {
   color: var(--link);
 }
 
+ul {
+  margin-block-start: 0;
+}
+
 hr {
   border: none;
   height: 1px;
   background: var(--overlay);
 }
 
-.chroma {
-  border: 1px solid var(--overlay);
-  border-radius: 8px;
-  padding: 1rem;
-  display: block;
-  overflow-x: auto;
-}
-
 code {
-  font-size: 125%;
-  hyphens: none;
+  /* what a horrible hack*/
+  font-family: monospace, serif;
+  font-size: 90%;
+  white-space: preserve nowrap;
 }
diff --git a/assets/syntax.css b/assets/syntax.css
index db001aa..d21717e 100644
--- a/assets/syntax.css
+++ b/assets/syntax.css
@@ -1,6 +1,6 @@
 :root {
   --chroma-bg: #000;
-  --comment: #6c7086;
+  --comment: #7f849c;
   --cyan: #8be9fd;
   --green: #50fa7b;
   --orange: #ffb86c;