chore: css consolidation + tokens

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.7.5",
+  "version": "19.7.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.7.5",
+      "version": "19.7.6",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -826,9 +826,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001638",
+      "version": "1.0.30001639",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
-      "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+      "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
       "dev": true,
       "funding": [
         {

package.json

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

src/_includes/webrings/css-joy.liquid

@@ -2,7 +2,7 @@
   <a href="https://cs.sjoy.lol">
     <h3 class="text-centered">CSS JOY Webring</h3>
   </a>
-  <div class="webring-centered flex-centered">
+  <div class="flex-centered justify-centered">
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
       {% tablericon "arrow-left" "Previous site" %}
     </a>

src/_includes/webrings/the-claw.liquid

@@ -1,5 +1,5 @@
 <div class="webring-wrapper">
-  <div class="webring-centered flex-centered">
+  <div class="flex-centered justify-centered">
     <img
       srcset="
         https://cdn.coryd.dev/assets/webrings/theclaw.png?width=200 200w,
@@ -20,7 +20,7 @@
     />
   </div>
   <h3 class="text-centered">The Claw Webring</h3>
-  <div class="webring-centered flex-centered">
+  <div class="flex-centered justify-centered">
     <strong>
       <a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
     </strong>

src/assets/styles/base/index.css

@@ -93,15 +93,6 @@ code {
   stroke-width: var(--stroke-width-bold) !important;
 }
 
-sup.footnote-ref {
-  line-height: var(--line-height-xs);
-}
-
-sup.footnote-ref a,
-.footnote-backref {
-  text-decoration: none;
-}
-
 strong,
 blockquote {
   font-weight: var(--font-weight-bold);
@@ -115,6 +106,7 @@ blockquote {
 svg {
   width: var(--sizing-svg-base);
   height: var(--sizing-svg-base);
+  stroke-width: var(--stroke-width-default);
 }
 
 /* links */
@@ -317,17 +309,17 @@ a.link-icon {
   display: inline-flex;
   align-items: center;
   gap: var(--sizing-xs);
-}
 
-a.link-icon svg {
+  & svg {
     stroke: var(--accent-color);
-}
+  }
 
-a.link-icon:hover svg,
+  &:hover svg,
-a.link-icon:active svg,
+  &:active svg,
-a.link-icon:focus svg {
+  &:focus svg {
     transform: rotate(0deg);
     stroke: var(--accent-color-hover);
+  }
 }
 
 .menu-primary .active,
@@ -485,28 +477,7 @@ article {
   }
 }
 
-.footnotes + .banner {
-  margin-top: 0 !important;
-}
-
-/* buttons */
-button {
-  appearance: none;
-  border: none;
-}
-
-/* selects */
-select {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  padding: var(--sizing-xs) var(--sizing-sm);
-}
-
 /* icons */
-svg {
-  stroke-width: var(--stroke-width-default);
-}
-
 .icon-center-vertical > svg {
   display: inline;
   vertical-align: middle;
@@ -539,10 +510,10 @@ li {
 
 /* images */
 .image-banner {
-  border: 1px solid var(--accent-color);
+  border: var(--border-default);
   height: auto;
-  display: block;
   width: 100%;
+  display: block;
 }
 
 /* pages */

src/assets/styles/components/buttons.css

@@ -1,4 +1,7 @@
 button {
+  appearance: none;
+  border: none;
+
   &:not(.theme-toggle) {
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);

src/assets/styles/components/forms.css

@@ -10,7 +10,7 @@ textarea {
   font-family: var(--font-mono);
   color: var(--text-color);
   background-color: var(--background-color);
-  border: 1px solid var(--accent-color);
+  border: var(--border-default);
   padding: var(--sizing-sm);
   font-size: var(--font-size-base);
   width: 100%;
@@ -29,6 +29,12 @@ textarea:focus-within {
   padding: calc(var(--sizing-sm) + 1px);
 }
 
+select {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  padding: var(--sizing-xs) var(--sizing-sm);
+}
+
 .search__form {
   margin-top: 0;
 

src/assets/styles/components/media-grid.css

@@ -89,7 +89,7 @@
   }
 
   & img {
-    border: 1px solid var(--accent-color);
+    border: var(--border-default);
     transition-property: border-color;
     transition-timing-function: var(--transition-ease-in-out);
     transition-duration: 300ms;

src/assets/styles/components/music-chart.css

@@ -26,7 +26,7 @@
     }
 
     & img {
-      border: 1px solid var(--accent-color);
+      border: var(--border-default);
       width: calc(var(--sizing-3xl) * 1.5);
       height: calc(var(--sizing-3xl) * 1.5);
     }
@@ -58,6 +58,14 @@
     & .title {
       font-weight: var(--font-weight-bold);
       line-height: 1.5;
+
+      &:focus-within {
+        outline: var(--outline);
+      }
+
+      & a {
+        outline: 0;
+      }
     }
 
     & .title,

src/assets/styles/defaults/vars.css

@@ -65,6 +65,12 @@
   --warning: #ff8c00;
   --webrings: #da70d6;
 
+  /* outline */
+  --outline: 2px dashed var(--accent-color);
+
+  /* borders */
+  --border-default: 1px solid var(--accent-color);
+
   /* fonts */
   --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
 

src/assets/styles/pages/books.css

@@ -52,7 +52,7 @@
 .book-entry,
 .book-focus {
   & img {
-    border: 1px solid var(--accent-color);
+    border: var(--border-default);
   }
 
   & .book-meta {

src/assets/styles/pages/music.css

@@ -7,7 +7,7 @@
   margin-top: var(--sizing-base);
 
   & img {
-    border: 1px solid var(--accent-color);
+    border: var(--border-default);
     width: 100%;
     height: auto;
     aspect-ratio: var(--aspect-ratio-square);
@@ -58,11 +58,11 @@
 }
 
 @media screen and (min-width: 768px) {
-  .artist-focus img {
+  .artist-focus {
+    & img {
       max-width: 240px;
     }
 
-  .artist-focus {
     & .artist-display {
       flex-direction: row;
       gap: var(--sizing-md);

src/assets/styles/pages/post.css

@@ -1,4 +1,3 @@
-/* footnotes */
 .footnotes-list {
   margin-bottom: 0;
   padding-left: 0;
@@ -15,3 +14,16 @@
 .footnote-item > p {
   display: inline;
 }
+
+sup.footnote-ref {
+  line-height: var(--line-height-xs);
+}
+
+sup.footnote-ref a,
+.footnote-backref {
+  text-decoration: none;
+}
+
+.footnotes + .banner {
+  margin-top: 0 !important;
+}

src/assets/styles/pages/watching.css

@@ -1,6 +1,6 @@
 .watching {
   & img {
-    border: 1px solid var(--accent-color);
+    border: var(--border-default);
     width: 100%;
     height: auto;
   }

src/assets/styles/pages/webrings.css

@@ -4,8 +4,4 @@
   h3 {
     margin: var(--sizing-2xl) 0 var(--sizing-lg);
   }
-
-  & > .webring-centered {
-    justify-content: center;
-  }
 }