From 8ff794701766cc0e2045bb96b23a7eb78364e878 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 25 Jul 2024 17:38:49 -0700
Subject: [PATCH] chore: table styles + album table order

---
 package-lock.json                           |  4 +--
 package.json                                |  2 +-
 src/assets/styles/base/index.css            | 28 ++++++++++++++++++++-
 src/assets/styles/defaults/vars.css         | 12 ++++-----
 src/assets/styles/pages/music.css           |  5 ----
 src/pages/dynamic/music/artists/artist.html |  6 ++---
 6 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9717a0c..183dcd62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "20.12.12",
+  "version": "20.12.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "20.12.12",
+      "version": "20.12.13",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
diff --git a/package.json b/package.json
index ad5b12d4..37675385 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "20.12.12",
+  "version": "20.12.13",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 59e7b215..2eea5478 100644
--- a/src/assets/styles/base/index.css
+++ b/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 {
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 25bf3954..e02e0a62 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/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;
 }
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 6c6dd806..b81499b8 100644
--- a/src/assets/styles/pages/music.css
+++ b/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) {
diff --git a/src/pages/dynamic/music/artists/artist.html b/src/pages/dynamic/music/artists/artist.html
index 62667982..2ef7117d 100644
--- a/src/pages/dynamic/music/artists/artist.html
+++ b/src/pages/dynamic/music/artists/artist.html
@@ -64,15 +64,15 @@ schema: artist
   {%- endif -%}
   <table>
     <tr>
-      <th>Year</th>
-      <th>Title</th>
+      <th>Album</th>
       <th>Plays</th>
+      <th>Year</th>
     </tr>
     {% for album in artist.albums %}
     <tr>
-      <td>{{ album.release_year }}</td>
       <td>{{ album.name }}</td>
       <td>{{ album.total_plays }}</td>
+      <td>{{ album.release_year }}</td>
     </tr>
     {% endfor %}
   </table>