@conduction/docusaurus-preset 0.1.0

package/static/img/logo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-86.6 -100 173.2 200" role="img" aria-label="Conduction avatar">
+  <title>Conduction avatar, drawn as three pointy-top polygons</title>
+  <!-- viewBox is the bounding box of the outer hex (R=100), no
+       internal padding. Three polygons in the same drawing
+       vocabulary as the watermark hexes:
+         1. Outer hex      cobalt, the frame
+         2. Inner hex      white, the empty interior (so the
+                           logo reads correctly on any ground)
+         3. C-shape        cobalt, sits inside the inner hex -->
+  <polygon fill="#21468B" points="0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50"/>
+  <polygon fill="#FFFFFF" points="0,-74.5 64.5,-37.3 64.5,37.3 0,74.5 -64.5,37.3 -64.5,-37.3"/>
+  <polygon fill="#21468B" points="-0.2,-25.2 20.1,-13.5 43.7,-27.1 -0.2,-52.4 -45.6,-26.2 -45.6,26.2 -0.2,52.4 43.7,27.1 20.1,13.5 -0.2,25.2 -22,12.6 -22,-12.6"/>
+</svg>

package/static/img/nextcloud-logo.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 30 130 60" role="img" aria-label="Nextcloud">
+  <title>Nextcloud — official mark, no wordmark</title>
+  <path fill="#FFFFFF" d="M75.091,35.685c-12.438,0-22.981,8.433-26.248,19.857-2.84-6.06-8.994-10.305-16.082-10.305-9.748,0-17.761,8.013-17.761,17.761s8.013,17.765,17.761,17.765c7.088,0,13.242-4.248,16.082-10.309,3.268,11.426,13.81,19.861,26.248,19.861,12.346,0,22.835-8.308,26.186-19.605,2.892,5.924,8.97,10.053,15.958,10.053,9.748,0,17.765-8.017,17.765-17.765s-8.017-17.761-17.765-17.761c-6.988,0-13.065,4.127-15.958,10.05-3.352-11.296-13.84-19.601-26.186-19.601h0ZM75.091,46.11c9.39,0,16.89,7.497,16.89,16.887s-7.501,16.89-16.89,16.89-16.887-7.501-16.887-16.89,7.497-16.887,16.887-16.887ZM32.762,55.663c4.114,0,7.338,3.221,7.338,7.335s-3.225,7.338-7.338,7.338-7.335-3.225-7.335-7.338,3.221-7.335,7.335-7.335ZM117.234,55.663c4.114,0,7.338,3.221,7.338,7.335s-3.225,7.338-7.338,7.338-7.335-3.225-7.335-7.338,3.221-7.335,7.335-7.335Z"/>
+</svg>

package/static/lib/canal-footer.css

