chore: semantic spacing
This commit is contained in:
parent
ad70959201
commit
8bba16778e
27 changed files with 148 additions and 140 deletions
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-bottom: var(--sizing-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
& .column.description {
|
||||
padding-right: var(--sizing-xl);
|
||||
padding-right: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue