chore: semantic spacing

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

View file

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

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

View file

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

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

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;

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

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;

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;