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/authentication/Login.vue
+9 -37
View File
@@ -5,10 +5,10 @@ const showPassword = ref(false)
</script>
<template>
<v-container fluid class="login-page">
<section class="login-shell hoard-panel">
<v-container fluid class="login-page hoard-page hoard-page--centered">
<section class="login-shell hoard-panel hoard-shell-grid hoard-panel-gradient">
<aside class="login-brand">
<p class="login-kicker">Willkommen bei Hoard</p>
<p class="login-kicker hoard-kicker hoard-kicker--wide">Willkommen bei Hoard</p>
<h1>Anmelden und weiterarbeiten</h1>
<p class="login-intro">
Deine Dateiablage bleibt aufgeräumt, schnell und direkt im Browser bedienbar.
@@ -70,35 +70,14 @@ const showPassword = ref(false)
</template>
<style scoped>
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 210px);
padding: var(--space-8) var(--space-4);
}
.login-shell {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
gap: var(--space-8);
width: min(100%, 1040px);
padding: var(--space-8);
background:
linear-gradient(
115deg,
color-mix(in srgb, var(--color-primary-100) 45%, var(--color-surface) 55%) 0%,
var(--color-surface) 52%
);
}
--hoard-shell-width: 1040px;
--hoard-gradient-angle: 115deg;
--hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 45%, var(--color-surface) 55%);
--hoard-gradient-end: var(--color-surface);
--hoard-gradient-end-stop: 52%;
.login-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;
grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
}
h1 {
@@ -158,15 +137,8 @@ h1 {
}
@media (width <= 960px) {
.login-page {
min-height: calc(100vh - 180px);
padding: var(--space-5) var(--space-2);
}
.login-shell {
grid-template-columns: 1fr;
gap: var(--space-5);
padding: var(--space-5);
}
}
</style>