Skip to content

Move the theme switcher into the site footer #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
osiewicz merged 1 commit into from
Sep 9, 2026
Merged

Move the theme switcher into the site footer #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions src/components/SiteFooter.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
---
// Match the homepage footer without repeating its contacts or primary action.
import ThemeToggle from "./ThemeToggle.astro";
---

<footer class="site-footer">
<div class="footer-inner">
<span>&copy; {new Date().getFullYear()} Wezel</span>

<nav aria-label="Footer">
<a href="/docs">Docs</a>{" "}
<a href="/blog">Blog</a>{" "}
<a href="https://status.wezel.build" rel="noopener">Status</a>{" "}
<a href="https://app.wezel.build">Open app</a>
</nav>
<div class="footer-actions">
<nav aria-label="Footer">
<a href="/docs">Docs</a>{" "}
<a href="/blog">Blog</a>{" "}
<a href="https://status.wezel.build" rel="noopener">Status</a>{" "}
<a href="https://app.wezel.build">Open app</a>
</nav>
<ThemeToggle />
</div>
</div>
</footer>

Expand All @@ -24,7 +27,7 @@

.footer-inner {
display: flex;
align-items: baseline;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
flex-wrap: wrap;
Expand All @@ -34,6 +37,13 @@
color: var(--color-ink-faint);
}

.footer-actions {
display: flex;
align-items: center;
gap: 1rem;
max-width: 100%;
}

.footer-inner nav {
display: flex;
align-items: center;
Expand Down
25 changes: 3 additions & 22 deletions src/components/SiteNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
---
import ThemeToggle from "./ThemeToggle.astro";

interface Props {
action?: { href: string; label: string };
}

const { action = { href: "/docs/installation", label: "Install CLI" } } = Astro.props;

// The site nav, shared by the landing header, the blog header and the docs
// header. It used to be duplicated in two places with a comment asking whoever
// touched one to remember the other, which is exactly the smell that says
// extract - the list had already drifted once (GitHub was dropped from the
// landing and left in the docs).
//
// Three clusters - destinations, chrome, action - separated by space rather
// than by a rule, per DOCS-DESIGN.md §2. Without the grouping the theme control
// and the brand marks read as nav items.
// Site destinations and the primary action share one navigation row.
//
// The {" "} between links is load-bearing. Astro trims the newline before a tag
// to nothing, so `gap` would otherwise be the only thing separating these words
Expand Down Expand Up @@ -49,10 +39,6 @@ const path = Astro.url.pathname;
}
</span>

<span class="nav-chrome">
<ThemeToggle />
</span>

<a href={action.href} class="header-cta">{action.label}</a>
</nav>

Expand All @@ -64,8 +50,7 @@ const path = Astro.url.pathname;
font-size: 0.95rem;
}

.nav-links,
.nav-chrome {
.nav-links {
display: inline-flex;
align-items: center;
}
Expand All @@ -74,10 +59,6 @@ const path = Astro.url.pathname;
gap: 1.6rem;
}

.nav-chrome {
gap: 1.25rem;
}

.header-nav a {
color: var(--color-ink-soft);
text-decoration: none;
Expand Down Expand Up @@ -112,7 +93,7 @@ const path = Astro.url.pathname;
}

@media (max-width: 40rem) {
.header-cta {
.header-nav {
display: none;
}
}
Expand Down
9 changes: 9 additions & 0 deletions src/components/ThemeToggle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border: 0;
background: transparent;
padding: 0;
Expand All @@ -79,6 +83,11 @@
color: var(--color-ink);
}

.theme-toggle:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}

.theme-toggle svg {
display: none;
}
Expand Down
21 changes: 0 additions & 21 deletions src/layouts/BlogLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import Base from "./Base.astro";
import SiteHeader from "../components/SiteHeader.astro";
import SiteFooter from "../components/SiteFooter.astro";
import ThemeToggle from "../components/ThemeToggle.astro";

