Made the site more Mobile friendly

index.js

@@ -11,13 +11,6 @@ app.get("/", (req,res) => {
   res.render("home")
 })
 
-app.get("/install", (req, res) => {
-  res.render("install");
-});
-
-app.get("/configure", (req, res) => {
-  res.render("configure");
-});
 
 app.get("*", (req,res) => {
   res.render("404")

package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "ejs": "^3.1.8",
-    "express": "^4.18.1"
+    "express": "^4.18.1",
+    "nodemon": "^2.0.19"
   }
 }

public/backups/home.old.css

@@ -0,0 +1,569 @@
+@font-face {
+    font-family: "LondonBetween";
+    src: url("../fonts/LondonBetween.woff") format("woff");
+  }
+  
+  @font-face {
+    font-family: "JosefinSans-Regular";
+    src: url("../fonts/JosefinSans-Regular.woff") format("woff");
+  }
+  @font-face {
+    font-family: "Sofia-Pro-Light";
+    src: url("../fonts/SofiaProLight.woff") format("woff");
+  }
+  
+  @font-face {
+    font-family: "Sofia-Pro-Medium";
+    src: url("../fonts/SofiaProMedium.woff") format("woff");
+  }
+  
+  @font-face {
+    font-family: "SourceCodePro-Semibold";
+    src: url("../fonts/SourceCodePro-Semibold.woff") format("woff");
+  }
+  
+  * {
+    padding: 0px;
+    margin: 0px;
+    background-color: #1a1a2e;
+  }
+  
+  body {
+    overflow-x: hidden;
+  }
+  
+  #content-center {
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+  
+  #header {
+    display: flex;
+    background-color: #1a1a2e;
+    width: auto;
+    height: 6rem;
+  
+  }
+  
+  .header {
+    background-color: #1a1a2e;
+  }
+  
+  #header-logo-div {
+    width: 240px;
+  }
+  
+  
+  
+  #header-logo {
+    width: auto;
+    height: 100%;
+  }
+  
+  #header-links {
+    display: flex;
+    padding-top: 15%;
+    width: 260px;
+  }
+  
+  #header-links-div {
+    margin-left: auto;
+    padding-right: 10rem;
+  }
+  
+  .header-link {
+    color: #cfe8f6;
+    font-family: "LondonBetween";
+    font-size: 20px;
+    text-decoration: none;
+    transition: transform 0.2s;
+  }
+  
+  
+  
+  .text-para-link:hover {
+    color: aquamarine;
+    font-size: 28px;
+  }
+  
+  .text-para-link {
+    color: #cfe8f6;
+    font-size: 22px;
+    transition: font-size 0.2s;
+  }
+  #header-link-install {
+    margin-left: 10%;
+  }
+  #header-link-configure {
+    margin-left: 10%;
+  }
+  
+  #header-link-home {
+    border-bottom: 2px solid #cfe8f6;
+  }
+  
+  .header-link:hover {
+    transform: scale(1.3);
+    border-bottom: 2px solid aquamarine !important;
+    color: aquamarine;
+  }
+  
+  #links-out {
+    margin-left: auto;
+  }
+  
+  #github {
+    margin-top: 50%;
+  }
+  
+  #link-github {
+    padding: 15px;
+    background-color: aquamarine;
+    font-family: "LondonBetween";
+    color: #1a1a2e;
+    text-decoration: none;
+  }
+  
+  #github {
+    transition: transform 0.2s;
+  }
+  
+  #github:hover {
+    transform: scale(1.2);
+  }
+  #top {
+    width: 100%;
+    height: 40rem;
+    /* background-color: #1a1a2e; */
+    display: flex;
+  }
+  
+  #text {
+    width: 50%;
+    height: 100%;
+    margin-top: 8rem;
+    margin-right: 2%;
+    padding-right: 20px;
+  }
+  
+  #text-h1 {
+    color: #cfe8f6;
+    font-family: "JosefinSans-Regular";
+    font-size: 65px;
+    line-height: 1;
+  }
+  
+  .text-para {
+    padding-top: 20px;
+    color: #cfe8f6;
+    font-family: "Sofia-Pro-Medium";
+    font-size: 22px;
+    line-height: 1.3;
+  }
+  
+  #slide {
+    width: 640px;
+    height: auto;
+    margin-top: 6%;
+  }
+   
+  #slide-content {
+    
+    border: 5px solid #cfe8f6;
+    
+  }
+  
+  #slide-img {
+    width: auto;
+    max-width: 40rem;
+    height: auto;
+    max-height: 23rem;
+  } 
+  
+  .swiper {
+    width: auto;
+  }
+  
+  .swiper-slide {
+    width: auto;
+  }
+  
+  .swiper-wrapper {
+    width: auto;
+    height: auto;
+  }
+  
+  .swiper .swiper-button-prev,
+  .swiper .swiper-button-next {
+    color: #cfe8f6;
+    background-color: transparent;
+  }
+  
+  .swiper .swiper-pagination-bullet-active {
+    background-color: #cfe8f6;
+  }
+  
+  .swiper .swiper-pagination {
+    background-color: transparent;
+  }
+  
+  #install-link {
+    margin-top: 2rem;
+    padding: 15px;
+    background-color: aquamarine;
+    border: 5px solid #1a1a2e;
+    /* border-radius: 15px; */
+    font-family: "Sofia-Pro-Medium";
+    transition: transform 0.2s;
+    font-size: 16px;
+    cursor: pointer;
+  }
+  
+  #install-link:hover {
+    transform: scale(1.2);
+  }
+  
+  #title-features {
+    font-family: "JosefinSans-Regular";
+    color: #cfe8f6;
+    font-size: 102px;
+  }
+  
+  #features {
+    width: 100%;
+    height: 130rem;
+  }
+  
+  #animation {
+    margin-top: 10rem;
+  
+    display: flex;
+  }
+  
+  #animation-left {
+    width: 50%;
+    height: 100%;
+  }
+  
+  video {
+    width: 100%;
+    height: 10%;
+  }
+  
+  #animation-right {
+    width: 50%;
+    height: 100%;
+  }
+  
+  #animation-h1 {
+    color: #cfe8f6;
+    font-family: "JosefinSans-Regular";
+    margin-left: 25%;
+    margin-top: 15%;
+    font-size: 46px;
+    line-height: 1;
+    width: 100%;
+  }
+  
+  #animation-p {
+    color: #cfe8f6;
+    font-family: "Sofia-Pro-Light";
+    margin-left: 20%;
+    margin-top: 2%;
+    font-size: 18px;
+    line-height: 1.5;
+    text-align: center;
+  }
+  
+  #tiling {
+    margin-top: 20rem;
+    display: flex;
+  }
+  
+  #tiling-left {
+    width: 50%;
+    height: 100%;
+  }
+  
+  #tiling-right {
+    width: 50%;
+    height: 100%;
+  }
+  
+  #tiling-h1 {
+    color: #cfe8f6;
+    font-family: "JosefinSans-Regular";
+    margin-left: 13%;
+    margin-top: 15%;
+    font-size: 46px;
+    line-height: 1;
+    width: 100%;
+  }
+  
+  #tiling-p {
+    color: #cfe8f6;
+    font-family: "Sofia-Pro-Light";
+    margin-right: 20%;
+    margin-top: 2%;
+    font-size: 18px;
+    line-height: 1.5;
+    text-align: center;
+  }
+  
+  #configure {
+    margin-top: 20rem;
+  
+    display: flex;
+  }
+  
+  #configure-left {
+    width: 50%;
+    height: 100%;
+  }
+  
+  #configure-right {
+    width: 50%;
+    height: 100%;
+  }
+  
+  #configure-h1 {
+    color: #cfe8f6;
+    font-family: "JosefinSans-Regular";
+    margin-left: 26%;
+    margin-top: 15%;
+    font-size: 46px;
+    line-height: 1;
+    width: 100%;
+  }
+  
+  #configure-p {
+    color: #cfe8f6;
+    font-family: "Sofia-Pro-Light";
+    margin-left: 20%;
+    margin-top: 2%;
+    font-size: 18px;
+    line-height: 1.5;
+    text-align: center;
+  }
+  
+  #link-config {
+    color: #cfe8f6;
+    transition: font-size 0.2s;
+  }
+  
+  #link-config-discord {
+    color: #cfe8f6;
+    transition: font-size 0.2s;
+  }
+  
+  #link-config:hover {
+    color: aquamarine;
+    font-size: 20px;
+  }
+  
+  #link-config-discord:hover {
+    color: #5865f2;
+    font-size: 20px;
+  }
+  
+  #and-many-more {
+    width: auto;
+    margin-top: 15rem;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 6rem;
+    height: 30rem;
+    background-color: #2d2d47;
+    border-radius: 15px;
+  }
+  
+  .amm {
+    background-color: #2d2d47;
+    border-radius: 15px;
+  }
+  
+  #h1-amm {
+    color: #cfe8f6;
+    font-family: "JosefinSans-Regular";
+    margin-left: 28%;
+    padding-top: 4%;
+    font-size: 52px;
+    line-height: 1;
+  }
+  
+  #ul-amm-div {
+    display: flex;
+    margin-top: 5%;
+    padding-left: 50px;
+  }
+  
+  #ul-amm {
+    margin-left: 10%;
+  }
+  #li-amm {
+    color: #cfe8f6;
+    font-family: "Sofia-Pro-Medium";
+    padding-bottom: 3rem;
+  }
+  
+  #quickinstall {
+    width: 100%;
+    height: 20rem;
+    
+  }
+  
+  #quickinstall h1 {
+    color: #cfe8f6;
+    font-family: "JosefinSans-Regular";
+    font-size: 48px;
+  }
+  
+  #qi-content {
+    width: auto;
+    height: 6rem;
+    margin-top: 20px;
+    border-radius: 15px;
+    background-color: #2d2d47;
+  }
+  
+  #qi-content p span {
+    
+    font-family: "SourceCodePro-Semibold";
+    font-size: 22px;
+    background-color: #2d2d47;
+  }
+  
+  #qi-content p {
+    padding-top: 32px;
+    padding-left: 30px;
+    background-color: #2d2d47;
+     border-radius: 15px;
+  }
+  
+  #yay {
+    color: #f9e2af
+  }
+  
+  #syyu {
+    color: #94e2d5;
+  }
+  
+  #h-git {
+    color:#cfe8f6;
+  }
+  
+  #warning {
+    width: auto;
+    margin-top: 4rem;
+    margin-bottom: 10rem;
+    height: 6rem;
+    background-color: rgba(243, 139, 168,1);
+    display: flex;
+    border-radius: 15px;
+  }
+  
+  #warning img {
+    width: auto;
+    height: 60%;
+    background-color: rgba(243, 139, 168,1);
+    margin-top: 20px;
+    margin-left: 30px;
+  }
+  
+  #warning p {
+    color: black;
+    font-family: "Sofia-Pro-Light";
+    margin-left: 30px;
+    margin-top: 40px;
+    font-size: 20px;
+    background-color: rgba(243, 139, 168,1);
+  }
+  
+  #warning i {
+    background-color: rgba(243, 139, 168,1);
+  }
+  
+  #info-install {
+    color:#cfe8f6;
+    font-family: "Sofia-Pro-Medium";
+    margin-top: 10px;
+    font-size: 14px;
+  }
+  
+  #info-install-link {
+    color:#cfe8f6;
+    font-family: "Sofia-Pro-Medium";
+    font-size: 14px;
+    transition: font-size 0.2s;
+    
+  }
+  
+  #info-install-link:hover {
+    color: aquamarine;
+    font-family: "Sofia-Pro-Medium";
+    font-size: 18px;
+    
+  }
+  
+  hr {
+    margin-top: 100px;
+    color:#a3a3a3a5;
+  }
+  
+  footer {
+    width: 100%;
+    height: 130px;
+    display: flex;
+  }
+  
+  footer p {
+    
+    margin-top: 10px;
+    color: #a3a3a3a5;
+    font-family: "Sofia-Pro-Light";
+    font-size: 13px;
+  }
+  
+  footer p a {
+    color: #a3a3a3a5;
+    text-decoration: none;
+  }
+  
+  footer p a:hover {
+    color: #cfe8f6;
+    text-decoration: none;
+  }
+  
+  #devs {
+    padding-top: 5px;
+  }
+  
+  .p2 {
+    margin-top: 9px;
+  }
+  
+  #foot-icons img {
+    padding-left: 20px;
+    width: 30px;
+    height: 30px;
+  
+  }
+  
+  #foot-icons {
+    margin-left: 35%;
+    margin-top: 4%;
+    display: flex;
+  }
+  
+  @media (max-width: 1080px){
+    #top {
+      display: inline;
+    }
+  }
+  
+  @media (max-width: 480px){
+    #header-logo-div {
+      width: 40%;
+      height: auto;
+    }
+  }

