refactor css

dbushell · Nov 4, 2024 · 43f46ef · 43f46ef
1 parent f36f430
commit 43f46ef
Show file tree

Hide file tree

Showing 41 changed files with 522 additions and 484 deletions.
diff --git a/components/my-cta.html b/components/my-cta.html
@@ -1,4 +1,4 @@
-<aside class="Box">
+<aside class="Box Prose">
   <h3 class="Cursive">Let’s work together...</h3>
   <p>
     Interested in working with me? <a href="/contact/">Send me an email</a> with your requirements.

diff --git a/components/my-layout.html b/components/my-layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="Lightmode" dir="ltr" lang="en-GB">
+<html dir="ltr" lang="en-GB" data-theme="light">
 <head>
 <meta charset="utf-8">
 <meta name="robots" content="noai, noimageai">
@@ -14,8 +14,6 @@
 <meta name="apple-mobile-web-app-title" content="dbushell.com">
 <meta name="application-name" content="dbushell.com">
 <meta name="generator" content="https://github.com/dbushell/dbushell.com">
-<meta name="theme-color" content="#fffaf0" media="(prefers-color-scheme: light)">
-<meta name="theme-color" content="#4f4545" media="(prefers-color-scheme: dark)">
 <meta name="theme-color" content="#96e6c8">
 <link rel="alternate" type="application/rss+xml" title="dbushell.com RSS Feed" href="https://dbushell.com/rss.xml">
 <ssr-portal name="head" />
@@ -30,9 +28,7 @@
 -->
 %STYLES%
 </head>
-<body class="Body">
-<div class="App">
-  <ssr-slot />
-</div>
+<body>
+<ssr-slot />
 </body>
 </html>
diff --git a/components/rss-blog.html b/components/rss-blog.html
@@ -1,4 +1,4 @@
-<aside class="Box">
+<aside class="Box Prose">
   <p>
     Subscribe to my <a href="/rss.xml" target="_blank">blog RSS feed</a> and
     <a href="/notes/rss.xml" target="_blank">microblog RSS feed</a>.

diff --git a/components/rss-notes.html b/components/rss-notes.html
@@ -1,4 +1,4 @@
-<div class="Box">
+<div class="Box Prose">
   <p>
     Subscribe to my <a href="/notes/rss.xml" target="_blank">microblog RSS feed</a> and
     <a href="/mastodon/" target="_blank">follow on Mastodon</a>.

