hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-22 18:29:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

Made the site more Mobile friendly

Browse source
This commit is contained in:
Dikshant Namdeo 2022-08-19 13:27:57 +05:30
parent dc06cb8eb3
commit 00886cc7f5
10 changed files with 1206 additions and 507 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.js
View file

@ -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")

3
package.json
View file

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

569
public/backups/home.old.css Normal file
View file

@ -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
views/home.ejs → public/backups/home.old.ejs
View file

@ -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
View file

File diff suppressed because it is too large Load diff

BIN
public/imgs/img6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/imgs/turtle-reef-life-png.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 96 KiB

12
public/js/mobile.js Normal file
View file

@ -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");
});

6
public/js/swiper.js
View file

@ -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",
},
});

52
views/404.ejs
View file

@ -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>