chore: complete update

resources/css/base/focus.css

@@ -0,0 +1,31 @@
+:focus-visible {
+    --outline-size: max(2px, 0.1em);
+
+    outline:
+        var(--outline-width, var(--outline-size))
+        var(--outline-style, solid)
+        var(--outline-color, currentColor);
+
+    outline-offset: var(--outline-offset, var(--outline-size));
+
+    border-radius: 0.25em;
+}
+
+:where(:not(:active):focus-visible) {
+    outline-offset: 5px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    :where(:focus-visible) {
+        transition: outline-offset .2s ease;
+    }
+    :where(:not(:active):focus-visible) {
+        transition-duration: .25s;
+    }
+}
+
+/* Scroll margin allowance below focused elements
+  to ensure they are clearly in view */
+:focus {
+    scroll-padding-block-end: 8vh;
+}

resources/css/base/global.css

@@ -0,0 +1,147 @@
+:root {
+    --container-width: min(90vw, 2000px);
+    --content-padding: clamp(1rem, 4vw, 3rem);
+    --header-height: 80px;
+
+}
+
+html {
+    background-color: var(--bg);
+}
+
+body {
+    color: var(--text);
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+
+    --outline-color: var(--accent);
+}
+
+body>header {
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border-block-end: 1px solid var(--accent);
+
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+
+    &>div{
+        width: var(--container-width);
+        margin: 0 auto;
+        padding: 0 var(--content-padding);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+
+body>main {
+    flex: 1;
+    padding-top: 2rem;
+}
+
+body>footer {
+    margin-top: auto;
+}
+
+main>section {
+    width: var(--container-width);
+    margin: 0 auto;
+    padding: 4rem var(--content-padding);
+}
+
+section>.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin: 0 auto;
+    /*margin-top: 3rem;*/
+}
+
+
+
+@media(prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+    }
+}
+
+
+/* somehow does not work! */
+@media(prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+    }
+}
+
+a {
+    --selection-text-decoration: underline;
+    --link-color: var(--accent);
+
+    --_color: var(--link-color, rgba(255, 255, 255, 0.5));
+    --_underline-color: var(--underline-color, currentColor);
+    --_thickness: 2px;
+    --_offset: 0.05em;
+    --_hover-color: oklch(from var(--link-color) 80% c h);
+
+    color: var(--_color);
+
+    text-decoration-line: var(--selection-text-decoration);
+    text-decoration-color: var(--_underline-color);
+    text-decoration-thickness: var(--_thickness);
+    text-underline-offset: var(--_offset);
+
+    padding: max(0.25rem, 0.1em) 0;
+
+    display: inline-block;
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition:
+            color 0.15s ease-in-out,
+            text-decoration 0.15s,
+            transform 0.1s ease-in-out;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+    @media (forced-colors: active) {
+        forced-color-adjust: none;
+        color: LinkText;
+        text-decoration-color: LinkText;
+    }
+
+    &:hover,
+    &:focus-visible {
+        --_color: var(--_hover-color);
+
+        --_underline-color: rgba(255, 255, 255, 0.5);
+
+        /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+
+        transform: translateY(-1px);*/
+    }
+
+    &:active {
+        --_color: oklch(from var(--link-color) 75% c h);
+
+        /*transform: translateY(1px);*/
+    }
+}
+
+/* Inline Link */
+p > a {
+    text-decoration: underline;
+    border:none;
+
+    /*&::after {
+        content: ' ↗';
+    }*/
+}

resources/css/base/index.css

@@ -0,0 +1,4 @@
+@import "focus.css";
+@import "global.css";
+@import "media.css";
+@import "typography.css";

resources/css/base/media.css

@@ -0,0 +1,5 @@
+:where(img, video) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}

resources/css/base/reset.css

@@ -0,0 +1,34 @@
+/* alle Elemente inklusive Pseudoelemente mit border-box rechnen lassen */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+:where(html, body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol) {
+    margin: 0;
+    padding: 0;
+}
+
+:where(table) {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+:where(article, aside, footer, header, nav, section, main) {
+    display: block;
+}
+
+[popover] {
+    /* CSSWG Issue #10258 */
+    inset: auto;
+}
+
+/* @link: https://moderncss.dev/12-modern-css-one-line-upgrades/#scroll-margin-topbottom */
+:where([id]) {
+    scroll-margin-block-start: 2rem;
+}
+
+/* Vererbung für SVG-Icons */
+svg {
+    fill: currentColor;
+    stroke: none;
+}

resources/css/base/typography.css

@@ -0,0 +1,108 @@
+html {
+    font-size: 100%;
+
+    font-family: 'Roboto', sans-serif;
+
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    line-height: 1.5;
+    font-size: clamp(1.125rem, 4cqi, 1.5rem);
+}
+
+section {
+    container-type: inline-size;
+}
+
+/* trims of empty pixels above and below fonts */
+:is(h1, h2, h3, h4, h5, h6, p, button) {
+    text-box: trim-both cap alphabetic;
+}
+
+p,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+    padding-block: 1.5rem;
+
+    hyphens: auto;
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+}
+
+h1 {
+    font-size: clamp(2rem, 6cqi, 6rem);
+    font-weight: 700;
+
+    line-height: 1.125;
+
+    max-inline-size: 25ch;
+
+    text-transform: uppercase;
+}
+
+h2 {
+    text-transform: uppercase;
+
+    font-size: 3.5rem;
+    font-weight: 700;
+    line-height: 1.65;
+    max-inline-size: 30ch;
+}
+
+h3 {
+    font-size: 2rem;
+    --selection-bg-color: rgba(0, 0, 255, 0.3);
+    --selection-text-color: #d8cc48;
+}
+
+h4 {
+    font-size: clamp(3rem, 4vw + 0.5rem, 4rem);
+    font-weight: 700;
+
+    max-inline-size: 25ch;
+
+}
+
+h5 {
+    font-size: 1.75rem;
+
+}
+
+h6 {
+    font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
+}
+
+
+p {
+    text-wrap: pretty;
+
+    line-height: 1.2;
+
+    font-weight: 500;
+    letter-spacing: -0.03em;
+
+    /* max 75ch */
+    max-inline-size: 65ch;
+}
+
+blockquote {
+    text-transform: uppercase;
+
+    &::before {
+        content: '\201C';
+    }
+
+    &::after {
+        content: '\201D';
+    }
+}