fixed broken site on larger screens (#19)

public/css/home.css

@@ -29,6 +29,10 @@
   background-color: #1a1a2e;
 }
 
+body {
+  background-color: #1a1a2e;
+}
+
 header {
   display: flex;
   justify-content: flex-end;
@@ -37,7 +41,6 @@ header {
   padding-left: 8%;
   background-color: #1a1a2e;
   padding-top: 20px;
-
 }
 
 .logo {
@@ -97,7 +100,6 @@ padding: 0px;
   margin-right: 32px;
   font-size: 43px;
   margin-top: 5px;
-
 }
 
 #home {
@@ -122,7 +124,7 @@ margin-top: 5px;
 .top {
   background-color: #1a1a2e;
   display: flex;
-  height: 643px;
+  height: max-content;
 }
 
 .text h2 {
@@ -134,7 +136,7 @@ margin-top: 5px;
   font-family: "Sofia-Pro-Medium";
   font-size: 20px;
   color: #cfe8f6;
-  padding-top: 15px;
+  padding-top: 10px;
 }
 .text a {
   font-family: "Sofia-Pro-Medium";
@@ -148,24 +150,23 @@ margin-top: 5px;
   padding-top: 150px;
   padding-left: 10%;
   margin-right: auto;
-  max-width: 700px;
+  max-width: 600px;
 }
 
 #install-hypr div {
   width: 300px;
   height: 60px;
   background-color: aquamarine;
-  margin-top: 30px;
+  margin-top: 40px;
   transition: all 0.5s ease;
   border-radius: 0.2rem;
 }
 
-
 #install-hypr div p {
   text-align: center;
   color: #1a1a2e;
   background-color: aquamarine;
-  padding-top: 1.25rem;
+  padding-top: 1rem;
   padding-bottom: 1rem;
   font-size: 22px;
   border-radius: 0.2rem;
@@ -175,7 +176,7 @@ margin-top: 5px;
 
 #install-hypr div p:hover {
   background-color: #1a1a2e;
-  color: aquamarine
+  color: aquamarine;
 }
 
 #install-hypr {
@@ -190,10 +191,11 @@ margin-top: 5px;
   margin-top: 100px;
   margin-right: 6%;
   margin-left: 40px;
-  width: 650px;
+  width: 640px;
   height: max-content;
   align-items: center;
   justify-content: center;
+  padding-bottom: 5%;
 }
 
 #slide-content {
@@ -338,8 +340,9 @@ margin-top: 5px;
 #ani-text a div {
   color: #1a1a2e;
   font-family: "Sofia-Pro-Medium";
+  font-size: 16px;
   padding: 20px;
-  margin: 0px 20%;
+  margin: 0px 17%;
   margin-top: 40px;
   border-radius: 0.2rem;
   border: solid aquamarine;
@@ -452,7 +455,6 @@ margin-top: 5px;
   transform: scale(1.2);
   background-color: #1a1a2e;
   color: aquamarine;
-  
 }
 
 #con-text p a {
@@ -467,8 +469,6 @@ margin-top: 5px;
   color: #5865f2 !important;
 }
 
