chore: spacing + split out page styles

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.4.2",
+  "version": "19.4.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.4.2",
+      "version": "19.4.3",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -532,9 +532,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.14.2",
+      "version": "20.14.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.3.tgz",
-      "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
+      "integrity": "sha512-Nuzqa6WAxeGnve6SXqiPAM9rA++VQs+iLZ1DDd56y0gdvygSZlQvZuvdFPR3yLqkVxPu4WrO02iDEyH1g+wazw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.4.2",
+  "version": "19.4.3",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/assets/styles/components/text-toggle.css

@@ -1,4 +1,5 @@
 .toggle-wrapper {
+  display: flex;
   position: relative;
   margin-bottom: calc(var(--sizing-base) + 44px);
 

src/assets/styles/index.css

@@ -19,8 +19,9 @@
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
 @import url('./pages/links.css') layer(page);
-@import url('./pages/media.css') layer(page);
+@import url('./pages/music.css') layer(page);
 @import url('./pages/post.css') layer(page);
+@import url('./pages/watching.css') layer(page);
 @import url('./pages/webrings.css') layer(page);
 
 /* component styles */

src/assets/styles/pages/music.css

@@ -0,0 +1,73 @@
+.artist-focus,
+.genre-focus {
+  border-bottom: 0;
+}
+
+.artist-focus {
+  margin-bottom: var(--sizing-base);
+
+  & img {
+    border: 1px solid var(--accent-color);
+    width: 100%;
+    height: auto;
+  }
+
+  & .artist-display {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sizing-xs);
+    margin: var(--sizing-base) 0;
+
+    & .artist-meta {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sizing-sm);
+      margin-top: var(--sizing-md);
+
+      & p {
+        margin: 0;
+
+        &.title {
+          font-size: var(--font-size-xl);
+        }
+
+        &.sub-meta {
+          font-size: var(--font-size-sm);
+          line-height: var(--line-height-sm);
+
+          svg {
+            width: 18px;
+            height: 18px;
+            margin-right: var(--sizing-xs);
+          }
+        }
+
+        &.favorite {
+          color: var(--favorite);
+        }
+      }
+    }
+  }
+
+  table th:first-of-type,
+  table td:first-of-type {
+    width: calc(var(--sizing-3xl) * 6);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .artist-focus img {
+    max-width: 240px;
+  }
+
+  .artist-focus {
+    & .artist-display {
+      flex-direction: row;
+      gap: var(--sizing-md);
+
+      & .artist-meta {
+        margin-top: 0;
+      }
+    }
+  }
+}

src/assets/styles/pages/watching.css

@@ -1,80 +1,10 @@
-.artist-focus,
-.genre-focus,
-.watching-focus {
-  border-bottom: 0;
-}
-
-.artist-focus,
 .watching {
   & img {
     border: 1px solid var(--accent-color);
     width: 100%;
     height: auto;
   }
-}
 
-.artist-focus {
-  & .artist-display {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sizing-xs);
-    margin-top: var(--sizing-base);
-
-    & .artist-meta {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sizing-sm);
-      margin-top: var(--sizing-md);
-
-      & p {
-        margin: 0;
-
-        &.title {
-          font-size: var(--font-size-xl);
-        }
-
-        &.sub-meta {
-          font-size: var(--font-size-sm);
-          line-height: var(--line-height-sm);
-
-          svg {
-            width: 18px;
-            height: 18px;
-            margin-right: var(--sizing-xs);
-          }
-        }
-
-        &.favorite {
-          color: var(--favorite);
-        }
-      }
-    }
-  }
-
-  table th:first-of-type,
-  table td:first-of-type {
-    width: calc(var(--sizing-3xl) * 6);
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .artist-focus img {
-    max-width: 240px;
-  }
-
-  .artist-focus {
-    & .artist-display {
-      flex-direction: row;
-      gap: var(--sizing-md);
-
-      & .artist-meta {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-.watching {
   &.page-header {
     margin-bottom: var(--sizing-base);
   }
@@ -181,6 +111,8 @@
 }
 
 .watching-focus {
+  border-bottom: 0;
+
   & .watching-meta {
     display: flex;
     flex-direction: column;
@@ -210,4 +142,4 @@
   .watching.grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-}
+}