From c54f8f3f3f0c304fb7b70f4dbc976a355d1d7878 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 8 Oct 2026 14:49:55 +0000 Subject: [PATCH] Add a dismissable phase 2 banner linking to Interstellar A slim bar above the header on every page says this site is phase 1 and links to interstellar.interimm.org (CN root or /en/). The close button remembers the choice in localStorage; an inline check hides it before paint on later pages. Styles and script are their own files, so the kit is untouched. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_01KJEwDnnTi1kgDtYkX1CU2a --- assets/css/phase2-banner.css | 43 +++++++++++++++++++++++++++++ assets/js/phase2-banner.js | 13 +++++++++ i18n/cn.yaml | 10 +++++++ i18n/en.yaml | 10 +++++++ layouts/_default/baseof.html | 1 + layouts/partials/head.html | 3 ++ layouts/partials/phase2-banner.html | 20 ++++++++++++++ layouts/partials/scripts.html | 3 ++ 8 files changed, 103 insertions(+) create mode 100644 assets/css/phase2-banner.css create mode 100644 assets/js/phase2-banner.js create mode 100644 layouts/partials/phase2-banner.html diff --git a/assets/css/phase2-banner.css b/assets/css/phase2-banner.css new file mode 100644 index 0000000..761d7ff --- /dev/null +++ b/assets/css/phase2-banner.css @@ -0,0 +1,43 @@ +/* The phase 2 notice above the header. It wears phase 2's signal blue so it + reads as a message from elsewhere, and sits in the page flow (never fixed) + so it covers nothing. */ +.phase2-banner { + --p2-bg: #0d1457; + --p2-text: #ffffff; + --p2-muted: #d0d5f7; + --p2-them: #9ff8ff; + --p2-us: #ffd84a; + background: var(--p2-bg); + color: var(--p2-text); + font-size: 0.875rem; + line-height: 1.45; + border-bottom: 1px solid rgb(255 255 255 / 0.14); +} +.phase2-dismissed .phase2-banner { display: none; } + +.phase2-inner { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; } +.phase2-mark { flex: none; color: var(--p2-them); } +.phase2-text { flex: 1; margin: 0; } +.phase2-detail { color: var(--p2-muted); } +.phase2-link { + color: var(--p2-them); font-weight: 600; text-decoration: underline; + text-underline-offset: 0.2em; text-decoration-thickness: 1px; white-space: nowrap; +} +.phase2-link:hover { color: var(--p2-text); } +.phase2-link:focus-visible, .phase2-close:focus-visible { outline: 2px solid var(--p2-us); outline-offset: 2px; } + +/* Only offered once the script can act on it. */ +.phase2-close { + display: none; flex: none; align-items: center; justify-content: center; + width: 2.25rem; height: 2.25rem; margin-block: -0.375rem; margin-inline-end: -0.5rem; + padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--p2-muted); cursor: pointer; +} +.js .phase2-close { display: inline-flex; } +.phase2-close:hover { color: var(--p2-text); background: rgb(255 255 255 / 0.08); } + +@media (max-width: 40rem) { + .phase2-banner { font-size: 0.8125rem; } + .phase2-detail { display: none; } +} + +@media print { .phase2-banner { display: none; } } diff --git a/assets/js/phase2-banner.js b/assets/js/phase2-banner.js new file mode 100644 index 0000000..f761181 --- /dev/null +++ b/assets/js/phase2-banner.js @@ -0,0 +1,13 @@ +// Close button for the phase 2 notice. The choice is kept in localStorage so +// the notice stays closed on every page of the site. +(function () { + const banner = document.querySelector('.phase2-banner'); + const close = banner && banner.querySelector('.phase2-close'); + if (!close) return; + close.addEventListener('click', function () { + try { localStorage.setItem('interimm-phase2-banner', 'dismissed'); } catch (e) { /* private mode: closes for this page only */ } + document.documentElement.classList.add('phase2-dismissed'); + const brand = document.querySelector('.site-header .brand'); + if (brand) brand.focus({ preventScroll: true }); + }); +})(); diff --git a/i18n/cn.yaml b/i18n/cn.yaml index bb70c8c..5c830b4 100644 --- a/i18n/cn.yaml +++ b/i18n/cn.yaml @@ -120,3 +120,13 @@ translation: "停机" - id: design_value translation: "设计值" +- id: phase2_label + translation: "第二期" +- id: phase2_text + translation: "你正在浏览星际移民的第一期：火星时代。" +- id: phase2_detail + translation: "故事已经来到 2219 年，一个信号从 Ross 128 b 传来。" +- id: phase2_link + translation: "进入通联纪" +- id: phase2_dismiss + translation: "关闭此提示" diff --git a/i18n/en.yaml b/i18n/en.yaml index 77a1c3f..a21db4f 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -120,3 +120,13 @@ translation: "Offline" - id: design_value translation: "design" +- id: phase2_label + translation: "Phase 2" +- id: phase2_text + translation: "You are reading Phase 1, the Mars era of InterImm." +- id: phase2_detail + translation: "The story has moved on to 2219, when a signal arrived from Ross 128 b." +- id: phase2_link + translation: "Enter The Contact Era" +- id: phase2_dismiss + translation: "Dismiss this notice" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d60e891..0f47878 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,6 +5,7 @@ + {{- partial "phase2-banner.html" . }} {{- partial "header.html" . }}
{{- block "main" . }}{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 558bfb0..4577985 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -54,6 +54,9 @@ {{- with resources.Get "css/main.css" | minify | fingerprint }} {{- end }} +{{- with resources.Get "css/phase2-banner.css" | minify | fingerprint }} + +{{- end }} {{- if .IsHome }} + diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 9d25aba..b863385 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,5 +1,8 @@ {{- $kit := partialCached "kit.html" . site.Language.Lang }} +{{- with resources.Get "js/phase2-banner.js" | minify | fingerprint }} + +{{- end }} {{- if .IsHome }} {{- with resources.Get "js/main.js" | minify | fingerprint }}