-
-
 footer {
   font-family: "Sofia-Pro-Light";
   display: flex;
@@ -520,8 +520,7 @@ footer a:hover {
   margin-bottom: 10px;
 }
 
-
+@media only screen and (max-width: 1140px) {
-@media only screen and (max-width: 1100px) {
   .nav__links,
   .cta {
     display: none;
@@ -643,7 +642,6 @@ footer a:hover {
   footer {
     /* display: block; */
   }
-
 }
 
 @media only screen and (max-width: 648px) {
@@ -711,8 +709,7 @@ footer a:hover {
   }
   .mob-menu {
     display: flex;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
-    
   }
   .get-started a div {
     margin-left: 0px;
@@ -764,3 +761,232 @@ footer {
     font-size: 14px;
   }
 }
+@media only screen and (min-width: 1860px) {
+  #ani-text {
+    margin-left: auto;
+    max-width: 500px;
+    margin-top: 50px;
+  }
+  #til-text {
+    margin-right: auto;
+    max-width: 500px;
+    margin-top: 50px;
+  }
+  #con-text {
+    margin-left: auto;
+    max-width: 500px;
+    margin-top: 50px;
+  }
+  #ani-vid video {
+    width: 755px;
+  }
+
+  #til-vid video {
+    width: 755px;
+  }
+
+  #con-vid video {
+    width: 755px;
+  }
+}
+@media only screen and (min-width: 2200px) {
+  #ani-text {
+    margin-left: auto;
+    max-width: 700px;
+    margin-top: 80px;
+  }
+  #ani-text h1 {
+    font-size: 54px;
+  }
+  #ani-text p {
+    font-size: 26px;
+  }
+  #ani-text a div {
+    scale: 1.2;
+  }
+  #til-text {
+    margin-right: auto;
+    max-width: 700px;
+    margin-top: 80px;
+    margin-left: 3%;
+  }
+  #til-text h1 {
+    font-size: 54px;
+  }
+  #til-text p {
+    font-size: 26px;
+  }
+  #til-text a div {
+    scale: 1.2;
+  }
+  #con-text {
+    margin-left: auto;
+    max-width: 700px;
+    margin-top: 80px;
+  }
+  #con-text h1 {
+    font-size: 54px;
+  }
+  #con-text p {
+    font-size: 26px;
+  }
+  #con-text a div {
+    scale: 1.2;
+  }
+
+  .animation {
+    height: max-content;
+  }
+  #ani-vid video {
+    width: 80%;
+    height: auto;
+    padding-bottom: 100px;
+  }
+  .tiling {
+    height: max-content;
+  }
+  #til-vid video {
+    width: 80%;
+    height: auto;
+    padding-bottom: 100px;
+    margin-left: 25%;
+  }
+  .configure {
+    height: max-content;
+  }
+  #con-vid video {
+    width: 80%;
+    height: auto;
+    padding-bottom: 100px;
+  }
+  .top {
+    height: max-content;
+  }
+  .swiper-slide img {
+    width: 960px;
+    height: auto;
+  }
+  #slide-content {
+    width: 960px;
+    height: auto;
+  }
+  #slide {
+    width: max-content;
+    padding-bottom: 5%;
+  }
+  .text p {
+    font-size: 26px;
+    padding-top: 10px;
+  }
+  .text h2 {
+    font-size: 68px;
+  }
+  #install-hypr div {
+    scale: 1.2;
+    margin-left: 5%;
+    margin-top: 45px;
+  }
+  .text {
+    margin-top: 1%;
+    max-width: 800px;
+  }
+  #features-text {
+    font-size: 82px;
+    padding-bottom: 80px;
+  }
+  .footer-text * {
+    font-size: 16px;
+  }
+  #devs {
+    max-width: 800px;
+  }
+}
+
+@media only screen and (min-width: 3000px) {
+  #ani-text {
+    margin-top: 5%;
+    margin-right: auto;
+  }
+  #ani-text h1 {
+    font-size: 72px;
+  }
+  #ani-text p {
+    font-size: 32px;
+  }
+  #ani-text a div {
+    scale: 1.3;
+  }
+
+  #til-text {
+    margin-top: 5%;
+    margin-left: auto;
+  }
+  #til-text h1 {
+    font-size: 72px;
+  }
+  #til-text p {
+    font-size: 32px;
+  }
+  #til-text a div {
+    scale: 1.3;
+  }
+  #con-text {
+    margin-top: 5%;
+    margin-right: auto;
+  }
+  #con-text h1 {
+    font-size: 72px;
+  }
+  #con-text p {
+    font-size: 32px;
+  }
+  #con-text a div {
+    scale: 1.3;
+  }
+  .swiper-slide img {
+    width: 1377px;
+  }
+  #slide-content {
+    width: 1377px;
+  }
+  .text {
+    max-width: 1000px;
+    margin-top: 5%;
+  }
+  .text p {
+    font-size: 32px;
+  }
+  .text h2 {
+    font-size: 82px;
+  }
+  #install-hypr div {
+    scale: 1.3;
+    margin-left: 5%;
+  }
+  #features-text {
+    font-size: 96px;
+  }
+  .nav__links a,
+  .cta {
+    font-size: 28px;
+  }
+  .logo img {
+    width: 240px;
+    height: auto;
+    padding-right: 10px;
+  }
+  .footer-text * {
+    font-size: 20px;
+  }
+  #devs {
+    max-width: 1000px;
+  }
+  .text {
+    max-width: 1000px !important;
+  }
+}
+@media only screen and (min-width: 1700px) {
+  .text {
+    max-width: 800px;
+  }
+}

