From: Cameron Otsuka <cameron@otsuka.haus>
Date: Wed, 31 Dec 2025 20:32:44 +0000 (-0800)
Subject: stylesheet improvements
X-Git-Url: https://git.otsuka.systems/?a=commitdiff_plain;h=c3b33b0818684752c66070c3076ed23bca8d4374;p=cotsuka.github.io

stylesheet improvements
---

diff --git a/src/styles/style.css b/src/styles/style.css
index 514f87b..3aba715 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -6,6 +6,10 @@
   --font-sans: 'Public Sans Variable', sans-serif;
   --font-mono: 'Source Code Pro Variable', monospace;
 
+  /* Typography scale */
+  --line-height-body: 1.5;
+  --line-height-heading: 1.25;
+
   /* Primary colors */
   --color-bg: light-dark(#e6e2d6, #000000);
   --color-text: light-dark(#000000, #e6e2d6);
@@ -31,18 +35,14 @@ html {
   background-color: var(--color-bg);
   color: var(--color-text);
   font-family: var(--font-serif);
-  font-kerning: normal;
-  font-weight: 400;
-  font-size: 100%;
   scrollbar-gutter: stable both-edges;
 }
 body {
-  max-width: 45rem;
-  margin-left: auto;
-  margin-right: auto;
+  max-width: 40rem;
+  margin-inline: auto;
   padding: 0.5rem 1rem;
-  font-size: 1rem;
-  line-height: 1.6;
+  line-height: var(--line-height-body);
+  text-rendering: optimizeLegibility;
 }
 h1,
 h2,
@@ -51,10 +51,37 @@ h4,
 h5,
 h6 {
   font-family: var(--font-sans);
+  line-height: var(--line-height-heading);
+  margin-bottom: 0.2rem;
+}
+h1,
+h2 {
   font-weight: 700;
 }
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+h1 {
+  font-size: 2rem;
+}
+h2 {
+  font-size: 1.5rem;
+}
+h3 {
+  font-size: 1.25rem;
+}
+h4 {
+  font-size: 1rem;
+}
+h5,
+h6 {
+  font-size: 0.875rem;
+}
 strong {
-  font-weight: 700;
+  font-weight: 600;
 }
 p {
   margin-bottom: 1rem;
@@ -70,35 +97,21 @@ dl,
 menu,
 ol,
 ul {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+p:has(+ dl, + menu, + ol, + ul) {
+  margin-bottom: 0;
 }
-ul ul,
-ul ol,
-ul dl,
-ul menu,
-ol ul,
-ol ol,
-ol dl,
-ol menu,
-dl ul,
-dl ol,
-dl dl,
-dl menu,
-menu ul,
-menu ol,
-menu dl,
-menu menu {
-  /* nested lists won't have margins*/
+:is(ul, ol, dl, menu) :is(ul, ol, dl, menu) {
   margin-bottom: 0;
 }
 img {
   height: auto;
   filter: grayscale(1);
-  transition: all 0.2s linear;
+  transition: filter 0.3s linear;
 }
 img:hover {
   filter: grayscale(0);
-  transition: all 0.4s linear;
 }
 dd {
   margin-bottom: 0.5rem;
@@ -107,12 +120,12 @@ dd {
 blockquote {
   margin-bottom: 1rem;
   padding-left: 0.5rem;
+  font-style: italic;
   border-left: 0.2rem solid;
 }
 table {
   margin-bottom: 1rem;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   border: 0.1rem solid;
   border-collapse: collapse;
 }
@@ -123,21 +136,22 @@ td {
   vertical-align: middle;
   padding: 0.5rem;
 }
-code {
+code,
+.astro-code {
   font-family: var(--font-mono);
+}
+code {
   font-size: 0.9rem;
 }
-.astro-code,
-.astro-code span {
-  font-family: var(--font-mono);
+.astro-code {
   margin-bottom: 1rem;
   padding: 0.1rem;
 }
 .footnotes {
-  font-size: 0.9rem;
-  border-top: 1px dashed var(--color-text);
   margin-top: 1rem;
   padding-top: 1rem;
+  font-size: 0.9rem;
+  border-top: 1px dashed var(--color-text);
 }
 .sr-only {
   position: absolute;
@@ -150,10 +164,10 @@ code {
   border: 0;
 }
 details > summary {
-  list-style-type: '▸';
+  list-style-type: '▸ ';
 }
 details[open] > summary {
-  list-style-type: '▾';
+  list-style-type: '▾ ';
 }
 .inline-menu {
   margin-inline-start: 0;
@@ -169,3 +183,6 @@ details[open] > summary {
 .inline-menu--compact li {
   padding-right: 0.5rem;
 }
+picture {
+  margin-bottom: 1rem;
+}