public/backups/home.old.ejs

@@ -28,11 +28,11 @@
         <div id="header-links-div" class="header">
           <div id="header-links" class="header">
             <a id="header-link-home" class="header-link" href="/">Hyprland</a>
-            <a id="header-link-install" class="header-link" href="https://wiki.hyprland.org/Getting-Started/Installation/"
+            <a id="header-link-install" class="header-link" href="https://wiki.hyprland.org/"
-              >Install</a
+              >Wiki</a
             >
             <a id="header-link-configure" class="header-link" href="https://github.com/hyprwm/hyprland"
-              >Github</a
+              >FAQ</a
             >
           </div>
         </div>
@@ -48,7 +48,7 @@
           </div>
         </div>
       </header>
-      <div id="top" class="top">
+      <!-- <div id="top" class="top">
         <div id="text" class="top">
           <h1 id="text-h1">Welcome to Hyprland!</h1>
           <p class="text-para">
@@ -81,11 +81,11 @@
         </div>
         <div id="slide" class="top">
           <div id="slide-content">
-            <!-- Slider main container -->
+            
             <div class="swiper">
-              <!-- Additional required wrapper -->
+             
               <div class="swiper-wrapper">
-                <!-- Slides -->
+                
                 <div class="swiper-slide">
                   <img src="imgs/img1.png" id="slide-img" />
                 </div>