views/404.ejs

@@ -8,6 +8,7 @@
   <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
   <link rel="stylesheet" href="css/home.css" />
   <link rel="stylesheet" href="css/404.css" />
+  <meta name="darkreader-lock">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
   <title>Oops ...</title>
 </head>

views/home.ejs

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="ico/favicon.ico" type="image/ico" />
+    <meta name="darkreader-lock" />
     <link
       rel="icon"
       href="ico/favicon-32x32.png"
@@ -33,6 +34,7 @@
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://www.hyprland.org/" />
+    <meta property="og:image" content="imgs/wall_4k.png" />
     <meta
       name="twitter:card"
       content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"
@@ -41,6 +43,7 @@
       name="twitter:title"
       content="Hyprland - A wayland compositor that doesn't sacrifice on its looks!"
     />
+    <meta name="twitter:image" content="imgs/wall_4k" />
     <meta
       name="description"
       content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"

views/rices.ejs

@@ -6,8 +6,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="ico/favicon.ico" type="image/ico" />
-    <link rel="icon" href="ico/favicon-32x32.png" size="32x32" type="image/png" />
+    <meta name="darkreader-lock">
-    <link rel="icon" href="ico/favicon-32x32.png" size="16x16" type="image/png" />
+    <meta property="og:image" content="imgs/wall_4k.png">
+    <meta name="twitter:image" content="imgs/wall_4k">
+    <link
+      rel="icon"
+      href="ico/favicon-32x32.png"
+      size="32x32"
+      type="image/png"
+    />
+    <link
+      rel="icon"
+      href="ico/favicon-32x32.png"
+      size="16x16"
+      type="image/png"
+    />
     <link rel="stylesheet" href="css/home.css" />
     <link rel="stylesheet" href="css/rices.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
@@ -22,8 +35,7 @@
           <li>
             <a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
           </li>
-                <li><a class="nav-link" data-value="Get Started"
+          <li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
-                        href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
           <li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
           <li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
           
@@ -46,7 +58,7 @@
             <li class="win-text">#1: Flafy<br><br><img src="imgs/ricingcomp1/flafy.png"></li>
             <li class="win-text">#2: (<i>ex aequo</i>) flick0<br><br><img src="imgs/ricingcomp1/flicko.png"></li>
             <li class="win-text">#2: (<i>ex aequo</i>) amadeus<br><br><img src="imgs/ricingcomp1/amadeus.png"></li>
-            <li class="win-text">#3: (<i>ex aequo</i>) Lyasm<br><br><img src="imgs/ricingcomp1/lyasm.png"></li>
+            <li class="win-text">#3: (<i>ex aequo</i>) Lyasm<br><br><img src="imgs/ricingcomp1/Lyasm.png"></li>
             <li class="win-text">#3: (<i>ex aequo</i>) lauroro<br><br><img src="imgs/ricingcomp1/lauroro.jpg"></li>
         </ul>
     </div>

views/temp_404.ejs

@@ -7,6 +7,7 @@
   <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
   <link rel="stylesheet" href="css/404.css" />
   <link rel="stylesheet" href="css/home.css" />
+  <meta name="darkreader-lock">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
   <title>Oopsy...</title>
 </head>