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
scss/westgate/_topics.scss
+7 -6
View File
@@ -20,7 +20,7 @@ body.template-category .category-header .description {
}
.topic-list-header > .card {
padding: 0.55rem !important;
padding: var(--wg-space-xs) !important;
background: rgba(18, 15, 22, 0.78) !important;
border-color: var(--wg-ledger-border) !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"] {
display: grid;
gap: 0.85rem;
gap: var(--wg-space-sm);
padding: 0 !important;
background: transparent !important;
border: 0 !important;
@@ -53,13 +53,13 @@ li[component="category/topic"] {
position: relative;
isolation: isolate;
margin: 0 !important;
padding: 0.95rem 1rem !important;
padding: var(--wg-space-md) !important;
overflow: hidden;
background:
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),
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-left: 1px solid rgba(194, 163, 90, 0.34) !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 right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
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 {
@@ -137,7 +137,7 @@ li[component="category/topic"].pinned:not(.unread) {
}
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 {
@@ -366,6 +366,7 @@ li[component="category/topic"] [component="topic/select"]:focus {
li[component="category/topic"] .meta.stats > div {
min-height: 3.25rem;
padding: var(--wg-space-2xs) var(--wg-space-xs);
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border-radius: 3px !important;