@@ -102,10 +102,10 @@
                   <img src="imgs/img5.png" id="slide-img" />
                 </div>
               </div>
-              <!-- If we need pagination -->
+              
               <div class="swiper-pagination"></div>
 
-              <!-- If we need navigation buttons -->
+              
               <div class="swiper-button-prev"></div>
               <div class="swiper-button-next"></div>
             </div>
@@ -114,8 +114,8 @@
         <!-- <div id="animations">
            <video src="videos/animation.mp4" autoplay="autoplay" loop="loop" controls=""></video> -->
         <!-- </div>  -->
-      </div>
+      </div> -->
-      <div id="features">
+      <!-- <div id="features">
         <h1 id="title-features">Features</h1>
         <div id="animation">
           <div id="animation-left">
@@ -207,13 +207,13 @@
             *For a more detailed Installation process, please visit the
             <a href="https://wiki.hyprland.org/Getting-Started/Installation" id="info-install-link">Install wiki page</a>.
           </p>
-          <!--<div id="warning">
+          <div id="warning">
             <img src="svg/warning.svg" alt="" />
             <p>
               Hyprland is still in its early development stages, although it is
               pretty stable now, bugs <i>may</i> to be expected.
             </p>
-          </div>-->
+          </div>
         </div>
         <hr />
         <footer>
