chore: css cleanup

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.8.2",
+  "version": "19.8.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.8.2",
+      "version": "19.8.3",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -1157,9 +1157,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.815",
+      "version": "1.4.816",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
-      "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
+      "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
       "dev": true,
       "license": "ISC"
     },

package.json

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

src/_includes/partials/widgets/youtube-player.liquid

@@ -1,3 +1,3 @@
 <script type="module" src="/assets/scripts/components/youtube-video-element.js"></script>
-<style>youtube-video{aspect-ratio:16/9!important;width:100%!important}</style>
+<style>youtube-video{aspect-ratio:16/9;width:100%;margin-bottom:var(--sizing-base)}</style>
 <youtube-video controls src="{{ url }}"></youtube-video>

src/assets/styles/base/index.css

@@ -5,7 +5,6 @@ body {
   letter-spacing: -.05rem;
   word-spacing: -.125rem;
   background: var(--background-color);
-  accent-color: var(--accent-color);
   scrollbar-width: thin;
   scrollbar-color: var(--accent-color) var(--gray-light);
 }
@@ -84,13 +83,34 @@ code {
   background-color: var(--background-color-inverted);
 }
 
+/* social icons */
+:is(body, html, nav) a {
+  &.at > svg { stroke: var(--brand-proton); }
+  &.brand-github > svg { stroke: var(--brand-github); }
+  &.brand-npm > svg { stroke: var(--brand-npm); }
+  &.brand-mastodon > svg { stroke: var(--brand-mastodon); }
+  &.article > svg { stroke: var(--posts) }
+  &.books > svg { stroke: var(--books); }
+  &.brain > svg { stroke: var(--brand-listenbrainz); }
+  &.clock-hour-3 > svg { stroke: var(--now); }
+  &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); }
+  &.device-tv > svg { stroke: var(--tv); }
+  &.favorite > svg { stroke: var(--favorite) }
+  &.headphones > svg { stroke: var(--music); }
+  &.heart-handshake > svg { stroke: var(--webrings); }
+  &.info-circle > svg { stroke: var(--about) }
+  &.link > svg { stroke: var(--links); }
+  &.rss > svg { stroke: var(--brand-rss); }
+  &.search > svg { stroke: var(--search) }
+}
+
 :is(body, html, nav .search) svg {
   stroke: var(--text-color);
 }
 
-:is(h1, h2, h3, h4, h5, h6) > svg {
+:is(h1, h2, h3, h4, h5, h6) svg {
   margin-right: var(--sizing-xs);
-  stroke-width: var(--stroke-width-bold) !important;
+  stroke-width: var(--stroke-width-bold);
 }
 
 strong,
@@ -196,20 +216,6 @@ h6 { font-size: var(--font-size-sm) }
   }
 }
 
