eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Move a bunch of color stuff from typography to colors

Browse source
This commit is contained in:
Eryn Wells 2023-09-28 14:41:32 -07:00
parent cf0fd27172
commit c642a23ec3
3 changed files with 178 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

85
assets/styles/root/002_columns.css
View file

@ -1,6 +1,8 @@
:root {
--body-item-spacing: 4rem;
--content-width: 80rem;
--content-columns: 5;
--gutter-width: 3rem;
--list-item-block-gap: var(--body-item-spacing);
--margin-min-width: var(--body-item-spacing);
--margin-max-width: 1fr;
@ -9,9 +11,6 @@
@layer root {
main {
--content-columns: 5;
--gutter-width: 3rem;
display: grid;
grid-template-columns:
[margin-left]
@ -74,19 +73,6 @@
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
}
}
main > * {
grid-column: content-start / content-end;
}
main > figure,
main > a.to-photo-post {
grid-column: wide-content-start / wide-content-end;
}
p, ul {
grid-column: content-start / content-end;
}
}
@layer layout {
@ -140,6 +126,19 @@
width: 100%;
}
main > * {
grid-column: content-start / content-end;
}
main > figure,
main > a.to-photo-post {
grid-column: wide-content-start / wide-content-end;
}
p, ul {
grid-column: content-start / content-end;
}
nav.bulleted>li:first-child::before {
margin-inline: 0;
}
@ -175,6 +174,60 @@
padding-inline: 1rem;
}
.list .post header {
grid-column: wide-content-start / content-end;
}
@supports (grid-template-columns: subgrid) {
.list .post header {
display: grid;
grid-template-columns: subgrid;
}
}
.list .post time {
grid-column: wide-content-start;
justify-self: end;
}
@media (max-width: 960px) {
.list .post time {
grid-column: content-start / content-end;
justify-self: start;
}
}
.list {
gap: var(--list-item-block-gap) 0;
}
.list > h1,
.list > header {
grid-column: content-start / content-end;
}
.list > .post {
grid-column: wide-content-start / wide-content-end;
}
@supports (grid-template-columns: subgrid) {
.list > .post {
--body-item-spacing: 2rem;
display: grid;
grid-template-columns: subgrid;
gap: var(--body-item-spacing) 0;
}
}
.list .post time {
font-variant-numeric: tabular-nums;
}
@media (max-width: 960px) {
.list .post time {
line-height: var(--line-height);
}
}
.page {
gap: var(--body-item-spacing) 0;
}