Distribute all the main.css styles to their own stylesheets and remove main.css

content/blog/blog.css

@@ -1,6 +1,3 @@
-@import url(/styles/reset.css);
-@import url(/styles/root.css);
-
 :root {
     --post-item-highlight-color: #efefef;
 
@@ -42,6 +39,7 @@
     border-radius: 6px;
     display: grid;
     gap: 1em;
+    padding: 0.1em;
     transition: background-color 0.25s;
 }
 @supports not (display: subgrid) {
@@ -66,15 +64,6 @@
     text-align: end;
 }
 
-.post-list b {
-    background-color: #ddd;
-    display: block;
-    grid-area: thing;
-    height: 100%;
-    text-align: end;
-    width: 100%;
-}
-
 .post-list li h1 {
     font-family: var(--font-family-body);
     grid-area: title;
@@ -96,11 +85,54 @@
     color: inherit;
 }
 
+.post-list a:hover {
+    text-decoration: none;
+}
+
+.post-nav {
+    align-items: baseline;
+    display: flex;
+    margin-top: 3.5rem;
+}
+
+.post-nav .next {
+    margin-left: auto;
+}
+
+.post-single footer {
+    margin-block-start: 3.5rem;
+}
+
+.post-title {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 4rem;
+    margin-bottom: var(--body-item-spacing);
+}
+
+.post-title h1 {
+    flex-grow: 1;
+    margin-block: 0;
+    padding-bottom: 0;
+}
+
+.post-title > .post-date {
+    color: var(--light-dim);
+    display: inline-block;
+    font-size: 1.75rem;
+    inline-size: min-content;
+    letter-spacing: 1px;
+    margin-block-start: 0.5rem;
+    white-space: nowrap;
+}
+
 .blog footer .tags {
     display: flex;
     padding-inline-start: 0;
 }
 
+
 .blog footer .tags li {
     background-color: var(--tag-background-color);
     border-radius: 4px;

layouts/_default/baseof.html

@@ -22,7 +22,6 @@
       font-style: normal;
     }
   </style>
-  <link rel="preload stylesheet" as="style" href="{{ `/styles/main.css` | absURL }}">
   <link rel="stylesheet" as="style" href="{{ `/styles/reset.css` | absURL }}">
   <link rel="stylesheet" as="style" href="{{ `/styles/root.css` | absURL }}">
   {{ if not hugo.IsProduction }}

static/styles/main.css

