Add global page and surface CSS patterns

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.
2026-04-17 23:42:35 +02:00
parent d8ae756948
commit 8ccc515a7b
9 changed files with 151 additions and 191 deletions
@@ -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));
+  }
+}
@@ -0,0 +1,33 @@
+/* Shared surface and content patterns */
+.hoard-kicker {
+  margin: 0 0 var(--space-2);
+  color: var(--color-primary-700);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.hoard-kicker--wide {
+  letter-spacing: 0.06em;
+}
+
+.hoard-kicker--xs {
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.04em;
+}
+
+.hoard-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.hoard-panel-gradient {
+  background: linear-gradient(
+    var(--hoard-gradient-angle, 120deg),
+    var(--hoard-gradient-start, color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%))
+      0%,
+    var(--hoard-gradient-end, var(--color-surface)) var(--hoard-gradient-end-stop, 52%)
+  );
+}