-.section-header-buttons {
-  display: flex;
-  align-items: center;
-  gap: var(--sizing-sm);
-
-  & > button {
-    margin-bottom: 0 !important;
-
-    &:last-of-type {
-      margin-right: 0 !important;
-    }
-  }
-}
-
 /* dividers */
 hr {
   height: 1px;
@@ -331,33 +337,14 @@ nav .active svg {
 
 .menu-primary .active,
 nav .active {
-  color: var(--accent-color) !important;
+  color: var(--accent-color);
 }
 
 .menu-primary .active svg,
 nav .active svg {
-  stroke: var(--accent-color-hover) !important;
+  stroke: var(--accent-color-hover);
 }
 
-/* social icons */
-.at svg { stroke: var(--brand-proton) !important; }
-.brand-github svg { stroke: var(--brand-github) !important; }
-.brand-npm svg { stroke: var(--brand-npm) !important; }
-.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
-.article svg { stroke: var(--posts) !important }
-.books svg { stroke: var(--books) !important; }
-.brain svg { stroke: var(--brand-listenbrainz) !important; }
-.clock-hour-3 svg { stroke: var(--now) !important; }
-.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
-.device-tv svg { stroke: var(--tv) !important; }
-.favorite svg { stroke: var(--favorite) !important }
-.headphones svg { stroke: var(--music) !important; }
-.heart-handshake svg { stroke: var(--webrings) !important; }
-.info-circle svg { stroke: var(--about) !important }
-.link svg { stroke: var(--links) !important; }
-.rss svg { stroke: var(--brand-rss) !important; }
-.search svg { stroke: var(--search) !important }
-
 /* layout */
 .default-wrapper {
   padding-top: var(--sizing-2xl);
@@ -400,10 +387,6 @@ article {
   }
 }
 
-article h3 {
-  margin: 0;
-}
-
 footer {
   & .explainer {
     margin: var(--sizing-3xl) 0 var(--sizing-lg);
@@ -447,6 +430,10 @@ article {
     transition-property: color;
   }
 
+  & h3 {
+    margin: 0;
+  }
+
   & a h2:hover,
   & a h2:focus,
   & a h2:active {
@@ -468,7 +455,7 @@ article {
     & > svg {
       width: var(--sizing-lg);
       height: var(--sizing-lg);
-      stroke: var(--gray-dark) !important;
+      stroke: var(--gray-dark);
     }
   }
 
@@ -546,12 +533,6 @@ li {
   align-items: center;
 }
 
-.flex-between {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
 .justify-centered {
   justify-content: center;
 }

src/assets/styles/components/addon-links.css

@@ -3,12 +3,14 @@
   gap: var(--sizing-sm);
   grid-template-columns: repeat(1, 1fr);
 
-  & div > h2 {
+  & div {
-    margin-top: 0;
+    & > h2 {
-  }
+      margin-top: 0;
+    }
 
-  &  div:last-of-type h2 {
+    &:last-of-type h2 {
-    margin-top: var(--sizing-base);
+      margin-top: var(--sizing-base);
+    }
   }
 
   & .link-list {

src/assets/styles/components/banners.css

@@ -1,3 +1,7 @@
+.footnotes + .banner {
+  margin-top: 0;
+}
+
 .banner {
   margin: var(--sizing-base) 0;
   padding: var(--sizing-md);
@@ -22,35 +26,36 @@
     }
   }
 
-  &.old-post {
-    border-color: var(--gray-light);
-  }
-
-  &.warning,
   &.error,
-  &.npm,
   &.github,
-  &.rss {
+  &.npm,
-    &.warning {
+  &.old-post,
-      --border-color: var(--warning);
+  &.rss,
-    }
+  &.warning {
-
     &.error {
       --border-color: var(--error);
     }
 
-    &.npm {
-      --border-color: var(--brand-npm);
-    }
-
     &.github {
       --border-color: var(--brand-github);
     }
 
+    &.npm {
+      --border-color: var(--brand-npm);
+    }
+
+    &.old-post {
+      --border-color: var(--gray-light);
+    }
+
     &.rss {
       --border-color: var(--brand-rss);
     }
 
+    &.warning {
+      --border-color: var(--warning);
+    }
+
     border-color: var(--border-color);
 
     & p a:hover,

src/assets/styles/components/buttons.css

@@ -1,8 +1,23 @@
+.section-header-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--sizing-sm);
+
+  & > button {
+    margin-bottom: 0;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
+
 button {
   appearance: none;
   border: none;
 
   &:not(.theme-toggle) {
+    border: 2px solid var(--accent-color);
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);
     margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@@ -17,7 +32,6 @@ button {
     color: var(--color-lightest);
     background-color: var(--accent-color);
     appearance: none;
-    border: 2px solid var(--accent-color);
     transition-property: border;
   }
 

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

@@ -7,19 +7,19 @@
   & p:first-of-type {
     margin-top: 0;
   }
+
+  &::after {
+    position: absolute;
+    z-index: 1;
+    content: '';
+    top: 0;
+    left: 0;
+    box-shadow: inset 0 -120px 50px -60px var(--background-color);
+    width: 100%;
+    height: 100%;
+  }
 }
 
-[data-toggle-content].text-toggle-hidden::after {
+button[data-toggle-button] {
-  position: absolute;
+  margin-bottom: var(--sizing-base);
-  z-index: 1;
-  content: '';
-  top: 0;
-  left: 0;
-  box-shadow: inset 0 -120px 50px -60px var(--background-color);
-  width: 100%;
-  height: 100%;
-}
-
-[data-toggle-button] {
-  margin-bottom: var(--sizing-base) !important;
 }

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

@@ -25,8 +25,8 @@ theme-toggle {
     transform: rotate(8deg);
   }
 
-  & > .light svg { stroke: var(--sun) !important; }
+  & > .light svg { stroke: var(--sun); }
-  & > .dark svg { stroke: var(--moon) !important; }
+  & > .dark svg { stroke: var(--moon); }
 
   & > .light ,
   & > .dark {

src/assets/styles/components/youtube-video.css

@@ -1,3 +0,0 @@
-youtube-video {
-  margin-bottom: var(--sizing-base);
-}

src/assets/styles/index.css

@@ -36,5 +36,4 @@
 @import url('./components/paginator.css') layer(components);
 @import url('./components/progress-bar.css') layer(components);
 @import url('./components/text-toggle.css') layer(components);
-@import url('./components/theme-toggle.css') layer(components);
+@import url('./components/theme-toggle.css') layer(components);
-@import url('./components/youtube-video.css') layer(components);

src/assets/styles/pages/books.css

@@ -1,8 +1,8 @@
 .book-entry {
   display: flex;
   flex-direction: column;
-  gap: var(--sizing-sm);
   align-items: center;
+  gap: var(--sizing-sm);
 
   &:last-of-type {
     border-bottom: 0;

src/assets/styles/pages/post.css

@@ -1,18 +1,18 @@
-.footnotes-list {
-  margin-bottom: 0;
-  padding-left: 0;
-
-  & li:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .footnotes {
   padding-bottom: var(--sizing-base);
-}
 
-.footnote-item > p {
+  & .footnotes-list {
-  display: inline;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    & li:last-child {
+      margin-bottom: 0;
+    }
+
+    & .footnote-item > p {
+      display: inline;
+    }
+  }
 }
 
 sup.footnote-ref {
@@ -22,8 +22,4 @@ sup.footnote-ref {
 sup.footnote-ref a,
 .footnote-backref {
   text-decoration: none;
-}
-
-.footnotes + .banner {
-  margin-top: 0 !important;
 }