@@ -1,288 +0,0 @@
-/* main.css
- * Global stylesheet for erynwells.me
- * Eryn Wells <eryn@erynwells.me>
- */
-
-:root {
-    --header: 8rem;
-    --footer: calc(8rem + var(--safe-bottom));
-
-    --light-dim: #888;
-    --highlight-color: rgb(50, 186, 228);
-    --hljs-bg: #111;
-
-    --safe-bottom: 0;
-
-    --body-padding: 4rem;
-    --body-width: 80rem;
-
-    --heading-color: var(--body-foreground-color);
-    --link-color: var(--highlight-color);
-
-    --menu-icon-size: 20px;
-    --social-menu-padding: 1rem;
-
-    --tag-text-color: var(--dark);
-    --tag-background-color: #eee;
-    --tag-hover-background-color: #bbb;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --tag-text-color: var(--light-dim);
-        --tag-background-color: rgb(40, 40, 40);
-        --tag-hover-background-color: rgb(73, 73, 73);
-    }
-}
-
-blockquote {
-    border-inline-start: 4px solid var(--separator-color);
-    padding-inline-start: 2rem;
-    margin-inline-start: 2rem;
-}
-
-figure.bordered {
-    padding: 0.5rem;
-    border: 2px solid #eee;
-}
-
-.header,
-.footer {
-    padding: 2rem 0;
-}
-
-/*
- * Header
- */
-
-.header {
-    align-items: baseline;
-    border-bottom: 1px solid var(--separator-color);
-    display: flex;
-    flex-direction: row;
-}
-
-.header h1 {
-    margin: 0;
-    margin-right: 2rem;
-    font-size: 4.5rem;
-}
-
-.header h1 a {
-    color: var(--heading-color);
-    text-decoration: none;
-}
-
-.header h1 a:hover {
-    border: 0;
-}
-
-.p5-sketch {
-    display: block;
-    position: relative;
-    width: 100%;
-}
-
-.social menu li + li {
-    margin-left: var(--social-menu-padding);
-}
-
-.social {
-    display: flex;
-    letter-spacing: 2px;
-    margin-left: auto;
-}
-
-.social a {
-    background-image: var(--url);
-    background-repeat: no-repeat;
-    background-size: var(--menu-icon-size);
-    display: block;
-    height: var(--menu-icon-size);
-    width: var(--menu-icon-size);
-}
-
-.social a span {
-    display: none;
-}
-
-.social > li + li:before {
-    color: var(--dark);
-    padding: 0 0.5rem;
-}
-
-.title-and-menu {
-    align-items: baseline;
-    display: flex;
-    flex-direction: row;
-}
-
-.youtube iframe {
-    aspect-ratio: 16 / 9;
-    margin-bottom: -3px;
-    width: 100%;
-}
-
-@media (max-width: 475px) {
-    :root {
-        --menu-icon-size: 18px;
-        --social-menu-padding: 0.5rem;
-    }
-
-
-    .menu {
-        margin-top: 1rem;
-    }
-
-    .social {
-        margin-top: 1rem;
-    }
-
-    .title-and-menu {
-        align-items: flex-start;
-        flex-direction: column;
-    }
-}
-
-@media (max-width: 320px) {
-    .header h1 {
-        font-size: 3.5rem;
-    }
-}
-
-/*
- * Main
- */
-
-.main > header {
-    align-items: baseline;
-    display: flex;
-}
-
-.main {
-    margin: 3.5rem 0;
-}
-
-.main :first-child {
-    margin-top: 0;
-}
-
-.main h1 {
-    font-size: 3.5rem;
-}
-
-.main h1,
-.main h2,
-.main h3,
-.main h4,
-.main h5,
-.main h6 {
-    margin-top: 3.5rem;
-    margin-bottom: 2rem;
-}
-
-.main figcaption h4 {
-    margin-bottom: 0;
-}
-
-.main p:last-child {
-    margin-bottom: 0;
-}
-
-.main .main-title {
-    margin-bottom: 0;
-}
-
-.post-list {
-    margin-top: 1rem;
-    line-height: 1.4;
-}
-
-.post-list h1,
-.post-list h2,
-.post-list h3,
-.post-list h4,
-.post-list h5,
-.post-list h6 {
-    display: block;
-    margin: 0;
-}
-
-.post-list h2 {
-    font-size: 2.5rem;
-}
-
-.post-list article {
-    color: gray;
-    font-style: oblique;
-    font-size: 1.8rem;
-    margin-top: 0.5rem;
-}
-
-.post-nav {
-    align-items: baseline;
-    display: flex;
-    margin-top: 3.5rem;
-}
-
-.post-nav .next {
-    margin-left: auto;
-}
-
-.post-single footer {
-    margin-block-start: 3.5rem;
-}
-
-.post-title {
-    align-items: baseline;
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 2rem;
-}
-
-.post-title > h1 {
-    flex-grow: 1;
-    margin-block-end: 0;
-    padding-bottom: 0;
-}
-
-.post-title > .post-date {
-    color: var(--light-dim);
-    display: inline-block;
-    font-size: 1.75rem;
-    inline-size: min-content;
-    letter-spacing: 1px;
-    margin-block-start: 0.5rem;
-    white-space: nowrap;
-}
-
-@media (max-width: 620px) {
-    .main h1 {
-        font-size: 3rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .post-list {
-        padding-inline-start: 4rem;
-    }
-
-    .post-list h2 {
-        display: block;
-        font-size: 2rem;
-    }
-
-    .post-list time {
-        font-size: 1.8rem;
-        margin-left: 0;
-    }
-}
-
-@media (max-width: 704px) {
-    :root {
-        --body-padding: 2rem;
-    }
-
-    html {
-        font-size: 7px;
-    }
-}

static/styles/monokai.css

@@ -1,7 +1,26 @@
-.chroma { line-height: 1.4; }
+:root {
+    --highlight-background-color: rgb(var(--super-lt-gray));
+    --highlight-foreground-color: var(--foreground-body-color);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+    }
+}
+
+.chroma {
+    line-height: var(--body-line-height);
+}
+
+.bg {
+    color: var(--highlight-foreground-color);
+    background-color: var(--highlight-background-color);
+}
+
+.chroma {
+    color: var(--highlight-foreground-color);
+    background-color: var(--highlight-background-color);
+}
 
