feat: theme revisions

src/assets/css/blocks/archive.css

@@ -1,11 +1,11 @@
 .archive-divider {
-  border-color: var(--color-bg-faded);
+  border-color: var(--color-surface);
   border-width: 1px;
   border-style: dashed;
   flex: 1;
 }
 
 .archive-date {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
   letter-spacing: 0.05em;
 }

src/assets/css/blocks/categories.css

@@ -1,14 +1,23 @@
 .categories {
-  color: var(--color-text-soft);
-  display: flex;
-  gap: 1rem;
-  list-style-type: none;
-  margin-block-end: 0;
-  padding: 0;
+  color: var(--text-color);
 }
 
-.categories li::before {
-  content: "#";
-  margin-inline-end: 0.125rem;
-  user-select: none;
+.categories li {
+  --text-color: var(--color-fadeText);
+}
+
+.categories > li > a {
+  color: var(--text-color);
+  text-decoration-color: var(--text-color);
+}
+
+.categories li:has(a:hover) {
+  --text-color: var(--color-primary);
+}
+
+.categories > li > a::before {
+  content: "#";
+  color: var(--text-color);
+  user-select: none;
+  transition: color var(--transition-duration);
 }

src/assets/css/blocks/date.css

@@ -1,3 +1,7 @@
 .date {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
+}
+
+.date svg {
+  color: var(--color-shadow);
 }

src/assets/css/blocks/pill.css

@@ -1,12 +1,12 @@
 .pill {
-  background-color: var(--color-bg-soft);
+  background-color: var(--color-surface);
   border-radius: 1rem;
   transition: transform var(--transition-duration);
 }
 
 .pill:hover {
   background-color: var(--color-text);
-  color: var(--color-bg);
+  color: var(--color-primary);
   transform: translateY(-2px);
 }
 
@@ -19,5 +19,9 @@ a.pill {
 }
 
 .pill-count {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
+}
+
+.pill:hover .pill-count {
+  color: var(--color-border);
 }

src/assets/css/blocks/site-footer.css

@@ -1,5 +1,5 @@
 .footer {
-  background-color: var(--color-bg-soft);
+  background-color: var(--color-surface);
 }
 
 .footer-grid {

src/assets/css/blocks/site-logo.css

@@ -2,17 +2,6 @@
   gap: 0.5rem;
 }
 
-.site-logo .logo {
-  background-color: var(--color-light);
-  border-radius: 50%;
-  width: 52px;
-  height: 52px;
-  border-color: var(--color-dark);
-  border-width: 1px;
-  border-style: solid;
-  box-shadow: 0 2px 0 var(--color-dark);
-}
-
 .site-logo .wordmark {
   text-decoration: none;
 }
@@ -30,7 +19,7 @@
     -1px 3px 0 var(--shadow-color),
     0px 3px 0 var(--shadow-color),
     1px 3px 0 var(--shadow-color);
-  color: white;
+  color: var(--color-white);
   font-family: var(--font-family-display);
   font-size: 1.5rem;
   letter-spacing: -0.05em;
@@ -42,24 +31,10 @@
 }
 
 .site-logo .wordmark > :nth-child(1) {
-  --shadow-color: var(--color-dark);
-}
-
-.site-logo .wordmark > :nth-child(2) {
-  --shadow-color: var(--color-primary-faded);
+  --shadow-color: var(--color-shadow);
   z-index: 1;
 }
 
