ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity

p2 layout

Browse Source 
- _tokens.scss — added --wg-space-2xs…xl (0.25–2rem, 4pt scale), --wg-ledger-line: 1.78rem, --wg-page-width: 1420px.
- Card gaps unified to --wg-space-sm, card interiors to --wg-space-md, the compact topic-list header to --wg-space-xs (_categories.scss, _topics.scss, _widgets.scss, _responsive.scss).
- Ledger ruling height is now one token across topics, posts, pagination, quick-reply, and the composer (_posts.scss, _controls.scss).
- Footer rails now share the topbar's 1420px measure (_footer.scss:36,123,143), so the page's top and bottom edges align.
- Stat tiles got explicit padding instead of inheriting Bootstrap's (_topics.scss:369, _categories.scss:326).
- Documented the scale and rules in DESIGN.md (new "Spacing & Layout" section).
This commit is contained in:
archvillainette
2026-07-11 16:09:38 +02:00
parent f179a48d52
commit 8f783bf7cf
10 changed files with 52 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+17
View File
@@ -38,6 +38,13 @@ typography:
fontWeight: 400 fontWeight: 400
rounded: rounded:
md: "8px" md: "8px"
spacing:
2xs: "0.25rem"
xs: "0.5rem"
sm: "0.75rem"
md: "1rem"
lg: "1.5rem"
xl: "2rem"
components: components:
button-primary: button-primary:
backgroundColor: "#5a4a1a" backgroundColor: "#5a4a1a"
@@ -122,6 +129,16 @@ A tarnish-and-decay palette: gold that has aged, plum that has bruised, black th
### Named Rules ### Named Rules
**The Engraving Rule.** Wide letter-spacing and uppercase belong only to small Cinzel labels. Headings at reading size keep letter-spacing 0. Body text is never tracked, never uppercase. **The Engraving Rule.** Wide letter-spacing and uppercase belong only to small Cinzel labels. Headings at reading size keep letter-spacing 0. Body text is never tracked, never uppercase.
## 3½. Spacing & Layout
Tokens in `_tokens.scss`: `--wg-space-2xs/xs/sm/md/lg/xl` (0.25 / 0.5 / 0.75 / 1 / 1.5 / 2rem, a 4pt scale). Surface-level rules:
- Card interiors pad `--wg-space-md`; compact control bars (topic-list header) pad `--wg-space-xs`.
- Gaps between sibling cards/widgets are `--wg-space-sm`; below `lg` card padding also drops to `--wg-space-sm`.
- The ledger ruling row height is one token everywhere: `--wg-ledger-line` (1.78rem).
- Page rails (topbar, footer, content) share `--wg-page-width` (1420px).
- Fine optical values (tag chips, badge padding, etched insets) stay hand-tuned; the scale governs surface-level spacing, not micro-typography.
## 4. Elevation ## 4. Elevation
Shadows here are candlelight, not physics. They set mood — a soft top highlight like sheen on fabric, an inner plum glow, a wide black falloff — and they do not communicate stacking. Hierarchy between surfaces is carried by panel tone (Velvet Panel Deep → Velvet Panel → Velvet Panel Raised) and by border strength (gold at 8% → 14% → 18–22% alpha). Shadows here are candlelight, not physics. They set mood — a soft top highlight like sheen on fabric, an inner plum glow, a wide black falloff — and they do not communicate stacking. Hierarchy between surfaces is carried by panel tone (Velvet Panel Deep → Velvet Panel → Velvet Panel Raised) and by border strength (gold at 8% → 14% → 18–22% alpha).
scss/westgate/_categories.scss
+3 -2
View File
@@ -7,7 +7,7 @@ ul.categories-list,
ul.westgate-categories-list { ul.westgate-categories-list {
position: relative; position: relative;
display: grid; display: grid;
gap: 0.75rem; gap: var(--wg-space-sm);
padding-left: 0; padding-left: 0;
} }
@@ -15,7 +15,7 @@ li[component="categories/category"] {
position: relative; position: relative;
isolation: isolate; isolation: isolate;
margin: 0 !important; margin: 0 !important;
padding: 1rem !important; padding: var(--wg-space-md) !important;
overflow: visible; overflow: visible;
transition: transition:
background 0.18s ease, background 0.18s ease,
@@ -323,6 +323,7 @@ ul.category-children {
li[component="categories/category"] .meta.stats > div { li[component="categories/category"] .meta.stats > div {
min-height: 3.55rem; min-height: 3.55rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important; background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important; border: 1px solid rgba(194, 163, 90, 0.09) !important;
border-radius: 3px !important; border-radius: 3px !important;
scss/westgate/_controls.scss
+1 -1
View File
@@ -399,7 +399,7 @@ table[component="notification/table"] a[data-type]:focus {
), ),
linear-gradient(100deg, rgba(32, 19, 30, 0.98), rgba(13, 12, 17, 0.98)) !important; linear-gradient(100deg, rgba(32, 19, 30, 0.98), rgba(13, 12, 17, 0.98)) !important;
background-size: background-size:
100% 1.82rem, 100% var(--wg-ledger-line),
auto; auto;
border-color: rgba(194, 163, 90, 0.18) !important; border-color: rgba(194, 163, 90, 0.18) !important;
color: var(--wg-text-soft) !important; color: var(--wg-text-soft) !important;
scss/westgate/_footer.scss
+3 -3
View File
@@ -33,7 +33,7 @@
display: grid; display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(10rem, 1fr) minmax(10rem, 1fr); grid-template-columns: minmax(0, 1.6fr) minmax(10rem, 1fr) minmax(10rem, 1fr);
gap: clamp(2rem, 5vw, 3.125rem); gap: clamp(2rem, 5vw, 3.125rem);
width: min(100%, 1240px); width: min(100%, var(--wg-page-width));
margin: 0 auto; margin: 0 auto;
padding: clamp(2.75rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 1.875rem; padding: clamp(2.75rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 1.875rem;
} }
@@ -120,7 +120,7 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
width: min(100%, 1240px); width: min(100%, var(--wg-page-width));
margin: 0 auto; margin: 0 auto;
padding: 1.375rem clamp(1rem, 4vw, 2rem); padding: 1.375rem clamp(1rem, 4vw, 2rem);
border-top: 1px solid rgba(194, 163, 90, 0.1); border-top: 1px solid rgba(194, 163, 90, 0.1);
@@ -140,7 +140,7 @@
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.625rem; gap: 0.625rem;
width: min(100%, 1240px); width: min(100%, var(--wg-page-width));
margin: 0 auto; margin: 0 auto;
padding: 0 1rem 1.875rem; padding: 0 1rem 1.875rem;
font-family: var(--wg-font-ui); font-family: var(--wg-font-ui);
scss/westgate/_posts.scss
+4 -4
View File
@@ -46,7 +46,7 @@ li[component="post"] .post-container {
background: background:
linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
var(--wg-ledger-panel) !important; var(--wg-ledger-panel) !important;
background-size: 100% 1.82rem, auto; background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid var(--wg-ledger-border) !important; border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.32) !important; border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
border-radius: 6px !important; border-radius: 6px !important;
@@ -241,7 +241,7 @@ li[component="post"] [component="post/downvote"] {
background: background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)),
rgba(18, 15, 22, 0.96) !important; rgba(18, 15, 22, 0.96) !important;
background-size: 100% 1.55rem, auto; background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important; border-color: var(--wg-ledger-border) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32) !important;
color: var(--wg-ledger-ink) !important; color: var(--wg-ledger-ink) !important;
@@ -275,7 +275,7 @@ textarea[component="topic/quickreply/text"],
background: background:
linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
rgba(18, 15, 22, 0.92) !important; rgba(18, 15, 22, 0.92) !important;
background-size: 100% 1.82rem, auto; background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important; border-color: var(--wg-ledger-border) !important;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026), inset 0 1px 0 rgba(255, 255, 255, 0.026),
@@ -300,7 +300,7 @@ textarea[component="topic/quickreply/text"]:focus,
background: background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)),
var(--wg-ledger-panel) !important; var(--wg-ledger-panel) !important;
background-size: 100% 1.82rem, auto; background-size: 100% var(--wg-ledger-line), auto;
border-color: var(--wg-ledger-border) !important; border-color: var(--wg-ledger-border) !important;
box-shadow: none !important; box-shadow: none !important;
color: var(--wg-text-soft) !important; color: var(--wg-text-soft) !important;
scss/westgate/_responsive.scss
+2 -2
View File
@@ -11,7 +11,7 @@
li[component="categories/category"], li[component="categories/category"],
li[component="category/topic"], li[component="category/topic"],
li[component="post"] .post-container { li[component="post"] .post-container {
padding: 0.85rem !important; padding: var(--wg-space-sm) !important;
} }
li[component="categories/category"] h2.title { li[component="categories/category"] h2.title {
@@ -39,7 +39,7 @@
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.category-header { .category-header {
padding: 0.85rem; padding: var(--wg-space-sm);
} }
li[component="post"] .content, li[component="post"] .content,
scss/westgate/_tokens.scss
+8
View File
@@ -71,6 +71,14 @@
} }
:root { :root {
--wg-space-2xs: 0.25rem;
--wg-space-xs: 0.5rem;
--wg-space-sm: 0.75rem;
--wg-space-md: 1rem;
--wg-space-lg: 1.5rem;
--wg-space-xl: 2rem;
--wg-ledger-line: 1.78rem;
--wg-page-width: 1420px;
--wg-font-display: "Cinzel", Georgia, "Times New Roman", serif; --wg-font-display: "Cinzel", Georgia, "Times New Roman", serif;
--wg-font-text: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --wg-font-text: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--wg-font-ui: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --wg-font-ui: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
scss/westgate/_topbar.scss
+1 -1
View File
@@ -28,7 +28,7 @@ $wg-topbar-panel-bg: linear-gradient(
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; align-items: center;
gap: 0.9rem; gap: 0.9rem;
width: min(100%, 1420px); width: min(100%, var(--wg-page-width));
min-height: 64px; min-height: 64px;
margin: 0 auto; margin: 0 auto;
padding: 0.55rem clamp(0.85rem, 2vw, 1.5rem); padding: 0.55rem clamp(0.85rem, 2vw, 1.5rem);
scss/westgate/_topics.scss
+7 -6
View File
@@ -20,7 +20,7 @@ body.template-category .category-header .description {
} }
.topic-list-header > .card { .topic-list-header > .card {
padding: 0.55rem !important; padding: var(--wg-space-xs) !important;
background: rgba(18, 15, 22, 0.78) !important; background: rgba(18, 15, 22, 0.78) !important;
border-color: var(--wg-ledger-border) !important; border-color: var(--wg-ledger-border) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
@@ -42,7 +42,7 @@ body.template-category .category-header .description {
ul[component="category"] { ul[component="category"] {
display: grid; display: grid;
gap: 0.85rem; gap: var(--wg-space-sm);
padding: 0 !important; padding: 0 !important;
background: transparent !important; background: transparent !important;
border: 0 !important; border: 0 !important;
@@ -53,13 +53,13 @@ li[component="category/topic"] {
position: relative; position: relative;
isolation: isolate; isolation: isolate;
margin: 0 !important; margin: 0 !important;
padding: 0.95rem 1rem !important; padding: var(--wg-space-md) !important;
overflow: hidden; overflow: hidden;
background: background:
linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem), linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem),
var(--wg-ledger-panel) !important; var(--wg-ledger-panel) !important;
background-size: 100% 1.78rem, auto, auto; background-size: 100% var(--wg-ledger-line), auto, auto;
border: 1px solid var(--wg-ledger-border) !important; border: 1px solid var(--wg-ledger-border) !important;
border-left: 1px solid rgba(194, 163, 90, 0.34) !important; border-left: 1px solid rgba(194, 163, 90, 0.34) !important;
border-radius: 6px !important; border-radius: 6px !important;
@@ -98,7 +98,7 @@ li[component="category/topic"].unread:nth-child(even) {
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem), linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
var(--wg-ledger-panel) !important; var(--wg-ledger-panel) !important;
background-size: 100% 1.78rem, auto, auto; background-size: 100% var(--wg-ledger-line), auto, auto;
} }
li[component="category/topic"]:hover { li[component="category/topic"]:hover {
@@ -137,7 +137,7 @@ li[component="category/topic"].pinned:not(.unread) {
} }
li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) { li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) {
margin-bottom: 0.85rem !important; margin-bottom: var(--wg-space-sm) !important;
} }
li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned))::after { li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned))::after {
@@ -366,6 +366,7 @@ li[component="category/topic"] [component="topic/select"]:focus {
li[component="category/topic"] .meta.stats > div { li[component="category/topic"] .meta.stats > div {
min-height: 3.25rem; min-height: 3.25rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important; background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important; border: 1px solid rgba(194, 163, 90, 0.09) !important;
border-radius: 3px !important; border-radius: 3px !important;
scss/westgate/_widgets.scss
+6 -6
View File
@@ -5,11 +5,11 @@
[data-widget-area="header"], [data-widget-area="header"],
[data-widget-area="footer"] { [data-widget-area="footer"] {
display: grid; display: grid;
gap: 0.85rem; gap: var(--wg-space-sm);
} }
[data-widget-area="header"] { [data-widget-area="header"] {
margin-bottom: 0.85rem; margin-bottom: var(--wg-space-sm);
} }
[data-widget-area="footer"] { [data-widget-area="footer"] {
@@ -20,7 +20,7 @@
[data-widget-area="sidebar-footer"] { [data-widget-area="sidebar-footer"] {
display: grid; display: grid;
align-content: start; align-content: start;
gap: 0.85rem; gap: var(--wg-space-sm);
} }
[data-widget-area] > :where( [data-widget-area] > :where(
@@ -51,11 +51,11 @@
.westgate-widget-card, .westgate-widget-card,
.wg-widget-card .wg-widget-card
) { ) {
padding: 0.85rem; padding: var(--wg-space-md);
background: background:
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
linear-gradient(100deg, rgba(42, 18, 34, 0.34), rgba(18, 16, 23, 0.96) 62%, rgba(13, 12, 17, 0.98)) !important; linear-gradient(100deg, rgba(42, 18, 34, 0.34), rgba(18, 16, 23, 0.96) 62%, rgba(13, 12, 17, 0.98)) !important;
background-size: 100% 1.78rem, auto; background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid rgba(194, 163, 90, 0.14); border: 1px solid rgba(194, 163, 90, 0.14);
border-radius: 8px; border-radius: 8px;
box-shadow: var(--wg-velvet-shadow); box-shadow: var(--wg-velvet-shadow);
@@ -229,7 +229,7 @@
--bs-gutter-x: 0.45rem; --bs-gutter-x: 0.45rem;
--bs-gutter-y: 0.45rem; --bs-gutter-y: 0.45rem;
width: 100%; width: 100%;
margin: 0 0 0.85rem; margin: 0 0 var(--wg-space-sm);
padding: 0.6rem; padding: 0.6rem;
background: background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)), linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),