cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: semantic spacing

Browse source
This commit is contained in:
Cory Dransfeldt 2024-09-02 11:26:43 -07:00
parent ad70959201
commit 8bba16778e
No known key found for this signature in database
27 changed files with 148 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.5.4", "version": "24.5.6",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.5.4", "version": "24.5.6",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.5.0", "@cdransf/api-text": "^1.5.0",
@ -1973,9 +1973,9 @@
} }
}, },
"node_modules/finalhandler": { "node_modules/finalhandler": {
"version": "1.2.0", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.1.tgz",
"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", "integrity": "sha512-NpHDfiu6jURpO56pYkM6DEvnBEA9jNrwj4v05Vjs5hmdqEB2/kRA3wugct7BMyqYydjN+kWunMhtTn+itVmxpA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "24.5.4", "version": "24.5.6",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"scripts": { "scripts": {

62
src/assets/styles/base/index.css
View file

@ -49,7 +49,7 @@ body::-webkit-scrollbar {
} }
p { p {
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
&.books, &.books,
&.concerts, &.concerts,
@ -79,20 +79,20 @@ p {
& a { & a {
text-decoration: underline; text-decoration: underline;
text-decoration-style: dashed; text-decoration-style: dashed;
text-underline-offset: var(--sizing-xs); text-underline-offset: var(--spacing-xs);
} }
} }
blockquote { blockquote {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
color: var(--gray-dark); color: var(--gray-dark);
padding-left: var(--sizing-lg); padding-left: var(--spacing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark); border-left: var(--sizing-xs) solid var(--gray-dark);
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
} }
code { code {
padding: var(--padding-xs); padding: var(--spacing-xs);
color: var(--text-color-inverted); color: var(--text-color-inverted);
background-color: var(--background-color-inverted); background-color: var(--background-color-inverted);
border-radius: var(--border-radius-slight); 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) { :is(h1, h2, h3, h4, h5, h6):has(svg) {
gap: var(--sizing-xs) gap: var(--spacing-xs)
} }
strong, strong,
@ -201,7 +201,7 @@ a:active,
:is(a):has(svg) { :is(a):has(svg) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--sizing-xs); gap: var(--spacing-xs);
& svg { & svg {
stroke: var(--accent-color); stroke: var(--accent-color);
@ -218,7 +218,7 @@ a:active,
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced); 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); } h1 { font-size: var(--font-size-2xl); }
@ -230,7 +230,7 @@ h6 { font-size: var(--font-size-sm); }
.section-header-wrapper { .section-header-wrapper {
justify-content: space-between; justify-content: space-between;
margin: var(--sizing-xl) 0 var(--sizing-lg); margin: var(--spacing-xl) 0 var(--spacing-lg);
& .section-header { & .section-header {
margin: 0; margin: 0;
@ -238,11 +238,11 @@ h6 { font-size: var(--font-size-sm); }
} }
.section-header { .section-header {
margin: var(--sizing-xl) 0 var(--sizing-lg); margin: var(--spacing-xl) 0 var(--spacing-lg);
line-height: 1; line-height: 1;
&.posts { &.posts {
margin: 0 0 var(--sizing-lg); margin: 0 0 var(--spacing-lg);
} }
} }
@ -251,7 +251,7 @@ hr {
height: 1px; height: 1px;
background-color: var(--gray-light); background-color: var(--gray-light);
border: 0; border: 0;
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
& + .section-header { & + .section-header {
margin-top: 0; margin-top: 0;
@ -288,7 +288,7 @@ tr:not(:last-child) {
th, th,
td { td {
padding: var(--padding-sm); padding: var(--spacing-sm);
min-width: max-content; min-width: max-content;
word-break: break-word; word-break: break-word;
width: 100%; width: 100%;
@ -314,7 +314,7 @@ td {
} }
td { td {
min-width: calc(var(--sizing-3xl) * 2); min-width: calc(var(--spacing-3xl) * 2);
&:first-child { &:first-child {
background-color: var(--background-color); background-color: var(--background-color);
@ -335,7 +335,7 @@ th {
/* header */ /* header */
.main-title { .main-title {
width: 100%; width: 100%;
padding-top: var(--sizing-3xl); padding-top: var(--spacing-3xl);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -358,7 +358,7 @@ th {
/* layout */ /* layout */
.default-wrapper { .default-wrapper {
padding-top: var(--sizing-2xl); padding-top: var(--spacing-2xl);
& .posts-wrapper article:last-of-type, & .posts-wrapper article:last-of-type,
& .article-widget-wrapper:last-of-type { & .article-widget-wrapper:last-of-type {
@ -370,7 +370,7 @@ th {
} }
& > a + h2 { & > a + h2 {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
} }
} }
@ -389,7 +389,7 @@ main {
.status, .status,
article { article {
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
.status, .status,
@ -403,7 +403,7 @@ article {
.article-widget-wrapper { .article-widget-wrapper {
border-bottom: 1px solid var(--gray-light); border-bottom: 1px solid var(--gray-light);
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& article { & article {
border-bottom: none; border-bottom: none;
@ -412,14 +412,14 @@ article {
footer { footer {
& p:first-of-type { & 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); font-size: var(--font-size-sm);
} }
& nav { & nav {
&.social { &.social {
gap: var(--sizing-md); gap: var(--spacing-md);
margin-bottom: var(--sizing-lg); margin-bottom: var(--spacing-lg);
width: 100%; width: 100%;
& svg { & svg {
@ -433,11 +433,11 @@ footer {
&.sub-pages { &.sub-pages {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
padding-bottom: var(--sizing-3xl); padding-bottom: var(--spacing-3xl);
& span:not(.active) { & span:not(.active) {
margin-left: var(--sizing-sm); margin-left: var(--spacing-sm);
margin-right: var(--sizing-sm); margin-right: var(--spacing-sm);
} }
} }
} }
@ -458,19 +458,19 @@ article {
display: block; display: block;
color: var(--gray-dark); color: var(--gray-dark);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
margin-right: var(--sizing-xs); margin-right: var(--spacing-xs);
} }
} }
/* lists */ /* lists */
ul, ol { ul, ol {
list-style-position: inside; list-style-position: inside;
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
padding-left: var(--sizing-base); padding-left: var(--spacing-base);
& li { & li {
margin-top: var(--sizing-lg); margin-top: var(--spacing-lg);
margin-bottom: var(--sizing-lg); margin-bottom: var(--spacing-lg);
} }
} }
@ -486,7 +486,7 @@ ul, ol {
.highlight-text { .highlight-text {
color: var(--color-lightest); color: var(--color-lightest);
background-color: var(--accent-color); background-color: var(--accent-color);
padding: var(--padding-xs); padding: var(--spacing-xs);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
} }

4
src/assets/styles/components/badge-grid.css
View file

@ -1,8 +1,8 @@
.badge-grid { .badge-grid {
display: grid; display: grid;
gap: var(--sizing-md); gap: var(--spacing-md);
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
margin-top: var(--sizing-2xl); margin-top: var(--spacing-2xl);
& > * { & > * {
display: flex; display: flex;

8
src/assets/styles/components/banners.css
View file

@ -1,15 +1,15 @@
* + .banner, * + .banner,
:not(* + .banner) .banner:first-of-type { :not(* + .banner) .banner:first-of-type {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
} }
.banner:has(+ *), .banner:has(+ *),
:not(* + .banner) .banner:last-of-type { :not(* + .banner) .banner:last-of-type {
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
.banner { .banner {
padding: var(--padding-md); padding: var(--spacing-md);
border: 1px solid; border: 1px solid;
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
@ -27,7 +27,7 @@
vertical-align: middle; vertical-align: middle;
height: var(--sizing-lg); height: var(--sizing-lg);
width: var(--sizing-lg); width: var(--sizing-lg);
margin-right: var(--sizing-sm); margin-right: var(--spacing-sm);
} }
} }

4
src/assets/styles/components/buttons.css
View file

@ -13,7 +13,7 @@ button,
&:not(.theme-toggle) { &:not(.theme-toggle) {
border: 2px solid var(--accent-color); border: 2px solid var(--accent-color);
border-radius: var(--border-radius-full); border-radius: var(--border-radius-full);
padding: var(--sizing-xs) var(--sizing-md); padding: var(--spacing-xs) var(--spacing-md);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@ -42,7 +42,7 @@ button,
&:not(.theme-toggle, .active):focus-within { &:not(.theme-toggle, .active):focus-within {
transition-property: none; transition-property: none;
outline: var(--outline-default); 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; border: 0;
} }

12
src/assets/styles/components/forms.css
View file

@ -15,7 +15,7 @@ textarea {
background-color: var(--background-color); background-color: var(--background-color);
border: var(--border-default); border: var(--border-default);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
padding: var(--padding-sm); padding: var(--spacing-sm);
width: 100%; width: 100%;
} }
@ -25,14 +25,14 @@ input[type="email"]:has(+ *),
input[type="search"]:has(+ *), input[type="search"]:has(+ *),
textarea:has(+ *), textarea:has(+ *),
form:has(+ *) { form:has(+ *) {
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
input:focus, input:focus,
input:focus-within, input:focus-within,
textarea:focus, textarea:focus,
textarea:focus-within { textarea:focus-within {
padding: calc(var(--sizing-sm) + 1px); padding: calc(var(--spacing-sm) + 1px);
} }
input:focus, input:focus,
@ -50,7 +50,7 @@ select {
border: 1px solid var(--text-color); border: 1px solid var(--text-color);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
background-color: var(--background-color); background-color: var(--background-color);
padding: var(--sizing-xs) var(--sizing-sm); padding: var(--spacing-xs) var(--spacing-sm);
} }
.search__form { .search__form {
@ -58,11 +58,11 @@ select {
} }
.search__results { .search__results {
margin: 0 0 var(--sizing-base); margin: 0 0 var(--spacing-base);
padding: 0; padding: 0;
list-style: none; list-style: none;
& li { & li {
margin: var(--sizing-sm) 0; margin: var(--spacing-sm) 0;
} }
} }

8
src/assets/styles/components/media-grid.css
View file

@ -5,8 +5,8 @@
.media-grid { .media-grid {
display: grid; display: grid;
gap: var(--sizing-sm); gap: var(--spacing-sm);
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
&.no-pagination { &.no-pagination {
margin-bottom: 0; margin-bottom: 0;
@ -77,8 +77,8 @@
& .meta-text { & .meta-text {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
padding: 0 var(--sizing-sm); padding: 0 var(--spacing-sm);
bottom: var(--sizing-sm); bottom: var(--spacing-sm);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;

8
src/assets/styles/components/menu.css
View file

@ -4,7 +4,7 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: var(--sizing-md); gap: var(--spacing-md);
& > li { & > li {
margin: 0; margin: 0;
@ -25,7 +25,7 @@
.menu-button-container { .menu-button-container {
display: none; display: none;
outline: none; outline: none;
margin-left: var(--sizing-md); margin-left: var(--spacing-md);
& svg { & svg {
cursor: pointer; cursor: pointer;
@ -75,7 +75,7 @@
top: 0; top: 0;
left: 0; left: 0;
gap: 0; gap: 0;
margin-top: calc(var(--sizing-3xl) * 2.25); margin-top: calc(var(--spacing-3xl) * 2.25);
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
@ -85,7 +85,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
padding: var(--sizing-sm) 0; padding: var(--spacing-sm) 0;
width: 100%; width: 100%;
color: var(--text-color); color: var(--text-color);
background: var(--background-color); background: var(--background-color);

6
src/assets/styles/components/modal.css
View file

@ -14,12 +14,12 @@
inset: 0; inset: 0;
overflow: scroll; overflow: scroll;
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
padding: var(--sizing-lg) var(--sizing-2xl); padding: var(--spacing-lg) var(--spacing-2xl);
& .modal-close { & .modal-close {
position: absolute; position: absolute;
top: var(--sizing-lg); top: var(--spacing-lg);
right: var(--sizing-lg); right: var(--spacing-lg);
height: var(--sizing-svg-base); height: var(--sizing-svg-base);
width: var(--sizing-svg-base); width: var(--sizing-svg-base);
} }

18
src/assets/styles/components/music-chart.css
View file

@ -1,5 +1,5 @@
.music-chart { .music-chart {
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& ol { & ol {
padding-left: 0; padding-left: 0;
@ -17,11 +17,11 @@
align-items: start; align-items: start;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: var(--sizing-md); margin-bottom: var(--spacing-md);
} }
& .progress-bar-wrapper { & .progress-bar-wrapper {
margin-top: var(--sizing-sm); margin-top: var(--spacing-sm);
max-width: 40%; max-width: 40%;
} }
@ -39,7 +39,7 @@
& .meta, & .meta,
& .presentation { & .presentation {
justify-content: start; justify-content: start;
gap: var(--sizing-md); gap: var(--spacing-md);
} }
& .meta { & .meta {
@ -91,16 +91,16 @@
} }
& .timestamp { & .timestamp {
margin-top: var(--sizing-sm); margin-top: var(--spacing-sm);
margin-left: 0; margin-left: 0;
} }
} }
&.grid { &.grid {
display: grid; display: grid;
gap: var(--sizing-sm); gap: var(--spacing-sm);
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& .item .meta { & .item .meta {
max-width: 80%; max-width: 80%;
@ -142,7 +142,7 @@
} }
& .timestamp { & .timestamp {
margin-left: var(--sizing-lg); margin-left: var(--spacing-lg);
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
@ -152,7 +152,7 @@
} }
& .progress-bar-wrapper { & .progress-bar-wrapper {
margin-left: var(--sizing-lg); margin-left: var(--spacing-lg);
} }
} }

2
src/assets/styles/components/progress-bar.css
View file

@ -4,9 +4,9 @@
width: 100%; width: 100%;
background-color: rgba(217, 222, 228, .6); background-color: rgba(217, 222, 228, .6);
border-radius: var(--border-radius-full); border-radius: var(--border-radius-full);
overflow: hidden;
& .progress-bar { & .progress-bar {
background-color: var(--accent-color); background-color: var(--accent-color);
border-radius: var(--border-radius-full);
} }
} }

4
src/assets/styles/components/tab-buttons.css
View file

@ -10,11 +10,11 @@
input[id="tracks-recent"] ~ [for="tracks-recent"], input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] { 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"]) { 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, #tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,

4
src/assets/styles/components/text-toggle.css
View file

@ -3,7 +3,7 @@
position: relative; position: relative;
height: 500px; height: 500px;
overflow: hidden; overflow: hidden;
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
& p:first-of-type { & p:first-of-type {
margin-top: 0; margin-top: 0;
@ -22,6 +22,6 @@
} }
& + button[data-toggle-button]:has(+ *) { & + button[data-toggle-button]:has(+ *) {
margin: 0 0 var(--sizing-base); margin: 0 0 var(--spacing-base);
} }
} }

2
src/assets/styles/components/theme-toggle.css
View file

@ -2,7 +2,7 @@ theme-toggle {
display: flex; display: flex;
width: var(--sizing-svg-base); width: var(--sizing-svg-base);
height: var(--sizing-svg-base); height: var(--sizing-svg-base);
margin-left: var(--sizing-md); margin-left: var(--spacing-md);
} }
.theme-toggle { .theme-toggle {

14
src/assets/styles/defaults/vars.css
View file

@ -108,12 +108,16 @@
--sizing-svg-sm: 18px; --sizing-svg-sm: 18px;
--sizing-svg-base: 24px; --sizing-svg-base: 24px;
--padding-xs: var(--sizing-xs); --spacing-xs: var(--sizing-xs);
--padding-sm: var(--sizing-sm); --spacing-sm: var(--sizing-sm);
--padding-md: var(--sizing-md); --spacing-md: var(--sizing-md);
--padding-lg: var(--sizing-lg); --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 */ /* radii */
--border-radius-slight: var(--sizing-xs); --border-radius-slight: var(--sizing-xs);

46
src/assets/styles/feed.xsl
View file

@ -18,12 +18,16 @@
--sizing-2xl: 2rem; --sizing-2xl: 2rem;
--sizing-3xl: 2.25rem; --sizing-3xl: 2.25rem;
--padding-xs: var(--sizing-xs); --spacing-xs: var(--sizing-xs);
--padding-sm: var(--sizing-sm); --spacing-sm: var(--sizing-sm);
--padding-md: var(--sizing-md); --spacing-md: var(--sizing-md);
--padding-lg: var(--sizing-lg); --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-slight: var(--sizing-xs);
--border-radius-full: 9999px; --border-radius-full: 9999px;
@ -169,7 +173,7 @@
} }
main footer { main footer {
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
main footer hr { main footer hr {
@ -177,7 +181,7 @@
} }
.default-wrapper { .default-wrapper {
padding-top: var(--sizing-2xl); padding-top: var(--spacing-2xl);
} }
.default-wrapper > p:first-of-type { .default-wrapper > p:first-of-type {
@ -185,7 +189,7 @@
} }
.main-title { .main-title {
padding-top: var(--sizing-3xl); padding-top: var(--spacing-3xl);
} }
.main-title h1 { .main-title h1 {
@ -205,7 +209,7 @@
h1, h2, h3 { h1, h2, h3 {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: var(--line-height-reduced); line-height: var(--line-height-reduced);
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
a { a {
@ -243,13 +247,13 @@
} }
.item { .item {
padding: var(--margin-top-base-horizontal-zero); padding: var(--spacing-base) 0;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.item h3 { .item h3 {
margin-top: 0; margin-top: 0;
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
.item p:first-of-type { .item p:first-of-type {
@ -270,17 +274,17 @@
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
} }
p { p {
margin-bottom: var(--sizing-base) margin-bottom: var(--spacing-base)
} }
p a { p a {
text-decoration: underline; text-decoration: underline;
text-decoration-style: dashed; text-decoration-style: dashed;
text-underline-offset: var(--sizing-xs); text-underline-offset: var(--spacing-xs);
} }
p:last-of-type { p:last-of-type {
@ -296,28 +300,28 @@
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
word-break: break-word; word-break: break-word;
color: var(--gray-dark); color: var(--gray-dark);
padding-left: var(--sizing-lg); padding-left: var(--spacing-lg);
border-left: var(--sizing-xs) solid var(--gray-dark); border-left: var(--sizing-xs) solid var(--gray-dark);
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
} }
hr { hr {
height: 1px; height: 1px;
background-color: var(--border-color); background-color: var(--border-color);
border: 0; border: 0;
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
} }
.highlight-text { .highlight-text {
color: var(--color-lightest); color: var(--color-lightest);
background-color: var(--accent-color); background-color: var(--accent-color);
padding: var(--padding-xs); padding: var(--spacing-xs);
} }
pre { pre {
padding: var(--sizing-base); padding: var(--spacing-base);
overflow: auto; overflow: auto;
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
font-size: var(--body-font-size); font-size: var(--body-font-size);
} }
@ -346,7 +350,7 @@
} }
pre.small { pre.small {
padding: var(--padding-md); padding: var(--spacing-md);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

2
src/assets/styles/pages/about.css
View file

@ -3,7 +3,7 @@
} }
.avatar-wrapper { .avatar-wrapper {
margin-bottom: var(--sizing-sm); margin-bottom: var(--spacing-sm);
width: 100%; width: 100%;
justify-content: center; justify-content: center;

14
src/assets/styles/pages/books.css
View file

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--sizing-sm); gap: var(--spacing-sm);
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
@ -64,7 +64,7 @@
& .book-meta { & .book-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sizing-sm); gap: var(--spacing-sm);
& p { & p {
&.title { &.title {
@ -91,15 +91,15 @@
} }
.book-focus { .book-focus {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
border-bottom: 0; border-bottom: 0;
& .book-display { & .book-display {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--sizing-base); gap: var(--spacing-base);
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& .book-meta { & .book-meta {
width: 100%; width: 100%;
@ -119,7 +119,7 @@
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.book-entry { .book-entry {
flex-direction: row; flex-direction: row;
gap: var(--sizing-base); gap: var(--spacing-base);
align-items: start; align-items: start;
& .book-meta { & .book-meta {
@ -131,7 +131,7 @@
} }
& .description { & .description {
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
} }
} }
} }

2
src/assets/styles/pages/contact.css
View file

@ -33,7 +33,7 @@
} }
& .column.description { & .column.description {
padding-right: var(--sizing-xl); padding-right: var(--spacing-xl);
} }
} }
} }

6
src/assets/styles/pages/links.css
View file

@ -1,13 +1,13 @@
.link-grid { .link-grid {
display: grid; display: grid;
gap: var(--sizing-sm); gap: var(--spacing-sm);
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& .link-box { & .link-box {
border: 1px solid var(--gray-light); border: 1px solid var(--gray-light);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
padding: var(--sizing-xs) var(--sizing-sm); padding: var(--spacing-xs) var(--spacing-sm);
} }
} }

12
src/assets/styles/pages/music.css
View file

@ -8,7 +8,7 @@
} }
.artist-focus { .artist-focus {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
& img { & img {
border: var(--border-default); border: var(--border-default);
@ -21,14 +21,14 @@
& .artist-display { & .artist-display {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sizing-xs); gap: var(--spacing-xs);
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& .artist-meta { & .artist-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sizing-sm); gap: var(--spacing-sm);
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
& p { & p {
margin: 0; margin: 0;
@ -77,7 +77,7 @@ p.concerts + ul + hr {
& .artist-display { & .artist-display {
flex-direction: row; flex-direction: row;
gap: var(--sizing-md); gap: var(--spacing-md);
& .artist-meta { & .artist-meta {
margin-top: 0; margin-top: 0;

6
src/assets/styles/pages/post.css
View file

@ -6,7 +6,7 @@ p + .associated-media,
img + .associated-media, img + .associated-media,
.banner + .associated-media, .banner + .associated-media,
youtube-video + .associated-media { youtube-video + .associated-media {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
border-top: var(--border-gray) border-top: var(--border-gray)
} }
@ -25,11 +25,11 @@ youtube-video + .associated-media {
} }
& ~ youtube-video { & ~ youtube-video {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
} }
& + .associated-media { & + .associated-media {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
border-top: var(--border-gray); border-top: var(--border-gray);
} }
} }

22
src/assets/styles/pages/watching.css
View file

@ -29,8 +29,8 @@ a:active > .watching.hero::after {
& .meta-text { & .meta-text {
color: white; color: white;
position: absolute; position: absolute;
left: var(--sizing-sm); left: var(--spacing-sm);
bottom: var(--sizing-sm); bottom: var(--spacing-sm);
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -42,7 +42,7 @@ a:active > .watching.hero::after {
& .subheader { & .subheader {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
display: inline-flex; display: inline-flex;
gap: var(--sizing-xs) gap: var(--spacing-xs)
} }
& .header, & .header,
@ -71,9 +71,9 @@ a:active > .watching.hero::after {
&.grid { &.grid {
display: grid; display: grid;
gap: var(--sizing-sm); gap: var(--spacing-sm);
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: var(--sizing-base); margin-bottom: var(--spacing-base);
& a { & a {
display: flex; display: flex;
@ -97,8 +97,8 @@ a:active > .watching.hero::after {
& .meta-text { & .meta-text {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
padding: 0 var(--sizing-sm); padding: 0 var(--spacing-sm);
bottom: var(--sizing-sm); bottom: var(--spacing-sm);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -118,7 +118,7 @@ a:active > .watching.hero::after {
} }
.subheader { .subheader {
gap: var(--sizing-xs); gap: var(--spacing-xs);
} }
& .rating { & .rating {
@ -153,7 +153,7 @@ a:active > .watching.hero::after {
} }
.watching-focus { .watching-focus {
margin-top: var(--sizing-base); margin-top: var(--spacing-base);
border-bottom: 0; border-bottom: 0;
& img { & img {
@ -163,8 +163,8 @@ a:active > .watching.hero::after {
& .watching-meta { & .watching-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sizing-sm); gap: var(--spacing-sm);
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
& p { & p {
margin: 0; margin: 0;

4
src/assets/styles/pages/webrings.css
View file

@ -1,8 +1,8 @@
.webring-wrapper { .webring-wrapper {
margin: var(--margin-top-base-horizontal-zero); margin: var(--margin-vertical-base-horizontal-zero);
& .webring-navigation { & .webring-navigation {
gap: var(--sizing-sm); gap: var(--spacing-sm);
& a { & a {
display: flex; display: flex;

4
src/assets/styles/plugins/prism.css
View file

@ -16,7 +16,7 @@ pre[class*="language-"] {
} }
pre[class*="language-"] { pre[class*="language-"] {
padding: var(--padding-lg); padding: var(--spacing-lg);
margin: var(--sizing-xl) 0; margin: var(--sizing-xl) 0;
overflow: auto; overflow: auto;
background: var(--gray-darkest); background: var(--gray-darkest);
@ -24,7 +24,7 @@ pre[class*="language-"] {
} }
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
padding: var(--padding-xs); padding: var(--spacing-xs);
white-space: normal; white-space: normal;
background: var(--gray-darkest); background: var(--gray-darkest);
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);

2
src/includes/partials/footer.liquid
View file

@ -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 -%} {%- if updated -%}
<p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p> <p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
{%- endif -%} {%- endif -%}