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
Download patch file Download diff file Expand all files Collapse all files

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 {