@@ -281,7 +281,7 @@
           </div>
         </footer>
       </div>
-    </div>
+    </div> -->
 
     <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
     <script src="js/swiper.js"></script>

public/js/mobile.js

@@ -0,0 +1,12 @@
+const doc = document;
+const menuOpen = doc.querySelector(".mob-menu");
+const menuClose = doc.querySelector(".close");
+const overlay = doc.querySelector(".overlay");
+
+menuOpen.addEventListener("click", () => {
+  overlay.classList.add("overlay--active");
+});
+
+menuClose.addEventListener("click", () => {
+  overlay.classList.remove("overlay--active");
+});

public/js/swiper.js

@@ -1,6 +1,6 @@
 const swiper = new Swiper(".swiper", {
   autoplay: {
-    delay: 2500,
+    delay: 2000,
     disableOnInteraction: true,
   },
   loop: true,
@@ -14,8 +14,4 @@ const swiper = new Swiper(".swiper", {
     nextEl: ".swiper-button-next",
     prevEl: ".swiper-button-prev",
   },
-
-  scrollbar: {
-    el: ".swiper-scrollbar",
-  },
 });

views/404.ejs

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
-    <link rel="stylesheet" href="css/404.css" />
-    <title>Oopsy...</title>
-  </head>
-  <body>
-    <div id="content-center" class="content-center">
-      <header id="header" class="header">
-        <div id="header-logo-div" class="header">
-          <a href="/">
-            <img
-              id="header-logo"
-              class="header"
-              src="svg/hyprland.svg"
-              alt="Hyprland Logo"
-            />
-          </a>
-        </div>
-        <div id="header-links-div" class="header">
-          <div id="header-links" class="header">
-            <a id="header-link-home" class="header-link" href="/">Hyprland</a>
-            <a id="header-link-install" class="header-link" href="/install"
-              >Install</a
-            >
-            <a id="header-link-configure" class="header-link" href="/configure"
-              >Configure</a
-            >
-          </div>
-        </div>
-        <div id="links-out" class="header-out">
-          <div id="github" class="header-out">
-            <a
-              id="link-github"
-              href="https://github.com/hyprwm/Hyprland"
-              target="_blank"
-              rel="noopener"
-              >Github</a
-            >
-          </div>
-        </div>
-      </header>
-      <div id="div-img"><img src="svg/login.svg" alt=""></div>
-      <div id="div-text"><h1>Page Not Found!</h1><p>Look where you land, open seas and empty hands</p><a href="/"><button>Return Home</button></a></div>
-      
-      </div>
-      </body>
-      </html>