interface Props {
title: string;
Expand All @@ -14,9 +13,6 @@ interface Props {

<Base {...Astro.props} bodyClass="blog-page">
<a class="blog-skip-link" href="#main-content">Skip to content</a>
<div class="page-tools">
<ThemeToggle />
</div>
<SiteHeader />
<main class="blog-shell" id="main-content" tabindex="-1">
<slot />
Expand All @@ -40,23 +36,6 @@ interface Props {
padding: 2.5rem var(--site-gutter) 3rem;
}

.page-tools {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

.page-tools :global(.theme-toggle) {
width: 2.5rem;
height: 2.5rem;
justify-content: center;
}

.page-tools :global(.theme-toggle:focus-visible) {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}

.blog-shell:focus {
outline: none;
}
Expand Down
2 changes: 2 additions & 0 deletions src/layouts/DocsLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import DocsPager from "../components/docs/DocsPager.astro";
import DocsSidebar from "../components/docs/DocsSidebar.astro";
import DocsTableOfContents from "../components/docs/DocsTableOfContents.astro";
import Base from "./Base.astro";
import SiteFooter from "../components/SiteFooter.astro";
import {
getBreadcrumbs,
getNavigation,
Expand Down Expand Up @@ -74,4 +75,5 @@ const hasToc = tableOfContents.length > 0;
)
}
</div>
<SiteFooter />
</Base>
79 changes: 4 additions & 75 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,14 @@ import Base from "../layouts/Base.astro";
import Brand from "../components/Brand.astro";
import ContactLinks from "../components/ContactLinks.astro";
import FeaturedPost from "../components/FeaturedPost.astro";
import ThemeToggle from "../components/ThemeToggle.astro";
import SiteFooter from "../components/SiteFooter.astro";
---

<Base
bodyClass="homepage"
title="Wezel - build regression observability"
description="Wezel keeps watch over build performance as your code changes, tracing regressions and improvements to the commits that introduced them."
>
<div class="page-tools">
<ThemeToggle />
</div>

<main class="home">
<section class="fold" aria-label="Wezel">
<section class="pain" aria-label="Overview">
Expand Down Expand Up @@ -230,17 +226,7 @@ summary.size.outcome = "dist/app.wasm"</code></pre>

</main>

<footer class="home-footer">
<div class="footer-inner">
<span>&copy; {new Date().getFullYear()} Wezel</span>
<nav aria-label="Footer">
<a href="/docs">Docs</a>
<a href="/blog">Blog</a>
<a href="https://status.wezel.build">Status</a>
<a href="https://app.wezel.build">Open app</a>
</nav>
</div>
</footer>
<SiteFooter />

<style>
:global(body.homepage) {
Expand All @@ -249,7 +235,7 @@ summary.size.outcome = "dist/app.wasm"</code></pre>
grid-template-rows: 1fr auto;
align-items: start;
row-gap: 3rem;
padding-block: 4rem 1.5rem;
padding-block: 4rem 0;
}

.home {
Expand Down Expand Up @@ -385,23 +371,6 @@ summary.size.outcome = "dist/app.wasm"</code></pre>
margin-top: 1.25rem;
}

.page-tools {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

.page-tools :global(.theme-toggle) {
width: 2.5rem;
height: 2.5rem;
justify-content: center;
}

.page-tools :global(.theme-toggle:focus-visible) {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}

.home-aside {
min-width: 0;
padding: 0 0 0 2.75rem;
Expand Down Expand Up @@ -719,49 +688,9 @@ summary.size.outcome = "dist/app.wasm"</code></pre>
color: var(--color-ink);
}

.home-footer {
width: min(100%, var(--site-width));
margin-inline: auto;
padding-inline: var(--site-gutter);
color: var(--color-ink-faint);
font-size: 0.8125rem;
}

.footer-inner {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
border-top: 1px solid var(--color-line);
padding-top: 1.25rem;
}

.home-footer nav {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
}

.home-footer a {
color: inherit;
text-decoration: none;
}

.home-footer a:hover {
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 0.2em;
}

.home-footer a:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 4px;
}

@media (max-width: 65rem) {
:global(body.homepage) {
padding-block: 3.75rem 1.5rem;
padding-block: 3.75rem 0;
}

.fold {
Expand Down
6 changes: 0 additions & 6 deletions src/styles/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,6 @@
gap: 1.25rem;
}

.docs-header .theme-toggle {
justify-content: center;
width: 2rem;
height: 2rem;
}

.sidebar-toggle {
display: none;
font-family: var(--font-mono);
Expand Down
Loading