chore: table styles + album table order

src/assets/styles/base/index.css

@@ -1,10 +1,10 @@
 html
 body {
   color: var(--text-color);
+  background: var(--background-color);
   font-family: var(--font-mono);
   letter-spacing: -.05rem;
   word-spacing: -.125rem;
-  background: var(--background-color);
   scrollbar-width: thin;
   scrollbar-color: var(--accent-color) var(--gray-light);
 }
@@ -261,6 +261,7 @@ table {
   width: 100%;
   border: 1px solid var(--gray-light);
   white-space: nowrap;
+  caption-side: bottom;
 }
 
 table,
@@ -285,10 +286,35 @@ td {
   min-width: max-content;
   word-break: break-word;
   width: 100%;
+
+  &:first-child {
+    position: sticky;
+    left: 0;
+    border-inline-end: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      width: 1px;
+      height: 100%;
+      background: var(--gray-light);
+    }
+  }
 }
 
 td {
   min-width: calc(var(--sizing-3xl) * 2);
+
+  &:first-child {
+    background-color: var(--background-color);
+  }
+}
+
+td::first-of-type,
+:where(thead, tfoot) th:nth-child(2) {
+	border-inline-start: none;
 }
 
 th {

src/assets/styles/defaults/vars.css

@@ -29,7 +29,7 @@
   --black: #000;
 
   --gray-light: var(--gray-200);
-  --gray-lighter: var(--gray-50);
+  --gray-lighter: var(--gray-100);
   --gray-dark: var(--gray-950);
 
   /* base theme */
@@ -129,8 +129,8 @@
     --background-color-inverted: var(--color-lightest);
     --accent-color: var(--blue-400);
     --accent-color-hover: var(--blue-200);
-    --gray-light: var(--gray-900);
-    --gray-lighter: var(--gray-950);
+    --gray-light: var(--gray-800);
+    --gray-lighter: var(--gray-900);
     --gray-dark: var(--gray-200);
     --brand-github: #f5f5f5;
   }
@@ -145,7 +145,7 @@
   --accent-color: var(--blue-600);
   --accent-color-hover: var(--blue-800);
   --gray-light: var(--gray-200);
-  --gray-lighter: var(--gray-50);
+  --gray-lighter: var(--gray-100);
   --gray-dark: var(--gray-950);
   --brand-github: #333;
 }
@@ -158,8 +158,8 @@
   --background-color-inverted: var(--color-lightest);
   --accent-color: var(--blue-400);
   --accent-color-hover: var(--blue-200);
-  --gray-light: var(--gray-900);
-  --gray-lighter: var(--gray-950);
+  --gray-light: var(--gray-800);
+  --gray-lighter: var(--gray-900);
   --gray-dark: var(--gray-200);
   --brand-github: #f5f5f5;
 }

src/assets/styles/pages/music.css

@@ -71,11 +71,6 @@
       }
     }
   }
-
-  table th:first-of-type,
-  table td:first-of-type {
-    width: calc(var(--sizing-3xl) * 6);
-  }
 }
 
 @media screen and (min-width: 768px) {