Merge pull request #26 from shashwatdwi176/main

#18 Fix: the preloader and navbar issues, and some UI elements
IIITKalyaniFOSC · Jun 3, 2023 · e0a75de · e0a75de
2 parents 423c579 + 5384520
commit e0a75de
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/assets/ezgif.com-optimize.gif b/assets/ezgif.com-optimize.gif
diff --git a/index.html b/index.html
@@ -15,11 +15,14 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
-    <title>Stts Code 0 | IIIT Kalyani</title>
+    <title>Status Code 0 | IIIT Kalyani</title>
   </head>
   <body class="bg-[#1E1E1E]">
+
     <div id="preloader">
-      <h1 id="loadingText">
+      <img id="loadingImage" src="assets\ezgif.com-optimize.gif" />
+
+      <h1 id="loadingText" >
         Status Code 0 loading <span id="blinking"></span>
       </h1>
     </div>
@@ -1204,6 +1207,7 @@ <h1 class="m-0 text-xl xl:text-2xl">© 2023 Tech Club IIIT Kalyani</h1>
         </div>
       </div>
     </div>
+
     <script>
       function Menu(e) {
         let list = document.querySelector('ul');

diff --git a/style.css b/style.css
@@ -26,18 +26,60 @@ body {
   scroll-behavior: smooth !important;
 }
 
-#preloader {
-  background: #1e1e1e url('./assets/start.gif') no-repeat center center;
-  height: 100vh;
-  background-size: 15%;
-  width: 100%;
+
+
+ #preloader {
+
   position: fixed;
-  z-index: 51;
+  width: 100%;
+  height:100vh;
+  background: #1E1E1E;
+  z-index: 99999999;
 }
+
+#loadingImage {
+  animation-delay: 0ms;
+  transition-delay: 0ms;
+  height:35vh;
+  margin-left: 5%;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  display: block;
+  margin-top: 7rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 #loadingText {
-  position: fixed;
-  font-size: 3rem;
-  top: 70%;
-  width: 100%;
+  font-size: 2.5rem;
   text-align: center;
+  justify-content: center;
+  align-content: center;
+  display: block;
+  margin-top: 5rem;
+  margin-left: auto;
+  margin-right: auto;
 }
+
+@media only screen and (max-width: 37.5rem) {
+  #preloader {
+    width: 100%;
+    height: 100vh;
+
+  }
+
+  #loadingText {
+    display: inline-block;
+    font-size: 1.5rem;
+    width: 100%;
+    height:100vh;
+    margin: auto;
+    margin-top: 20px;
+    text-align: center;
+  }
+  #loadingImage{
+    height: 35vh;
+    align-content: center;
+  }
+}