chore: complete update

2025-07-17 16:24:20 +02:00
parent 899227b0a4
commit 64a7051137
1300 changed files with 85570 additions and 2756 deletions
--- a/resources/css/components/sidebar.css
+++ b/resources/css/components/sidebar.css
@@ -0,0 +1,119 @@
+body:has(aside.show) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+}
+
+aside {
+    --sidebar-width: min(50ch, 100vw);
+
+    position: absolute;
+    z-index: 3000;
+
+    visibility: hidden;
+
+    background-color: #2c1c59;
+    color: #fff;
+    padding: 3rem;
+    border: none;
+
+    /*position: fixed;*/
+    /*position: sticky;*/
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: calc(100vw - var(--sidebar-width));
+    width: var(--sidebar-width);
+    height: 100vh;
+
+    transition: opacity 0.25s, translate 0.25s, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
+
+    opacity: 0;
+    translate: 100% 0;
+
+    &.show {
+        visibility: visible;
+
+        opacity: 1;
+        translate: 0 0;
+    }
+
+    button {
+        place-content: end;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        appearance: none;
+        font-size: 2rem;
+        font-weight: 700;
+
+        margin-inline-end: 0.5rem;
+        float: right;
+
+
+        &:hover {
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+    }
+
+}
+
+/* Backdrop */
+.backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    z-index: 1000;
+
+    /*cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), auto;*/
+}
+:is(aside.show) .backdrop {
+    opacity: 1;
+}
+body:has(aside.show) .backdrop {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+aside > nav > ul {
+
+    padding-block-start: 10rem;
+
+    display: flex;
+    flex-direction: column;
+
+    list-style: none;
+    gap: 3rem;
+
+    a {
+        text-decoration: none;
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 1rem;
+        /*font-size: 1.5rem;*/
+    }
+
+    @media (hover) and (prefers-reduced-motion: no-preference) {
+        & > li {
+            transition: opacity .3s ease;
+        }
+
+        &:has(:hover) > li:not(:hover) {
+            opacity: .85;
+        }
+
+        /* for keyboard support */
+        &:is(:hover, :focus-within) > li:not(:hover, :focus-within) {
+            opacity: .85;
+        }
+    }
+}
+
+.backdrop:has( ~ #sidebar a:hover,  ~ #sidebar a:focus)/*, .backdrop:has( ~ #sidebar a:focus)*/ {
+    background-color: rgba(0 0 0 / 0.1);
+}