fix media query and specificity

gvao · Nov 19, 2023 · 8e09eff · 8e09eff
1 parent 1c4e0cf
commit 8e09eff
Showing 1 changed file with 91 additions and 86 deletions.
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
@@ -17,120 +17,125 @@
 .nav {
     position: relative;
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+    align-items: center;
 }
 
 .nav__hamburger {
-    cursor: pointer;
+    display: none;
+    position: relative;
 }
 
 .nav__list {
-    background-color: var(--color-primary);
-    padding: 16px;
-    height: 100vh;
-    width: 33vw;
+    display: flex;
+    position: static;
+    transform: translate(0, 0);
+    gap: 12px;
 
-    display: none;
+    background-color: inherit;
+    box-shadow: none;
+    padding: 0;
+}
 
-    flex-direction: column;
-    gap: 12px;
+/* --------------------------- medias queries --------------------------- */
 
-    box-shadow: var(--shadow-default);
-    border-radius: var(--radius-md);
+@media (max-width: 768px) {
+    .nav{
+        flex-direction: column;
+    }
+
+    .nav__hamburger {
+        /* display: block; */
+        cursor: pointer;
+    }
 
-    position: absolute;
-    z-index: 1;
-    bottom: 0;
-    right: 0;
+    .nav__list {
+        display: none;
 
-    transform: translate(0%, 100%);
-    opacity: 0;
-}
+        height: 100vh;
+        width: 33vw;
 
-.nav__list.--show {
-    display: flex;
-    animation-name: showNav;
-    animation-duration: .8s;
-    animation-fill-mode: forwards;
-}
+        background-color: var(--color-primary);
+        padding: 16px;
 
-.nav__list.--hide {
-    display: none;
-    animation-name: hideNav;
-    animation-timing-function: ease;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-}
+        flex-direction: column;
+        gap: 12px;
 
-.nav__list .item {
-    position: relative;
+        box-shadow: var(--shadow-default);
+        border-radius: var(--radius-md);
 
-    height: 8vmin;
-    width: 100%;
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        right: 0;
 
-    opacity: 0.7;
-    transition-property: transform, opacity;
-    transition-duration: 0.5s;
-}
+        transform: translate(0%, 100%);
+        opacity: 0;
+    }
 
-.nav__list .item > a {
-    display: block;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+    .nav__list.--show {
+        display: flex;
+        animation-name: showNav;
+        animation-duration: .8s;
+        animation-fill-mode: forwards;
+    }
 
-.nav__list .item:hover {
-    transform: scale(1.3);
-    opacity: 1;
-    justify-content: center;
-}
+    .nav__list.--hide {
+        display: none;
+        animation-name: hideNav;
+        animation-timing-function: ease;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+    }
 
-.nav__list .item::after {
-    content: "";
-    width: 0%;
-    height: 0%;
-    background-image: linear-gradient(to right, var(--color-default), var(--color-default), transparent);
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    transform: translateY(100%);
-    animation: showBorderBottom 1s ease-out forwards;
-}
+    .nav__list .item {
+        position: relative;
 
-.nav__list.--hide .item::after {
-    animation: hideBorderBottom .7s ease-out forwards;
-}
+        height: 8vmin;
+        width: 100%;
 
-.nav__list .item:hover::after {
-    animation-name: hideBorderBottom;
-    animation-duration: .8s;
-    animation-fill-mode: reverse;
-    animation-timing-function: ease-in-out;
-}
+        opacity: 0.7;
+        transition-property: transform, opacity;
+        transition-duration: 0.5s;
+    }
 
-/* --------------------------- medias queries --------------------------- */
+    .nav__list .item>a {
+        display: block;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 
-@media (min-width: 768px) {
+    .nav__list .item:hover {
+        transform: scale(1.3);
+        opacity: 1;
+        justify-content: center;
+    }
 
-    .nav .nav__hamburger {
-        display: none;
-        position: relative;
+    .nav__list .item::after {
+        content: "";
+        width: 0%;
+        height: 0%;
+        background-image: linear-gradient(to right, var(--color-default), var(--color-default), transparent);
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        transform: translateY(100%);
+        animation: showBorderBottom 1s ease-out forwards;
     }
 
-    .nav .nav__list {
-        display: flex;
-        position: static;
-        transform: translate(0);
-        flex-direction: row;
+    .nav__list.--hide .item::after {
+        animation: hideBorderBottom .7s ease-out forwards;
+    }
 
-        background-color: inherit;
-        box-shadow: none;
-        padding: 0;
+    .nav__list .item:hover::after {
+        animation-name: hideBorderBottom;
+        animation-duration: .8s;
+        animation-fill-mode: reverse;
+        animation-timing-function: ease-in-out;
     }
+
 }