jonas/Hoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add global page and surface CSS patterns

Browse Source 
Introduce reusable global CSS modules and apply them across routes to centralize layout/surface patterns. Added GUI/src/styles/global/page-layouts.css and GUI/src/styles/global/surface-patterns.css and imported both in GUI/src/main.ts. Updated Layout.vue, Home.vue, 404NotFound.vue, Impressum.vue and authentication/Login.vue to use hoard-* utility classes (hoard-page, hoard-shell-grid, hoard-kicker, hoard-action-row, hoard-panel-gradient, etc.) and removed duplicated scoped styles. Also updated codexInfo.md to document the new CSS modules and provide usage guidance. This reduces per-page CSS duplication and standardizes gradients, spacing and page-shell behavior.
This commit is contained in:
Jonas
2026-04-17 23:42:35 +02:00
parent d8ae756948
commit 8ccc515a7b
9 changed files with 151 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GUI/src/styles/global/page-layouts.css
+46
View File
@@ -0,0 +1,46 @@
/* Shared layout primitives for route-level page shells */
.hoard-page {
display: flex;
flex-direction: column;
gap: var(--hoard-page-gap, var(--space-6));
margin-inline: auto;
width: min(100%, var(--hoard-page-width, 1120px));
padding-block:
var(--hoard-page-padding-start, var(--space-4))
var(--hoard-page-padding-end, var(--space-8));
}
.hoard-page--centered {
width: 100%;
margin-inline: 0;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--hoard-centered-offset, 210px));
padding: var(--hoard-centered-padding, var(--space-8) var(--space-4));
}
.hoard-shell-grid {
display: grid;
gap: var(--hoard-shell-gap, var(--space-8));
width: min(100%, var(--hoard-shell-width, 1040px));
padding: var(--hoard-shell-padding, var(--space-8));
}
@media (width <= 960px) {
.hoard-page {
gap: var(--hoard-page-gap-mobile, var(--space-5));
padding-block:
var(--hoard-page-padding-start-mobile, var(--space-2))
var(--hoard-page-padding-end-mobile, var(--space-6));
}
.hoard-page--centered {
min-height: calc(100vh - var(--hoard-centered-offset-mobile, 180px));
padding: var(--hoard-centered-padding-mobile, var(--space-5) var(--space-2));
}
.hoard-shell-grid {
gap: var(--hoard-shell-gap-mobile, var(--space-5));
padding: var(--hoard-shell-padding-mobile, var(--space-5));
}
}