Refactor landing page and make it responsive

docs/index.css

@@ -5,6 +5,12 @@ body {
   background-size: auto;
   background-repeat: no-repeat;
   background-attachment: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  text-align: center;
+  overflow: hidden;
 }
 
 @font-face {
@@ -19,16 +25,55 @@ body {
   --font-size-sm: 14px;
   --color-aliceblue-100: #f3f8ff;
   --br-5xs: 8px;
+  --color-download: #00a7ff;
+  --color-github: #333;
 }
 
-.download-now {
+.container {
-  position: relative;
+  display: flex;
-  font-size: var(--font-size-sm);
+  align-items: center;
-  line-height: 19px;
+  justify-content: center;
-  font-weight: 600;
+  flex-direction: row;
+  width: 100%;
+  max-width: 1200px;
+  padding: 20px;
   font-family: var(--font-poppins);
-  color: var(--color-aliceblue-100);
+}
-  text-align: center;
+
+.ms-365-electron {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 50%;
+  text-align: left;
+}
+
+.heading {
+  font-size: 85px;
+  line-height: 90px;
+  color: #292e37;
+  margin-bottom: 10px;
+}
+
+.byagam778 {
+  font-size: 38px;
+  line-height: 50px;
+  font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,var(--font-san-francisco);
+  color: #00acff;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.description {
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
 }
 
 .download,
@@ -37,155 +82,100 @@ body {
   border: 0;
   padding: 0;
   background-color: transparent;
-  position: absolute;
-  margin-top: 597px;
   border-radius: var(--br-5xs);
   width: 190px;
   height: 62px;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
+  transition: all 0.5ms ease;
 }
 
 .download {
-  margin-left: 172px;
+  background: linear-gradient(90.05deg, #45bfff 26.58%, var(--color-download));
-  background: linear-gradient(90.05deg, #45bfff 26.58%, #00a7ff);
   box-shadow: 0 24px 30px -16px rgba(45, 183, 255, 0.25);
 }
 
 .github {
-  margin-left: 392px;
+  background: linear-gradient(90.05deg, #424242 26.58%, var(--color-github));
-  background: linear-gradient(90.05deg, #424242 26.58%, #333);
   box-shadow: 0 24px 30px -16px rgba(66, 66, 66, 0.25);
 }
 
-.description,
+.download:hover {
-.heading {
+  background: transparent;
-  position: absolute;
+  border: 3px solid var(--color-download);
-  margin-top: 505px;
+  color: black;
-  margin-left: 172px;
-  line-height: 26px;
-  display: inline-block;
-  width: 388px;
 }
 
-.heading {
+.github:hover {
-  margin-top: 285px;
+  background: transparent;
-  margin-left: 166px;
+  border: 3px solid var(--color-github);
-  font-size: 85px;
+  color: black;
-  line-height: 90px;
-  color: #292e37;
-  width: 461px;
 }
 
-.byagam778 {
+.download-now {
-  position: absolute;
+  font-size: var(--font-size-sm);
-  margin-top: 219px;
+  line-height: 19px;
-  margin-left: 170px;
+  font-weight: 600;
-  font-size: 38px;
+  color: var(--color-aliceblue-100);
-  line-height: 50px;
+  transition: color 0.5s ease;
-  font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,var(--font-san-francisco);
-  color: #00acff;
-  cursor: pointer;
 }
 
-.content,
+.download:hover .download-now,
-.preview-icon {
+.github:hover .download-now {
-  position: absolute;
+  color: black;
-  margin-top: -93px;
-  margin-left: 0;
-  width: 890px;
-  height: 834px;
-}
-
-.content {
-  transform: translate(-50%, -50%);
-  margin-left: 30%;
-  margin-top: 21.5%;
 }
 
 .preview-icon {
-  position: absolute;
+  width: 50%;
-  margin-top: 23%;
+  max-width: 708px;
-  margin-left: 68%;
+  height: auto;
-  transform: translate(-50%, -50%);
-  width: 708px;
-  height: 447px;
   object-fit: cover;
-}
+  margin-left: 20px;
-
-.ms-365-electron {
-  width: 100%;
-  height: 696px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  text-align: left;
-  font-size: 18px;
-  color: #525d73;
-  font-family: var(--font-poppins);
 }
 
 @media (max-width: 768px) {
-  .preview-icon {
+  .container {
-    width: 78%;
+    flex-direction: column;
-    height: auto;
-    margin-top: 45%;
-    margin-left: 50%;
-    transform: translate(-50%, -50%);
   }
 
-  .content {
+  .preview-icon {
-    margin-top: 77%;
+    width: 100%;
+    margin: 0;
+    margin-bottom: 20px;
+  }
+
+  .ms-365-electron {
+    width: 100%;
+    text-align: center;
+    align-items: center;
   }
 
   .heading {
-    text-align: center;
     font-size: 30px;
-    height: auto;
+    line-height: 36px;
-    margin-top: 56%;
-    margin-left: 59%;
-    transform: translate(-50%, -50%);
   }
 
   .byagam778 {
-    text-align: center;
-    width: 100%;
     font-size: 26px;
-    height: auto;
-    margin-top: 50%;
-    margin-left: 59%;
-    transform: translate(-50%, -50%);
   }
 
   .description {
-    text-align: center;
+    font-size: 18px;
-    width: 40%;
-    font-size: 20px;
-    height: auto;
-    margin-top: 65%;
-    margin-left: 59%;
-    transform: translate(-50%, -50%);
   }
 
+  .download,
   .github {
-    text-align: center;
+    width: 160px;
-    font-size: 20px;
+    height: 54px;
-    margin-top: 85%;
+    font-size: 16px;
-    margin-left: 59%;
-    transform: translate(-50%, -50%);
-  } 
-  
-  .download {
-    text-align: center;
-    font-size: 20px;
-    margin-top: 77%;
-    margin-left: 59%;
-    transform: translate(-50%, -50%);
   }
 
   .download-now {
-    font-size: 14px;
+    font-size: 12px;
+  }
+
+  .buttons {
+    flex-direction: column;
   }
 }

docs/index.html

@@ -26,22 +26,24 @@
     />
   </head>
   <body>
-    <div class="ms-365-electron">
+    <div class="container">
-      <div class="content">
+      <div class="ms-365-electron">
-        <button class="download" id="download">
+        <div class="byagam778" id="byagam778">By @agam778</div>
-          <div class="download-now">
+        <div class="heading">MS-365-Electron</div>
-            Download Now:
-            <div id="release-tag"></div>
-          </div>
-        </button>
-        <button class="github" id="gitHub">
-          <div class="download-now">View on GitHub</div>
-        </button>
         <div class="description">
           Unofficial Microsoft 365 Web Desktop Wrapper made with Electron
         </div>
-        <b class="heading">MS-365-Electron</b>
+        <div class="buttons">
-        <div class="byagam778" id="byagam778">By @agam778</div>
+          <button class="download" id="download">
+            <div class="download-now">
+              Download Now:
+              <div id="release-tag"></div>
+            </div>
+          </button>
+          <button class="github" id="gitHub">
+            <div class="download-now">View on GitHub</div>
+          </button>
+        </div>
       </div>
       <img class="preview-icon" alt="" src="./public/preview.png" />
     </div>

docs/loading/style.css

@@ -3,6 +3,8 @@ body {
   text-rendering: optimizeLegibility;
   font-family: "proxima-nova-soft", sans-serif;
   -webkit-user-select: none;
+  overflow: hidden;
+}
 
 body .vertical-centered-box {
   position: absolute;