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

Fix styling of blog, photos, term, ruby

Browse source 
So many fixes!
This commit is contained in:
Eryn Wells 2023-09-26 09:37:04 -07:00
parent b7070ccfd5
commit a9cfddec80
21 changed files with 212 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
@layer root {
:root {
--margin-min-width: var(--body-item-spacing);
--margin-max-width: 1fr;
}
:root {
--margin-min-width: var(--body-item-spacing);
--margin-max-width: 1fr;
}
@layer root {
main {
--content-columns: 5;
--gutter-width: 3rem;
@ -17,7 +17,12 @@
[wide-content-left-end gutter-start gutter-left-start]
var(--gutter-width)
[gutter-left-end content-start]
repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
repeat(var(--content-columns),
min(
calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
calc(var(--content-width) / var(--content-columns))
)
)
[content-end gutter-right-start]
var(--gutter-width)
[gutter-right-end gutter-end wide-content-right-start]
@ -66,7 +71,12 @@
}
}
main > :is(header, article, footer) {
grid-column: gutter-start / gutter-end;
main > * {
grid-column: content-start / content-end;
}
main > figure,
main > a.to-photo-post {
grid-column: wide-content-start / wide-content-end;
}
}