diff --git a/astro.config.ts b/astro.config.ts index 8a0f744..a9a6d3a 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -64,6 +64,7 @@ export default defineConfig({ ], sidebar: sidebar(), components: { + Header: "./src/components/overrides/Header.astro", SiteTitle: "./src/components/overrides/SiteTitle.astro", SocialIcons: "./src/components/overrides/SocialIcons.astro", Footer: "./src/components/overrides/Footer.astro", diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro new file mode 100644 index 0000000..88fc635 --- /dev/null +++ b/src/components/overrides/Header.astro @@ -0,0 +1,94 @@ +--- +// Starlight's header with Go to console, as on the landing page's nav: the one thing in the +// bar that looks pressable. From 50rem it sits between the links and the theme switch; below +// that Starlight moves the links and the switch into the menu, and the button stays in the +// bar beside search, so it is there at every width. Below 500px the wordmark is read out but +// not shown (SiteTitle), which leaves room for it on a 320px phone. +import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro"; +import Search from "@astrojs/starlight/components/Search.astro"; +import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro"; +import { CONSOLE_URL } from "../../lib/site"; +import Button from "../Button.astro"; +import SiteTitle from "./SiteTitle.astro"; +import SocialIcons from "./SocialIcons.astro"; +--- + +
+
+ +
+
+ + +
+
+ + + + +
+
+ + diff --git a/src/components/overrides/SiteTitle.astro b/src/components/overrides/SiteTitle.astro index d894c8d..063b264 100644 --- a/src/components/overrides/SiteTitle.astro +++ b/src/components/overrides/SiteTitle.astro @@ -53,4 +53,15 @@ const { siteTitleHref } = Astro.locals.starlightRoute; font-weight: 800; letter-spacing: -0.02em; } + /* Read out but not shown below 500px, as on the landing page, so Go to console fits. */ + @media (max-width: 499.98px) { + .sw-site-title__word { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + } + } diff --git a/src/components/overrides/SocialIcons.astro b/src/components/overrides/SocialIcons.astro index ee9520d..31ba351 100644 --- a/src/components/overrides/SocialIcons.astro +++ b/src/components/overrides/SocialIcons.astro @@ -1,22 +1,20 @@ --- -// Text links in place of Starlight's icon row, drawn as the design system's nav links. +// In place of Starlight's icon row: the landing page as a nav link, then GitHub as a small +// quiet icon. It has no outline and no shadow, so Go to console (Header) stays the one thing +// in the bar that looks pressable; the focus ring is the global one. The mark is Octicons' +// mark-github-16 (@primer/octicons 19.38.0), as the design system asks of a true icon. import { LANDING_URL } from "../../lib/site"; -import { DOCS_REPO_URL, REPO_URL } from "../../lib/source"; - -const links = [ - { label: "Sluiceway", title: "The Sluiceway home page", href: LANDING_URL }, - { label: "GitHub", title: "Sluiceway on GitHub", href: REPO_URL }, - { label: "Docs repo", title: "The source of this site on GitHub", href: DOCS_REPO_URL }, -]; +import { REPO_URL } from "../../lib/source"; --- -{ - links.map(({ label, title, href }) => ( - - {label} - - )) -} +Sluiceway + + + diff --git a/src/lib/site.ts b/src/lib/site.ts index 5b4c966..e186894 100644 --- a/src/lib/site.ts +++ b/src/lib/site.ts @@ -14,3 +14,6 @@ export const UNLISTED = ["404", "style-check"]; /** The landing page, which the header and footer link to as "Sluiceway". */ export const LANDING_URL = "https://sluiceway.dev/"; + +/** The hosted app, where a person signs in with GitHub. The header's one button goes there. */ +export const CONSOLE_URL = "https://console.sluiceway.dev"; diff --git a/src/styles/theme.css b/src/styles/theme.css index 942226a..e4c7e66 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -50,6 +50,9 @@ --sl-line-height-headings: 1.18; --sl-nav-height: 4rem; + /* The phone menu button's 44px touch target, so Starlight centres it in the bar and keeps + the header clear of it. */ + --sl-menu-button-size: 44px; /* `ch` is the width of Inter's "0", about 1.33 average characters: 54ch holds a line of about 72 characters, the measure 30-pages.md asks for. */ --sl-content-width: 54ch; @@ -93,24 +96,31 @@ starlight-theme-select select:focus-visible, header.header { border-bottom: var(--border-ink) solid var(--line); } -/* The phone menu button, drawn like every other control: a crate, not a circle, and a full - 44px touch target. */ +/* The phone menu button, drawn as the landing page's Menu: a crate, not a circle, outlined + but without a shadow, so Go to console stays the one thing in the bar that looks pressable. + A full 44px touch target. */ button.sl-menu-button { - width: 44px; - height: 44px; + align-items: center; + justify-content: center; border: var(--border-ink) solid var(--line); border-radius: var(--radius-crate); background: var(--surface); color: var(--ink); - box-shadow: var(--shadow-press); + box-shadow: none; } -.header .right-group, -.header .social-icons { - gap: var(--space-2); +button.sl-menu-button:hover { + background: var(--surface-sunk); } +/* The header draws no rule between the links and the rest, as the landing page's nav. */ .header .social-icons::after { - border-inline-end: var(--border-ink) solid var(--line-soft); - margin-inline-start: var(--space-2); + content: none; +} +/* The phone menu's last row: the links and the theme switch on one line. */ +.mobile-preferences { + align-items: center; +} +.mobile-preferences .social-icons { + gap: var(--space-2); } /* The `label` style: the theme switch, "On this page" and table headers. */ @@ -125,15 +135,18 @@ starlight-theme-select select, text-transform: uppercase; } -/* The theme switch, drawn as the landing page's theme button. */ +/* The theme switch, quiet as the landing page's: no outline and no shadow, in `ink-muted`. */ starlight-theme-select select { - color: var(--ink); - background-color: var(--surface); - border: var(--border-ink) solid var(--line); + color: var(--ink-muted); + background-color: transparent; + border: 0; border-radius: var(--radius-crate); - box-shadow: var(--shadow-press); padding-block: var(--space-2); } +starlight-theme-select select:hover { + background-color: var(--surface-sunk); + color: var(--ink); +} starlight-theme-select select { /* Room for the uppercase, letter-spaced label beside the icon and caret. */ width: 9em; @@ -145,7 +158,8 @@ site-search > button[data-open-modal] { border-radius: var(--radius-crate); background: var(--surface); color: var(--ink-muted); - box-shadow: var(--shadow-press); + /* Outlined as a field, without a shadow: Go to console is the pressable thing. */ + box-shadow: none; } site-search > button[data-open-modal]:hover { border-color: var(--line); @@ -165,6 +179,19 @@ site-search > button[data-open-modal]:focus-visible { justify-content: center; } } +/* Between 50rem and 60rem the links, Go to console and the theme switch take the room the + search box had, so search is the icon it is on a phone. */ +@media (min-width: 50rem) and (max-width: 60rem) { + site-search > button[data-open-modal] { + min-width: 44px; + min-height: 44px; + justify-content: center; + } + site-search > button[data-open-modal] > :is(span, kbd) { + /* biome-ignore lint/complexity/noImportantStyles: Starlight's script sets the shortcut's display inline. */ + display: none !important; + } +} site-search > button[data-open-modal] kbd { background: var(--surface-sunk); color: var(--ink);