fix: optimize CSS

2024-05-30 08:52:28 +02:00 · 2024-05-30 08:52:28 +02:00 · 282e2086b0
commit 282e2086b0
parent b9e9e2d691
21 changed files with 217 additions and 258 deletions
--- a/assets/css/header.css
+++ b/assets/css/header.css
@ -0,0 +1,202 @@
+.stickyWatch {
+    height: 0;
+}
+
+.Header {
+    padding: 15px calc(15vw - 30px);
+    width: 100%;
+    background: transparent;
+    top: 0;
+    position: fixed;
+    z-index: 1000;
+
+    & .logo {
+        fill-rule: evenodd;
+        clip-rule: evenodd;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-miterlimit: 1.5;
+
+        & .fussel {
+            stroke: white;
+            fill: var(--color-black);
+            stroke-width: 20px;
+        }
+
+        & .glasses {
+            fill: none;
+            stroke: white;
+            stroke-width: 62px;
+        }
+    }
+
+    & h1 {
+        flex: 2;
+        cursor: default;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        & svg {
+            --size: 40px;
+            width: var(--size);
+            height: var(--size);
+        }
+    }
+
+    & nav {
+        flex: 3;
+        position: relative;
+        font-weight: normal;
+        font-size: 1.2rem;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    & > .wrapper {
+        display: flex;
+        align-items: center;
+        padding: 15px 30px;
+        transition: 750ms;
+        backdrop-filter: blur(10px);
+        border-radius: 0;
+
+        & > label {
+            display: none;
+            width: 30px;
+            height: 25px;
+            position: relative;
+            transform: rotate(0deg);
+            transition: var(--transition-time) ease-in-out;
+            cursor: pointer;
+            z-index: 20000;
+
+            & > span {
+                display: block;
+                position: absolute;
+                height: 5px;
+                width: 100%;
+                background: var(--color-white);
+                border-radius: 9px;
+                opacity: 1;
+                left: 0;
+                transform: rotate(0deg);
+                transition: .25s ease-in-out;
+
+                &:nth-child(1) {
+                    top: 0;
+                }
+
+                &:nth-child(2), &:nth-child(3) {
+                    top: 9px;
+                }
+
+                &:nth-child(4) {
+                    top: 18px;
+                }
+            }
+        }
+
+        & > input[type="checkbox"]:checked + label span:nth-child(1) {
+            top: 18px;
+            width: 0;
+            left: 50%;
+        }
+
+        & > input[type="checkbox"]:checked + label span:nth-child(2) {
+            transform: rotate(45deg);
+        }
+
+        & > input[type="checkbox"]:checked + label span:nth-child(3) {
+            transform: rotate(-45deg);
+        }
+
+        & > input[type="checkbox"]:checked + label span:nth-child(4) {
+            top: 18px;
+            width: 0;
+            left: 50%;
+        }
+    }
+
+    &.sticks > .wrapper {
+        background: var(--color-black-transparent);
+        border-radius: 20px;
+    }
+
+    & input[type="checkbox"] {
+        display: none;
+    }
+
+    & ul {
+        gap: var(--spacing-standard);
+        transform: scale(1);
+
+        & a {
+            display: block;
+            text-align: center;
+
+            &:hover {
+                transform: scale(1.15);
+                color: var(--color-orange);
+
+                & .icon {
+                    filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
+                }
+            }
+        }
+    }
+
+    nav .icon {
+        transition: 250ms;
+        filter: invert(1);
+        height: 30px;
+    }
+}
+
+
+
+@media screen and (width < 1180px) {
+    .Header {
+        & > .wrapper.wrapper > label {
+            display: block;
+        }
+
+        & input[type="checkbox"]:checked ~ nav {
+            transform: translateX(-15vw);
+        }
+
+        & nav {
+            background: var(--color-black);
+            position: absolute;
+            overflow: hidden;
+            height: 100vh;
+            width: 100vw;
+            top: -15px;
+            transition: var(--transition-time);
+            transform: translateX(100%);
+            color: var(--color-white);
+            flex-direction: column;
+
+            & .socials {
+                flex-direction: row;
+                height: max-content;
+
+                & img {
+                    height: 75px;
+                }
+            }
+
+            & ul {
+                flex-direction: column;
+                justify-content: center;
+                height: 100vh;
+                gap: 8vh;
+
+                & li {
+                    padding: 15px var(--spacing-standard);
+                    font-size: 10vw;
+                }
+            }
+        }
+    }
+}