Style the plugin home page; retire the old widget home.html
Adds home blocks to _pages.scss (art hero, server-status strip with unknown/online/offline states, pitch prose, four-up steps grid) and deletes the superseded paste-into-widget home.html + preview — home now lives in nodebb-plugin-westgate-pages as templates/home.tpl. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -8,9 +8,10 @@ not in ACP widgets:
|
|||||||
- **Gallery** — a player-upload screenshot category rendered as a masonry grid.
|
- **Gallery** — a player-upload screenshot category rendered as a masonry grid.
|
||||||
- **Top bar** — global header partial that replaces the left sidebar.
|
- **Top bar** — global header partial that replaces the left sidebar.
|
||||||
|
|
||||||
The two static pages (Home, Join the Team) are NOT here — they ship as
|
The static pages are NOT here. Home now lives in the
|
||||||
paste-ready HTML widgets in `westgate-pages/home.html` and
|
`nodebb-plugin-westgate-pages` repo as `templates/home.tpl` (sow-* classes,
|
||||||
`westgate-pages/join-the-team.html`.
|
styled by `scss/westgate/_pages.scss`); Join the Team still ships as the
|
||||||
|
paste-ready HTML widget `westgate-pages/join-the-team.html`.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -1,51 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,238 +0,0 @@
|
|||||||
<!--
|
|
||||||
============================================================================
|
|
||||||
SHADOWS OVER WESTGATE — HOME (Custom Page content)
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
HOW TO USE (NodeBB Custom Pages + Widgets, theme: nodebb-theme-westgate)
|
|
||||||
|
|
||||||
1. ACP → Custom Pages: add a page with route "home" (or "/").
|
|
||||||
2. ACP → Extend → Widgets: pick the "Home" template, choose the main
|
|
||||||
content area, drag in an "HTML" widget, and paste THIS ENTIRE FILE in.
|
|
||||||
3. To run without the left sidebar on this page, leave the sidebar widget
|
|
||||||
area empty (Harmony hides an empty sidebar) and keep your nav links in
|
|
||||||
ACP → Navigation (Home / News / Gallery / Dev Blog / Forums / Wiki).
|
|
||||||
|
|
||||||
NOTES
|
|
||||||
- All colours/fonts use the theme's global --wg-* CSS variables, so this
|
|
||||||
block matches the forum + wiki and tracks any future palette change.
|
|
||||||
- Styles are scoped under .wg-page to avoid leaking into forum chrome.
|
|
||||||
- Image placeholders show a striped fill. To go live, copy each
|
|
||||||
data-src onto src (ACP → Uploads gives you the path). data-wg-art marks them.
|
|
||||||
- Server-status numbers are static here; wire them to your status API/widget
|
|
||||||
when ready (search "STATUS" below).
|
|
||||||
============================================================================
|
|
||||||
-->
|
|
||||||
<style>
|
|
||||||
.wg-page{
|
|
||||||
--page-bright:#f3ede4;
|
|
||||||
/* Full-width: the forum panel already provides left/right gutters, so content
|
|
||||||
fills the panel (matching the footer rule). Override per-block where a
|
|
||||||
narrower reading measure is wanted (e.g. .wg-pitch). */
|
|
||||||
--page-maxw:none;
|
|
||||||
font-family:var(--wg-font-text, "Jost", sans-serif);
|
|
||||||
color:var(--wg-text-soft, #b9b2a6);
|
|
||||||
}
|
|
||||||
.wg-page *{box-sizing:border-box;}
|
|
||||||
.wg-page .wg-wrap{max-width:var(--page-maxw);margin:0 auto;}
|
|
||||||
.wg-page a{text-decoration:none;}
|
|
||||||
.wg-page img[data-wg-art]{background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---- Buttons ---- */
|
|
||||||
.wg-page .wg-btn{
|
|
||||||
display:inline-block;font-family:var(--wg-font-ui,"Jost",sans-serif);
|
|
||||||
font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
|
|
||||||
color:#150f08;background:linear-gradient(180deg,#d8bd76,#a8893f);
|
|
||||||
padding:14px 30px;border-radius:6px;border:1px solid rgba(216,194,138,.6);
|
|
||||||
box-shadow:0 4px 22px rgba(168,133,74,.28);transition:filter .2s,transform .2s;
|
|
||||||
}
|
|
||||||
.wg-page .wg-btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
|
|
||||||
.wg-page .wg-btn-ghost{
|
|
||||||
display:inline-block;font-family:var(--wg-font-ui,"Jost",sans-serif);
|
|
||||||
font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
|
|
||||||
color:var(--wg-text,#e6e0d6);background:rgba(194,163,90,.06);
|
|
||||||
padding:14px 30px;border-radius:6px;border:1px solid rgba(194,163,90,.4);
|
|
||||||
transition:background .2s,border-color .2s;
|
|
||||||
}
|
|
||||||
.wg-page .wg-btn-ghost:hover{background:rgba(194,163,90,.12);border-color:rgba(194,163,90,.6);}
|
|
||||||
|
|
||||||
/* ---- Shared bits ---- */
|
|
||||||
.wg-page .wg-eyebrow{font-family:var(--wg-font-display,"Cinzel",serif);font-size:12px;
|
|
||||||
letter-spacing:.28em;text-transform:uppercase;color:var(--wg-gold,#c2a35a);}
|
|
||||||
.wg-page .wg-h2{font-family:var(--wg-font-display,"Cinzel",serif);font-weight:600;
|
|
||||||
font-size:34px;color:var(--page-bright);margin:0;letter-spacing:.02em;
|
|
||||||
text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 10px rgba(104,32,76,.16);}
|
|
||||||
.wg-page .wg-card{background:var(--wg-velvet-panel);border:1px solid var(--wg-border,rgba(194,163,90,.14));
|
|
||||||
border-radius:8px;box-shadow:var(--wg-velvet-shadow);}
|
|
||||||
.wg-page .wg-rule{display:flex;align-items:center;justify-content:center;gap:18px;}
|
|
||||||
.wg-page .wg-rule i{height:1px;width:80px;display:block;}
|
|
||||||
.wg-page .wg-rule span{width:7px;height:7px;background:var(--wg-gold,#c2a35a);transform:rotate(45deg);}
|
|
||||||
|
|
||||||
/* ---- Hero ---- */
|
|
||||||
.wg-page .wg-hero{position:relative;overflow:hidden;border:1px solid rgba(194,163,90,.22);
|
|
||||||
border-radius:10px;min-height:420px;display:flex;flex-direction:column;align-items:center;
|
|
||||||
justify-content:center;text-align:center;padding:64px 24px;margin-top:.25rem;
|
|
||||||
box-shadow:inset 0 1px 0 rgba(255,242,204,.06),inset 0 0 0 1px rgba(33,21,28,.5),0 18px 42px rgba(0,0,0,.3);}
|
|
||||||
.wg-page .wg-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
|
|
||||||
.wg-page .wg-hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
|
|
||||||
background:linear-gradient(180deg,rgba(9,8,11,.55) 0%,rgba(9,8,11,.25) 38%,rgba(9,8,11,.82) 86%,var(--wg-bg,#0f0d12) 100%);}
|
|
||||||
.wg-page .wg-hero__in{position:relative;z-index:2;}
|
|
||||||
.wg-page .wg-hero h1{font-family:var(--wg-font-display,"Cinzel",serif);font-weight:700;
|
|
||||||
font-size:clamp(40px,6vw,68px);line-height:1.04;letter-spacing:.03em;color:var(--page-bright);
|
|
||||||
margin:18px 0 0;text-shadow:0 4px 40px rgba(0,0,0,.7);}
|
|
||||||
.wg-page .wg-hero p{font-family:var(--wg-font-text,"Jost",sans-serif);font-weight:300;
|
|
||||||
font-size:19px;color:#cfc5b7;max-width:620px;margin:22px auto 0;line-height:1.6;
|
|
||||||
text-shadow:0 2px 16px rgba(0,0,0,.8);}
|
|
||||||
.wg-page .wg-hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
|
|
||||||
|
|
||||||
/* ---- Status bar ---- */
|
|
||||||
.wg-page .wg-status{margin-top:-40px;position:relative;z-index:5;padding:24px 32px;
|
|
||||||
display:flex;align-items:center;gap:36px;flex-wrap:wrap;}
|
|
||||||
.wg-page .wg-status__dot{width:12px;height:12px;border-radius:50%;background:var(--wg-status-online,#7fb86a);
|
|
||||||
box-shadow:0 0 0 4px rgba(127,184,106,.16);}
|
|
||||||
.wg-page .wg-status__sep{width:1px;height:40px;background:rgba(194,163,90,.18);}
|
|
||||||
.wg-page .wg-status .lbl{font-family:var(--wg-font-display,"Cinzel",serif);font-size:18px;
|
|
||||||
letter-spacing:.05em;color:var(--wg-text,#e6e0d6);}
|
|
||||||
.wg-page .wg-status .sub{font-family:var(--wg-font-code,"IBM Plex Mono",monospace);font-size:11px;
|
|
||||||
letter-spacing:.06em;color:var(--wg-text-muted,#9a9086);margin-top:3px;}
|
|
||||||
.wg-page .wg-status .big{font-family:var(--wg-font-display,"Cinzel",serif);font-size:25px;color:var(--wg-text,#e6e0d6);}
|
|
||||||
.wg-page .wg-status .big small{font-size:14px;color:var(--wg-text-muted,#9a9086);}
|
|
||||||
.wg-page .wg-status .mono{font-family:var(--wg-font-code,"IBM Plex Mono",monospace);font-size:14px;color:var(--wg-text-soft,#b9b2a6);margin-top:4px;}
|
|
||||||
|
|
||||||
/* ---- Pitch ---- */
|
|
||||||
.wg-page .wg-pitch{max-width:760px;margin:0 auto;padding:92px 24px 24px;text-align:center;}
|
|
||||||
.wg-page .wg-pitch .lead{font-family:var(--wg-font-text,"Jost",sans-serif);font-weight:300;
|
|
||||||
font-size:23px;line-height:1.7;color:#cfc5b7;margin:0 0 32px;}
|
|
||||||
.wg-page .wg-pitch p{font-family:var(--wg-font-text,"Jost",sans-serif);font-size:17px;
|
|
||||||
line-height:1.95;color:var(--wg-text-muted,#9a9086);margin:0 0 24px;}
|
|
||||||
.wg-page .wg-pitch blockquote{font-family:var(--wg-font-display,"Cinzel",serif);font-style:italic;
|
|
||||||
font-size:22px;line-height:1.5;color:#d8c28a;margin:44px auto;max-width:560px;}
|
|
||||||
.wg-page .wg-pitch .sign{font-family:var(--wg-font-display,"Cinzel",serif);font-size:19px;
|
|
||||||
letter-spacing:.04em;color:var(--wg-text,#e6e0d6);margin:32px 0 0;}
|
|
||||||
|
|
||||||
/* ---- Get started ---- */
|
|
||||||
.wg-page .wg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
|
|
||||||
.wg-page .wg-step{display:block;padding:28px 24px;transition:border-color .25s,transform .25s;}
|
|
||||||
.wg-page .wg-step:hover{border-color:rgba(194,163,90,.4)!important;transform:translateY(-4px);}
|
|
||||||
.wg-page .wg-step .ico{width:42px;height:42px;border:1px solid rgba(194,163,90,.4);border-radius:50%;
|
|
||||||
display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
|
|
||||||
.wg-page .wg-step .ico i{width:12px;height:12px;border:1.5px solid var(--wg-gold,#c2a35a);transform:rotate(45deg);display:block;}
|
|
||||||
.wg-page .wg-step h3{font-family:var(--wg-font-display,"Cinzel",serif);font-size:19px;color:var(--wg-text,#e6e0d6);margin:0 0 10px;}
|
|
||||||
.wg-page .wg-step p{font-family:var(--wg-font-text,"Jost",sans-serif);font-size:14.5px;line-height:1.7;color:var(--wg-text-muted,#9a9086);margin:0;}
|
|
||||||
|
|
||||||
/* ---- News strip ---- */
|
|
||||||
.wg-page .wg-news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
|
|
||||||
.wg-page .wg-news article{overflow:hidden;transition:border-color .25s;}
|
|
||||||
.wg-page .wg-news article:hover{border-color:rgba(194,163,90,.4)!important;}
|
|
||||||
.wg-page .wg-news .thumb{height:160px;width:100%;object-fit:cover;display:block;border-bottom:1px solid rgba(194,163,90,.12);background:#161019;}
|
|
||||||
.wg-page .wg-news .body{padding:22px 24px;}
|
|
||||||
.wg-page .wg-news .meta{font-family:var(--wg-font-code,"IBM Plex Mono",monospace);font-size:11px;
|
|
||||||
letter-spacing:.08em;text-transform:uppercase;color:var(--wg-text-muted,#9a9086);margin-bottom:10px;}
|
|
||||||
.wg-page .wg-news h3{font-family:var(--wg-font-display,"Cinzel",serif);font-size:19px;line-height:1.35;color:var(--wg-text,#e6e0d6);margin:0 0 10px;}
|
|
||||||
.wg-page .wg-news p{font-family:var(--wg-font-text,"Jost",sans-serif);font-size:14px;line-height:1.7;color:var(--wg-text-muted,#9a9086);margin:0;}
|
|
||||||
|
|
||||||
.wg-page .wg-section{padding:72px 24px 0;}
|
|
||||||
.wg-page .wg-section.last{padding-bottom:96px;}
|
|
||||||
.wg-page .wg-section__head{text-align:center;margin-bottom:44px;}
|
|
||||||
.wg-page .wg-section__head .wg-eyebrow{display:block;margin-bottom:12px;}
|
|
||||||
.wg-page .wg-flex-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap;}
|
|
||||||
.wg-page .wg-more{font-family:var(--wg-font-ui,"Jost",sans-serif);font-size:12px;letter-spacing:.12em;
|
|
||||||
text-transform:uppercase;color:var(--wg-gold,#c2a35a);border-bottom:1px solid rgba(194,163,90,.4);padding-bottom:3px;}
|
|
||||||
|
|
||||||
@media (max-width:900px){
|
|
||||||
.wg-page .wg-steps{grid-template-columns:repeat(2,1fr);}
|
|
||||||
.wg-page .wg-news{grid-template-columns:1fr;}
|
|
||||||
.wg-page .wg-status{gap:22px;}
|
|
||||||
.wg-page .wg-status__sep{display:none;}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="wg-page wg-home">
|
|
||||||
|
|
||||||
<!-- ============ HERO ============ -->
|
|
||||||
<div class="wg-wrap">
|
|
||||||
<section class="wg-hero">
|
|
||||||
<!-- ART: replace src with your banner key art (wide, ~1600×640). -->
|
|
||||||
<img class="wg-hero__bg" data-wg-art src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/assets/uploads/westgate/home-hero.jpg" alt="" onerror="this.style.display='none'">
|
|
||||||
<div class="wg-hero__veil"></div>
|
|
||||||
<div class="wg-hero__in">
|
|
||||||
<span class="wg-eyebrow">Neverwinter Nights · Persistent World</span>
|
|
||||||
<h1>Welcome to Westgate</h1>
|
|
||||||
<p>An ancient port city rises out of the mists, at the edge of the Sea of Fallen Stars. Mind the shadows.</p>
|
|
||||||
<div class="wg-hero__cta">
|
|
||||||
<a class="wg-btn" href="/wiki">How to Join</a>
|
|
||||||
<a class="wg-btn-ghost" href="/news">Latest News</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ============ SERVER STATUS ============ -->
|
|
||||||
<div class="wg-wrap">
|
|
||||||
<div class="wg-status wg-card">
|
|
||||||
<div style="display:flex;align-items:center;gap:14px;">
|
|
||||||
<span class="wg-status__dot"></span>
|
|
||||||
<div><div class="lbl">Server Online</div><div class="sub">ALPHA · MODULE 0.3</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="wg-status__sep"></div>
|
|
||||||
<!-- STATUS: wire these numbers to your status feed when ready -->
|
|
||||||
<div><div class="big">14 <small>souls online</small></div><div class="sub">PEAK TODAY: 32</div></div>
|
|
||||||
<div class="wg-status__sep"></div>
|
|
||||||
<div style="flex:1;min-width:160px;">
|
|
||||||
<div style="font-family:var(--wg-font-code,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wg-gold,#c2a35a);">Direct Connect</div>
|
|
||||||
<div class="mono">play.westgate.pw</div>
|
|
||||||
</div>
|
|
||||||
<a class="wg-btn" href="/wiki">Connect Guide</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ============ PITCH ============ -->
|
|
||||||
<div class="wg-pitch">
|
|
||||||
<div class="wg-rule" style="margin-bottom:36px;"><i style="background:linear-gradient(90deg,transparent,var(--wg-gold,#c2a35a));"></i><span></span><i style="background:linear-gradient(90deg,var(--wg-gold,#c2a35a),transparent);"></i></div>
|
|
||||||
<p class="lead">Long ago, merchants from distant lands filled its harbors, and gold flowed as freely as wine — but time, as it does, has a way of curdling mortal splendor.</p>
|
|
||||||
<p>Today its bones are old stone and salt-worn docks, and bargains are struck beneath every lantern's glow. Here, hoarded secrets, owed favour, and unspoken truths are the true measure of power — although coin certainly helps.</p>
|
|
||||||
<p>Westgate is a city ever-balanced on a blade's edge, built upon decaying decadence. The masked and nameless guilds clot the veins of the city with their greed and cruelty. Noble houses cling to fading legacies as their bloodlines tangle with curses, ambition, and desperation. Old cults and buried powers hold the Undergate by its throat. Beneath it all, antediluvian things begin to stir — patient, watchful, and hungry.</p>
|
|
||||||
<blockquote>“To walk Westgate's streets is to wager your soul in a game of chance.”</blockquote>
|
|
||||||
<p>Every alley offers opportunity, yet each carries a price. While some come seeking fortune or power, others arrive hoping to disappear — and indeed they do, for in these boulevards you are lucky to merely survive. In Westgate, few leave unchanged… and fewer still leave at all.</p>
|
|
||||||
<p class="sign">Welcome to Westgate. Mind the shadows.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ============ GET STARTED ============ -->
|
|
||||||
<div class="wg-wrap wg-section">
|
|
||||||
<div class="wg-section__head">
|
|
||||||
<span class="wg-eyebrow">Your First Steps</span>
|
|
||||||
<h2 class="wg-h2">Enter the City</h2>
|
|
||||||
</div>
|
|
||||||
<div class="wg-steps">
|
|
||||||
<a class="wg-step wg-card" href="/wiki"><div class="ico"><i></i></div><h3>How to Join</h3><p>Install Neverwinter Nights: EE, point it at our server, and step through the gate.</p></a>
|
|
||||||
<a class="wg-step wg-card" href="/wiki"><div class="ico"><i style="border-radius:0;"></i></div><h3>New Player Wiki</h3><p>Starter guides, character creation, and everything you need for your first night.</p></a>
|
|
||||||
<a class="wg-step wg-card" href="/wiki"><div class="ico"><i style="border-radius:50%;transform:none;"></i></div><h3>The Setting Bible</h3><p>Lore of Westgate — its districts, guilds, noble houses, and buried histories.</p></a>
|
|
||||||
<a class="wg-step wg-card" href="/categories"><div class="ico"><i style="transform:none;border-radius:2px;"></i></div><h3>Join the Community</h3><p>Introduce yourself in the forums and find your place among Westgate's denizens.</p></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ============ LATEST NEWS ============ -->
|
|
||||||
<div class="wg-wrap wg-section last">
|
|
||||||
<div class="wg-flex-head">
|
|
||||||
<div>
|
|
||||||
<span class="wg-eyebrow" style="display:block;margin-bottom:10px;">From the Watch</span>
|
|
||||||
<h2 class="wg-h2">Latest News</h2>
|
|
||||||
</div>
|
|
||||||
<a class="wg-more" href="/news">All News →</a>
|
|
||||||
</div>
|
|
||||||
<div class="wg-news">
|
|
||||||
<article class="wg-card">
|
|
||||||
<a href="/category/1/news"><img class="thumb" data-wg-art src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/assets/uploads/westgate/news-1.jpg" alt="" onerror="this.style.visibility='hidden'"></a>
|
|
||||||
<div class="body"><div class="meta">24 Jun 2026 · Announcement</div><h3>The Gates Open — Alpha Has Begun</h3><p>Westgate opens its harbour to its first wave of adventurers. Everything you need to know.</p></div>
|
|
||||||
</article>
|
|
||||||
<article class="wg-card">
|
|
||||||
<a href="/category/1/news"><img class="thumb" data-wg-art src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/assets/uploads/westgate/news-2.jpg" alt="" onerror="this.style.visibility='hidden'"></a>
|
|
||||||
<div class="body"><div class="meta">21 Jun 2026 · Patch Note</div><h3>Patch 0.3 — The Undergate</h3><p>The tunnels beneath the city are now open. New areas, factions, and dangers await below.</p></div>
|
|
||||||
</article>
|
|
||||||
<article class="wg-card">
|
|
||||||
<a href="/category/1/news"><img class="thumb" data-wg-art src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/assets/uploads/westgate/news-3.jpg" alt="" onerror="this.style.visibility='hidden'"></a>
|
|
||||||
<div class="body"><div class="meta">18 Jun 2026 · Community</div><h3>The Community Charter</h3><p>Our revised rules and the principles that keep Westgate's streets worth walking.</p></div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -5,8 +5,9 @@
|
|||||||
(In the live theme this can instead live in the theme's client-side bundle.)
|
(In the live theme this can instead live in the theme's client-side bundle.)
|
||||||
|
|
||||||
WHY THIS FILE EXISTS
|
WHY THIS FILE EXISTS
|
||||||
- The two static pages (home.html / join-the-team.html) need NO JavaScript;
|
- The static page (join-the-team.html) needs NO JavaScript; it is pure
|
||||||
they are pure HTML/CSS (the only inline bit is an <img onerror> fallback).
|
HTML/CSS (the only inline bit is an <img onerror> fallback). Home lives
|
||||||
|
in the westgate-pages plugin now (templates/home.tpl).
|
||||||
- The TOP BAR needs this small controller for: Forums mega-menu, inline
|
- The TOP BAR needs this small controller for: Forums mega-menu, inline
|
||||||
search, the mobile burger/drawer, and the drawer's Forums accordion.
|
search, the mobile burger/drawer, and the drawer's Forums accordion.
|
||||||
|
|
||||||
|
|||||||
+202
-2
@@ -1,6 +1,6 @@
|
|||||||
// Styles for the file-based site pages served by nodebb-plugin-westgate-pages
|
// Styles for the file-based site pages served by nodebb-plugin-westgate-pages
|
||||||
// (/news /blog /gallery). Home and recruitment carry their own scoped <style>
|
// (/ /news /blog /gallery). Recruitment still carries its own scoped <style>
|
||||||
// blocks in their templates; everything here styles the sow-* class family.
|
// block in its template; everything here styles the sow-* class family.
|
||||||
// Values follow DESIGN.md: Cinzel 600 headings with the etch shadow, velvet
|
// Values follow DESIGN.md: Cinzel 600 headings with the etch shadow, velvet
|
||||||
// panels, the Gilt Edge rule (gold as edging), and dark-gold-plate primaries.
|
// panels, the Gilt Edge rule (gold as edging), and dark-gold-plate primaries.
|
||||||
|
|
||||||
@@ -291,6 +291,10 @@ a.sow-card:hover {
|
|||||||
&.three {
|
&.three {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.four {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sow-gallery-grid {
|
.sow-gallery-grid {
|
||||||
@@ -321,6 +325,190 @@ a.sow-card:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Home: art hero
|
||||||
|
.sow-home-hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--wg-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 420px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--wg-space-xl) var(--wg-space-md);
|
||||||
|
margin-top: var(--wg-space-2xs);
|
||||||
|
box-shadow: var(--wg-velvet-shadow);
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2.5rem, 6vw, 4.25rem);
|
||||||
|
line-height: 1.04;
|
||||||
|
margin: 12px 0 0;
|
||||||
|
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.1875rem;
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
max-width: 620px;
|
||||||
|
margin: 18px auto 0;
|
||||||
|
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-button-row {
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: var(--wg-space-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-home-hero-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-home-hero-veil {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background: linear-gradient(180deg, rgba(9, 8, 11, 0.55) 0%, rgba(9, 8, 11, 0.25) 38%, rgba(9, 8, 11, 0.82) 86%, var(--wg-bg) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-home-hero-inner {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Home: server status strip. Servers are grey ("unknown") until the status
|
||||||
|
// feed marks them .online / .offline — see the script in home.tpl.
|
||||||
|
.sow-status-strip {
|
||||||
|
margin-top: calc(var(--wg-space-lg) * -1);
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
padding: var(--wg-space-sm) var(--wg-space-md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--wg-space-md);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-status-sep {
|
||||||
|
width: 1px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--wg-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-server {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--wg-space-xs);
|
||||||
|
|
||||||
|
&.online .sow-server-dot {
|
||||||
|
background: var(--wg-status-online);
|
||||||
|
box-shadow: 0 0 0 4px rgba(127, 184, 106, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.offline .sow-server-dot {
|
||||||
|
background: var(--wg-status-offline);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unknown (no feed yet): hollow grey ring, so it reads differently from the
|
||||||
|
// solid grey offline dot.
|
||||||
|
.sow-server-dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--wg-text-muted);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-server-name {
|
||||||
|
font-family: var(--wg-font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--wg-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-server-players,
|
||||||
|
.sow-connect-label {
|
||||||
|
font-family: var(--wg-font-code);
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--wg-text-muted);
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-connect {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 160px;
|
||||||
|
|
||||||
|
.sow-connect-label {
|
||||||
|
color: var(--wg-gold);
|
||||||
|
margin: 0 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-connect-addr {
|
||||||
|
font-family: var(--wg-font-code);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Home: setting pitch prose
|
||||||
|
.sow-pitch {
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--wg-space-xl) var(--wg-space-md) 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
line-height: 1.9;
|
||||||
|
margin: 0 0 var(--wg-space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-family: var(--wg-font-display);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.375rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--wg-gold);
|
||||||
|
margin: var(--wg-space-lg) auto;
|
||||||
|
max-width: 560px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-pitch-lead {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.375rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--wg-text-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-pitch-sign {
|
||||||
|
font-family: var(--wg-font-display);
|
||||||
|
font-size: 1.1875rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--wg-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Home: centered section head reusing the page-hero type at section scale
|
||||||
|
.sow-home-section-head {
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.sow-news-layout,
|
.sow-news-layout,
|
||||||
.sow-feature,
|
.sow-feature,
|
||||||
@@ -328,6 +516,18 @@ a.sow-card:hover {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sow-grid.four {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-status-strip {
|
||||||
|
gap: var(--wg-space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sow-status-sep {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.sow-gallery-grid {
|
.sow-gallery-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user