fix issue #1

fuzue · Aug 17, 2023 · abed98a · abed98a
1 parent dc04f36
commit abed98a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 54 deletions.
diff --git a/Menu.js b/Menu.js
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
       rel="stylesheet"
     />
     <link href="index.css" rel="stylesheet" />
+    <link href="style.css" rel="stylesheet" />
     <link
       rel="stylesheet"
       href="https://cdn.tailgrids.com/tailgrids-fallback.css"
@@ -24,26 +25,22 @@
 
   <body class="bg-[#f3ecf1] font-sans m-0 flex flex-col text-[#393232]">
     <header
-      class="bg-[#5a175d] z-20 sticky top-0 flex justify-center items-center w-screen p-4 text-white"
+      class="bg-[#5a175d] z-50 sticky top-0 flex items-start md:justify-center w-screen flex-wrap text-white"
     >
-      <h3 class="font-display text-2xl md:text-4xl">Seasonal Food App</h3>
-      <!-- HAMBURGER MENU-->
+      <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
       <input
         type="checkbox"
         id="overlay-input"
         class="absolute right-0 sm:-right-4"
       />
       <label for="overlay-input" id="overlay-button"><span></span></label>
       <div id="overlay">
-        <h3 class="font-display text-2xl md:text-4xl text-center my-5">
-          Seasonal Food App
-        </h3>
-        <ul>
+        <ul class="md:items-center">
           <li><a href="#about-the-project">the idea</a></li>
           <li>
-            <a href="https://github.com/fuzue/seasonfood" target="_blank"
-              >contribute</a
-            >
+            <a href="https://github.com/fuzue/seasonfood" target="_blank">
+              contribute
+            </a>
           </li>
           <!-- <li><a href="#">Buy us a coffee</a></li> -->
           <li><a href="https://fuzue.tech" target="_blank">about us</a></li>
@@ -81,7 +78,9 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
           </div>
         </div>
       </div>
-      <div class="w-full flex justify-center md:relative md:w-auto md:flex-1 md:h-full">
+      <div
+        class="w-full flex justify-center items-center md:relative md:w-auto md:flex-1 md:h-full"
+      >
         <div
           class="relative iphone-x overflow-hidden min-w-[80%] md:absolute md:min-w-0"
         >
@@ -142,7 +141,8 @@ <h3 id="about-the-project" class="text-xl font-display">The idea</h3>
           <h3 class="font-display">
             contribute&nbsp;
             <span class="font-sans"
-              >on <a class="text-slate-950" href="https://github.com/fuzue/seasonalfood">github</a>
+              >on our
+              <a class="text-slate-950" href="">github</a>
             </span>
           </h3>
         </div>
@@ -151,14 +151,13 @@ <h3 class="font-display">
           <img src="./assets/icon-email.svg" class="w-6" />
           <h3 class="font-display">
             contact us:&nbsp;
-            <span class="font-sans text-slate-950"><a href="mailto:[email protected]">[email protected]</a></span>
+            <span class="font-sans text-slate-950">[email protected] </span>
           </h3>
         </div>
       </div>
     </div>
     <footer class="text-sm text-center w-full py-2">
-      made by <a class="text-slate-950" href="https://fuzue.tech">fuzue.tech</a>
+      made by <a class="text-slate-950" ref="#">fuzue.tech</a>
     </footer>
-    <script type="module" src="/main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
diff --git a/style.css b/style.css
@@ -125,7 +125,7 @@ button:focus-visible {
 #overlay-button {
   position: absolute;
   right: 1em;
-  padding: 26px 11px;
+  padding: 30px 11px;
   z-index: 5;
   cursor: pointer;
   user-select: none;
@@ -162,7 +162,7 @@ input[type=checkbox] {
   display: none;
 }
 input[type=checkbox]:checked ~ #overlay {
-  visibility: visible;
+  max-height: 100vh;
 }
 input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
   background: transparent;
@@ -177,19 +177,19 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
 #overlay {
   width: 100vw;
   background: #5a175d;
-  top: 0;
-  visibility: hidden;
-  position: fixed;
+  max-height: 0;
+  overflow: hidden;
+  transition: all ease-in-out .5s;
+  position: absolute;
+  margin-top: 64px;
 }
 #overlay.active {
-  visibility: visible;
+  max-height: 100vh;
 }
 #overlay ul {
   display: flex;
   justify-content: center;
-  align-items: center;
   flex-direction: column;
-  text-align: center;
   padding-left: 0;
   list-style-type: none;
 }
@@ -204,15 +204,13 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
 /* PHONE CSS */
 .iphone-x {
   /* position: relative; */
-  margin: -10px auto;
-  height: 100%;
+  height: 80%;
   aspect-ratio: calc(360/780);
   background-color: #7371ee;
   background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
   border-radius: 40px;
   box-shadow: 0px 0px 0px 1vh #1f1f1f, 0px 0px 0px 1vh #191919,
     0px 0px 0px max(1.5vh, 15px) #111;
-  z-index: 100;
   display: flex;
   flex-direction: column;
   align-items: center;