diff --git a/package-lock.json b/package-lock.json
index 7ab90114..d96c9241 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "coryd.dev",
- "version": "24.5.4",
+ "version": "24.5.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
- "version": "24.5.4",
+ "version": "24.5.6",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",
@@ -1973,9 +1973,9 @@
}
},
"node_modules/finalhandler": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
- "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.1.tgz",
+ "integrity": "sha512-NpHDfiu6jURpO56pYkM6DEvnBEA9jNrwj4v05Vjs5hmdqEB2/kRA3wugct7BMyqYydjN+kWunMhtTn+itVmxpA==",
"dev": true,
"license": "MIT",
"dependencies": {
diff --git a/package.json b/package.json
index f33f6e0d..4d04908e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "coryd.dev",
- "version": "24.5.4",
+ "version": "24.5.6",
"description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module",
"scripts": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 81e04b38..3300f5ea 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -49,7 +49,7 @@ body::-webkit-scrollbar {
}
p {
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
&.books,
&.concerts,
@@ -79,20 +79,20 @@ p {
& a {
text-decoration: underline;
text-decoration-style: dashed;
- text-underline-offset: var(--sizing-xs);
+ text-underline-offset: var(--spacing-xs);
}
}
blockquote {
font-size: var(--font-size-lg);
color: var(--gray-dark);
- padding-left: var(--sizing-lg);
+ padding-left: var(--spacing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark);
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
}
code {
- padding: var(--padding-xs);
+ padding: var(--spacing-xs);
color: var(--text-color-inverted);
background-color: var(--background-color-inverted);
border-radius: var(--border-radius-slight);
@@ -107,7 +107,7 @@ p:not(.flex-centered):not(.banner p) > svg {
}
:is(h1, h2, h3, h4, h5, h6):has(svg) {
- gap: var(--sizing-xs)
+ gap: var(--spacing-xs)
}
strong,
@@ -201,7 +201,7 @@ a:active,
:is(a):has(svg) {
display: inline-flex;
align-items: center;
- gap: var(--sizing-xs);
+ gap: var(--spacing-xs);
& svg {
stroke: var(--accent-color);
@@ -218,7 +218,7 @@ a:active,
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced);
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
}
h1 { font-size: var(--font-size-2xl); }
@@ -230,7 +230,7 @@ h6 { font-size: var(--font-size-sm); }
.section-header-wrapper {
justify-content: space-between;
- margin: var(--sizing-xl) 0 var(--sizing-lg);
+ margin: var(--spacing-xl) 0 var(--spacing-lg);
& .section-header {
margin: 0;
@@ -238,11 +238,11 @@ h6 { font-size: var(--font-size-sm); }
}
.section-header {
- margin: var(--sizing-xl) 0 var(--sizing-lg);
+ margin: var(--spacing-xl) 0 var(--spacing-lg);
line-height: 1;
&.posts {
- margin: 0 0 var(--sizing-lg);
+ margin: 0 0 var(--spacing-lg);
}
}
@@ -251,7 +251,7 @@ hr {
height: 1px;
background-color: var(--gray-light);
border: 0;
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
& + .section-header {
margin-top: 0;
@@ -288,7 +288,7 @@ tr:not(:last-child) {
th,
td {
- padding: var(--padding-sm);
+ padding: var(--spacing-sm);
min-width: max-content;
word-break: break-word;
width: 100%;
@@ -314,7 +314,7 @@ td {
}
td {
- min-width: calc(var(--sizing-3xl) * 2);
+ min-width: calc(var(--spacing-3xl) * 2);
&:first-child {
background-color: var(--background-color);
@@ -335,7 +335,7 @@ th {
/* header */
.main-title {
width: 100%;
- padding-top: var(--sizing-3xl);
+ padding-top: var(--spacing-3xl);
display: flex;
flex-direction: row;
align-items: center;
@@ -358,7 +358,7 @@ th {
/* layout */
.default-wrapper {
- padding-top: var(--sizing-2xl);
+ padding-top: var(--spacing-2xl);
& .posts-wrapper article:last-of-type,
& .article-widget-wrapper:last-of-type {
@@ -370,7 +370,7 @@ th {
}
& > a + h2 {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
}
}
@@ -389,7 +389,7 @@ main {
.status,
article {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
.status,
@@ -403,7 +403,7 @@ article {
.article-widget-wrapper {
border-bottom: 1px solid var(--gray-light);
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
& article {
border-bottom: none;
@@ -412,14 +412,14 @@ article {
footer {
& p:first-of-type {
- margin: var(--sizing-3xl) 0 var(--sizing-lg);
+ margin: var(--spacing-3xl) 0 var(--spacing-lg);
font-size: var(--font-size-sm);
}
& nav {
&.social {
- gap: var(--sizing-md);
- margin-bottom: var(--sizing-lg);
+ gap: var(--spacing-md);
+ margin-bottom: var(--spacing-lg);
width: 100%;
& svg {
@@ -433,11 +433,11 @@ footer {
&.sub-pages {
font-size: var(--font-size-sm);
- padding-bottom: var(--sizing-3xl);
+ padding-bottom: var(--spacing-3xl);
& span:not(.active) {
- margin-left: var(--sizing-sm);
- margin-right: var(--sizing-sm);
+ margin-left: var(--spacing-sm);
+ margin-right: var(--spacing-sm);
}
}
}
@@ -458,19 +458,19 @@ article {
display: block;
color: var(--gray-dark);
font-size: var(--font-size-sm);
- margin-right: var(--sizing-xs);
+ margin-right: var(--spacing-xs);
}
}
/* lists */
ul, ol {
list-style-position: inside;
- margin: var(--margin-top-base-horizontal-zero);
- padding-left: var(--sizing-base);
+ margin: var(--margin-vertical-base-horizontal-zero);
+ padding-left: var(--spacing-base);
& li {
- margin-top: var(--sizing-lg);
- margin-bottom: var(--sizing-lg);
+ margin-top: var(--spacing-lg);
+ margin-bottom: var(--spacing-lg);
}
}
@@ -486,7 +486,7 @@ ul, ol {
.highlight-text {
color: var(--color-lightest);
background-color: var(--accent-color);
- padding: var(--padding-xs);
+ padding: var(--spacing-xs);
border-radius: var(--border-radius-slight);
}
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index b5c06ee0..157e3f83 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -1,8 +1,8 @@
.badge-grid {
display: grid;
- gap: var(--sizing-md);
+ gap: var(--spacing-md);
grid-template-columns: repeat(3, 1fr);
- margin-top: var(--sizing-2xl);
+ margin-top: var(--spacing-2xl);
& > * {
display: flex;
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 0551039e..a6e07e9a 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -1,15 +1,15 @@
* + .banner,
:not(* + .banner) .banner:first-of-type {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
}
.banner:has(+ *),
:not(* + .banner) .banner:last-of-type {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
.banner {
- padding: var(--padding-md);
+ padding: var(--spacing-md);
border: 1px solid;
border-radius: var(--border-radius-slight);
@@ -27,7 +27,7 @@
vertical-align: middle;
height: var(--sizing-lg);
width: var(--sizing-lg);
- margin-right: var(--sizing-sm);
+ margin-right: var(--spacing-sm);
}
}
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 38320198..f30e464b 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -13,7 +13,7 @@ button,
&:not(.theme-toggle) {
border: 2px solid var(--accent-color);
border-radius: var(--border-radius-full);
- padding: var(--sizing-xs) var(--sizing-md);
+ padding: var(--spacing-xs) var(--spacing-md);
cursor: pointer;
display: inline-flex;
flex-direction: row;
@@ -42,7 +42,7 @@ button,
&:not(.theme-toggle, .active):focus-within {
transition-property: none;
outline: var(--outline-default);
- padding: calc(var(--sizing-xs) + 2px) calc(var(--sizing-md) + 2px);
+ padding: calc(var(--spacing-xs) + 2px) calc(var(--spacing-md) + 2px);
border: 0;
}
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 3c585e90..96ade4e4 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -15,7 +15,7 @@ textarea {
background-color: var(--background-color);
border: var(--border-default);
border-radius: var(--border-radius-slight);
- padding: var(--padding-sm);
+ padding: var(--spacing-sm);
width: 100%;
}
@@ -25,14 +25,14 @@ input[type="email"]:has(+ *),
input[type="search"]:has(+ *),
textarea:has(+ *),
form:has(+ *) {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
input:focus,
input:focus-within,
textarea:focus,
textarea:focus-within {
- padding: calc(var(--sizing-sm) + 1px);
+ padding: calc(var(--spacing-sm) + 1px);
}
input:focus,
@@ -50,7 +50,7 @@ select {
border: 1px solid var(--text-color);
border-radius: var(--border-radius-slight);
background-color: var(--background-color);
- padding: var(--sizing-xs) var(--sizing-sm);
+ padding: var(--spacing-xs) var(--spacing-sm);
}
.search__form {
@@ -58,11 +58,11 @@ select {
}
.search__results {
- margin: 0 0 var(--sizing-base);
+ margin: 0 0 var(--spacing-base);
padding: 0;
list-style: none;
& li {
- margin: var(--sizing-sm) 0;
+ margin: var(--spacing-sm) 0;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index b04d45b1..7ef336b6 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -5,8 +5,8 @@
.media-grid {
display: grid;
- gap: var(--sizing-sm);
- margin-bottom: var(--sizing-base);
+ gap: var(--spacing-sm);
+ margin-bottom: var(--spacing-base);
&.no-pagination {
margin-bottom: 0;
@@ -77,8 +77,8 @@
& .meta-text {
position: absolute;
z-index: 2;
- padding: 0 var(--sizing-sm);
- bottom: var(--sizing-sm);
+ padding: 0 var(--spacing-sm);
+ bottom: var(--spacing-sm);
width: 100%;
box-sizing: border-box;
diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css
index 79476a9f..8915a8e9 100644
--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
@@ -4,7 +4,7 @@
list-style: none;
margin: 0;
padding: 0;
- gap: var(--sizing-md);
+ gap: var(--spacing-md);
& > li {
margin: 0;
@@ -25,7 +25,7 @@
.menu-button-container {
display: none;
outline: none;
- margin-left: var(--sizing-md);
+ margin-left: var(--spacing-md);
& svg {
cursor: pointer;
@@ -75,7 +75,7 @@
top: 0;
left: 0;
gap: 0;
- margin-top: calc(var(--sizing-3xl) * 2.25);
+ margin-top: calc(var(--spacing-3xl) * 2.25);
flex-direction: column;
width: 100%;
z-index: 3;
@@ -85,7 +85,7 @@
align-items: center;
justify-content: center;
margin: 0;
- padding: var(--sizing-sm) 0;
+ padding: var(--spacing-sm) 0;
width: 100%;
color: var(--text-color);
background: var(--background-color);
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index 95d47e03..8cdf1c52 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -14,12 +14,12 @@
inset: 0;
overflow: scroll;
border-radius: var(--border-radius-slight);
- padding: var(--sizing-lg) var(--sizing-2xl);
+ padding: var(--spacing-lg) var(--spacing-2xl);
& .modal-close {
position: absolute;
- top: var(--sizing-lg);
- right: var(--sizing-lg);
+ top: var(--spacing-lg);
+ right: var(--spacing-lg);
height: var(--sizing-svg-base);
width: var(--sizing-svg-base);
}
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index 3aa4138f..9d74638f 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@@ -1,5 +1,5 @@
.music-chart {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
& ol {
padding-left: 0;
@@ -17,11 +17,11 @@
align-items: start;
&:not(:last-of-type) {
- margin-bottom: var(--sizing-md);
+ margin-bottom: var(--spacing-md);
}
& .progress-bar-wrapper {
- margin-top: var(--sizing-sm);
+ margin-top: var(--spacing-sm);
max-width: 40%;
}
@@ -39,7 +39,7 @@
& .meta,
& .presentation {
justify-content: start;
- gap: var(--sizing-md);
+ gap: var(--spacing-md);
}
& .meta {
@@ -91,16 +91,16 @@
}
& .timestamp {
- margin-top: var(--sizing-sm);
+ margin-top: var(--spacing-sm);
margin-left: 0;
}
}
&.grid {
display: grid;
- gap: var(--sizing-sm);
+ gap: var(--spacing-sm);
grid-template-columns: repeat(2, 1fr);
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
& .item .meta {
max-width: 80%;
@@ -142,7 +142,7 @@
}
& .timestamp {
- margin-left: var(--sizing-lg);
+ margin-left: var(--spacing-lg);
text-align: right;
white-space: nowrap;
}
@@ -152,7 +152,7 @@
}
& .progress-bar-wrapper {
- margin-left: var(--sizing-lg);
+ margin-left: var(--spacing-lg);
}
}
diff --git a/src/assets/styles/components/progress-bar.css b/src/assets/styles/components/progress-bar.css
index bddfd543..38421546 100644
--- a/src/assets/styles/components/progress-bar.css
+++ b/src/assets/styles/components/progress-bar.css
@@ -4,9 +4,9 @@
width: 100%;
background-color: rgba(217, 222, 228, .6);
border-radius: var(--border-radius-full);
- overflow: hidden;
& .progress-bar {
background-color: var(--accent-color);
+ border-radius: var(--border-radius-full);
}
}
\ No newline at end of file
diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css
index 36771b37..09db3feb 100644
--- a/src/assets/styles/components/tab-buttons.css
+++ b/src/assets/styles/components/tab-buttons.css
@@ -10,11 +10,11 @@
input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
- margin-right: var(--sizing-xs);
+ margin-right: var(--spacing-xs);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css
index 558be6d7..b1bf05f7 100644
--- a/src/assets/styles/components/text-toggle.css
+++ b/src/assets/styles/components/text-toggle.css
@@ -3,7 +3,7 @@
position: relative;
height: 500px;
overflow: hidden;
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
& p:first-of-type {
margin-top: 0;
@@ -22,6 +22,6 @@
}
& + button[data-toggle-button]:has(+ *) {
- margin: 0 0 var(--sizing-base);
+ margin: 0 0 var(--spacing-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 bd035995..908a6909 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -2,7 +2,7 @@ theme-toggle {
display: flex;
width: var(--sizing-svg-base);
height: var(--sizing-svg-base);
- margin-left: var(--sizing-md);
+ margin-left: var(--spacing-md);
}
.theme-toggle {
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 9991ef6a..ecb35f27 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -108,12 +108,16 @@
--sizing-svg-sm: 18px;
--sizing-svg-base: 24px;
- --padding-xs: var(--sizing-xs);
- --padding-sm: var(--sizing-sm);
- --padding-md: var(--sizing-md);
- --padding-lg: var(--sizing-lg);
+ --spacing-xs: var(--sizing-xs);
+ --spacing-sm: var(--sizing-sm);
+ --spacing-md: var(--sizing-md);
+ --spacing-lg: var(--sizing-lg);
+ --spacing-base: var(--sizing-base);
+ --spacing-xl: var(--sizing-xl);
+ --spacing-2xl: var(--sizing-2xl);
+ --spacing-3xl: var(--sizing-3xl);
- --margin-top-base-horizontal-zero: var(--sizing-base) 0;
+ --margin-vertical-base-horizontal-zero: var(--spacing-base) 0;
/* radii */
--border-radius-slight: var(--sizing-xs);
diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl
index 364bffbc..f84b8e03 100644
--- a/src/assets/styles/feed.xsl
+++ b/src/assets/styles/feed.xsl
@@ -18,12 +18,16 @@
--sizing-2xl: 2rem;
--sizing-3xl: 2.25rem;
- --padding-xs: var(--sizing-xs);
- --padding-sm: var(--sizing-sm);
- --padding-md: var(--sizing-md);
- --padding-lg: var(--sizing-lg);
+ --spacing-xs: var(--sizing-xs);
+ --spacing-sm: var(--sizing-sm);
+ --spacing-md: var(--sizing-md);
+ --spacing-lg: var(--sizing-lg);
+ --spacing-base: var(--sizing-base);
+ --spacing-xl: var(--sizing-xl);
+ --spacing-2xl: var(--sizing-2xl);
+ --spacing-3xl: var(--sizing-3xl);
- --margin-top-base-horizontal-zero: var(--sizing-base) 0;
+ --margin-vertical-base-horizontal-zero: var(--sizing-base) 0;
--border-radius-slight: var(--sizing-xs);
--border-radius-full: 9999px;
@@ -169,7 +173,7 @@
}
main footer {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
main footer hr {
@@ -177,7 +181,7 @@
}
.default-wrapper {
- padding-top: var(--sizing-2xl);
+ padding-top: var(--spacing-2xl);
}
.default-wrapper > p:first-of-type {
@@ -185,7 +189,7 @@
}
.main-title {
- padding-top: var(--sizing-3xl);
+ padding-top: var(--spacing-3xl);
}
.main-title h1 {
@@ -205,7 +209,7 @@
h1, h2, h3 {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced);
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
a {
@@ -243,13 +247,13 @@
}
.item {
- padding: var(--margin-top-base-horizontal-zero);
+ padding: var(--spacing-base) 0;
border-bottom: 1px solid var(--border-color);
}
.item h3 {
margin-top: 0;
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
.item p:first-of-type {
@@ -270,17 +274,17 @@
width: 100%;
height: auto;
display: block;
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
}
p {
- margin-bottom: var(--sizing-base)
+ margin-bottom: var(--spacing-base)
}
p a {
text-decoration: underline;
text-decoration-style: dashed;
- text-underline-offset: var(--sizing-xs);
+ text-underline-offset: var(--spacing-xs);
}
p:last-of-type {
@@ -296,28 +300,28 @@
font-size: var(--font-size-lg);
word-break: break-word;
color: var(--gray-dark);
- padding-left: var(--sizing-lg);
+ padding-left: var(--spacing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark);
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
}
hr {
height: 1px;
background-color: var(--border-color);
border: 0;
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
}
.highlight-text {
color: var(--color-lightest);
background-color: var(--accent-color);
- padding: var(--padding-xs);
+ padding: var(--spacing-xs);
}
pre {
- padding: var(--sizing-base);
+ padding: var(--spacing-base);
overflow: auto;
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
font-size: var(--body-font-size);
}
@@ -346,7 +350,7 @@
}
pre.small {
- padding: var(--padding-md);
+ padding: var(--spacing-md);
}
@media screen and (min-width: 768px) {
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 1b3e18cb..2440a15a 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -3,7 +3,7 @@
}
.avatar-wrapper {
- margin-bottom: var(--sizing-sm);
+ margin-bottom: var(--spacing-sm);
width: 100%;
justify-content: center;
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index 5c8bf161..9fa6c2f0 100644
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: var(--sizing-sm);
+ gap: var(--spacing-sm);
&:last-of-type {
border-bottom: 0;
@@ -64,7 +64,7 @@
& .book-meta {
display: flex;
flex-direction: column;
- gap: var(--sizing-sm);
+ gap: var(--spacing-sm);
& p {
&.title {
@@ -91,15 +91,15 @@
}
.book-focus {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
border-bottom: 0;
& .book-display {
display: flex;
flex-direction: column;
align-items: center;
- gap: var(--sizing-base);
- margin-bottom: var(--sizing-base);
+ gap: var(--spacing-base);
+ margin-bottom: var(--spacing-base);
& .book-meta {
width: 100%;
@@ -119,7 +119,7 @@
@media screen and (min-width: 768px) {
.book-entry {
flex-direction: row;
- gap: var(--sizing-base);
+ gap: var(--spacing-base);
align-items: start;
& .book-meta {
@@ -131,7 +131,7 @@
}
& .description {
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
}
}
}
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index bdd6931c..f904943f 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -33,7 +33,7 @@
}
& .column.description {
- padding-right: var(--sizing-xl);
+ padding-right: var(--spacing-xl);
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css
index 34fd9081..49045298 100644
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
@@ -1,13 +1,13 @@
.link-grid {
display: grid;
- gap: var(--sizing-sm);
+ gap: var(--spacing-sm);
grid-template-columns: repeat(1, minmax(0, 1fr));
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
& .link-box {
border: 1px solid var(--gray-light);
border-radius: var(--border-radius-slight);
- padding: var(--sizing-xs) var(--sizing-sm);
+ padding: var(--spacing-xs) var(--spacing-sm);
}
}
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 13d597d5..757853c7 100644
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@@ -8,7 +8,7 @@
}
.artist-focus {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
& img {
border: var(--border-default);
@@ -21,14 +21,14 @@
& .artist-display {
display: flex;
flex-direction: column;
- gap: var(--sizing-xs);
- margin-bottom: var(--sizing-base);
+ gap: var(--spacing-xs);
+ margin-bottom: var(--spacing-base);
& .artist-meta {
display: flex;
flex-direction: column;
- gap: var(--sizing-sm);
- margin-top: var(--sizing-base);
+ gap: var(--spacing-sm);
+ margin-top: var(--spacing-base);
& p {
margin: 0;
@@ -77,7 +77,7 @@ p.concerts + ul + hr {
& .artist-display {
flex-direction: row;
- gap: var(--sizing-md);
+ gap: var(--spacing-md);
& .artist-meta {
margin-top: 0;
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 2d06ca4d..9d2d2d75 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -6,7 +6,7 @@ p + .associated-media,
img + .associated-media,
.banner + .associated-media,
youtube-video + .associated-media {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
border-top: var(--border-gray)
}
@@ -25,11 +25,11 @@ youtube-video + .associated-media {
}
& ~ youtube-video {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
}
& + .associated-media {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
border-top: var(--border-gray);
}
}
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index b6576581..d6589cfe 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -29,8 +29,8 @@ a:active > .watching.hero::after {
& .meta-text {
color: white;
position: absolute;
- left: var(--sizing-sm);
- bottom: var(--sizing-sm);
+ left: var(--spacing-sm);
+ bottom: var(--spacing-sm);
z-index: 2;
display: flex;
flex-direction: column;
@@ -42,7 +42,7 @@ a:active > .watching.hero::after {
& .subheader {
font-size: var(--font-size-sm);
display: inline-flex;
- gap: var(--sizing-xs)
+ gap: var(--spacing-xs)
}
& .header,
@@ -71,9 +71,9 @@ a:active > .watching.hero::after {
&.grid {
display: grid;
- gap: var(--sizing-sm);
+ gap: var(--spacing-sm);
grid-template-columns: repeat(2, minmax(0, 1fr));
- margin-bottom: var(--sizing-base);
+ margin-bottom: var(--spacing-base);
& a {
display: flex;
@@ -97,8 +97,8 @@ a:active > .watching.hero::after {
& .meta-text {
position: absolute;
z-index: 2;
- padding: 0 var(--sizing-sm);
- bottom: var(--sizing-sm);
+ padding: 0 var(--spacing-sm);
+ bottom: var(--spacing-sm);
width: 100%;
box-sizing: border-box;
display: flex;
@@ -118,7 +118,7 @@ a:active > .watching.hero::after {
}
.subheader {
- gap: var(--sizing-xs);
+ gap: var(--spacing-xs);
}
& .rating {
@@ -153,7 +153,7 @@ a:active > .watching.hero::after {
}
.watching-focus {
- margin-top: var(--sizing-base);
+ margin-top: var(--spacing-base);
border-bottom: 0;
& img {
@@ -163,8 +163,8 @@ a:active > .watching.hero::after {
& .watching-meta {
display: flex;
flex-direction: column;
- gap: var(--sizing-sm);
- margin: var(--margin-top-base-horizontal-zero);
+ gap: var(--spacing-sm);
+ margin: var(--margin-vertical-base-horizontal-zero);
& p {
margin: 0;
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
index 6a3af2a9..75612456 100644
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
@@ -1,8 +1,8 @@
.webring-wrapper {
- margin: var(--margin-top-base-horizontal-zero);
+ margin: var(--margin-vertical-base-horizontal-zero);
& .webring-navigation {
- gap: var(--sizing-sm);
+ gap: var(--spacing-sm);
& a {
display: flex;
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index 6bbc86d2..58deab35 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
@@ -16,7 +16,7 @@ pre[class*="language-"] {
}
pre[class*="language-"] {
- padding: var(--padding-lg);
+ padding: var(--spacing-lg);
margin: var(--sizing-xl) 0;
overflow: auto;
background: var(--gray-darkest);
@@ -24,7 +24,7 @@ pre[class*="language-"] {
}
:not(pre) > code[class*="language-"] {
- padding: var(--padding-xs);
+ padding: var(--spacing-xs);
white-space: normal;
background: var(--gray-darkest);
border-radius: var(--border-radius-slight);
diff --git a/src/includes/partials/footer.liquid b/src/includes/partials/footer.liquid
index e1c8bf8d..b2ba3267 100644
--- a/src/includes/partials/footer.liquid
+++ b/src/includes/partials/footer.liquid
@@ -1,4 +1,4 @@
-<footer{% unless updated %} style="margin-top:var(--sizing-3xl)"{% endunless %}>
+<footer{% unless updated %} style="margin-top:var(--spacing-3xl)"{% endunless %}>
{%- if updated -%}
<p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
{%- endif -%}