From d132bc47d2fc803c3091a4bdb049bb4bb6db8d0b Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 10:22:56 +0000 Subject: [PATCH 1/2] The greeting stands where every heading of the family stands, and the licence line goes to the foot MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Measured at 1440px: the text of "Welcome to abap2UI5" started at 111px, the headings of Samples, Addons and Insights at 82px - the row centred the text on the 104px logo beside it. The row aligns to the top now, the text starts at 82px (79px on a phone, like the others), the logo beside it at the same height. The About page's heading takes the same size, line height and place (it started at 90px in 32px). "MIT licensed · About" sat in the page under the community row; it is the foot now, one muted line at the bottom of the window however short the page, as on Samples and Addons. CONVENTION.md section 5 said the home page has none; it says every site has one, the home page the shortest. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_014YZFmFZwmxFekaMfr3Ka5m --- AGENTS.md | 2 +- CONVENTION.md | 9 +++++---- src/layouts/Page.astro | 5 +++++ src/pages/index.astro | 1 - src/styles/global.css | 20 ++++++++++++++------ 5 files changed, 25 insertions(+), 12 deletions(-) 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..88ffed2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -71,8 +71,10 @@ 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; } @@ -124,15 +126,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; } From 9d0cc4dbe5f4aa98c12e0ef2a34756711ad20051 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 10:24:28 +0000 Subject: [PATCH 2/2] The first group starts 24px higher The 104px logo beside the greeting set the height of the row, 58px more than the heading's line, and the row's 40px margin came on top of that. The logo now hangs 24px into that space (12px on a phone), so "Introduction" starts at 204px instead of 228px (160px instead of 172px on a phone); the greeting and the logo stay where they are. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_014YZFmFZwmxFekaMfr3Ka5m --- src/styles/global.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 88ffed2..edea1cf 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -78,8 +78,10 @@ img { max-width: 100%; height: auto; } 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