diff --git a/assets/styles/root/002_columns.css b/assets/styles/root/002_columns.css index 4626806..b08e46d 100644 --- a/assets/styles/root/002_columns.css +++ b/assets/styles/root/002_columns.css @@ -106,6 +106,23 @@ 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 { grid-column: gutter-start; } @@ -114,6 +131,34 @@ 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 { height: auto; max-width: 100%; @@ -175,7 +220,7 @@ margin-inline-start: 0; margin-block-start: calc(var(--body-item-spacing) / 2); } - + table { border-collapse: collapse; margin-inline: auto; @@ -239,6 +284,12 @@ } } + .p5-sketch { + display: block; + position: relative; + width: 100%; + } + .page { gap: var(--body-item-spacing) 0; } @@ -266,7 +317,7 @@ 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; } @@ -283,4 +334,10 @@ .post .title { grid-column: content-start / content-end; } + + .youtube iframe { + aspect-ratio: 16 / 9; + margin-bottom: -3px; + width: 100%; + } } diff --git a/assets/styles/root/050_figures.css b/assets/styles/root/050_figures.css deleted file mode 100644 index 75d36e3..0000000 --- a/assets/styles/root/050_figures.css +++ /dev/null @@ -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%; - } -} diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index 5487b7b..d654763 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -56,6 +56,7 @@ figcaption { font-size: 80%; line-height: var(--line-height); + text-align: center; } figure .highlight .cl {