diff --git a/public/assets/images/dbushell-logotype.svg b/public/assets/images/dbushell-logotype.svg
diff --git a/public/assets/scripts/head.js b/public/assets/scripts/head.js
@@ -19,22 +19,18 @@ fetch($logo.src).then(async (response) => {
 // Handle dark mode
 const $doc = document.documentElement;
 const $mode = document.querySelector(".Lightbulb");
-const list = $doc.classList;
 
-if (localStorage.getItem("darkmode") === "on") {
-  list.remove("Lightmode");
-  list.add("Darkmode");
+if (localStorage.getItem("theme") === "dark") {
+  $doc.dataset.theme = "dark";
 }
 
 $mode.addEventListener("click", () => {
-  if (list.contains("Lightmode")) {
-    list.remove("Lightmode");
-    list.add("Darkmode");
-    localStorage.setItem("darkmode", "on");
+  if ($doc.dataset.theme === "dark") {
+    $doc.dataset.theme = "light";
+    localStorage.setItem("theme", "light");
   } else {
-    list.remove("Darkmode");
-    list.add("Lightmode");
-    localStorage.setItem("darkmode", "off");
+    $doc.dataset.theme = "dark";
+    localStorage.setItem("theme", "dark");
   }
 });
 

diff --git a/src/css/_stylesheet.css b/src/css/_stylesheet.css
@@ -1,9 +1,9 @@
 @layer base, components, modifiers;
 
 @import 'base/fonts.css' layer(base);
-@import 'base/props.css' layer(base);
+@import 'base/properties.css' layer(base);
 @import 'base/reset.css' layer(base);
-@import 'base/document.css' layer(base);
+@import 'base/body.css' layer(base);
 @import 'base/hidden.css' layer(base);
 @import 'base/typography.css' layer(base);
 @import 'base/code.css' layer(base);
@@ -36,4 +36,3 @@
 @import 'aside.css';
 @import 'main.css';
 @import 'layout.css';
-@import 'app.css';
diff --git a/src/css/app.css b/src/css/app.css
diff --git a/src/css/article.css b/src/css/article.css
@@ -1,8 +1,8 @@
 .Article {
-  margin: 0 0 calc((36 / 16) * 1rem) 0;
+  margin-block-end: var(--size-4);
 
   :where(.Box) + & {
-    margin-block-start: calc((36 / 16) * 1rem);
+    margin-block-start: var(--size-4);
   }
 
   &:last-child {

diff --git a/src/css/aside.css b/src/css/aside.css
@@ -1,14 +1,13 @@
 .Aside {
-  container-name: aside;
-  container-type: inline-size;
+  container: aside / inline-size;
   width: 100%;
 
   & > .Rule {
-    margin-block-end: calc((36 / 16) * 1rem);
+    margin-block-end: var(--size-4);
   }
 }
 
-@container app (inline-size >= calc((800 / 16) * 1rem)) {
+@container app (inline-size >= 50rem) {
   .Aside {
     & > .Rule {
       display: none;

diff --git a/src/css/base/document.css → src/css/base/body.css b/src/css/base/document.css → src/css/base/body.css
@@ -3,23 +3,34 @@
 } */
 
 :root {
-  --outline: calc((2 / 16) * 1rem) dashed oklch(var(--color-secondary));
   background: oklch(var(--color-background));
+  scrollbar-color: oklch(var(--color-primary)) oklch(var(--color-background));
+}
+
+body {
+  accent-color: var(--color-primary);
   color: oklch(var(--color-foreground));
   font-family: 'Raleway', sans-serif;
   font-synthesis: none;
-  font-weight: 400;
+  font-weight: 475;
   line-height: var(--line-height-1);
-  margin: 0;
-  padding: 0;
+}
+
+body {
+  container: app / inline-size;
+  margin-inline: auto;
+  max-inline-size: calc(1920 * var(--rem));
+  overflow: hidden;
+  padding-inline: var(--page-margin);
+  position: relative;
 }
 
 [class*='🖕'] {
   display: none;
 }
 
 @media screen {
-  .Lightmode {
+  :root[data-theme='light'] {
     --color-background: var(--db-light);
     --color-background2: var(--db-white);
     --color-foreground: var(--db-dark);
@@ -35,15 +46,15 @@
     --masthead-secondary: var(--db-blue);
   }
 
-  .Darkmode {
-    --color-background: var(--db-dark);
-    --color-background2: var(--db-black);
+  :root[data-theme='dark'] {
+    --color-background: var(--db-black);
+    --color-background2: var(--db-dark);
     --color-foreground: var(--db-light);
 
-    --color-primary: var(--db-yellow);
-    --color-primary2: var(--db-yellow);
-    --color-secondary: var(--db-green);
-    --color-secondary2: var(--db-green);
+    --color-primary: var(--db-green);
+    --color-primary2: var(--db-green);
+    --color-secondary: var(--db-pink);
+    --color-secondary2: var(--db-pink);
     --color-tertiary: var(--db-pink);
     --color-quaternary: var(--db-blue);
 

diff --git a/src/css/base/code.css b/src/css/base/code.css
@@ -1,28 +1,28 @@
 pre,
 code {
   font-family: 'Roboto Mono', monospace;
-  font-size: var(--step-s);
-  font-weight: 300;
+  font-size: var(--font-size-0);
+  font-weight: 400;
   -webkit-text-size-adjust: 100%;
 }
 
 :not(pre) > code {
   background: oklch(var(--color-background2));
-  border: calc((1 / 16) * 1rem) solid oklch(var(--color-quaternary));
+  border: var(--border-size-1) solid oklch(var(--color-quaternary));
   color: oklch(var(--color-secondary2));
   display: inline;
-  font-size: var(--step-s);
-  font-weight: 400;
+  font-size: var(--font-size-0);
+  font-weight: 450;
   line-height: 1;
-  padding: calc((2 / 16) * 1rem) calc((4 / 16) * 1rem);
+  padding: 2px 4px;
   text-decoration: none;
 }
 
 pre {
   --background-color: var(--db-dark);
   --background-alt: var(--db-midnight);
-  --block-padding: calc((12 / 16) * 1rem);
-  --inline-padding: calc((18 / 16) * 1rem);
+  --block-padding: 12px;
+  --inline-padding: var(--size-2);
   background: oklch(var(--background-color));
   color: oklch(var(--db-light));
   counter-reset: line-counter;
@@ -31,8 +31,8 @@ pre {
   -webkit-hyphens: none;
   hyphens: none;
   line-height: var(--line-height-2);
-  margin: calc((36 / 16) * 1rem) 0;
-  margin-inline-start: calc((-18 / 16) * 1rem);
+  margin-block: var(--size-4);
+  margin-inline-start: calc(-1 * var(--size-2));
   overflow: auto;
   overscroll-behavior-inline: contain;
   padding: var(--block-padding) var(--inline-padding);
@@ -52,13 +52,14 @@ pre {
       color: oklch(var(--db-yellow));
       display: block;
       font-family: 'Comic Neue', 'Raleway', sans-serif;
-      font-size: calc((12 / 16) * 1rem);
+      font-size: 12px;
       font-style: italic;
       inset-inline-start: 0;
       line-height: 1;
-      transform: translateX(var(--inline-padding)) translateY(calc(-1 * var(--block-padding)));
-      margin-block-end: calc((-24 / 16) * 1rem);
-      padding: calc((6 / 16) * 1rem);
+      transform: translateX(var(--inline-padding))
+        translateY(calc(-1 * var(--block-padding)));
+      margin-block-end: -24px;
+      padding: 6px;
       position: sticky;
       pointer-events: none;
       text-align: end;
@@ -77,7 +78,7 @@ pre {
 
       &:nth-child(2n + 1) {
         &::before {
-          border-inline: 1px solid transparent;
+          border-inline: var(--border-size-1) solid transparent;
           border-inline-start-color: currentColor;
         }
       }
@@ -112,7 +113,7 @@ pre {
           background: oklch(var(--background-alt) / 0.15);
           content: '';
           display: none;
-          inset: 0 calc((-18 / 16) * 1rem);
+          inset: 0 calc(-1 * var(--size-2));
           position: absolute;
           z-index: -1;
         }
@@ -122,8 +123,8 @@ pre {
           color: oklch(var(--db-yellow));
           display: inline-block;
           inline-size: 2ch;
-          margin-inline-end: calc((14 / 16) * 1rem);
-          margin-inline-start: calc((-6 / 16) * 1rem);
+          margin-inline-end: 14px;
+          margin-inline-start: -6px;
           text-align: end;
           user-select: none;
         }
@@ -147,14 +148,9 @@ pre {
       }
     }
   }
-
-  :where(.Darkmode) & {
-    --background-color: var(--db-midnight);
-    --background-alt: var(--db-dark);
-  }
 }
 
-@container app (inline-size < calc((400 / 16) * 1rem)) {
+@container app (inline-size < 25rem) {
   pre {
     --inline-padding: var(--page-margin);
     margin-inline-end: calc(-1 * var(--page-margin));

diff --git a/src/css/base/fonts.css b/src/css/base/fonts.css
@@ -10,7 +10,8 @@
 
 @font-face {
   font-family: 'Raleway';
-  src: url('/assets/fonts/raleway-variable.woff2?v=%DEPLOY_HASH%') format('woff2');
+  src: url('/assets/fonts/raleway-variable.woff2?v=%DEPLOY_HASH%')
+    format('woff2');
   font-display: swap;
   font-weight: 1 900;
   font-style: normal;
@@ -20,7 +21,8 @@
 
 @font-face {
   font-family: 'Raleway';
-  src: url('/assets/fonts/raleway-italic-variable.woff2?v=%DEPLOY_HASH%') format('woff2');
+  src: url('/assets/fonts/raleway-italic-variable.woff2?v=%DEPLOY_HASH%')
+    format('woff2');
   font-display: swap;
   font-weight: 1 900;
   font-style: italic;
@@ -30,7 +32,8 @@
 
 @font-face {
   font-family: 'Comic Neue';
-  src: url('/assets/fonts/comic-neue-bold-italic.woff2?v=%DEPLOY_HASH%') format('woff2');
+  src: url('/assets/fonts/comic-neue-bold-italic.woff2?v=%DEPLOY_HASH%')
+    format('woff2');
   font-display: swap;
   font-weight: 600;
   font-style: italic;