diff --git a/package-lock.json b/package-lock.json
index 4708fb70..bdad8d2f 100644
--- a/package-lock.json
+++ b/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",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
- "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
+ "version": "1.4.816",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
+ "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
"dev": true,
"license": "ISC"
},
diff --git a/package.json b/package.json
index 18a25313..804a993f 100644
--- a/package.json
+++ b/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": {
diff --git a/src/_includes/partials/widgets/youtube-player.liquid b/src/_includes/partials/widgets/youtube-player.liquid
index c20de7ef..867ebe94 100644
--- a/src/_includes/partials/widgets/youtube-player.liquid
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index b7001ad8..f6ab445f 100644
--- a/src/assets/styles/base/index.css
+++ b/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;
}
diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css
index 828b6f94..356e0302 100644
--- a/src/assets/styles/components/addon-links.css
+++ b/src/assets/styles/components/addon-links.css
@@ -3,12 +3,14 @@
gap: var(--sizing-sm);
grid-template-columns: repeat(1, 1fr);
- & div > h2 {
- margin-top: 0;
- }
+ & div {
+ & > h2 {
+ margin-top: 0;
+ }
- & div:last-of-type h2 {
- margin-top: var(--sizing-base);
+ &:last-of-type h2 {
+ margin-top: var(--sizing-base);
+ }
}
& .link-list {
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 3600760a..834cb6e0 100644
--- a/src/assets/styles/components/banners.css
+++ b/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 {
- &.warning {
- --border-color: var(--warning);
- }
-
+ &.npm,
+ &.old-post,
+ &.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,
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 68000f96..29bc326c 100644
--- a/src/assets/styles/components/buttons.css
+++ b/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;
}
diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css
index 2ff8cbd9..ef7a3c03 100644
--- a/src/assets/styles/components/text-toggle.css
+++ b/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 {
- 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-button] {
- margin-bottom: var(--sizing-base) !important;
+button[data-toggle-button] {
+ margin-bottom: var(--sizing-base);
}
\ No newline at end of file
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 2f8c7aab..2459c790 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -25,8 +25,8 @@ theme-toggle {
transform: rotate(8deg);
}
- & > .light svg { stroke: var(--sun) !important; }
- & > .dark svg { stroke: var(--moon) !important; }
+ & > .light svg { stroke: var(--sun); }
+ & > .dark svg { stroke: var(--moon); }
& > .light ,
& > .dark {
diff --git a/src/assets/styles/components/youtube-video.css b/src/assets/styles/components/youtube-video.css
deleted file mode 100644
index 7b3a00ed..00000000
--- a/src/assets/styles/components/youtube-video.css
+++ /dev/null
@@ -1,3 +0,0 @@
-youtube-video {
- margin-bottom: var(--sizing-base);
-}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index f74cd3eb..9ef27649 100644
--- a/src/assets/styles/index.css
+++ b/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/youtube-video.css') layer(components);
\ No newline at end of file
+@import url('./components/theme-toggle.css') layer(components);
\ No newline at end of file
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index 93ce139f..c3811a3a 100644
--- a/src/assets/styles/pages/books.css
+++ b/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;
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 729747a4..730a3455 100644
--- a/src/assets/styles/pages/post.css
+++ b/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 {
- display: inline;
+ & .footnotes-list {
+ 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;
}
\ No newline at end of file