Add a dismissable phase 2 banner linking to Interstellar

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

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 });
+  });
+})();

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: "关闭此提示"

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"

layouts/_default/baseof.html

@@ -5,6 +5,7 @@
 </head>
 <body>
   <a class="skip-link" href="#main">{{ i18n "skip_to_content" }}</a>
+  {{- partial "phase2-banner.html" . }}
   {{- partial "header.html" . }}
   <main id="main">
     {{- block "main" . }}{{ end }}

layouts/partials/head.html

@@ -54,6 +54,9 @@
 {{- with resources.Get "css/main.css" | minify | fingerprint }}
 <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
 {{- end }}
+{{- with resources.Get "css/phase2-banner.css" | minify | fingerprint }}
+<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
+{{- end }}
 
 {{- if .IsHome }}
 <script type="application/ld+json">

layouts/partials/phase2-banner.html

@@ -0,0 +1,20 @@
+{{- /* A slim, dismissable notice above the header that this site is phase 1
+       and links to the phase 2 site. The inline script hides it before paint
+       once dismissed; assets/js/phase2-banner.js wires the close button. The
+       look lives in assets/css/phase2-banner.css, apart from the kit. */ -}}
+{{- $url := "https://interstellar.interimm.org/" -}}
+{{- if ne site.Language.Lang "cn" }}{{ $url = "https://interstellar.interimm.org/en/" }}{{ end -}}
+<script>try{if(localStorage.getItem("interimm-phase2-banner")==="dismissed")document.documentElement.classList.add("phase2-dismissed")}catch(e){}</script>
+<aside class="phase2-banner" aria-label="{{ i18n "phase2_label" }}">
+  <div class="wrap phase2-inner">
+    <svg class="phase2-mark" aria-hidden="true" focusable="false" viewBox="0 0 7 7" width="14" height="14" shape-rendering="crispEdges"><path fill="currentColor" d="M0 3h1v1H0zM2 1h1v5H2zM4 0h1v7H4zM6 2h1v3H6z"/></svg>
+    <p class="phase2-text">
+      <span>{{ i18n "phase2_text" }}</span>
+      <span class="phase2-detail">{{ i18n "phase2_detail" }}</span>
+      <a class="phase2-link" href="{{ $url }}" hreflang="{{ site.Language.LanguageCode }}">{{ i18n "phase2_link" }}<span aria-hidden="true"> →</span></a>
+    </p>
+    <button class="phase2-close" type="button" aria-label="{{ i18n "phase2_dismiss" }}" title="{{ i18n "phase2_dismiss" }}">
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 12 12" width="12" height="12"><path d="M2 2l8 8M10 2l-8 8" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/></svg>
+    </button>
+  </div>
+</aside>

layouts/partials/scripts.html

@@ -1,5 +1,8 @@
 {{- $kit := partialCached "kit.html" . site.Language.Lang }}
 <script src="{{ $kit.js.RelPermalink }}?v={{ substr (md5 $kit.js.Content) 0 10 }}" defer></script>
+{{- with resources.Get "js/phase2-banner.js" | minify | fingerprint }}
+<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>
+{{- end }}
 {{- if .IsHome }}
 {{- with resources.Get "js/main.js" | minify | fingerprint }}
 <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>