feat: modernize fe tooling and drop weight

This commit is contained in:
2026-09-22 15:29:34 +02:00
parent 93ed5c6962
commit b3541b21fb
49 changed files with 1580 additions and 1604 deletions
@@ -1,5 +1,3 @@
import 'whatwg-fetch'
export const useFetch = controller => {
Object.assign(controller, {
checkStatus(response) {
@@ -1,13 +1,12 @@
@use "sass:meta";
@layer base {
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@import "base/typography";
@import "base/images";
@include meta.load-css("base/typography");
@include meta.load-css("base/images");
[data-rte-content] {
@import "base/rte-content";
}
@include meta.load-css("base/rte-content");
iframe {
width: 100%;
@@ -1,14 +1,15 @@
@use "sass:meta";
@layer components {
@import "components/topnav";
@import "components/background";
@import "components/badges";
@import "components/buttons";
@import "components/contact-bar";
@import "components/calendar";
@import "components/forms";
@import "components/herounit";
@import "components/misc";
@import "components/searchbar";
@import "components/teaser";
@import "components/travelinfo";
@include meta.load-css("components/topnav");
@include meta.load-css("components/background");
@include meta.load-css("components/badges");
@include meta.load-css("components/buttons");
@include meta.load-css("components/contact-bar");
@include meta.load-css("components/calendar");
@include meta.load-css("components/forms");
@include meta.load-css("components/herounit");
@include meta.load-css("components/misc");
@include meta.load-css("components/searchbar");
@include meta.load-css("components/teaser");
@include meta.load-css("components/travelinfo");
}
@@ -1,8 +1,10 @@
@use "sass:meta";
// Lightbox
@import "~glightbox/dist/css/glightbox.css";
// Tooltips
@import "~cooltipz-css/src/cooltipz";
@include meta.load-css("cooltipz-css/cooltipz.css");
:root {
--cooltipz-bg-color: theme('colors.zinc.700');
@@ -1,82 +1,86 @@
h1,
.headline--primary,
h2,
.headline--secondary,
h3,
.headline--3,
h4,
.headline--4 {
@apply mb-4;
}
// Self-contained: the wrapper lives here so `&` and @extend resolve the same
// way they did when this file was @imported into a [data-rte-content] block.
[data-rte-content] {
h1,
.headline--primary,
h2,
.headline--secondary,
h3,
.headline--3,
h4,
.headline--4 {
@apply mb-4;
}
ul {
@apply list-disc pl-4 mb-4;
}
ul {
@apply list-disc pl-4 mb-4;
}
ol {
@apply list-decimal pl-4 mb-4;
}
ol {
@apply list-decimal pl-4 mb-4;
}
p {
@apply mb-4;
}
p {
@apply mb-4;
}
a:not(.button):not(.rte-button):not(.rte-button--full) {
@apply underline text-ep-primary-dark sbw:text-sbw-primary-dark;
a:not(.button):not(.rte-button):not(.rte-button--full) {
@apply underline text-ep-primary-dark sbw:text-sbw-primary-dark;
.bg-brand-gradient & {
@apply text-white underline;
.bg-brand-gradient & {
@apply text-white underline;
}
}
a.rte-button {
@apply inline-flex items-center justify-center px-4 py-2 md:px-8;
@apply uppercase leading-none text-center;
@apply transition-colors outline-none;
@apply bg-ep-primary-light text-white;
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@apply suz:bg-suz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
@apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark suz:group-hover:bg-suz-primary-dark;
@apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
@apply focus:outline focus:outline-2 focus:outline-offset-2;
@apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
@apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
}
a.rte-button--full {
@extend .rte-button;
@apply w-full;
}
table,
.table {
@apply w-full;
}
thead {
tr {
@apply bg-zinc-200;
}
}
tbody {
tr {
@apply odd:bg-zinc-100;
}
}
th {
@apply border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
}
td {
@apply border-r border-zinc-200 px-2 py-1 md:p-2;
}
}
a.rte-button {
@apply inline-flex items-center justify-center px-4 py-2 md:px-8;
@apply uppercase leading-none text-center;
@apply transition-colors outline-none;
@apply bg-ep-primary-light text-white;
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@apply suz:bg-suz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
@apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark suz:group-hover:bg-suz-primary-dark;
@apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
@apply focus:outline focus:outline-2 focus:outline-offset-2;
@apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
@apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
}
a.rte-button--full {
@extend .rte-button;
@apply w-full;
}
table,
.table {
@apply w-full;
}
thead {
tr {
@apply bg-zinc-200;
}
}
tbody {
tr {
@apply odd:bg-zinc-100;
}
}
th {
@apply border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
}
td {
@apply border-r border-zinc-200 px-2 py-1 md:p-2;
}
@@ -1,10 +1,12 @@
@import "tailwindcss/base";
@import "base";
@use "sass:meta";
@import "tailwindcss/components";
@import "components";
@include meta.load-css("tailwindcss/base");
@include meta.load-css("base");
@import "tailwindcss/utilities";
@import "utilities";
@include meta.load-css("tailwindcss/components");
@include meta.load-css("components");
@import "vendor";
@include meta.load-css("tailwindcss/utilities");
@include meta.load-css("utilities");
@include meta.load-css("vendor");
@@ -1,4 +1,4 @@
@import "base/fonts";
@use "base/fonts";
body {
@apply antialiased text-zinc-800 font-sans;