-@container (max-width: 32em) {
-  .site-logo .wordmark {
-    /* Visually hide wordmark on smaller screens */
-    clip: rect(0 0 0 0);
-    height: auto;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
-  }
+.site-logo .wordmark > :nth-child(2) {
+  --shadow-color: var(--color-primary);
 }

src/assets/css/blocks/site-nav.css

@@ -1,7 +1,11 @@
 .navbar {
   backdrop-filter: blur(3px);
-  background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
-  background-image: linear-gradient(var(--color-bg) 20%, transparent);
+  background-color: color-mix(
+    in srgb,
+    var(--color-background) 60%,
+    transparent
+  );
+  background-image: linear-gradient(var(--color-background) 20%, transparent);
   container: navbar / inline-size;
   padding-block: 1.5rem;
   position: sticky;

src/assets/css/global/global-styles.css

@@ -10,7 +10,7 @@ html {
 
 body {
   accent-color: var(--color-primary);
-  background-color: var(--color-bg);
+  background-color: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-family-body);
   font-size: 1.125rem;
@@ -44,6 +44,13 @@ h2 {
 }
 
 h3 {
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 1.5rem;
+}
+
+h4 {
   font-size: 1.125rem;
   font-weight: var(--font-weight-display-bold);
   letter-spacing: -0.05rem;
@@ -55,31 +62,36 @@ a {
   color: currentColor;
   text-decoration-color: var(--color-primary);
   text-decoration-thickness: 2px;
-  transition: text-decoration-color var(--transition-duration);
+  transition:
+    color var(--transition-duration),
+    text-decoration-color var(--transition-duration);
+}
+
+a:visited {
+  text-decoration-color: var(--color-shadow);
 }
 
 a:hover,
 a:active,
 a:focus-visible {
-  text-decoration-color: var(--color-primary-highlight);
-}
-
-a:visited {
-  text-decoration-color: var(--color-primary-subtle);
+  color: var(--color-primary);
+  text-decoration-color: var(--color-primary);
 }
 
 ul li::marker {
-  color: var(--color-primary-faded);
+  color: var(--color-primary);
 }
 
 ol li::marker {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
 }
 
 blockquote {
-  border-inline-start: 2px solid var(--color-bg-faded);
+  border-inline-start: 2px solid var(--color-primary);
   margin-inline-start: 0;
+  margin-inline-end: 0;
   padding-inline: 1rem;
+  background-color: var(--color-surface);
 }
 
 blockquote > * + * {
@@ -107,7 +119,23 @@ img[width][height] {
 
 hr {
   border-style: solid;
-  color: var(--color-bg-faded);
+  color: var(--color-surface);
+}
+
+pre {
+  overflow-x: auto;
+}
+
+figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-inline: 0;
+  gap: var(--spacing-1);
+}
+
+figure figcaption {
+  color: var(--color-fadeText);
 }
 
 @media (prefers-reduced-motion: reduce) {

src/assets/css/global/variables.css

@@ -3,32 +3,6 @@
   --transition-duration: 250ms;
   --transition-timing: ease;
 
-  --color-light: var(--color-neutral-50);
-  --color-dark: var(--color-neutral-950);
-
-  --color-bg: var(--color-light);
-  --color-bg-faded: var(--color-neutral-300);
-  --color-bg-soft: var(--color-neutral-100);
-  --color-text: var(--color-dark);
-  --color-text-soft: var(--color-neutral-600);
-  --color-primary: var(--color-aqua-400);
-  --color-primary-highlight: var(--color-aqua-300);
-  --color-primary-subtle: var(--color-aqua-500);
-  --color-primary-faded: var(--color-aqua-600);
-  --color-secondary: var(--color-carotte-400);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: var(--color-dark);
-    --color-bg-soft: var(--color-neutral-900);
-    --color-bg-faded: var(--color-neutral-800);
-    --color-text: var(--color-light);
-    --color-text-soft: var(--color-neutral-500);
-
-    --color-primary: var(--color-aqua-300);
-    --color-primary-highlight: var(--color-aqua-200);
-    --color-primary-subtle: var(--color-aqua-400);
-    --color-primary-faded: var(--color-aqua-100);
-  }
+  --color-white: white;
+  --color-black: black;
 }

src/assets/css/utils/flex.css

@@ -26,3 +26,7 @@
 .flex-nowrap {
   flex-wrap: nowrap;
 }
+
+.flex-1 {
+  flex: 1;
+}

src/assets/css/utils/wrapper.css

@@ -6,7 +6,7 @@
  */
 .wrapper {
   width: 90vw;
-  width: clamp(16rem, 90vw, 80ch);
+  width: clamp(16rem, 90vw, 65ch);
   margin-left: auto;
   margin-right: auto;
   padding-left: 1.5rem;