split hamburger/dropdown css out- nicer looking index

2025-09-23 18:44:54 -04:00
parent da32526da6
commit 5d07776051
7 changed files with 138 additions and 128 deletions
@@ -0,0 +1,39 @@
+#hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 5px;
+}
+
+#hamburger span {
+  width: 25px;
+  height: 3px;
+  background-color: var(--gold);
+  margin: 3px 0;
+  transition: 0.3s;
+  position: relative;
+}
+
+/* MOBILE RULES */
+@media screen and (max-width: 850px) {
+  /** hamburger animation */
+  #hamburger {
+    display: flex;
+  }
+
+  #hamburger.active span:nth-child(1) {
+    transform: rotate(-45deg) translateY(10px) translateX(-3px);
+    width: 24px;
+    height: 4px;
+  }
+  #hamburger.active span:nth-child(2) {
+    opacity: 0;
+  }
+  #hamburger.active span:nth-child(3) {
+    transform: rotate(45deg) translateY(-10px) translateX(-3px);
+    width: 24px;
+    height: 4px;
+  }
+}