diff --git a/themes/2026/assets/css/base.css b/themes/2026/assets/css/base.css index 3fc1f9a6..339e27ec 100644 --- a/themes/2026/assets/css/base.css +++ b/themes/2026/assets/css/base.css @@ -4,6 +4,7 @@ html { } body { + --page-gutter: var(--space-4); font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.7; @@ -14,21 +15,25 @@ body { color-mix(in srgb, var(--color-background-wash) 4%, var(--color-background-deep)) 100% ); color: var(--color-text); - padding: var(--space-4); + padding: var(--page-gutter); } body > header, -body > main, -body > footer { +body > main { width: min(100%, var(--max-width)); margin-inline: auto; } -body > main, -body > footer { +body > main { margin-bottom: var(--space-6); } +body > footer { + width: auto; + margin-inline: calc(var(--page-gutter) * -1); + margin-bottom: calc(var(--page-gutter) * -1); +} + body > main { display: grid; grid-template-columns: minmax(0, 1fr); diff --git a/themes/2026/assets/css/footer.css b/themes/2026/assets/css/footer.css index 7567239e..50147015 100644 --- a/themes/2026/assets/css/footer.css +++ b/themes/2026/assets/css/footer.css @@ -3,11 +3,14 @@ body > footer { --color-footer-muted: #95a4b8; --color-footer-soft: #8796aa; display: grid; - gap: var(--space-2); + grid-template-columns: minmax(15rem, 16rem) minmax(0, 42rem); + justify-content: center; + align-items: stretch; + gap: var(--space-4) var(--space-5); border-top: 0; padding: var(--space-3) var(--space-3) var(--space-4); background: var(--color-footer-background); - text-align: center; + text-align: left; } body > footer > * { @@ -24,39 +27,108 @@ body > footer h2 { body > footer > nav { margin-top: 0; + display: grid; + align-content: center; + line-height: normal; +} + +body > footer > section { + display: grid; + align-content: center; + justify-items: center; + gap: var(--space-2); + text-align: center; +} + +body > footer > section > img { + display: block; +} + +body > footer > section > strong { + font-family: var(--font-heading); + font-size: 1.2rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + color: var(--color-footer-text); +} + +body > footer > section > p { + margin-top: 0; + color: var(--color-footer-soft); + font-size: 0.8rem; + line-height: 1.45; +} + +body > footer > section > p:first-of-type { + color: var(--color-footer-text); + font-size: 1rem; +} + +body > footer > section > p a { + color: var(--color-footer-text); + text-decoration: none; +} + +body > footer > section > p a:is(:hover, :focus-visible) { + color: var(--color-link-hover); + text-decoration: underline; } body > footer > nav > ul { list-style: none; display: grid; grid-template-columns: 1fr; - gap: 0.35rem; + gap: 0; + margin-top: 0; + margin-bottom: 0; + padding: 0; } body > footer > nav > ul > li { + display: grid; + grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); + align-items: first baseline; + gap: var(--space-1) var(--space-4); + padding-block: 0.35rem; +} + +body > footer > nav h2 { + grid-column: 1; display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: center; - gap: 0.15rem 0.65rem; - padding-top: 0; + justify-content: flex-end; + text-align: right; + line-height: 1.25; +} + +body > footer > nav > ul > li > div { + grid-column: 2; + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 0; } body > footer > nav h2 a, body > footer > nav h2 span { + display: inline-block; text-decoration: none; color: var(--color-footer-muted); font-size: 0.78rem; + line-height: 1.25; + text-align: inherit; } body > footer > nav ul ul { list-style: none; display: flex; flex-wrap: wrap; - justify-content: center; - row-gap: 0.15rem; + justify-content: flex-start; + row-gap: 0.1rem; column-gap: 0; margin-top: 0; + margin-bottom: 0; + padding: 0; } body > footer > nav ul ul a, @@ -82,80 +154,3 @@ body > footer > nav ul ul > li + li::before { margin-inline: 0.45rem; color: var(--color-border-strong); } - -body > footer > section:nth-of-type(1) { - margin-top: 0; -} - -body > footer > section:nth-of-type(1) > dl { - margin-top: 0.2rem; - display: grid; - grid-template-columns: 1fr; - gap: 0; -} - -body > footer > section:nth-of-type(1) > dl > div { - margin-top: 0; - border-left: 0; - padding-left: 0; - text-align: center; -} - -body > footer > section:nth-of-type(1) dt { - text-transform: uppercase; - letter-spacing: 0.05em; - font-size: 0.72rem; - color: var(--color-footer-soft); -} - -body > footer > section:nth-of-type(1) dd { - margin-top: 0.2rem; - color: var(--color-footer-text); - font-size: 0.88rem; - line-height: 1.3; -} - -body > footer > section:nth-of-type(1) dd > a { - color: inherit; - text-decoration: none; -} - -body > footer > section:nth-of-type(1) dd > a:is(:hover, :focus-visible) { - color: var(--color-link-hover); - text-decoration: underline; -} - -body > footer > section:nth-of-type(1) dd > time { - display: block; - margin-top: 0.2rem; - color: var(--color-footer-soft); - font-size: 0.72rem; - text-transform: uppercase; - letter-spacing: 0.04em; -} - -body > footer > p { - margin-top: var(--space-1); - border-top: 1px solid var(--color-border); - padding-top: var(--space-2); - color: var(--color-footer-soft); - font-size: 0.8rem; -} - -body > footer > p > span { - display: block; -} - -body > footer > p > span + span { - margin-top: 0.25rem; -} - -body > footer > p a { - color: var(--color-footer-text); - text-decoration: none; -} - -body > footer > p a:is(:hover, :focus-visible) { - color: var(--color-link-hover); - text-decoration: underline; -} diff --git a/themes/2026/assets/css/responsive.css b/themes/2026/assets/css/responsive.css index b42ee9c3..09173a94 100644 --- a/themes/2026/assets/css/responsive.css +++ b/themes/2026/assets/css/responsive.css @@ -112,20 +112,13 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } - body > footer > section:nth-of-type(1) > dl { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } } @media (max-width: 800px) { body { font-size: var(--font-size-body-mobile); - padding: var(--space-3); - } - - body > main, - body > footer { - margin-bottom: var(--space-5); + --page-gutter: var(--space-3); + padding: var(--page-gutter); } body > header > section.site-stats > ul { @@ -325,25 +318,10 @@ } body > footer { + grid-template-columns: 1fr; padding-top: var(--space-3); padding-inline: var(--space-1); - gap: var(--space-2); - } - - body > footer > section:nth-of-type(1) > dl { - grid-template-columns: 1fr; - } - - body > footer > section:nth-of-type(1) > dl > div { - border-left: 0; - border-top: 1px solid var(--color-border); - padding-left: 0; - padding-top: var(--space-1); - } - - body > footer > section:nth-of-type(1) > dl > div:first-child { - border-top: 0; - padding-top: 0; + gap: var(--space-4); } } @@ -351,7 +329,8 @@ @media (max-width: 480px) { body { font-size: 1.0625rem; - padding: var(--space-2); + --page-gutter: var(--space-2); + padding: var(--page-gutter); } body > header > section:first-of-type > a { @@ -430,6 +409,25 @@ max-width: 100%; } + body > footer > nav > ul > li { + grid-template-columns: 1fr; + align-items: start; + } + + body > footer > nav h2, + body > footer > nav h2 a, + body > footer > nav h2 span { + text-align: left; + } + + body > footer > nav > ul > li > div { + grid-column: 1; + } + + body > footer > nav ul ul { + flex-wrap: wrap; + } + body > main.home-main > section.home-rubrics > div > article > header { align-items: flex-start; flex-direction: column; diff --git a/themes/2026/layouts/_partials/footer.html b/themes/2026/layouts/_partials/footer.html index 5be7565e..2fd9a186 100644 --- a/themes/2026/layouts/_partials/footer.html +++ b/themes/2026/layouts/_partials/footer.html @@ -1,4 +1,19 @@ +{{- $site := .Site -}} +{{- $logoPath := $site.Params.logo | default "logo-large.png" -}} +{{- $logo := resources.GetMatch $logoPath -}}