adjust sizes for bigger screens

fuzue · Aug 12, 2023 · 85dccfa · 85dccfa
1 parent b0d0dd2
commit 85dccfa
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 72 deletions.
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
       href="https://cdn.tailgrids.com/tailgrids-fallback.css"
     />
     <title>Seasonal Food App</title>
-
   </head>
 
   <body class="bg-[#f3ecf1] font-sans m-0 flex flex-col text-[#393232]">
@@ -53,10 +52,10 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
     </header>
     <!-- MAIN SECTION OF THE WEBSITE -->
     <main
-      class="mt-4 w-full flex flex-col md:flex-row items-center gap-6"
+      class="mt-4 w-full flex flex-col items-center gap-6 md:flex-row md:flex-grow"
     >
       <div
-        class="md:basis-1/2 py-20 text-[#074e67] h-full md:order-2 text-center md:text-left"
+        class="py-20 text-[#074e67] h-full text-center flex items-center md:flex-1 md:order-2 md:text-left"
       >
         <div>
           <p class="mx-7 text-4xl md:text-6xl justify-start">
@@ -82,16 +81,20 @@ <h3 class="font-display text-2xl md:text-4xl text-center my-5">
           </div>
         </div>
       </div>
-      <div class="md:relative  w-full md:w-auto md:basis-1/2 md:min-h-[760px] md:top-4  ">
-        <div class="md:absolute relative md:right-[10px] iphone-x overflow-hidden ">
-          <img
-            class="absolute top-0 w-full h-full "
-            src="./assets/phone-print.png"
-          />
-          <i>Speaker</i>
-          <b>Camera</b>
-          <span>Left action button</span>
-          <span>Right action button</span>
+      <div class="w-full flex justify-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"
+        >
+          <div class="before">
+            <i>Speaker</i>
+            <b>Camera</b>
+          </div>
+          <div class="relative w-full h-full">
+            <img
+              class="absolute top-0 w-full h-full"
+              src="./assets/phone-print.png"
+            />
+          </div>
         </div>
       </div>
     </main>

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/style.css b/style.css
@@ -16,6 +16,12 @@
   -webkit-text-size-adjust: 100%;
 }
 
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -193,48 +199,46 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
 #overlay ul li a {
   color: white;
   text-decoration: none;
-
 }
+
 /* PHONE CSS */
-html, body {
-  width: 100%;
-  overflow-x: hidden;
-}
 .iphone-x {
   /* position: relative; */
   margin: -10px auto;
-  max-width: 360px;
-  width: 100%;
-  min-width: 20vw;
+  height: 100%;
   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 11px #1f1f1f, 0px 0px 0px 13px #191919,
-    0px 0px 0px 20px #111;
+  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;
+  justify-content: space-between;
 }
-.iphone-x:before,
+.iphone-x .before,
 .iphone-x:after {
   content: "";
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 5;
 }
 .iphone-x:after {
-  bottom: 7px;
-  width: 140px;
-  height: 4px;
+  bottom: 1%;
+  width: 30%;
+  height: .5%;
   background-color: #f2f2f2;
   border-radius: 10px;
 }
-.iphone-x:before {
+.iphone-x .before {
   top: 0px;
   width: 56%;
-  height: 30px;
+  height: 3%;
   background-color: #1f1f1f;
   border-radius: 0px 0px 40px 40px;
+  display: flex;
+  justify-content: center;
 }
 .iphone-x i,
 .iphone-x b,
@@ -243,63 +247,38 @@ html, body {
   position: absolute;
   display: block;
   color: transparent;
-  z-index: 10;
+  z-index: 100;
 }
 .iphone-x i {
-  top: 0px;
   left: 50%;
   transform: translate(-50%, 6px);
-  height: 8px;
-  width: 15%;
+  height: 10%;
+  width: 30%;
   background-color: #101010;
-  border-radius: 8px;
+  border-radius: 000px;
   box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
 }
 .iphone-x b {
-  left: 10%;
-  top: 0px;
-  transform: translate(180px, 4px);
-  width: 12px;
-  height: 12px;
+  top: 10%;
+  right: 25%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: .75vh;
+  height: .75vh;
   background-color: #101010;
-  border-radius: 12px;
+  border-radius: 999px;
   box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
 }
 .iphone-x b:after {
   content: "";
   position: absolute;
   background-color: #2d4d76;
-  width: 6px;
-  height: 6px;
-  top: 2px;
-  left: 2px;
-  top: 3px;
-  left: 3px;
+  width: 50%;
+  height: 50%;
   display: block;
-  border-radius: 4px;
+  border-radius: 999px;
   box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
 }
-.iphone-x s {
-  top: 50px;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-  font-size: 70px;
-  font-weight: 100;
-  padding-top: 60px;
-}
-.iphone-x span {
-  bottom: 50px;
-  width: 40px;
-  height: 40px;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
-  left: 30px;
-}
-.iphone-x span + span {
-  left: auto;
-  right: 30px;
-}