Made the site more Mobile friendly
This commit is contained in:
Dikshant Namdeo
parent
dc06cb8eb3
commit
00886cc7f5
7
index.js
7
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")
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"ejs": "^3.1.8",
|
||||
"express": "^4.18.1"
|
||||
"express": "^4.18.1",
|
||||
"nodemon": "^2.0.19"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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/"
|
||||
>Install</a
|
||||
<a id="header-link-install" class="header-link" href="https://wiki.hyprland.org/"
|
||||
>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 id="features">
|
||||
</div> -->
|
||||
<!-- <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>
|
||||
1036
public/css/home.css
1036
public/css/home.css
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
|
|
@ -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");
|
||||
});
|
||||
|
|
@ -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",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue