From 9df10a074f7388f5488778955ddf24cf1c7730a6 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sun, 30 Jun 2024 20:30:41 -0700
Subject: [PATCH] chore: css consolidation + tokens
---
package-lock.json | 10 ++--
package.json | 2 +-
src/_includes/webrings/css-joy.liquid | 2 +-
src/_includes/webrings/the-claw.liquid | 4 +-
src/assets/styles/base/index.css | 53 +++++---------------
src/assets/styles/components/buttons.css | 3 ++
src/assets/styles/components/forms.css | 8 ++-
src/assets/styles/components/media-grid.css | 2 +-
src/assets/styles/components/music-chart.css | 10 +++-
src/assets/styles/defaults/vars.css | 6 +++
src/assets/styles/pages/books.css | 2 +-
src/assets/styles/pages/music.css | 10 ++--
src/assets/styles/pages/post.css | 14 +++++-
src/assets/styles/pages/watching.css | 2 +-
src/assets/styles/pages/webrings.css | 4 --
15 files changed, 67 insertions(+), 65 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index d94f70f3..db88cb93 100644
--- a/package-lock.json
+++ b/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",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
- "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+ "version": "1.0.30001639",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
+ "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
"dev": true,
"funding": [
{
diff --git a/package.json b/package.json
index a844d17d..92d2fdf9 100644
--- a/package.json
+++ b/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": {
diff --git a/src/_includes/webrings/css-joy.liquid b/src/_includes/webrings/css-joy.liquid
index a8642545..d74f5700 100644
--- a/src/_includes/webrings/css-joy.liquid
+++ b/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>
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
index 99dadbbd..e4598b43 100644
--- a/src/_includes/webrings/the-claw.liquid
+++ b/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>
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 4ba3a901..b7001ad8 100644
--- a/src/assets/styles/base/index.css
+++ b/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 {
- stroke: var(--accent-color);
-}
+ & svg {
+ stroke: var(--accent-color);
+ }
-a.link-icon:hover svg,
-a.link-icon:active svg,
-a.link-icon:focus svg {
- transform: rotate(0deg);
- stroke: var(--accent-color-hover);
+ &:hover svg,
+ &:active 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 */
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index b016cf08..68000f96 100644
--- a/src/assets/styles/components/buttons.css
+++ b/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);
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 8c7d6bbd..633aa59b 100644
--- a/src/assets/styles/components/forms.css
+++ b/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;
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index c5029cad..23adab91 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/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;
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index 3cb2bd0e..341893cd 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/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,
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 76bdb510..c3456cf6 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/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;
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index d079f6fa..93ce139f 100644
--- a/src/assets/styles/pages/books.css
+++ b/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 {
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index b7b4324a..a665a4a5 100644
--- a/src/assets/styles/pages/music.css
+++ b/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 {
- max-width: 240px;
- }
-
.artist-focus {
+ & img {
+ max-width: 240px;
+ }
+
& .artist-display {
flex-direction: row;
gap: var(--sizing-md);
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index d57b92fe..729747a4 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -1,4 +1,3 @@
-/* footnotes */
.footnotes-list {
margin-bottom: 0;
padding-left: 0;
@@ -14,4 +13,17 @@
.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;
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index 51c354f8..b81f4315 100644
--- a/src/assets/styles/pages/watching.css
+++ b/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;
}
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
index f5fc4ab6..a4708402 100644
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
@@ -4,8 +4,4 @@
h3 {
margin: var(--sizing-2xl) 0 var(--sizing-lg);
}
-
- & > .webring-centered {
- justify-content: center;
- }
}
\ No newline at end of file