Jonas
36ba210323
Add comprehensive mobile-first adjustments across the UI: reorganize topbar actions and context in Layout.vue, make the navigation drawer mobile-friendly (new mobile class, bottom location, density and block-button behavior), and add many responsive CSS rules. Introduce safe-area variables and larger touch targets in global.css (44px buttons, icon sizes, nav item heights), plus additional responsive patterns in page-layouts.css and surface-patterns.css. Apply mobile breakpoints and spacing/stacking tweaks to Home, Login, Impressum and 404 pages to ensure CTAs, cards and forms behave well on <=960px and <=600px viewports. Document the responsive implementation standard in GUI/style.md and update codexInfo.md to note the mobile/usability changes. Changes are scoped to mobile breakpoints to avoid desktop regressions.
76 lines
2.4 KiB
CSS
76 lines
2.4 KiB
CSS
/* 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 {
|
|
width: 100%;
|
|
gap: var(--hoard-page-gap-mobile, var(--space-5));
|
|
padding-inline:
|
|
var(--hoard-page-padding-inline-start-mobile, max(var(--space-2), env(safe-area-inset-left)))
|
|
var(--hoard-page-padding-inline-end-mobile, max(var(--space-2), env(safe-area-inset-right)));
|
|
padding-block:
|
|
var(--hoard-page-padding-start-mobile, var(--space-2))
|
|
var(--hoard-page-padding-end-mobile, var(--space-6));
|
|
}
|
|
|
|
.hoard-page--centered {
|
|
width: 100%;
|
|
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 {
|
|
width: 100%;
|
|
gap: var(--hoard-shell-gap-mobile, var(--space-5));
|
|
padding:
|
|
var(--hoard-shell-padding-block-mobile, var(--space-5))
|
|
var(--hoard-shell-padding-inline-mobile, var(--space-4));
|
|
}
|
|
}
|
|
|
|
@media (width <= 600px) {
|
|
.hoard-page {
|
|
gap: var(--hoard-page-gap-mobile-xs, var(--space-4));
|
|
padding-block:
|
|
var(--hoard-page-padding-start-mobile-xs, var(--space-2))
|
|
var(--hoard-page-padding-end-mobile-xs, var(--space-5));
|
|
}
|
|
|
|
.hoard-page--centered {
|
|
min-height: calc(100vh - var(--hoard-centered-offset-mobile-xs, 164px));
|
|
padding: var(--hoard-centered-padding-mobile-xs, var(--space-4) var(--space-2));
|
|
}
|
|
|
|
.hoard-shell-grid {
|
|
gap: var(--hoard-shell-gap-mobile-xs, var(--space-4));
|
|
padding:
|
|
var(--hoard-shell-padding-block-mobile-xs, var(--space-4))
|
|
var(--hoard-shell-padding-inline-mobile-xs, var(--space-3));
|
|
}
|
|
}
|