diff --git a/AGENTS.md b/AGENTS.md index 9db8cf0..99f9337 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -13,7 +13,7 @@ nothing in it depends on another repository at build time. | Path | Purpose | | --- | --- | | `src/pages/index.astro` | The page: the four groups and their tiles as data at the top, the markup below | -| `src/layouts/Page.astro` | The document: head, the Content-Security-Policy, the top line (the logo, the wordmark and Home, CONVENTION.md section 1), the one-line foot | +| `src/layouts/Page.astro` | The document: head, the Content-Security-Policy, the top line (the logo, the wordmark and Home, CONVENTION.md section 1), the one-line foot at the bottom of the window (the licence and About, section 5) | | `src/styles/global.css` | The one stylesheet; light and dark follow the system | | `public/` | Font (Inter, self-hosted), logo, icons | | `test/site.test.mjs` | `node:test` over the built `dist/index.html` | diff --git a/CONVENTION.md b/CONVENTION.md index ca84aa7..d684a58 100644 --- a/CONVENTION.md +++ b/CONVENTION.md @@ -102,7 +102,8 @@ the accent border and a 3px glow in *accent soft*. ## 5. The foot -The home page has none: it ends with the community row. A sister site -(Samples, Addons & Tools) carries one muted line at the bottom of the -window however short the page: the name leading home, the licence, a link -to edit the page and the mail as a mark at the right end. +Every site carries one muted line at the bottom of the window however +short the page, over a rule in *line*. The home page says the least: the +licence and About. A sister site (Samples, Addons & Tools) adds the name +leading home, a link to edit the page and the mail as a mark at the right +end. diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 76299c9..4607ddb 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -59,5 +59,10 @@ const CSP = [
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index cd2f6f7..e4dd04e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -90,7 +90,6 @@ const base = import.meta.env.BASE_URL; ))} -

MIT licensed · About

diff --git a/src/styles/global.css b/src/styles/global.css index 2ec1a2e..edea1cf 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -71,13 +71,17 @@ img { max-width: 100%; height: auto; } .sites [aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--brand); padding-bottom: 1px; } /* ---- the greeting -------------------------------------------------------- */ +/* the text stands at the top of the row, where Samples, Addons and Insights + * put their heading - centred on the 104px logo it sat 29px lower */ .welcome { - display: flex; align-items: center; gap: 14px; + display: flex; align-items: flex-start; gap: 14px; margin: 28px 0 40px; color: var(--ink); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } -.welcome img { width: 104px; height: 104px; flex: none; margin-left: auto; } -@media (max-width: 620px) { .welcome { margin: 24px 0 28px; } .welcome img { width: 64px; height: 64px; } } +/* the logo hangs 24px into the space below the row (12px on a phone), so + * the first group starts that much higher than a 104px row would let it */ +.welcome img { width: 104px; height: 104px; flex: none; margin-left: auto; margin-bottom: -24px; } +@media (max-width: 620px) { .welcome { margin: 24px 0 28px; } .welcome img { width: 64px; height: 64px; margin-bottom: -12px; } } /* ---- the groups: a label, three tiles to a row at most ------------------- */ /* the page is as wide as the Insights site (--width); in it the tiles fall @@ -124,15 +128,21 @@ img { max-width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .tile, .tile::after, .links a { transition: none; } .tile:hover, .links a:hover { transform: none; } } main { flex: 1 0 auto; padding-bottom: 32px; } -/* One quiet line under the community row: who runs this and what the sites do with your data. */ -.about { margin: -12px 0 0; font-size: 13px; } -.about a { color: var(--muted); text-decoration: none; } -.about a:hover { color: var(--brand); } +/* The foot: one muted line at the bottom of the window however short the + * page, as on Samples and Addons (CONVENTION.md section 5) - the licence and + * who runs this. */ +.foot { margin-top: 8px; padding-bottom: 12px; font-size: 13px; color: var(--muted); } +.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; } +.foot a { color: var(--muted); text-decoration: none; } +.foot a:hover { color: var(--brand); } /* ---- the About page: one column of prose ---- */ .prose { padding-top: 28px; padding-bottom: 48px; } .prose > * { max-width: 680px; } -.prose h1 { margin: 0 0 24px; font-size: 32px; letter-spacing: -.02em; } +/* the heading where every page of the family has it: 28px under the bar + * (24px on a phone), the greeting's size and line height */ +.prose h1 { margin: 0 0 24px; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.025em; } +@media (max-width: 620px) { .prose { padding-top: 24px; } } .prose h2 { margin: 28px 0 8px; font-size: 17px; } .prose p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--muted); } .prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }