chore: table styles + album table order

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",

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": {

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) {

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>