feat: move css to own directory

src/css/blocks/archive.css

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

src/css/blocks/catalogue.css

@@ -0,0 +1,13 @@
+.catalogue-type {
+  font-size: 0.8rem;
+  border-radius: 0.5rem;
+}
+
+.catalogue-meta {
+  text-align: center;
+}
+
+.catalogue source,
+.catalogue img {
+  max-width: 50%;
+}

src/css/blocks/categories.css

@@ -0,0 +1,23 @@
+.categories {
+  color: var(--text-color);
+}
+
+.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/css/blocks/date.css

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

src/css/blocks/pill.css

@@ -0,0 +1,27 @@
+.pill {
+  background-color: var(--color-surface);
+  border-radius: 1rem;
+  transition: transform var(--transition-duration);
+}
+
+.pill:hover {
+  background-color: var(--color-text);
+  color: var(--color-primary);
+  transform: translateY(-2px);
+}
+
+.pill:active {
+  transform: translateY(2px);
+}
+
+a.pill {
+  text-decoration: none;
+}
+
+.pill-count {
+  color: var(--color-fadeText);
+}
+
+.pill:hover .pill-count {
+  color: var(--color-border);
+}

src/css/blocks/prism.css

@@ -0,0 +1,68 @@
+/* Adapted from the Tokyo Night theme on GitHub
+ * https://github.com/folke/tokyonight.nvim/blob/main/extras/prism/tokyonight_night.js
+ */
+
+pre:has(code) {
+  background-color: #1a1b26;
+  border-radius: 0.5em;
+  padding: 1em;
+  color: #c0caf5;
+}
+
+.token.prolog,
+.token.builtin {
+  color: #f7768e;
+}
+
+.token.function {
+  color: #7aa2f7;
+}
+
+.token.symbol {
+  color: #2ac3de;
+}
+
+.token.punctuation {
+  color: #bb9af7;
+}
+
+.token.string,
+.token.char,
+.token.tag,
+.token.selector {
+  color: #9ece6a;
+}
+
+.token.keyword {
+  color: #9d7cd8;
+}
+
+.token.operator {
+  color: #89ddff;
+}
+
+.token.constant,
+.token.boolean {
+  color: #ff9e64;
+}
+
+.token.variable {
+  color: #c0caf5;
+}
+
+.token.comment {
+  color: #565f89;
+  font-style: italic;
+}
+
+.token.attr-name {
+  color: #73daca;
+}
+
+.token.class-name {
+  color: #ff757f;
+}
+
+.token.plain-text {
+  color: #c0caf5;
+}

src/css/blocks/site-footer.css

@@ -0,0 +1,23 @@
+.footer {
+  background-color: var(--color-surface);
+}
+
+.footer-grid {
+  display: grid;
+}
+
+.footer-socials {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 32rem) {
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .footer-pages ul {
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+}

src/css/blocks/site-logo.css

@@ -0,0 +1,40 @@
+.site-logo {
+  gap: 0.5rem;
+}
+
+.site-logo .wordmark {
+  text-decoration: none;
+}
+
+.site-logo .wordmark > span {
+  text-shadow:
+    -1px 1px 0 var(--shadow-color),
+    0 1px 0 var(--shadow-color),
+    -1px -1px 0 var(--shadow-color),
+    1px -1px 0 var(--shadow-color),
+    1px 1px 0 var(--shadow-color),
+    -1px 2px 0 var(--shadow-color),
+    0px 2px 0 var(--shadow-color),
+    1px 2px 0 var(--shadow-color),
+    -1px 3px 0 var(--shadow-color),
+    0px 3px 0 var(--shadow-color),
+    1px 3px 0 var(--shadow-color);
+  color: var(--color-white);
+  font-family: var(--font-family-display);
+  font-size: 1.5rem;
+  letter-spacing: -0.05em;
+  transition: transform var(--transition-duration);
+}
+
+.site-logo .wordmark > span:hover {
+  transform: translateY(-2px);
+}
+
+.site-logo .wordmark > :nth-child(1) {
+  --shadow-color: var(--color-shadow);
+  z-index: 1;
+}
+
+.site-logo .wordmark > :nth-child(2) {
+  --shadow-color: var(--color-primary);
+}

src/css/blocks/site-nav.css

@@ -0,0 +1,19 @@
+.navbar {
+  backdrop-filter: blur(3px);
+  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;
+  top: 0;
+  z-index: 1;
+}
+
+.navbar .links {
+  list-style-type: none;
+  gap: 1rem;
+}