@@ -0,0 +1,418 @@
+/* ============================================================
+   Canal footer — randomised Amsterdam trapgevel skyline above a
+   gray kade above the cobalt-900 canal. Each house is rendered
+   as a standalone <svg> (cloned from a <template> by footer.js)
+   so the skyline rolls a fresh sequence on every page-load.
+   Adjacent house wrappers overlap by 1px (margin-right: -1px)
+   to kill the white seam.
+
+   Colour rule: items IN the canal are KNVB orange, items ON the
+   kade are cobalt or vermilion. A handful of houses fly the
+   Dutch flag from a flagpole over their gable; the cruise boat
+   flies one too at the stern.
+   ============================================================ */
+
+.canal-footer { position: relative; color: white; isolation: isolate; }
+
+/* ---- Skyline (random row of standalone trapgevel SVGs) ---- */
+.canal-footer .skyline {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  height: 152px;
+  overflow: hidden;
+}
+.canal-footer .house-wrap {
+  position: relative;
+  flex-shrink: 0;
+  margin-right: -2px;        /* 2-px overlap closes the AA seam between facades */
+}
+.canal-footer .house {
+  display: block;
+  shape-rendering: geometricPrecision;
+}
+/* Each house's CSS dimensions = ~0.6 of viewBox dims so the row stays compact. */
+.canal-footer .h-a { width: 48px; height: 120px; }
+.canal-footer .h-b { width: 60px; height: 132px; }
+.canal-footer .h-c { width: 42px; height: 144px; }
+.canal-footer .h-d { width: 54px; height: 102px; }
+.canal-footer .h-e { width: 57px; height: 126px; }
+.canal-footer .house.flipped { transform: scaleX(-1); }
+
+/* "House #14" — the Conduction office. Centre of the skyline, painted
+   in light cobalt blue with a small white house-number next to the door. */
+.canal-footer .house-conduction .house path { fill: var(--c-blue-cobalt); }
+.canal-footer .house-conduction::after {
+  content: '14';
+  position: absolute;
+  bottom: 8px;
+  left: calc(50% + 12px);
+  color: white;
+  font-family: var(--conduction-typography-font-family-base, 'Inter', system-ui, sans-serif);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* ---- Kade (gray quay) with bikes + cars drifting along it ---- */
+.canal-footer .kade {
+  position: relative;
+  height: 30px;
+  background: #9b9da3;
+  overflow: hidden;
+}
+.canal-footer .kade::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: rgba(0,0,0,0.16);
+}
+.canal-footer .kade-items {
+  position: absolute; inset: 0;
+  pointer-events: none;
+}
+.canal-footer .ki {
+  position: absolute;
+  bottom: 4px;
+  will-change: transform;
+}
+/* Per-item animation directions; durations + delays come from inline-style
+   (set by the script so they're random + slow). */
+.canal-footer .ki-bike-1 { animation: ki-drift-r 90s linear infinite; }
+.canal-footer .ki-bike-2 { animation: ki-drift-l 90s linear infinite; }
+.canal-footer .ki-car-1  { animation: ki-drift-l 100s linear infinite; bottom: 6px; }
+.canal-footer .ki-car-2  { animation: ki-drift-r 100s linear infinite; bottom: 6px; }
+@keyframes ki-drift-r {
+  from { transform: translateX(-60px); }
+  to   { transform: translateX(100vw); }
+}
+@keyframes ki-drift-l {
+  from { transform: translateX(100vw); }
+  to   { transform: translateX(-60px); }
+}
+
+/* ---- Water (cobalt-900) with canal items + waves + footer text ---- */
+.canal-footer .water {
+  background: var(--c-cobalt-900);
+  padding: 88px 56px 28px;        /* extra top room reserves a band for the boats */
+  position: relative;
+  overflow: hidden;
+}
+
+/* Boats, swimmer, hovercraft drifting on the canal surface. All orange. */
+.canal-footer .canal-items {
+  position: absolute;
+  left: 0; right: 0;
+  top: 0;
+  height: 76px;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+.canal-footer .ci {
+  position: absolute;
+  bottom: 6px;
+  will-change: transform;
+}
+.canal-footer .ci-cruise    { animation: ci-drift-r 220s linear infinite; bottom: 12px; }
+.canal-footer .ci-sloep     { animation: ci-drift-l 160s linear infinite; bottom: 18px; }
+.canal-footer .ci-row       { animation: ci-drift-r 260s linear infinite; bottom: 22px; }
+.canal-footer .ci-swim      { animation: ci-drift-r 400s linear infinite; bottom: 32px; }
+.canal-footer .ci-hover     { animation: ci-drift-l 120s linear infinite; bottom: 8px;  }
+.canal-footer .ci-periscope { animation: ci-drift-r 320s linear infinite; bottom: 4px;  }
+.canal-footer .ci-whale     { animation: ci-drift-l 280s linear infinite; bottom: 14px; }
+@keyframes ci-drift-r {
+  from { transform: translateX(-260px); }
+  to   { transform: translateX(calc(100vw + 60px)); }
+}
+@keyframes ci-drift-l {
+  from { transform: translateX(calc(100vw + 60px)); }
+  to   { transform: translateX(-260px); }
+}
+
+.canal-footer .canal-waves {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0.11;
+  z-index: 0;
+}
+.canal-footer .canal-waves path {
+  fill: none;
+  stroke: white;
+  stroke-width: 2;
+  stroke-linejoin: miter;
+  stroke-linecap: round;
+}
+.canal-footer .canal-waves .w1 { stroke-dasharray: 14 22; animation: canal-wave-flow  60s linear infinite; }
+.canal-footer .canal-waves .w2 { stroke-dasharray: 18 28; animation: canal-wave-flow 110s linear infinite reverse; }
+.canal-footer .canal-waves .w3 { stroke-dasharray: 22 36; animation: canal-wave-flow 160s linear infinite; }
+@keyframes canal-wave-flow { to { stroke-dashoffset: -360; } }
+
+.canal-footer .footer-grid,
+.canal-footer .legal-bar { position: relative; z-index: 2; }
+
+.canal-footer .footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
+  gap: 48px;
+  max-width: 1280px;
+  margin: 0 auto 48px;
+}
+.canal-footer .brand .wm {
+  font-size: 22px; font-weight: 700;
+  letter-spacing: -0.02em; color: white;
+  margin: 0 0 12px;
+}
+.canal-footer .next-blue { color: var(--c-nextcloud-blue); }
+.canal-footer .brand p {
+  font-size: 14px; line-height: 1.55;
+  color: rgba(255,255,255,0.7);
+  max-width: 32ch; margin: 0 0 24px;
+}
+.canal-footer .brand .triad {
+  display: flex; gap: 16px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px; letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.55);
+}
+.canal-footer .brand .triad .h {
+  width: 10px; height: 12px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-orange-knvb);
+  display: inline-block; margin-right: 6px;
+  vertical-align: middle;
+}
+.canal-footer .brand .socials {
+  display: flex; gap: 10px;
+  margin-top: 18px;
+}
+.canal-footer .brand .socials a {
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  width: 34px; height: 34px;
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 8px;
+  color: rgba(255,255,255,0.78);
+  text-decoration: none;
+  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+.canal-footer .brand .socials a:hover {
+  color: var(--c-orange-knvb);
+  border-color: var(--c-orange-knvb);
+  background: rgba(255,107,0,0.08);
+}
+.canal-footer .brand .socials svg {
+  width: 16px; height: 16px;
+  stroke: currentColor; stroke-width: 1.8; fill: none;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.canal-footer .brand .socials svg .filled { fill: currentColor; stroke: none; }
+
+/* House #14 (Conduction office) is clickable. */
+.canal-footer .house-conduction { cursor: pointer; }
+.canal-footer .house-conduction:hover .house path { filter: brightness(1.12); }
+
+/* Canal items respond to clicks (override the overlay's pointer-events). */
+.canal-footer .ci { cursor: pointer; pointer-events: auto; }
+.canal-footer h4 {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px; letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.55);
+  font-weight: 500; margin: 0 0 16px;
+}
+.canal-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.canal-footer ul a {
+  color: rgba(255,255,255,0.85);
+  text-decoration: none; font-size: 14px;
+}
+.canal-footer ul a:hover { color: var(--c-orange-knvb); }
+
+.canal-footer .legal-bar {
+  border-top: 1px solid rgba(255,255,255,0.1);
+  max-width: 1280px;
+  margin: 0 auto;
+  padding-top: 24px;
+  display: flex; justify-content: space-between; align-items: center;
+  flex-wrap: wrap; gap: 16px;
+  font-size: 12px;
+  color: rgba(255,255,255,0.55);
+  font-family: var(--conduction-typography-font-family-code);
+}
+.canal-footer .legal-bar .left, .canal-footer .legal-bar .right {
+  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
+}
+.canal-footer .legal-bar a { color: rgba(255,255,255,0.65); text-decoration: none; }
+.canal-footer .legal-bar a:hover { color: var(--c-orange-knvb); }
+.canal-footer .legal-bar .legal-links {
+  display: inline-flex; gap: 8px; align-items: center;
+}
+.canal-footer .legal-bar .legal-links .sep { opacity: 0.4; }
+.canal-footer .legal-bar .iso-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 9px;
+  border: 1px solid rgba(255,255,255,0.25);
+  border-radius: 4px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: rgba(255,255,255,0.85);
+  transition: border-color 120ms ease, color 120ms ease;
+}
+.canal-footer .legal-bar .iso-badge:hover {
+  border-color: var(--c-orange-knvb);
+  color: var(--c-orange-knvb);
+}
+.canal-footer .legal-bar .iso-badge .iso-mark {
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+.canal-footer .legal-bar .iso-badge .iso-num {
+  opacity: 0.85;
+}
+.canal-footer .nlds-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: rgba(255,255,255,0.85);
+}
+.canal-footer .nlds-badge svg { width: 12px; height: 12px; stroke: var(--c-mint-500, #2E9866); stroke-width: 2; fill: none; }
+
+/* ============================================================
+   Mini-game HUD: timer (60s) + counter (100 → 0). Lives in the
+   top-right of the canal band. Hidden until the player sinks
+   their first boat — first sink kicks the game off. Every sink
+   (including the original fleet drifting at page load) ticks
+   the counter down by 1; the counter flashes orange on each tick.
+
+   Boss waves trigger off counter milestones:
+     - score === 10  → cruise-ship swarm (5 ships, HP 5 each)
+     - score === 1   → battleship boss (HP 10)
+   Spawned boats use Web Animations API so their drift duration
+   can scale with the per-game speed multiplier.
+   ============================================================ */
+.canal-footer .game-hud {
+  position: absolute;
+  top: 14px;
+  right: 56px;
+  z-index: 3;
+  display: flex;
+  gap: 36px;
+  font-family: var(--conduction-typography-font-family-code);
+  color: white;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: opacity 240ms ease, transform 240ms ease;
+}
+.canal-footer .game-hud.active { opacity: 1; transform: translateY(0); }
+.canal-footer .game-hud .hud-block { text-align: right; }
+.canal-footer .game-hud .hud-num {
+  display: block;
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  transition: color 200ms ease;
+  /* Dark glow keeps the digits legible while bosses drift behind them. */
+  text-shadow: 0 1px 10px rgba(11,32,73,0.95), 0 0 4px rgba(11,32,73,0.7);
+}
+.canal-footer .game-hud .hud-label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.55);
+  margin-top: 6px;
+  text-shadow: 0 1px 6px rgba(11,32,73,0.95);
+}
+.canal-footer .game-hud .hud-counter.tick .hud-num { animation: hud-tick 420ms ease; }
+@keyframes hud-tick {
+  0%   { transform: scale(1);    color: white; }
+  35%  { transform: scale(1.45); color: var(--c-orange-knvb); }
+  100% { transform: scale(1);    color: white; }
+}
+.canal-footer .game-hud .hud-timer.urgent .hud-num {
+  color: #ff5544;
+  animation: hud-pulse 800ms ease infinite;
+}
+@keyframes hud-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.45; }
+}
+
+/* Game-over panel — appears below the HUD when timer hits 0
+   or the counter reaches 0 (battleship sunk = victory). */
+.canal-footer .game-over {
+  position: absolute;
+  top: 14px;
+  right: 56px;
+  z-index: 4;
+  background: rgba(0,0,0,0.55);
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 8px;
+  padding: 14px 18px;
+  font-family: var(--conduction-typography-font-family-code);
+  color: white;
+  pointer-events: auto;
+  text-align: right;
+  display: none;
+  min-width: 160px;
+}
+.canal-footer .game-over.show { display: block; }
+.canal-footer .game-over .go-title {
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--c-orange-knvb);
+  margin: 0 0 6px;
+}
+.canal-footer .game-over .go-stat {
+  font-size: 22px; font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin: 0 0 12px;
+  font-variant-numeric: tabular-nums;
+}
+.canal-footer .game-over button {
+  font-family: inherit;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  background: var(--c-orange-knvb);
+  color: var(--c-cobalt-900);
+  border: 0;
+  border-radius: 4px;
+  padding: 7px 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.canal-footer .game-over button:hover { filter: brightness(1.1); }
+
+/* Boss ships sit one layer above their spawned siblings so the
+   cruise-swarm and battleship draw on top of the regular drift. */
+.canal-footer .ci.boss { z-index: 2; }
+
+/* Damage flash on a multi-HP ship hit — pure filter so we don't
+   fight the WAAPI translateX animation. */
+.canal-footer .ci.damaged { animation: ci-damage 240ms ease; }
+@keyframes ci-damage {
+  0%, 100% { filter: none; }
+  35%      { filter: brightness(2.6) saturate(0.4) drop-shadow(0 0 6px rgba(255,255,255,0.7)); }
+}
+
+/* HP pips above bosses — orange dots that fade out on each hit. */
+.canal-footer .ci .hp-pips .pip {
+  transition: opacity 200ms ease, fill 200ms ease;
+}
+.canal-footer .ci .hp-pips .pip.hit {
+  opacity: 0.18;
+  fill: rgba(255,255,255,0.4);
+}