improved nav bar

jmmaa · Sep 30, 2022 · a0d79b7 · a0d79b7
1 parent 70daf8f
commit a0d79b7
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 40 deletions.
diff --git a/assets/woman-white-outfit.jpg b/assets/woman-white-outfit.jpg
diff --git a/index.html b/index.html
@@ -12,30 +12,48 @@
   <body>
     <main class="relative w-full h-[100vh]">
       <header
-        class="navbar fixed z-20 w-full h-[25vh] pointer-events-none bg-pink-600 transition-all duration-300"
+        class="navbar fixed z-20 w-full h-[25vh] transition-all duration-300"
       >
         <span class="w-full h-full flex justify-center items-center">
           <div class="w-[50%] h-full flex items-center">
             <img
               src="./assets/MIDORI-LOGO.png"
-              class="navbar-logo h-auto w-[min(100%,12vw)] py-[30px] transition-all duration-300"
+              class="navbar-logo h-auto w-[max(10vw,100px)] transition-all duration-300"
             />
           </div>
-          <div class="w-[50%] h-full flex justify-center">
-            <span class="">Home</span>
-            <span class="">Gallery</span>
-            <span class="">About Us</span>
+          <div class="w-[50%] h-full flex justify-end items-center">
+            <div
+              class="flex w-[80%] h-full justify-evenly items-center pb-[5vh]"
+            >
+              <span class="font-mono font-thin text-[18px] tracking-widest"
+                ><a href="#home">Home</a></span
+              >
+              <span class="font-mono font-thin text-[18px] tracking-widest"
+                ><a href="#gallery">Gallery</a></span
+              >
+              <span class="font-mono font-thin text-[18px] tracking-widest"
+                ><a href="#about">About Us</a></span
+              >
+            </div>
           </div>
         </span>
       </header>
       <section class="slide-wrapper absolute z-10 w-full h-[100vh]">
         <div
-          id="#home"
-          class="slide w-full h-[100vh] bg-slate-600 flex justify-center items-center"
-        ></div>
+          id="home"
+          class="slide w-full h-[100vh] flex justify-center items-center"
+        >
+          <div class="relative w-full h-full overflow-hidden">
+            <div
+              class="absolute top-[50%] left-[50%] w-[2000px] h-auto translate-x-[-50%] translate-y-[-20%]"
+            >
+              <img src="assets/woman-white-outfit.jpg" class="w-[2000px]" />
+            </div>
+          </div>
+        </div>
 
         <div
-          id="#gallery"
+          id="gallery"
           class="slide w-full h-[100vh] bg-slate-500 flex justify-center items-center"
         >
           <h1 class="delay-75 duration-300 opacity-0 fill-mode-forwards">
@@ -46,13 +64,13 @@ <h1 class="delay-75 duration-300 opacity-0 fill-mode-forwards">
           </h1>
         </div>
         <div
-          id="#about"
+          id="about"
           class="slide w-full h-[100vh] bg-slate-400 flex justify-center items-center"
         >
           <h1 class="delay-75 duration-300">Third Section</h1>
         </div>
         <div
-          id="#footer"
+          id="footer"
           class="slide w-full h-[30vh] bg-slate-300 flex justify-center items-center"
         >
           <h1 class="delay-75 duration-300">Fourth Section</h1>

diff --git a/js/index.js b/js/index.js
@@ -27,10 +27,10 @@ const IOcallback = (entries, observer) => {
 entries.forEach(entry => {
     if (entry.isIntersecting) {
 
-        for (let child of entry.target.children) {
+        // for (let child of entry.target.children) {
 
-            child.classList.add("animate-left-fade-in")
-        }
+        //     child.classList.add("animate-left-fade-in")
+        // }
         console.log(entry)
     }
 });

diff --git a/style/dev.css b/style/dev.css
@@ -3,11 +3,9 @@
 @tailwind utilities;
 
 @layer base {
-  /* body {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  } */
+  html {
+    scroll-behavior: smooth;
+  }
 
   body {
     padding: 0;
@@ -22,6 +20,6 @@
   }
 
   .stick-top-navbar .navbar-logo {
-    @apply h-auto w-[min(100%,9vw)];
+    @apply w-[max(7vw,80px)];
   }
 }
diff --git a/style/styles.css b/style/styles.css
@@ -410,11 +410,9 @@ video {
   height: auto;
 }
 
-/* body {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  } */
+html {
+  scroll-behavior: smooth;
+}
 
 body {
   padding: 0;
@@ -563,10 +561,6 @@ body {
   --tw-backdrop-sepia:  ;
 }
 
-.pointer-events-none {
-  pointer-events: none;
-}
-
 .fixed {
   position: fixed;
 }
@@ -579,6 +573,18 @@ body {
   position: relative;
 }
 
+.top-\[50\%\] {
+  top: 50%;
+}
+
+.left-\[50\%\] {
+  left: 50%;
+}
+
+.top-\[20\%\] {
+  top: 20%;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -619,8 +625,44 @@ body {
   width: 50%;
 }
 
-.w-\[min\(100\%\2c 12vw\)\] {
-  width: min(100%,12vw);
+.w-\[max\(11vw\2c 100px\)\] {
+  width: max(11vw,100px);
+}
+
+.w-\[80\%\] {
+  width: 80%;
+}
+
+.w-\[max\(10vw\2c 100px\)\] {
+  width: max(10vw,100px);
+}
+
+.w-\[max\(9vw\2c 100px\)\] {
+  width: max(9vw,100px);
+}
+
+.w-\[2000px\] {
+  width: 2000px;
+}
+
+.translate-x-\[-50\%\] {
+  --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-\[-50\%\] {
+  --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-\[-20\%\] {
+  --tw-translate-x: -20%;
+  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-\[-20\%\] {
+  --tw-translate-y: -20%;
+  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));
 }
 
 .transform {
@@ -660,13 +702,20 @@ body {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
 
-.bg-pink-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.overflow-hidden {
+  overflow: hidden;
 }
 
 .bg-slate-600 {
@@ -689,9 +738,29 @@ body {
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
 
-.py-\[30px\] {
-  padding-top: 30px;
-  padding-bottom: 30px;
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.pb-\[5vh\] {
+  padding-bottom: 5vh;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.text-\[18px\] {
+  font-size: 18px;
+}
+
+.font-thin {
+  font-weight: 100;
+}
+
+.tracking-widest {
+  letter-spacing: 0.1em;
 }
 
 .opacity-0 {
@@ -712,6 +781,14 @@ body {
   transition-duration: 300ms;
 }
 
+.duration-500 {
+  transition-duration: 500ms;
+}
+
+.duration-700 {
+  transition-duration: 700ms;
+}
+
 @-webkit-keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -745,6 +822,16 @@ body {
           animation-duration: 300ms;
 }
 
+.duration-500 {
+  -webkit-animation-duration: 500ms;
+          animation-duration: 500ms;
+}
+
+.duration-700 {
+  -webkit-animation-duration: 700ms;
+          animation-duration: 700ms;
+}
+
 .delay-75 {
   -webkit-animation-delay: 75ms;
           animation-delay: 75ms;
@@ -760,6 +847,5 @@ body {
 }
 
 .stick-top-navbar .navbar-logo {
-  height: auto;
-  width: min(100%,9vw);
+  width: max(7vw,80px);
 }