custom_pages reference
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
<!--
|
||||
============================================================================
|
||||
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">PEAKED 32 TODAY</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 Dispatches →</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>
|
||||
Reference in New Issue
Block a user