(refactor): replaced mobile fontawesome hamberger icon with two lines

htdocs/assets/_header.php

@@ -32,14 +32,18 @@ function isPageActive($pageName, $pageRoute) {
         </a>
         <button class="ml-5 px-3 py-1 border-[2px] border-accent_primary rounded-full hover:rounded-lg hover:shadow-lg hover:shadow-accent_primary_transparent transition transform duration-500" onclick="location.href='<?php echo $basePath . '/contact' ?>'">Let's Talk</button>
     </div>
-    <div class="hamburger mr-3 mt-1 lg:hidden cursor-pointer">
+    <div class="hamburger flex flex-col justify-center items-center mr-3 mt-1 lg:hidden cursor-pointer" onclick="showNavslider()">
-        <i class="fa-solid fa-bars text-2xl text-accent_primary" onclick="showNavslider()"></i>
+        <hr class="w-[25px] border-[1px] border-accent_primary mb-1"></hr>
+        <hr class="w-[25px] border-[1px] border-accent_primary mt-1"></hr>
     </div>
     <div class="slidercontainer hidden flex-col justify-between items-center lg:hidden fixed top-0 left-0 w-screen h-screen overflow-hidden z-50 bg-bg_primary" id="slidercontainer">
         <div class="mobilemenuheader w-full flex flex-col">
             <div class="topnavbarumobile flex justify-between items-center py-5 px-4">
                 <a class="font-cormorant text-4xl font-bold ml-2" href="<?php echo $basePath ?>">Subhamoy</a>
-                <i class="fa-solid fa-xmark text-3xl text-accent_primary mr-3 cursor-pointer" onclick="closeNavslider()"></i>
+                <div class="hamburgerclose flex flex-col justify-center items-center cursor-pointer mr-3" onclick="closeNavslider()">
+                    <hr class="w-[25px] border-[1px] border-accent_primary rotate-45"></hr>
+                    <hr class="w-[25px] border-[1px] border-accent_primary -rotate-45 -translate-y-[1px]"></hr>
+                </div>
             </div>
             <div class="mobilemenu flex flex-col mt-5" id="mobilemenu">
                 <a class="ml-6 mb-4 py-[0.30rem] w-fit relative group" href="<?php echo $basePath ?>">

htdocs/assets/style.css

@@ -1025,10 +1025,6 @@ video {
   height: 40px;
 }
 
-.h-\[45vh\] {
-  height: 45vh;
-}
-
 .h-\[50px\] {
   height: 50px;
 }
@@ -1143,16 +1139,16 @@ video {
   width: 100vw;
 }
 
-.max-w-full {
+.w-\[20px\] {
-  max-width: 100%;
+  width: 20px;
 }
 
-.max-w-\[70vw\] {
+.w-\[330px\] {
-  max-width: 70vw;
+  width: 330px;
 }
 
-.max-w-\[50vw\] {
+.w-\[25px\] {
-  max-width: 50vw;
+  width: 25px;
 }
 
 .max-w-\[45vw\] {
@@ -1163,11 +1159,61 @@ video {
   transform-origin: left;
 }
 
+.translate-x-1\/2 {
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-1\/2 {
+  --tw-translate-y: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-\[2px\] {
+  --tw-translate-y: -2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[2px\] {
+  --tw-translate-y: 2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-\[1px\] {
+  --tw-translate-y: -1px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-\[15deg\] {
   --tw-rotate: 15deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-rotate-45 {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-\[0\.70\] {
   --tw-scale-x: 0.70;
   --tw-scale-y: 0.70;
@@ -1357,6 +1403,14 @@ video {
   border-top-width: 5px;
 }
 
+.border-t-\[2px\] {
+  border-top-width: 2px;
+}
+
+.border-t-\[10px\] {
+  border-top-width: 10px;
+}
+
 .border-\[rgb\(22\2c _163\2c _74\)\] {
   --tw-border-opacity: 1;
   border-color: rgb(22 163 74 / var(--tw-border-opacity));
@@ -1996,10 +2050,6 @@ video {
     display: block;
   }
 
-  .md\:h-\[60vh\] {
-    height: 60vh;
-  }
-
   .md\:max-h-\[60vh\] {
     max-height: 60vh;
   }
@@ -2020,10 +2070,6 @@ video {
     width: 50vw;
   }
 
-  .md\:max-w-\[35vw\] {
-    max-width: 35vw;
-  }
-
   .md\:max-w-\[30vw\] {
     max-width: 30vw;
   }