Move blog.css styles to styles/blog/ files

assets/styles/blog.css

@@ -1,79 +0,0 @@
-:root {
-    --post-item-highlight-color: #efefef;
-
-    --blog-list-grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content max-content;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --post-item-highlight-color: #121212;
-    }
-}
-
-.blog > .highlight { margin-block-end: var(--body-item-spacing); }
-
-.post-nav {
-    align-items: baseline;
-    display: flex;
-    margin-top: 3.5rem;
-}
-
-.post-nav .next {
-    margin-left: auto;
-}
-
-.post-single footer {
-    margin-block-start: var(--body-item-spacing);
-}
-
-.blog.list > ul {
-    list-style: none;
-}
-.blog.list > ul > li {
-    align-items: baseline;
-    border-radius: 6px;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: var(--blog-list-grid-template-columns);
-    margin-block-end: 0.25rem;
-    transition: background-color 0.25s;
-}
-.blog.list > ul > li:hover {
-    background-color: var(--post-item-highlight-color);
-}
-.blog.list > ul > li > a { color: inherit; }
-.blog.list > ul > li > a:hover { text-decoration: none; }
-.blog.list > ul > li > time:nth-child(2) { text-align: end; }
-.blog.list > ul > li > .draft { align-self: center; }
-
-@supports (grid-template-columns: subgrid) {
-    .blog.list {
-        display: grid;
-        gap: 1rem;
-        grid-template-columns: var(--blog-list-grid-template-columns);
-    }
-    .blog.list > ul {
-        display: grid;
-        row-gap: 0.25rem;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-        list-style: none;
-    }
-    .blog.list > ul > li {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-        margin-block-end: 0;
-    }
-
-    .blog.list > h5 {
-        grid-column: 1 / -1;
-        margin-block: 1rem 0;
-    }
-    .blog.list > h5:first-child {
-        margin-block-start: 0;
-    }
-}
-
-.blog.list > ul > li > :first-child {
-    text-align: end;
-}

assets/styles/blog/050_content.css

@@ -0,0 +1,19 @@
+/* Eryn Wells <eryn@erynwells.me> */
+
+a:has(> img) {
+  grid-column: content-start / content-end;
+}
+
+@media (max-width: 639px) {
+  a:has(> img) {
+    grid-column: gutter-start / gutter-end;
+  }
+}
+
+main {
+  gap: var(--body-item-spacing) 0;
+}
+
+main > article > :not(:last-child) {
+    margin-block-end: var(--body-item-spacing);
+}

assets/styles/blog/050_list.css

@@ -0,0 +1,97 @@
+@layer section {
+  :root {
+      --body-item-spacing: 1rem;
+  }
+
+  .blog.list {
+    gap: 8rem 0;
+  }
+
+  .blog.list > h1.date {
+    grid-column: content-start / content-end;
+  }
+
+  .blog.list > ul,
+  .blog.list > ul > li {
+    grid-column: wide-content-start / wide-content-end;
+  }
+
+  @supports (grid-template-columns: subgrid) {
+    .blog.list > ul,
+    .blog.list > ul > li,
+    .blog.list > ul > li > article {
+      display: grid;
+      grid-template-columns: subgrid;
+      gap: var(--body-item-spacing) 0;
+    }
+  }
+
+  /*
+  @media (max-width: 415px) {
+    .blog.list > ul,
+    .blog.list > ul > li {
+      display: block;
+    }
+  }
+  */
+
+  .blog.list > ul {
+    gap: 8rem 0;
+  }
+
+  .blog.list > ul > li {
+    gap: 1rem 0;
+    margin: 0;
+  }
+
+  li > time {
+    font-variant-numeric: tabular-nums;
+    grid-column: wide-content-start;
+    justify-self: end;
+  }
+
+  @media (max-width: 960px) {
+    li > time {
+      grid-column: content-start / content-end;
+      justify-self: start;
+      line-height: var(--line-height);
+    }
+  }
+
+  li > .title {
+    grid-column: content-start / content-end;
+  }
+
+  li > article {
+    grid-column: gutter-start / gutter-end;
+  }
+
+  li > p,
+  li > .tags {
+    grid-column: content-start / content-end;
+  }
+
+  li > article > p:last-child {
+    margin-block-end: 0;
+  }
+
+  @media (max-width: 414px) {
+    li > article > figure,
+    li > article > figure img {
+        border-radius: 0;
+    }
+  }
+
+  .blog.list > ul,
+  .blog.list > ul > li {
+    margin-inline-start: 0;
+  }
+
+  .title {
+    font-size: var(--h5-size);
+  }
+
+  .title, .title a {
+    color: var(--color);
+  }
+}