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/routes/404NotFound.vue
+11 -41
View File
@@ -16,8 +16,8 @@ function navigateBack() {
</script>
<template>
<v-container fluid class="not-found-page">
<section class="not-found-shell hoard-panel">
<v-container fluid class="not-found-page hoard-page hoard-page--centered">
<section class="not-found-shell hoard-panel hoard-shell-grid hoard-panel-gradient">
<div class="not-found-visual">
<div class="image-frame">
<img :src="notFoundImage" alt="Illustration für eine nicht gefundene Seite" class="not-found-image" />
@@ -25,14 +25,14 @@ function navigateBack() {
</div>
<div class="not-found-content">
<p class="not-found-kicker">Fehler 404</p>
<p class="not-found-kicker hoard-kicker hoard-kicker--wide">Fehler 404</p>
<h1>Seite nicht gefunden</h1>
<p class="not-found-text">
Der Link ist ungültig oder die Seite wurde verschoben. Du kannst direkt zur
Startseite zurück oder die vorherige Ansicht öffnen.
</p>
<div class="not-found-actions">
<div class="not-found-actions hoard-action-row">
<v-btn color="primary" prepend-icon="mdi-home" to="/">Zur Startseite</v-btn>
<v-btn variant="outlined" prepend-icon="mdi-arrow-left" @click="navigateBack">Zurück</v-btn>
</div>
@@ -42,26 +42,14 @@ function navigateBack() {
</template>
<style scoped>
.not-found-page {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 210px);
padding: var(--space-8) var(--space-4);
}
.not-found-shell {
display: grid;
--hoard-shell-width: 980px;
--hoard-gradient-angle: 180deg;
--hoard-gradient-start: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-100) 6%);
--hoard-gradient-end: color-mix(in srgb, var(--color-surface) 82%, var(--color-surface-alt) 18%);
--hoard-gradient-end-stop: 100%;
grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
gap: var(--space-8);
width: min(100%, 980px);
padding: var(--space-8);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-100) 6%) 0%,
color-mix(in srgb, var(--color-surface) 82%, var(--color-surface-alt) 18%) 100%
);
}
.not-found-visual {
@@ -92,15 +80,6 @@ function navigateBack() {
justify-content: center;
}
.not-found-kicker {
margin: 0 0 var(--space-2);
color: var(--color-primary-700);
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
h1 {
margin-bottom: var(--space-3);
font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
@@ -115,21 +94,12 @@ h1 {
}
.not-found-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
@media (width <= 960px) {
.not-found-page {
min-height: calc(100vh - 180px);
padding: var(--space-5) var(--space-2);
}
.not-found-shell {
grid-template-columns: 1fr;
gap: var(--space-5);
padding: var(--space-5);
}
.not-found-content {