diff --git a/assets/app.css b/assets/app.css index 3cff64d..ce1cd7a 100644 --- a/assets/app.css +++ b/assets/app.css @@ -42,8 +42,12 @@ body { --air: rgba(var(--dark), 0.48); --fog: rgba(var(--dark), 0.12); + display: flex; + flex-direction: column; + min-height: 100vh; + padding-right: var(--gap); + padding-left: var(--gap); margin: 0; - padding-inline: var(--gap); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 2rem; @@ -54,6 +58,11 @@ body { transition: background 0.4s ease-out; } +body > * { + width: 100%; + margin-inline: auto; +} + .not-ready, .not-ready *, .not-ready *::before { @@ -64,6 +73,10 @@ body { html { font-size: 7px; } + + body { + min-height: -webkit-fill-available; + } } /* Reset @@ -151,7 +164,6 @@ img { display: flex; max-width: var(--wide); height: var(--header); - margin-inline: auto; } .header a { @@ -257,9 +269,8 @@ img { -------------------------------------------------- */ .main { max-width: var(--narrow); - min-height: calc(100vh - var(--header) - var(--footer)); - padding-block: var(--y-gap); - margin-inline: auto; + padding-top: var(--y-gap); + padding-bottom: var(--y-gap); } .page-title { @@ -366,9 +377,10 @@ img { display: flex; justify-content: space-between; margin-top: var(--y-gap); + margin-right: calc(var(--gap) * -1); + margin-left: calc(var(--gap) * -1); color: var(--white); background: var(--black); - margin-inline: calc(var(--gap) * -1); border-radius: 0.5rem; } @@ -624,16 +636,15 @@ img { /* Footer -------------------------------------------------- */ .footer { - position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--narrow); - min-height: var(--footer); + height: var(--footer); + margin-top: auto; font-size: 1.6rem; color: var(--lit); border-top: 1px solid var(--fog); - margin-inline: auto; } .footer p + p::before {