Mobile responsiveness improvement

RavioliMavioli · May 16, 2023 · 6b28280 · 6b28280
1 parent d4ee0fc
commit 6b28280
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 25 deletions.
diff --git a/css/contact.css b/css/contact.css
@@ -30,7 +30,7 @@
     width: 100%;
 }
 .contact-thin-text{
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 300;
     margin-top: 30px;
     margin-bottom: 15px;

diff --git a/css/content.css b/css/content.css
@@ -185,6 +185,7 @@ body{
 .region-container{
     position: relative;
     margin-top: 15px;
+    margin-bottom: 25px;
     height: 35px;
     width: 100%;
 }
@@ -201,7 +202,7 @@ body{
     transition: 0.5s;
 }
 #Indonesia:hover, #Outdonesia:hover{
-    scale: 110%;
+    scale: 107%;
 }
 .commission-container{
     position: relative;
@@ -400,7 +401,7 @@ body{
     transition: 0.5s;
 }
 .parts-lists a p:hover, .background-lists a p:hover{
-    scale: 110%;
+    scale: 107%;
 }
 
 /*---------------------------------------------------------------------------------------------------*/

diff --git a/css/header.css b/css/header.css
@@ -85,6 +85,26 @@ html {
 .navbrand a:hover, .navsupport a:hover, .navcenter a:hover{
    color: orange;
 }
+.navcenter a::after{
+    background: transparent;
+    transition: 0.5s;
+}
+#nav-contact{
+    font-size: 0px;
+}
+.hamburger{
+    display: none;
+    cursor: pointer;
+    margin-right: 20px;
+}
+.bar{
+    background: white;
+    display: block;
+    width: 25px;
+    height: 3px;
+    margin: 5px auto;
+    transition: 0.5s; 
+}
 /*.navsupport a:hover{
     background: white;
     color: black;
@@ -94,7 +114,6 @@ html {
     color: black;
     border-radius: 75px;
 }
-
 /*---------------------------------------------------------------------------------------------------*/
 /*===================================================================================================*/
 /*---------------------------------------------------------------------------------------------------*/
@@ -249,30 +268,70 @@ html {
         font-size: 12px;
     }
     .navbar{
-        position: fixed;
-        width: 100vw;
         height: 50px;
-        top: auto;
-        bottom: 0;
+        transition: 0.5s;
+    }
+    .navbar.active{
+        height: 50vh;
+        transition: 0.5s;
     }
     .navbar a{
         font-size: calc(18px / 1.33);
         padding: 6px 15px;
     }
     .navcenter a{
-        font-size: 12px;
+        font-size: 0px;
         padding: 6px 10px;
+        color: transparent;
+        transition: 0.5s;
     }
-    .navcenter{
-        position: absolute;
-        margin-left: 10px;
+    .navcenter a::after{
+        display: block;
+        content: "";
+        background: transparent;
+        width: 100%;
+        margin: 20px auto;
+        height: 1px;
+    }
+    .navbrand{
+        vertical-align: top;
     }
     .navbrand a{
-        font-size: 0px;
+        font-size: 18px;
     }
-}
-@media(max-width: 400px){
-    #navtos{
+    .navsupport a{
         font-size: 0px;
     }
+    .navbrand.active a{
+        font-size: 0;
+    }
+    .hamburger{
+        display: block;
+    }
+    .hamburger.active .bar:nth-child(2){
+        opacity: 0%;
+    }
+    .hamburger.active .bar:nth-child(1){
+        transform: translateY(8px) rotate(45deg);
+    }
+    .hamburger.active .bar:nth-child(3){
+        transform: translateY(-8px) rotate(-45deg);
+    }
+    .navcenter{
+        width: 100%;
+        flex-direction: column;
+        text-align: center;
+        transition: 0.5s;
+    }
+    .navcenter.active a{
+        font-size: 16px !important;
+        color: white;
+        transition: 0.5s;
+    }
+    .navcenter.active a:hover{
+        color: orange;
+    }
+    .navcenter.active a::after{
+        background: white;
+    }
 }
diff --git a/index.html b/index.html
@@ -86,11 +86,19 @@ <h1>Ravimo</h1>
     <div class="navbar box-mid">
         <div class="navbrand" data-aos="fade-up" data-aos-once=true><a onclick="scrollToTarget('landing')">Ravimo</a></div>
         <div class="navcenter" data-aos="fade-up" data-aos-once=true>
-            <a onclick="scrollToTargetAdjusted('portfolio',75)">Portfolio</a>
-            <a onclick="scrollToTargetAdjusted('commission',75)">Commission</a>
-            <a id="navtos" onclick="scrollToTargetAdjusted('tos',75)">Terms of Service</a>
+            <a onclick="scrollToTargetAdjusted('portfolio',75), Unclick()">Portfolio</a>
+            <a onclick="scrollToTargetAdjusted('commission',75), Unclick()">Commission</a>
+            <a onclick="scrollToTargetAdjusted('tos',75), Unclick()">Terms of Service</a>
+            <a id="nav-contact" onclick="scrollToTargetAdjusted('contact',75), Unclick()">Contact</a>
+        </div>
+        <div class="navsupport" data-aos="fade-up" data-aos-once=true><a onclick="scrollToTargetAdjusted('contact',75)" target="_blank">Contact</a>
+            <div class="hamburger">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+
         </div>
-        <div class="navsupport" data-aos="fade-up" data-aos-once=true><a onclick="scrollToTargetAdjusted('contact',75)" target="_blank">Contact</a></div>
     </div>
 
 
@@ -545,6 +553,7 @@ <h1>Ravimo</h1>
 
         });
     </script>
+    <script src="js/hamburger.js"></script>
     <script>Initialize()</script>
 </body>
 <footer class="shad-bold">

diff --git a/js/hamburger.js b/js/hamburger.js
@@ -0,0 +1,18 @@
+const hamburger = document.querySelector(".hamburger");
+const navcenter = document.querySelector(".navcenter");
+const navbrand = document.querySelector(".navbrand");
+const navbar = document.querySelector(".navbar");
+
+hamburger.addEventListener("click", () => {
+    hamburger.classList.toggle("active");
+    navcenter.classList.toggle("active");
+    navbrand.classList.toggle("active");
+    navbar.classList.toggle("active");
+})
+
+function Unclick(){
+    hamburger.classList.remove("active");
+    navcenter.classList.remove("active");
+    navbrand.classList.remove("active");
+    navbar.classList.remove("active");
+}
diff --git a/js/main.js b/js/main.js
@@ -337,11 +337,6 @@ function SendEmail(){
 
 }
 
-
-
-
-
-
 if (window.innerWidth < 800)
         document.querySelector(":root").style.setProperty("--x-offset", '25vw');
 if (window.attachEvent) {