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",
"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": {

2
package.json
View file

@ -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": {

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

@ -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);
}

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

@ -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;

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

@ -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);
}
}

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

@ -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;
}

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

@ -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;
}
}

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

@ -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;

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

@ -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);

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

@ -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);
}

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

@ -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);
}
}

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

@ -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);
}
}

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

@ -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,

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

@ -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);
}
}

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

@ -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 {

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

@ -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);

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

@ -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) {

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

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

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

@ -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);
}
}
}

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

@ -33,7 +33,7 @@
}
& .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 {
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);
}
}

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

@ -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;

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

@ -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);
}
}

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

@ -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;

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

@ -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;

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

@ -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);

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