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

Move all the figure styles to columns and typography

Browse source
This commit is contained in:
Eryn Wells 2023-09-30 11:22:08 -07:00
parent 090eef5bee
commit 17f576406f
3 changed files with 60 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -106,6 +106,23 @@
padding-top: calc(var(--body-item-spacing) / 10); padding-top: calc(var(--body-item-spacing) / 10);
} }
figcaption:not(:empty) {
margin-block-start: 0.2em;
}
figure {
grid-column: gutter-start / gutter-end;
margin: 0;
margin-inline: 0;
min-width: fit-content;
overflow: hidden;
}
@media (max-width: 415px) {
figure {
grid-column: wide-content-start / wide-content-end;
}
}
figure.code .line > .ln { figure.code .line > .ln {
grid-column: gutter-start; grid-column: gutter-start;
} }
@ -114,6 +131,34 @@
grid-column: content-start / content-end; grid-column: content-start / content-end;
} }
figure > .container {
align-items: center;
display: flex;
gap: var(--body-item-spacing);
justify-content: center;
min-width: fit-content;
}
figure img {
display: block;
}
@media (max-width: 414px) {
figure img {
max-width: 100%;
}
}
figure svg {
width: 100%;
height: auto;
}
figure .youtube {
overflow: hidden;
max-width: var(--content-width);
width: 100%;
}
img { img {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
@ -175,7 +220,7 @@
margin-inline-start: 0; margin-inline-start: 0;
margin-block-start: calc(var(--body-item-spacing) / 2); margin-block-start: calc(var(--body-item-spacing) / 2);
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
margin-inline: auto; margin-inline: auto;
@ -239,6 +284,12 @@
} }
} }
.p5-sketch {
display: block;
position: relative;
width: 100%;
}
.page { .page {
gap: var(--body-item-spacing) 0; gap: var(--body-item-spacing) 0;
} }
@ -266,7 +317,7 @@
grid-column: gutter-start / gutter-end; grid-column: gutter-start / gutter-end;
} }
.page > :not(blockquote, figure.code, :has(> img)) { .page > :not(blockquote, figure, :has(> img)) {
grid-column: content-start / content-end; grid-column: content-start / content-end;
} }
@ -283,4 +334,10 @@
.post .title { .post .title {
grid-column: content-start / content-end; grid-column: content-start / content-end;
} }
.youtube iframe {
aspect-ratio: 16 / 9;
margin-bottom: -3px;
width: 100%;
}
} }

75
assets/styles/root/050_figures.css
View file

@ -1,75 +0,0 @@
@layer root {
figcaption {
text-align: center;
}
figcaption:not(:empty) {
margin-block-start: 0.2em;
}
figure {
grid-column: gutter-start / gutter-end;
margin: 0;
margin-inline: 0;
min-width: fit-content;
overflow: hidden;
}
@media (max-width: 415px) {
figure {
grid-column: wide-content-start / wide-content-end;
}
}
figure > .container {
align-items: center;
display: flex;
gap: var(--body-item-spacing);
justify-content: center;
min-width: fit-content;
}
figure.bordered {
padding: 0.5rem;
border: 2px solid #eee;
}
figure a,
figure a:hover {
border: 0;
}
figure img {
display: block;
height: auto;
}
@media (max-width: 414px) {
figure img {
max-width: 100%;
}
}
figure svg {
width: 100%;
height: auto;
}
figure .youtube {
overflow: hidden;
max-width: var(--content-width);
width: 100%;
}
.p5-sketch {
display: block;
position: relative;
width: 100%;
}
.youtube iframe {
aspect-ratio: 16 / 9;
margin-bottom: -3px;
width: 100%;
}
}

1
assets/styles/root/050_typography.css
View file

@ -56,6 +56,7 @@
figcaption { figcaption {
font-size: 80%; font-size: 80%;
line-height: var(--line-height); line-height: var(--line-height);
text-align: center;
} }
figure .highlight .cl { figure .highlight .cl {