FIX: some fixes for rollout

Burger

app/assets/css/burger.css

@@ -0,0 +1,64 @@
+.Burger {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    transition: var(--transition-time) ease-in-out;
+    pointer-events: none;
+
+    &.open {
+        pointer-events: all;
+        background: rgba(0, 0, 0, 0.5);
+
+        & nav {
+            translate: -15vw 0;
+        }
+    }
+
+    & nav {
+        width: clamp(300px, 30vw, 400px);
+        background: var(--color-black);
+        align-items: end;
+        padding: 2rem;
+        height: max-content;
+        translate: 110% 0;
+        transition: 150ms ease-in-out;
+        border-radius: 20px;
+
+        & ul {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            font-size: 1.5rem;
+
+            & a {
+
+                &.active {
+                    color: var(--color-orange);
+                }
+
+                &:hover {
+                    scale: 1.1;
+                    color: var(--color-orange);
+                }
+            }
+        }
+    }
+}
+
+
+@media (width <= 450px) {
+    .Burger.open nav {
+        translate: -10vw 0;
+    }
+}
+
+
+
+@media screen and (width >= 1180px) {
+    .Burger {
+        display: none;
+    }
+}