@casoon/pages-theme 0.12.6 → 0.12.9

package/README.md

@@ -270,6 +270,11 @@ to it as well.
   in `fonts/OFL.txt`), no CDNs, embeds, analytics or cookies.
 - JavaScript: two small inline scripts (theme before first paint; theme toggle and copy
   buttons). Tabs work without JavaScript. The one exception is a `Demo` stage, see above.
-- Footer on every page: "Ein Projekt von CASOON · Jörn Seidel", licence, Impressum and
-  Datenschutz (casoon.de), the project catalog on casoon.dev.
+- Footer on every page, in the site's language (`lang`): "A CASOON project · Jörn Seidel",
+  licence, imprint and privacy policy (casoon.de), the project catalog on casoon.dev.
 - Light and dark theme, following `prefers-color-scheme` until the visitor chooses.
+
+## Maintaining
+
+Development, releases, the rollout to all project sites and setting up a new one:
+[MAINTAINING.md](MAINTAINING.md).

package/components/CallToAction.astro

@@ -28,8 +28,9 @@ const { title, href, label } = Astro.props;
     text-align: center;
   }
   h2 {
-    max-width: 14ch;
+    max-width: 18ch;
     margin: 0;
+    text-wrap: balance;
     color: #fff;
     font-size: clamp(40px, 6vw, 70px);
     font-weight: 600;

package/components/Footer.astro

@@ -1,6 +1,5 @@
 ---
 import config from 'virtual:casoon-pages/config';
-import logo from '../assets/casoon-logo.svg';
 import logoDark from '../assets/casoon-logo-dark.svg';
 import { t } from '../lib/i18n';
 import { CASOON_URL, catalogUrl, url } from '../lib/url';
@@ -41,33 +40,35 @@ const columns = [
 ---
 
 <footer class="footer">
-  <div class="cols">
-    <div>
-      <a class="logo" href={CASOON_URL}>
-        <img class="logo-light" src={logo.src} width="150" height="41" alt="CASOON" />
-        <img class="logo-dark" src={logoDark.src} width="150" height="41" alt="CASOON" />
-      </a>
-      <p>{config.description}</p>
-      <p class="by">{s.footerBy} · Jörn Seidel</p>
+  <div class="top">
+    <div class="intro">
+      <p class="name">{config.name}</p>
+      <p class="description">{config.description}</p>
+    </div>
+    <div class="cols">
+      {
+        columns.filter((col) => col.links.length > 0).map((col) => (
+          <nav aria-label={col.title}>
+            <p class="title">{col.title}</p>
+            <ul>
+              {col.links.map((link) => (
+                <li>
+                  <a href={link.href}>{link.label}</a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))
+      }
     </div>
-    {
-      columns.filter((col) => col.links.length > 0).map((col) => (
-        <nav aria-label={col.title}>
-          <p class="title">{col.title}</p>
-          <ul>
-            {col.links.map((link) => (
-              <li>
-                <a href={link.href}>{link.label}</a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      ))
-    }
   </div>
   <div class="bottom">
-    <span>{config.license && `${s.license(config.license)} · `}© {new Date().getFullYear()} Jörn Seidel</span>
+    <a class="by" href={CASOON_URL}>
+      <img src={logoDark.src} width="150" height="41" alt="CASOON" />
+      <span>{s.footerBy} · Jörn Seidel</span>
+    </a>
     <span class="legal">
+      <span>{config.license && `${s.license(config.license)} · `}© {new Date().getFullYear()}</span>
       <a href={IMPRESSUM}>{s.imprint}</a>
       <a href={DATENSCHUTZ}>{s.privacyPolicy}</a>
     </span>
@@ -78,47 +79,56 @@ const columns = [
   /* Black footer in both themes. */
   .footer {
     --text: #b4b1ac;
-    --muted: #b4b1ac;
+    --muted: #8f8b85;
     --heading: #fff;
     --border: rgb(255 255 255 / 0.12);
 
     background: #11100e;
     color: var(--text);
-    font-size: 14px;
+    font-size: 15px;
   }
-  .cols {
+  .top {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 40px;
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    gap: 48px 64px;
     max-width: var(--max);
     margin: 0 auto;
-    padding: 80px 24px 48px;
+    padding: 96px 24px 72px;
   }
-  .logo {
-    display: inline-block;
-    margin-bottom: 14px;
+  .intro p {
+    margin: 0;
   }
-  .logo img {
-    display: block;
-    width: 120px;
-    height: auto;
+  .name {
+    color: var(--heading);
+    font-size: clamp(36px, 4.5vw, 56px);
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1;
   }
-  .logo-light {
-    display: none !important;
+  .name::after {
+    content: '.';
+    color: var(--accent-fill);
   }
-  p {
-    margin: 0 0 6px;
-    max-width: 32ch;
+  .intro .description {
+    max-width: 34ch;
+    margin-top: 20px;
+    color: var(--text);
+    font-size: 17px;
+    line-height: 1.5;
+    text-wrap: pretty;
   }
-  .by {
-    color: var(--muted);
-    font-size: 12.5px;
+  .cols {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 32px;
   }
   .title {
-    margin-bottom: 16px;
-    color: var(--heading);
-    font-size: 18px;
-    font-weight: 500;
+    margin: 0 0 18px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
   }
   ul {
     display: flex;
@@ -129,27 +139,50 @@ const columns = [
     list-style: none;
   }
   ul a {
-    color: var(--text);
+    color: var(--heading);
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    text-underline-offset: 4px;
+    transition: text-decoration-color 0.2s;
   }
   ul a:hover {
-    color: var(--heading);
+    text-decoration-color: currentColor;
+  }
+  ul a[href^='http']::after {
+    content: ' ↗' / '';
+    color: var(--muted);
   }
   .bottom {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 16px 32px;
     max-width: var(--max);
     margin: 0 auto;
-    padding: 16px 24px 40px;
+    padding: 24px 24px 40px;
     border-top: 1px solid var(--border);
     color: var(--muted);
     font-size: 13px;
   }
+  .by {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    color: var(--muted);
+  }
+  .by img {
+    display: block;
+    width: 96px;
+    height: auto;
+  }
+  .by:hover {
+    color: var(--heading);
+  }
   .legal {
     display: flex;
     flex-wrap: wrap;
-    gap: 18px;
+    gap: 8px 20px;
   }
   .legal a {
     color: var(--muted);
@@ -157,4 +190,10 @@ const columns = [
   .legal a:hover {
     color: var(--heading);
   }
+  @media (max-width: 760px) {
+    .top {
+      grid-template-columns: 1fr;
+      padding-top: 72px;
+    }
+  }
 </style>

package/layouts/Base.astro

@@ -26,10 +26,12 @@ const home = Astro.site && new URL(url(), Astro.site).href;
 const ogImage = Astro.site && new URL(url('og.png'), Astro.site).href;
 const sameAs = [config.website, ...config.packages.map((p) => p.href)].filter(Boolean);
 
+// tokens.css sets --accent with the same selectors and is linked after this inline style, so the
+// selectors repeat :root to outrank it whatever the order in <head> (scripts/test-accent.mjs).
 const accentCss = config.accent
-  ? `:root{--accent:${config.accent.light}}` +
-    `:root[data-theme="dark"]{--accent:${config.accent.dark}}` +
-    `@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent:${config.accent.dark}}}`
+  ? `:root:root{--accent:${config.accent.light}}` +
+    `:root:root[data-theme="dark"]{--accent:${config.accent.dark}}` +
+    `@media (prefers-color-scheme:dark){:root:root:not([data-theme="light"]){--accent:${config.accent.dark}}}`
   : '';
 
 const structuredData = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casoon/pages-theme",
-  "version": "0.12.6",
+  "version": "0.12.9",
   "description": "Shared Astro theme for the GitHub Pages sites of CASOON open-source projects",
   "type": "module",
   "license": "MIT",
@@ -44,6 +44,15 @@
     "withastro",
     "casoon"
   ],
+  "scripts": {
+    "dev": "pnpm --filter starter-site dev",
+    "build": "pnpm --filter starter-site build",
+    "preview": "pnpm --filter starter-site preview",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "type-check": "pnpm --filter starter-site type-check",
+    "test:accent": "node scripts/test-accent.mjs"
+  },
   "peerDependencies": {
     "astro": "^7.3.2"
   },
@@ -54,5 +63,11 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
-  }
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
+    "@biomejs/biome": "^2.6.4",
+    "@playwright/test": "^1.64.1"
+  },
+  "packageManager": "pnpm@10.26.0"
 }

package/styles/tokens.css

@@ -1,6 +1,6 @@
 /*
- * Design tokens. Brand colours follow casoon.de,
- * adjusted for 4.5:1 text contrast on the page background.
+ * Design tokens. Brand colours follow casoon.de, adjusted for 4.5:1 text contrast on the
+ * page background and on the sand bands (--bg-deep, --bg-sunken).
  * --brand carries CASOON, --accent carries the project (override via the
  * integration's `accent` option).
  */
@@ -19,9 +19,9 @@
   --text: #44423f;
   --heading: #11100e;
   --muted: #5c5a56;
-  --brand: #c13a1a;
+  --brand: #ad3216;
   --brand-soft: rgb(236 74 32 / 0.1);
-  --accent: #c13a1a;
+  --accent: #ad3216;
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
   --accent-fill: #d4421d;
   --accent-top: #e46140;