diff --git a/style/shiny/base.css b/style/shiny/base.css index 3c1b388..29badbc 100644 --- a/style/shiny/base.css +++ b/style/shiny/base.css @@ -33,8 +33,7 @@ body { box-shadow: 0 0 3em var(--shadow); position: relative; - max-width: 1200px; - padding: 2em 1.5em; + padding: 2em 4em; margin: 2em auto 3.5em; border-radius: 1.5em; diff --git a/style/shiny/gallery.css b/style/shiny/gallery.css index 84f0012..5a9e0e6 100644 --- a/style/shiny/gallery.css +++ b/style/shiny/gallery.css @@ -4,11 +4,18 @@ --image-size: 200px; } +body { + --gap: 1em; + max-width: calc(5 * var(--image-size) + 4 * var(--gap)); + padding-left: 4em; + padding-right: 4em; +} + .grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fill, var(--image-size)); - grid-gap: 1em; + grid-gap: var(--gap); justify-content: center; } diff --git a/style/shiny/single.css b/style/shiny/single.css index 3c18809..a729f5d 100644 --- a/style/shiny/single.css +++ b/style/shiny/single.css @@ -4,6 +4,10 @@ --image-width: 1000px; } +body { + max-width: var(--image-width); +} + #mainfig { margin: 1em auto; width: min-content; @@ -61,6 +65,7 @@ padding: 0; display: flex; align-items: flex-start; + flex-flow: row wrap; } .alts ul { @@ -95,7 +100,7 @@ grid-template-columns: 10% auto; grid-gap: 2em; align-items: baseline; - width: calc(var(--image-width) - 10%); + max-width: 80%; margin: auto; } @@ -114,9 +119,11 @@ footer { font-size: 200%; border-width: 2px; } + footer { + font-size: 150%; + } } - @media (prefers-reduced-motion: no-preference) { .alts label { transition-property: color, background;