-/* Background */ .bg { color: #272822; background-color: #fafafa }
-/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
 /* CodeLine */ .chroma .cl {  }

static/styles/root.css

@@ -1,8 +1,10 @@
 :root {
     --black: 0, 0, 0;
+    --sub-dk-gray: 16, 16, 16;
     --dk-gray: 32, 32, 32;
     --mid-gray: 128, 128, 128;
     --lt-gray: 223, 223, 223;
+    --super-lt-gray: 240, 240, 240;
     --white: 255, 255, 255;
 
     --lt-blue: 69, 212, 243;
@@ -24,18 +26,23 @@
     --header-box-shadow-color: var(--box-shadow-color);
 
     --font-family-body: Verdana, Helvetica, sans-serif;
-    --font-family-monospace: monospace;
+    --font-family-monospace: "Courier New", Courier, monospace;
     --font-family-heading: Museo_Slab, Tahoma, sans-serif;
-    --font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif;
+    --font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
     --font-size-min: 7px;
     --font-size-max: 8px;
 
     --body-item-spacing: 1em;
+    --body-line-height: 1.4;
+    --body-header-line-height: 1.1;
+    --body-code-background-color: rgb(var(--super-lt-gray));
 
     --content-width: 80rem;
 
     --transition-duration: 0.7s;
 
+    --social-menu-padding: 1rem;
+    --menu-icon-size: 20px;
     --twitter-icon: url(/icons/twitter.svg);
     --github-icon: url(/icons/github.svg);
     --instagram-icon: url(/icons/instagram.svg);
@@ -48,6 +55,7 @@
         --foreground-header-color: rgb(var(--white));
         --separator-color: rgb(var(--dk-gray));
         --box-shadow-color: rgba(var(--dk-gray), 0.8);
+        --body-code-background-color: rgb(var(--dk-gray));
 
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
@@ -66,10 +74,24 @@ a:hover {
 }
 a:visited { color: none; }
 
+blockquote {
+    border-inline-start: 4px solid var(--separator-color);
+    padding-inline-start: 2rem;
+    margin-inline-start: 2rem;
+}
+
 body {
     color: var(--foreground-body-color);
     font-size: 2rem;
-    line-height: 1.2;
+    line-height: var(--body-line-height);
+}
+
+code {
+    background-color: var(--body-code-background-color);
+    border-radius: 0.25rem;
+    font-family: var(--font-family-monospace);
+    display: inline-block;
+    padding-inline: 0.6rem;
 }
 
 figcaption {
@@ -89,6 +111,11 @@ figure {
     width: 100%;
 }
 
+figure.bordered {
+    padding: 0.5rem;
+    border: 2px solid #eee;
+}
+
 figure a,
 figure a:hover {
     border: 0;
@@ -159,7 +186,8 @@ footer.site p + p {
 h1, h2, h3, h4, h5, h6 {
     color: var(--foreground-header-color);
     font-family: var(--font-family-heading);
-    margin-block: 1em 0.25em;
+    margin-block: 3.5rem 1rem;
+    line-height: var(--body-header-line-height);
 }
 
 html {
@@ -188,6 +216,7 @@ h1.site {
             radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
             radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
             radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
+        -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
     }
@@ -234,7 +263,7 @@ header.site .grid {
     display: grid;
     gap: 0.5em;
     grid-template-columns: max-content auto max-content;
-    grid-template-rows: max-content;
+    grid-template-rows: minmax(2em, min-content);
     grid-template-areas:
         "title menu social";
     max-width: var(--content-width);
@@ -306,13 +335,58 @@ nav.bulleted li::before {
 
 p {
     letter-spacing: 0.025em;
-    line-height: 1.4;
+    line-height: var(--body-line-height);
 }
 p { margin-block-end: var(--body-item-spacing); }
 p:last-child { margin-block-end: 0; }
 
+.social menu li + li {
+    margin-left: var(--social-menu-padding);
+}
+
+.social {
+    display: flex;
+    letter-spacing: 2px;
+    margin-left: auto;
+}
+
+.social a {
+    background-image: var(--url);
+    background-repeat: no-repeat;
+    background-size: var(--menu-icon-size);
+    display: block;
+    height: var(--menu-icon-size);
+    width: var(--menu-icon-size);
+}
+
+.social a span {
+    display: none;
+}
+
+.social > li + li:before {
+    color: var(--dark);
+    padding: 0 0.5rem;
+}
+
+.youtube iframe {
+    aspect-ratio: 16 / 9;
+    margin-bottom: -3px;
+    width: 100%;
+}
+
+.p5-sketch {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
 /** SYNTAX HIGHLIGHTING **/
 
+.highlight code {
+    background-color: inherit;
+    margin-block: 0.5em;
+}
+
 .highlight .line {
     display: grid;
     grid-template-columns: max-content auto;