docs/website-pages-spec (#5)

Reviewed-on: #5 Reviewed-by: xtul <mpiasecki720@protonmail.com> Co-authored-by: vickydotbat <vickydotbat@tutamail.com> Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
2026-06-26 08:00:05 +00:00
parent 9bfdc8a8b4
commit 52999ae604
39 changed files with 9143 additions and 0 deletions
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Westgate page preview (theme harness)</title>
+<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+/* --- Simulated theme globals (mirror of scss/westgate/_tokens.scss :root) --- */
+:root{
+  --wg-font-display:"Cinzel",Georgia,serif;
+  --wg-font-text:"Jost",system-ui,sans-serif;
+  --wg-font-ui:"Jost",system-ui,sans-serif;
+  --wg-font-code:"IBM Plex Mono",ui-monospace,monospace;
+  --wg-bg:#0f0d12;--wg-bg-deep:#09080b;--wg-panel:#18141d;--wg-panel-2:#110f15;
+  --wg-plum:#2a1222;--wg-plum-soft:#3a1830;--wg-gold:#c2a35a;--wg-gold-soft:#a8893f;
+  --wg-red:#8e3438;--wg-status-online:#7fb86a;
+  --wg-text:#e6e0d6;--wg-text-soft:#b9b2a6;--wg-text-muted:#9a9086;
+  --wg-border:rgba(194,163,90,.14);--wg-border-soft:rgba(194,163,90,.08);
+  --wg-velvet-panel:linear-gradient(100deg,rgba(42,18,34,.46) 0%,rgba(25,22,31,.95) 23%,rgba(18,16,23,.99) 62%,rgba(13,12,17,.98) 100%);
+  --wg-velvet-panel-hover:linear-gradient(100deg,rgba(58,24,48,.56) 0%,rgba(31,25,39,.98) 23%,rgba(21,18,27,1) 62%,rgba(15,14,20,.99) 100%);
+  --wg-velvet-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 0 34px rgba(96,32,68,.11),0 10px 26px rgba(0,0,0,.24);
+}
+html,body{margin:0;background:var(--wg-bg);color:var(--wg-text-soft);font-family:var(--wg-font-text);}
+/* simulate Harmony brand hero banner + content container */
+.harness-brand{max-width:1320px;margin:0 auto;padding:14px 20px 0;}
+.harness-brand .bar{border:1px solid rgba(194,163,90,.22);border-radius:10px;background:linear-gradient(90deg,rgba(5,4,7,.82),rgba(10,8,12,0) 52%),#16121b;padding:18px 26px;display:flex;align-items:center;gap:14px;box-shadow:0 18px 42px rgba(0,0,0,.3);}
+.harness-brand .logo{width:22px;height:22px;transform:rotate(45deg);border:1.5px solid var(--wg-gold);display:flex;align-items:center;justify-content:center;}
+.harness-brand .logo i{width:7px;height:7px;background:var(--wg-gold);}
+.harness-brand .ttl{font-family:var(--wg-font-display);font-weight:600;font-size:18px;letter-spacing:.12em;color:var(--wg-text);text-transform:uppercase;}
+.harness-brand .sub{font-family:var(--wg-font-display);font-size:11px;letter-spacing:.22em;color:var(--wg-gold);text-transform:uppercase;}
+.harness-nav{max-width:1320px;margin:10px auto 0;padding:0 20px;display:flex;gap:26px;}
+.harness-nav a{font-family:var(--wg-font-ui);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--wg-text-soft);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;}
+.harness-nav a.active{color:var(--wg-text);border-bottom-color:var(--wg-gold);}
+.harness-content{max-width:1320px;margin:18px auto 0;padding:0 20px 60px;}
+.harness-label{max-width:1320px;margin:0 auto;padding:10px 20px 0;font-family:var(--wg-font-code);font-size:11px;color:#6b6152;letter-spacing:.1em;text-transform:uppercase;}
+</style>
+</head>
+<body>
+  <div class="harness-label">▾ Simulated theme chrome (brand hero + nav + #content) — the widget HTML is everything below the nav</div>
+  <div class="harness-brand"><div class="bar"><div class="logo"><i></i></div><div><div class="ttl">Shadows Over Westgate</div><div class="sub">Persistent World</div></div></div></div>
+  <nav class="harness-nav"><a class="active" href="#">Home</a><a href="#">News</a><a href="#">Gallery</a><a href="#">Dev Blog</a><a href="#">Forums</a><a href="#">Wiki</a></nav>
+  <div class="harness-content" id="slot">Loading widget…</div>
+<script>
+fetch('home.html').then(r=>r.text()).then(html=>{
+  // strip the leading HTML comment block, keep <style> + markup
+  document.getElementById('slot').innerHTML = html.replace(/^<!--[\s\S]*?-->/,'');
+});
+</script>
+</body>
+</html>