From ae6013d9d61231836160575777f522f3ac20d2ff Mon Sep 17 00:00:00 2001 From: JB Date: Sun, 26 Jul 2026 00:09:49 -0400 Subject: [PATCH] feat: expand SHD.build community platform branding --- docs/DESIGN_SYSTEM.md | 34 ++++++++++++++++++++++++++--- src/app.css | 1 + src/lib/components/AppShell.svelte | 24 ++++++++++---------- src/routes/+page.svelte | 15 ++++++++++--- src/routes/database/+page.server.ts | 26 ++++++++++++++++++++++ src/routes/database/+page.svelte | 29 ++++++++++++++++++++++++ src/routes/news/+page.svelte | 26 ++++++++++++++++++++++ src/routes/sign-in/+page.svelte | 2 +- src/routes/terms/+page.svelte | 2 +- 9 files changed, 140 insertions(+), 19 deletions(-) create mode 100644 src/routes/database/+page.server.ts create mode 100644 src/routes/database/+page.svelte create mode 100644 src/routes/news/+page.svelte diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md index 47d1ba9..a0f7457 100644 --- a/docs/DESIGN_SYSTEM.md +++ b/docs/DESIGN_SYSTEM.md @@ -1,6 +1,10 @@ # SHD.build Design System -This document defines the visual language for SHD.build. New pages should feel like part of the same tactical data network as the admin dashboard, while public pages may use more space and larger editorial typography. +This document defines the visual language for SHD.build, the independent +Division Resurgence community for builds, guides, game data, news, and +discussion. New pages should feel like part of the same tactical intelligence +network as the admin dashboard, while public pages may use more space and larger +editorial typography. ## Design principles @@ -64,8 +68,32 @@ widths and becomes a two-column touch-friendly grid on narrow mobile screens. The footer repeats the complete SHD brand lockup used by the global header: double-ring SHD mark, white `SHD`, orange `.build`, and the restrained -`LOADOUT NETWORK` descriptor. Do not substitute a plain text wordmark or color -the complete product name orange. +`RESURGENCE COMMUNITY` descriptor. Do not substitute a plain text wordmark or +color the complete product name orange. + +### Community platform positioning + +SHD.build is a full Division Resurgence community, not solely a loadout tool. +Primary product language and global navigation must represent five durable +channels: News, Database, Builds, Guides, and Builder. Loadout-specific terms +remain appropriate inside build routes, but the global brand descriptor, +homepage metadata, hero, sign-in introduction, and footer describe the broader +community platform. + +The homepage uses a community-channel grid to establish this information +architecture. Each channel has an operational code, plain-language purpose, +and explicit destination. New channels should extend this reusable pattern +rather than turning the navigation into an undifferentiated list. Honest +launch-state pages may describe planned capability, but must distinguish queued +features from live data. Database landing metrics use approved active records, +not invented activity counts. + +On desktop the five public destinations remain visible in the global +navigation. Mobile navigation numbers destinations dynamically so adding a +channel cannot collide with Inbox, Profile, or ISAC codes. Community channel +cards collapse from four columns to two and then one; hover color alone never +replaces their textual destination labels, focus-visible treatment, or pressed +feedback. Contact notifications use the mandatory ISAC visual identity because they are operational inbound messages. The notification carries a concise preview and a diff --git a/src/app.css b/src/app.css index 78a3887..0b5e3ce 100644 --- a/src/app.css +++ b/src/app.css @@ -197,4 +197,5 @@ .weapon-mod-exotic-toggle>span{width:44px;min-height:42px;padding:0}.weapon-mod-exotic-toggle input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.weapon-mod-exotic-toggle .game-icon{width:30px;height:30px}.weapon-mod-compatibility .segmented-choice>div{height:48px}.weapon-mod-compatibility .segmented-choice .game-icon{width:34px;height:34px}.weapon-mod-exotic-section{margin-top:10px;padding:9px;border:1px solid #74552a;border-left:2px solid var(--quality-high-end);background:#0d1011}.weapon-mod-exotic-attributes{display:grid;gap:6px;margin-top:7px}.weapon-mod-exotic-attributes>div{display:grid;grid-template-columns:30px minmax(240px,1fr) 150px 150px 30px;align-items:end;gap:6px;padding:6px;border:1px solid var(--shd-border);background:#101314}.weapon-mod-exotic-attributes>div>strong{height:100%;display:grid;place-items:center;background:#171b1c;color:var(--quality-high-end);font-size:8px}.weapon-mod-exotic-attributes label{display:grid;gap:4px;color:var(--shd-text-muted);font-size:5px;font-weight:900;letter-spacing:.5px}.weapon-mod-exotic-attributes input{height:32px;margin:0;padding:0 6px}.weapon-mod-exotic-attributes>div>button{height:32px;border:1px solid #563734;background:#1d1212;color:var(--shd-danger);cursor:pointer}.weapon-mod-exotic-attributes>div>button:disabled{opacity:.3;cursor:not-allowed}@media(max-width:700px){.weapon-mod-exotic-attributes>div{grid-template-columns:30px 1fr}.weapon-mod-exotic-attributes label,.weapon-mod-exotic-attributes>div>button{grid-column:2}.weapon-mod-compatibility .segmented-choice>div{height:auto;grid-template-columns:repeat(3,1fr)}.weapon-mod-compatibility .segmented-choice span{min-height:50px}} .gear-mod-identity{display:grid;grid-template-columns:minmax(320px,1fr) minmax(560px,1.5fr);align-items:end;gap:8px}.gear-mod-identity>.field{margin:0}.gear-mod-primary-types>div{flex-wrap:wrap}.gear-mod-row{min-width:1120px;grid-template-columns:1.2fr 1fr .9fr 1fr .55fr .55fr .3fr}.gear-mod-row>span{display:flex;align-items:center;gap:6px}.gear-mod-row>span small{color:var(--shd-text-muted)}@media(max-width:900px){.gear-mod-identity{grid-template-columns:1fr}}@media(max-width:700px){.gear-mod-primary-types>div{display:grid;grid-template-columns:1fr 1fr}} .missing-item-icon{opacity:.7;filter:saturate(.75)}.icon-upload-preview .missing-item-icon{width:66px;height:66px;opacity:.62}.registry-icon-identity>.missing-item-icon,.registry-icon-rail .missing-item-icon{padding:2px;border:1px dashed #424849;background:#101314}.builder-picker .missing-item-icon,.builder-radio-grid .missing-item-icon{opacity:.66} +.community-metrics{gap:38px}.community-metrics strong{color:var(--shd-orange);font-size:15px;letter-spacing:1px}.community-preview .gear-node{width:98px;color:var(--shd-text)}.community-preview .gear-node:hover,.community-preview .gear-node:focus-visible{border-color:var(--shd-orange);background:#211a0e}.community-preview .gear-node:active{transform:translateY(1px);filter:brightness(.86)}.community-preview .gear-node b{font-size:7px;letter-spacing:.55px}.community-channels{padding:58px max(24px,5vw) 70px;border-top:1px solid var(--shd-border);background:#0c0f10}.community-channels>.section-heading{max-width:1240px}.community-channels>.section-heading>p{max-width:310px;margin:0;color:var(--shd-text-muted);font:12px/1.5 Georgia,serif;text-align:right}.community-channel-grid{max-width:1240px;display:grid;grid-template-columns:repeat(4,1fr);margin:auto;border:1px solid var(--shd-border)}.community-channel-grid>a{min-height:205px;display:flex;flex-direction:column;padding:20px;border-left:1px solid var(--shd-border);background:#111415;color:var(--shd-text)}.community-channel-grid>a:first-child{border-left:0}.community-channel-grid>a:hover,.community-channel-grid>a:focus-visible{background:#171b1c;box-shadow:inset 0 2px var(--shd-orange)}.community-channel-grid>a:active{filter:brightness(.84)}.community-channel-grid small{color:#626a6c;font-size:6px;letter-spacing:1px}.community-channel-grid strong{margin:18px 0 9px;font-size:14px;letter-spacing:.6px}.community-channel-grid span{color:#858d8f;font:11px/1.55 Georgia,serif}.community-channel-grid b{margin-top:auto;padding-top:17px;color:var(--shd-orange);font-size:7px;letter-spacing:.8px}.community-index-page{padding-top:34px}.community-index-hero{margin-bottom:12px}.community-database-intro{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.community-database-intro>div{display:grid;grid-template-columns:150px 1fr 1.4fr;align-items:center;gap:12px;min-height:65px;padding:10px 13px;border:1px solid var(--shd-border);background:#101314}.community-database-intro span{color:#666e70;font-size:6px;letter-spacing:1px}.community-database-intro strong{color:var(--shd-orange);font-size:8px;letter-spacing:.7px}.community-database-intro small{color:#7f8789;font:10px/1.45 Georgia,serif}.database-registry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.database-registry-grid article{min-height:180px;display:flex;flex-direction:column;padding:17px;border:1px solid var(--shd-border);border-top:2px solid #43494a;background:#111415}.database-registry-grid article:hover{border-top-color:var(--shd-orange);background:#15191a}.database-registry-grid header{height:auto;display:flex;justify-content:space-between}.database-registry-grid header small{color:#596164;font-size:6px;letter-spacing:.8px}.database-registry-grid header b{color:var(--shd-orange);font-size:20px}.database-registry-grid h2{margin:18px 0 8px;font-size:16px}.database-registry-grid p{color:#858d8f;font:11px/1.55 Georgia,serif}.database-registry-grid>article>span{margin-top:auto;color:#687073;font-size:6px;font-weight:900;letter-spacing:.8px}.news-channel-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:10px}.news-primary{min-height:390px;padding:30px;border:1px solid var(--shd-border);border-top:2px solid var(--shd-orange);background:linear-gradient(135deg,#151819,#0d1011)}.news-primary>div:first-child{display:flex;justify-content:space-between;padding-bottom:13px;margin-bottom:30px;border-bottom:1px solid var(--shd-border);color:#626a6c;font-size:6px;letter-spacing:1px}.news-primary>div:first-child b{color:var(--shd-orange)}.news-primary h2{max-width:720px;margin:19px 0;font-size:clamp(30px,4vw,52px);line-height:.95}.news-primary>p:not(.eyebrow){max-width:760px;color:#969d9f;font:14px/1.7 Georgia,serif}.news-primary footer{display:flex;gap:7px;margin-top:35px}.news-primary footer span{display:grid;padding:8px 10px;border:1px solid var(--shd-border);color:#626a6c;font-size:6px;letter-spacing:.8px}.news-primary footer b{margin-top:4px;color:#d5d8d5;font-size:8px}.news-channel-grid>aside{padding:19px;border:1px solid var(--shd-border);background:#111415}.news-channel-grid>aside>div{min-height:58px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;border-top:1px solid var(--shd-border)}.news-channel-grid>aside small{color:#596164;font-size:7px}.news-channel-grid>aside span{font-size:8px;letter-spacing:.7px}.news-channel-grid>aside b{color:#6e7678;font-size:6px}@media(max-width:1100px){.community-channel-grid{grid-template-columns:1fr 1fr}.community-channel-grid>a:nth-child(3){border-left:0;border-top:1px solid var(--shd-border)}.community-channel-grid>a:nth-child(4){border-top:1px solid var(--shd-border)}.community-database-intro{grid-template-columns:1fr}.database-registry-grid{grid-template-columns:1fr 1fr}}@media(max-width:750px){.community-channels>.section-heading>p{display:none}.community-channel-grid,.database-registry-grid,.news-channel-grid{grid-template-columns:1fr}.community-channel-grid>a{min-height:155px;border-left:0;border-top:1px solid var(--shd-border)}.community-channel-grid>a:first-child{border-top:0}.community-database-intro>div{grid-template-columns:1fr}.news-primary{padding:22px}.news-primary footer{flex-wrap:wrap}}@media(max-width:430px){.site-header .brand-name small{display:block;font-size:4px;letter-spacing:.7px}} diff --git a/src/lib/components/AppShell.svelte b/src/lib/components/AppShell.svelte index 58dd061..635c5b5 100644 --- a/src/lib/components/AppShell.svelte +++ b/src/lib/components/AppShell.svelte @@ -12,9 +12,11 @@ } = $props(); const links = [ - { href: '/builds', label: 'Discover' }, - { href: '/builder', label: 'Builder' }, - { href: '/guides', label: 'Guides' } + { href: '/news', label: 'News' }, + { href: '/database', label: 'Database' }, + { href: '/builds', label: 'Builds' }, + { href: '/guides', label: 'Guides' }, + { href: '/builder', label: 'Builder' } ]; let showCookieNotice = $state(false); @@ -80,7 +82,7 @@
- SHDSHD.buildLOADOUT NETWORK + SHDSHD.buildRESURGENCE COMMUNITY