The greeting stands where every heading of the family stands, the first group a little higher, the licence line in the foot

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` |

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.

src/layouts/Page.astro

@@ -59,5 +59,10 @@ const CSP = [
 <main id="main">
   <slot />
 </main>
+<footer class="foot">
+  <div class="wrap">
+    <div class="foot-row"><span><a href="https://github.com/abap2UI5/abap2UI5/blob/main/LICENSE" target="_blank" rel="noopener">MIT licensed</a> · <a href={`${base}about/`}>About</a></span></div>
+  </div>
+</footer>
 </body>
 </html>

src/pages/index.astro

@@ -90,7 +90,6 @@ const base = import.meta.env.BASE_URL;
       </ul>
     </section>
   ))}
-  <p class="about"><a href="https://github.com/abap2UI5/abap2UI5/blob/main/LICENSE" target="_blank" rel="noopener">MIT licensed</a> · <a href={`${base}about/`}>About</a></p>
 </div>
 
 </Page>

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; }