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

chore: spacing + split out page styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-17 14:06:38 -07:00
parent 2d7facfd30
commit dd11c4c463
No known key found for this signature in database
6 changed files with 85 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
.toggle-wrapper {
display: flex;
position: relative;
margin-bottom: calc(var(--sizing-base) + 44px);

3
src/assets/styles/index.css
View file

@ -19,8 +19,9 @@
@import url('./pages/blogroll.css') layer(page);
@import url('./pages/contact.css') layer(page);
@import url('./pages/links.css') layer(page);
@import url('./pages/media.css') layer(page);
@import url('./pages/music.css') layer(page);
@import url('./pages/post.css') layer(page);
@import url('./pages/watching.css') layer(page);
@import url('./pages/webrings.css') layer(page);
/* component styles */

73
src/assets/styles/pages/music.css Normal file
View file

@ -0,0 +1,73 @@
.artist-focus,
.genre-focus {
border-bottom: 0;
}
.artist-focus {
margin-bottom: var(--sizing-base);
& img {
border: 1px solid var(--accent-color);
width: 100%;
height: auto;
}
& .artist-display {
display: flex;
flex-direction: column;
gap: var(--sizing-xs);
margin: var(--sizing-base) 0;
& .artist-meta {
display: flex;
flex-direction: column;
gap: var(--sizing-sm);
margin-top: var(--sizing-md);
& p {
margin: 0;
&.title {
font-size: var(--font-size-xl);
}
&.sub-meta {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
svg {
width: 18px;
height: 18px;
margin-right: var(--sizing-xs);
}
}
&.favorite {
color: var(--favorite);
}
}
}
}
table th:first-of-type,
table td:first-of-type {
width: calc(var(--sizing-3xl) * 6);
}
}
@media screen and (min-width: 768px) {
.artist-focus img {
max-width: 240px;
}
.artist-focus {
& .artist-display {
flex-direction: row;
gap: var(--sizing-md);
& .artist-meta {
margin-top: 0;
}
}
}
}

74
src/assets/styles/pages/media.css → src/assets/styles/pages/watching.css
View file

@ -1,80 +1,10 @@
.artist-focus,
.genre-focus,
.watching-focus {
border-bottom: 0;
}
.artist-focus,
.watching {
& img {
border: 1px solid var(--accent-color);
width: 100%;
height: auto;
}
}
.artist-focus {
& .artist-display {
display: flex;
flex-direction: column;
gap: var(--sizing-xs);
margin-top: var(--sizing-base);
& .artist-meta {
display: flex;
flex-direction: column;
gap: var(--sizing-sm);
margin-top: var(--sizing-md);
& p {
margin: 0;
&.title {
font-size: var(--font-size-xl);
}
&.sub-meta {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
svg {
width: 18px;
height: 18px;
margin-right: var(--sizing-xs);
}
}
&.favorite {
color: var(--favorite);
}
}
}
}
table th:first-of-type,
table td:first-of-type {
width: calc(var(--sizing-3xl) * 6);
}
}
@media screen and (min-width: 768px) {
.artist-focus img {
max-width: 240px;
}
.artist-focus {
& .artist-display {
flex-direction: row;
gap: var(--sizing-md);
& .artist-meta {
margin-top: 0;
}
}
}
}
.watching {
&.page-header {
margin-bottom: var(--sizing-base);
}
@ -181,6 +111,8 @@
}
.watching-focus {
border-bottom: 0;
& .watching-meta {
display: flex;
flex-direction: column;
@ -210,4 +142,4 @@
.watching.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}