mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-12-22 10:19:49 +01:00
Vaxry
GitHub
commit
929930e175
13 changed files with 1672 additions and 2368 deletions
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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
569
public/backups/home.old.css
Normal file
569
public/backups/home.old.css
Normal 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;
|
||||
}
|
||||
}
|
||||
289
public/backups/home.old.ejs
Normal file
289
public/backups/home.old.ejs
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
<!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/home.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
|
||||
/>
|
||||
<title>Hyprland</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="https://wiki.hyprland.org/"
|
||||
>Wiki</a
|
||||
>
|
||||
<a id="header-link-configure" class="header-link" href="https://github.com/hyprwm/hyprland"
|
||||
>FAQ</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="top" class="top">
|
||||
<div id="text" class="top">
|
||||
<h1 id="text-h1">Welcome to Hyprland!</h1>
|
||||
<p class="text-para">
|
||||
A dynamic tiling
|
||||
<a
|
||||
href="https://wayland.app/protocols/"
|
||||
class="text-para-link"
|
||||
id="link-1"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Wayland</a
|
||||
>
|
||||
compositor based on
|
||||
<a
|
||||
href="https://way-cooler.org/book/wlroots_introduction.html"
|
||||
class="text-para-link"
|
||||
id="link-2"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>wlroots</a
|
||||
>
|
||||
that doesn't sacrifice on its looks.
|
||||
</p>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Installation">
|
||||
<button
|
||||
id="install-link"
|
||||
>
|
||||
Install Hyprland
|
||||
</button></a>
|
||||
</div>
|
||||
<div id="slide" class="top">
|
||||
<div id="slide-content">
|
||||
|
||||
<div class="swiper">
|
||||
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img1.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img2.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img3.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img4.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img5.png" id="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="animations">
|
||||
<video src="videos/animation.mp4" autoplay="autoplay" loop="loop" controls=""></video> -->
|
||||
<!-- </div> -->
|
||||
</div> -->
|
||||
<!-- <div id="features">
|
||||
<h1 id="title-features">Features</h1>
|
||||
<div id="animation">
|
||||
<div id="animation-left">
|
||||
<div id="animation-vid">
|
||||
<video src="videos/animation.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
</div>
|
||||
<div id="animation-right">
|
||||
<h1 id="animation-h1">Smooth Animations</h1>
|
||||
<p id="animation-p">
|
||||
Hyprland offers super smooth and responsive animations, be it when
|
||||
switching between windows or workspaces, resizing windows or
|
||||
simply moving them around, plus you can easily customize it!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tiling">
|
||||
<div id="tiling-left">
|
||||
<h1 id="tiling-h1">Dynamic Tiling</h1>
|
||||
<p id="tiling-p">
|
||||
Tiling in Hyprland is "dynamic" meaning it handles the placement
|
||||
of windows automatically acquiring the position of your cursor.
|
||||
Hyprland also supports a variety of other layouts including
|
||||
floating, pseudotiling and even fullscreen!
|
||||
</p>
|
||||
</div>
|
||||
<div id="tiling-right">
|
||||
<div id="tiling-vid">
|
||||
<video src="videos/tiling.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="configure">
|
||||
<div id="configure-left">
|
||||
<div id="configure-vid">
|
||||
<video src="videos/configure.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
</div>
|
||||
<div id="configure-right">
|
||||
<h1 id="configure-h1">Easy Configuration</h1>
|
||||
<p id="configure-p">
|
||||
Editing the config file for Hyprland is as easy as editing a word
|
||||
document, if you need any assist in configuring it, be sure to
|
||||
check the
|
||||
<a href="/configure" id="link-config">Configure Page</a> or feel
|
||||
free to ask us
|
||||
<a
|
||||
id="link-config-discord"
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>@Discord</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="and-many-more" class="amm">
|
||||
<h1 id="h1-amm" class="amm">And many more!</h1>
|
||||
<div id="ul-amm-div" class="amm">
|
||||
<ul id="ul-amm" class="amm">
|
||||
<li id="li-amm" class="amm">Dual Kawase blur</li>
|
||||
<li id="li-amm" class="amm">Pseudo Tiling</li>
|
||||
<li id="li-amm" class="amm">Rounded corners</li>
|
||||
<li id="li-amm" class="amm">Docks support</li>
|
||||
<li id="li-amm" class="amm">
|
||||
wlr_ext workspaces protocol support
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="ul-amm" class="amm">
|
||||
<li id="li-amm" class="amm">
|
||||
Custom bezier curve based animations
|
||||
</li>
|
||||
<li id="li-amm" class="amm">Drop shadows</li>
|
||||
<li id="li-amm" class="amm">Fully dynamic workspaces</li>
|
||||
<li id="li-amm" class="amm">Socket-based IPC</li>
|
||||
<li id="li-amm" class="amm">Closely follows wlroots-git</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="quickinstall">
|
||||
<h1>Quick Install (Arch Linux only)*</h1>
|
||||
<div id="qi-content">
|
||||
<p>
|
||||
<span id="yay">yay </span><span id="syyu">-S </span
|
||||
><span id="h-git">hyprland-git</span>
|
||||
</p>
|
||||
</div>
|
||||
<p id="info-install">
|
||||
*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">
|
||||
<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>
|
||||
<hr />
|
||||
<footer>
|
||||
<div>
|
||||
<p>© Hyprland Development 2022</p>
|
||||
|
||||
<div id="devs">
|
||||
<p>
|
||||
Developers -
|
||||
<a
|
||||
href="https://github.com/vaxry"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Vaxry (Lead Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/fufezan"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Fufezan (Supporting Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/ThatOneCalculator"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>ThatOneCalculator (Package Maintainer)</a
|
||||
><span> and </span
|
||||
><a
|
||||
href="https://github.com/hyprwm/Hyprland/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>our fellow contributors</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<p class="p2">
|
||||
Website created by -
|
||||
<a
|
||||
class="site"
|
||||
href="https://github.com/System-x64"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>System-x64 (Dikshant Namdeo)</a
|
||||
>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="p2" style="margin-bottom: 10px;">
|
||||
Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
|
||||
License.
|
||||
</p>
|
||||
</div>
|
||||
<div id="foot-icons">
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/github.svg" alt=""
|
||||
/></a>
|
||||
<a
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/discord.svg" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
|
||||
<script src="js/swiper.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,347 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
#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-configure {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
#install_h1 {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
#install_h1 img {
|
||||
width: 102px;
|
||||
height: 102px;
|
||||
margin-left: 20px;
|
||||
color: #cfe8f6;
|
||||
}
|
||||
|
||||
#install_h1 h1 {
|
||||
font-size: 104px;
|
||||
margin-left: 20px;
|
||||
font-family: "JosefinSans-Regular";
|
||||
color: #cfe8f6;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 20px;
|
||||
color: #cfe8f6;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.code {
|
||||
background-color: #2d2d47;
|
||||
padding: 1px;
|
||||
border-radius:10px;
|
||||
font-family: "sourceCodePro-Semibold";
|
||||
font-size: 16px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#qi-content {
|
||||
width: auto;
|
||||
height: max-content;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 15px;
|
||||
background-color: #2d2d47;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#qi-content p {
|
||||
padding-top: 10px;
|
||||
padding-left: 30px;
|
||||
border-radius: 15px;
|
||||
padding-bottom: 10px;
|
||||
background-color: #2d2d47;
|
||||
font-family: "sourceCodePro-Semibold";
|
||||
}
|
||||
#qi-content i {
|
||||
background-color: #2d2d47;
|
||||
font-family: "sourceCodePro-Semibold";
|
||||
}
|
||||
|
||||
#qi-content b {
|
||||
background-color: #2d2d47;
|
||||
font-family: "sourceCodePro-Semibold";
|
||||
}
|
||||
|
||||
#qi-content span {
|
||||
color: #6c7086;
|
||||
background-color: #2d2d47;
|
||||
}
|
||||
|
||||
#hyp-install button{
|
||||
padding: 15px;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
background-color: aquamarine;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
transition: all 1s ease-out;
|
||||
}
|
||||
|
||||
#hyp-install button:hover{
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "JosefinSans-Regular";
|
||||
font-size: 52px;
|
||||
color: #cfe8f6;
|
||||
|
||||
}
|
||||
|
||||
hr {
|
||||
color: #2d2d47;
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
color: #cfe8f6;
|
||||
font-family: "JosefinSans-Regular";
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
b{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #cfe8f6;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 20px;
|
||||
color: #cfe8f6;
|
||||
margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
#warning {
|
||||
width: auto;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
height: max-content;
|
||||
background-color: rgb(249, 226, 175);
|
||||
display: flex;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#warning img {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
background-color: rgb(249, 226, 175);
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#warning p {
|
||||
color: black;
|
||||
font-family: "Sofia-Pro-Light";
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
border-radius: 15px;
|
||||
background-color: rgb(249, 226, 175);
|
||||
}
|
||||
|
||||
#warning b {
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
background-color: rgb(249, 226, 175);
|
||||
}
|
||||
|
||||
#warning a {
|
||||
font-family: "Sofia-Pro-Light";
|
||||
background-color: rgb(249, 226, 175);
|
||||
color: black;
|
||||
transition: font-size 0.2s;
|
||||
text-decoration: none;
|
||||
border-bottom: black solid 3px;
|
||||
}
|
||||
1036
public/css/home.css
1036
public/css/home.css
File diff suppressed because it is too large
Load diff
|
|
@ -1,414 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
#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-install {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
#warning {
|
||||
width: auto;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
height: max-content;
|
||||
background-color: rgb(249, 226, 175);
|
||||
display: flex;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#warning img {
|
||||
width: auto;
|
||||
height: 50px;
|
||||
background-color: rgb(249, 226, 175);
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#warning p {
|
||||
color: black;
|
||||
font-family: "Sofia-Pro-Light";
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
border-radius: 15px;
|
||||
background-color: rgb(249, 226, 175);
|
||||
}
|
||||
|
||||
#warning b {
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
background-color: rgb(249, 226, 175);
|
||||
}
|
||||
|
||||
#warning a {
|
||||
font-family: "Sofia-Pro-Light";
|
||||
background-color: rgb(249, 226, 175);
|
||||
color: black;
|
||||
transition: font-size 0.2s;
|
||||
text-decoration: none;
|
||||
border-bottom: black solid 3px;
|
||||
}
|
||||
|
||||
#warning a:hover {
|
||||
font-size: 20px;
|
||||
color: #5865f2;
|
||||
border-bottom: #5865f2 solid 3px;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "JosefinSans-Regular";
|
||||
color:#cfe8f6;
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family : "Sofia-Pro-Medium";
|
||||
color:#cfe8f6;
|
||||
font-size: 18px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
p {
|
||||
font-family : "Sofia-Pro-Medium";
|
||||
color:#cfe8f6;
|
||||
font-size: 18px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
#req {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#req-div {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #cfe8f6;
|
||||
font-family: "JosefinSans-Regular";
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#qi-content {
|
||||
width: auto;
|
||||
height: max-content;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 15px;
|
||||
background-color: #2d2d47;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#qi-content p {
|
||||
padding-top: 10px;
|
||||
padding-left: 30px;
|
||||
border-radius: 15px;
|
||||
padding-bottom: 10px;
|
||||
background-color: #2d2d47;
|
||||
font-family: "sourceCodePro-Semibold";
|
||||
}
|
||||
|
||||
#qi-content span {
|
||||
color: #6c7086;
|
||||
background-color: #2d2d47;
|
||||
}
|
||||
a {
|
||||
color: #cfe8f6;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #b4befe;
|
||||
|
||||
}
|
||||
|
||||
#p-nix {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
#sp-hostname {
|
||||
color: #94e2d5 !important;
|
||||
}
|
||||
|
||||
#code {
|
||||
background-color: #2d2d47;
|
||||
padding: 1px;
|
||||
border-radius:10px;
|
||||
font-family: "sourceCodePro-Semibold";
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: #2d2d47;
|
||||
}
|
||||
|
||||
#mix-n-match {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color:#2d2d47;
|
||||
border-radius: 15px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
#mix-n-match h3 {
|
||||
padding-top: 20px;
|
||||
background-color:#2d2d47;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#mix-n-match p {
|
||||
background-color:#2d2d47;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
#mix-n-match p:last-child {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#mix-n-match #code{
|
||||
background-color:#1a1a2e;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#releases {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#download {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
|
||||
background-color: #94e2d5;
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 22px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.5s;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
#down-a {
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#download:hover {
|
||||
background-color: #89dceb;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#help-links a{
|
||||
transition: color 0.2s;
|
||||
font-family: Sofia-Pro-Medium;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#help-links a:hover{
|
||||
color:#94e2d5;
|
||||
}
|
||||
|
||||
#table li {
|
||||
padding-bottom: 10px;
|
||||
color: #cfe8f6;
|
||||
}
|
||||
|
||||
#table li a {
|
||||
color: #94e2d5;
|
||||
}
|
||||
|
||||
#install_h1 {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
#install_h1 img {
|
||||
width: 102px;
|
||||
height: 102px;
|
||||
margin-left: 20px;
|
||||
color: #cfe8f6;
|
||||
}
|
||||
|
||||
#install_h1 h1 {
|
||||
font-size: 104px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
BIN
public/imgs/img6.png
Normal file
BIN
public/imgs/img6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
12
public/js/mobile.js
Normal file
12
public/js/mobile.js
Normal 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");
|
||||
});
|
||||
|
|
@ -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,468 +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/configure.css" />
|
||||
<title>Configure</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="install_h1"><img src="svg/configure.svg" alt=""><h1 >Configure_</h1></div>
|
||||
<br>
|
||||
<br>
|
||||
<p>Content:</p>
|
||||
<ul id="table">
|
||||
<li><a href="#bar">Remove the bar.</a></li>
|
||||
<li><a href="#startup">Startup Apps</a></li>
|
||||
<li><a href="#wall">Adding a Wallpaper</a></li>
|
||||
<li><a href="#monitor">Monitor stuff</a></li>
|
||||
<li><a href="#keys">Working with keybindings</a></li>
|
||||
<li><a href="#workspaces">Setting up Workspaces</a></li>
|
||||
<li><a href="#rules">Ruling Windows</a></li>
|
||||
<li><a href="#animate">Animating Stuff</a></li>
|
||||
<li><a href="#vars">Defining Variables</a></li>
|
||||
<li><a href="#config">Multiple config files</a></li>
|
||||
<li><a href="#sub">Submaps</a></li>
|
||||
<li><a href="#input-sens">Per-device input</a></li>
|
||||
<li><a href="#layer-blur">Blurring layerSurfaces</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<br>
|
||||
<div id="warning">
|
||||
<img src="svg/warning.svg" alt="" />
|
||||
<p style="line-height: 1.2">
|
||||
This is just a basic config documentation, for a more detailed one, visit our <a href="https://github.com/hyprwm/Hyprland/wiki/Advanced-config" target="_blank" rel="noopener">github page</a>
|
||||
.</p>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<p>Welcome to Hyprland, now that you've done completing the install, hop onto Hyprland by selecting "Hyprland" on your desired display manager.</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>On your first launch, Hyprland should automatically make a config file for you, and you should see something like this - </p>
|
||||
<br>
|
||||
<img src="imgs/default.png" alt="" style="width: auto; height: 400px;">
|
||||
<br>
|
||||
<br>
|
||||
<p>If it doesn't, you've probly messed up,</p>
|
||||
<br>
|
||||
<p>Make sure the default config <span class="code">hyprland.conf</span> exists at <span class="code">~/.config/hypr</span>.</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>If it doesn't, follow along - </p>
|
||||
<br>
|
||||
<div id="qi-content">
|
||||
<p>mkdir ~/.config/hypr</p>
|
||||
</div>
|
||||
<p>Then copy the code linked below to <span class="code">~/.config/hypr/hyprland.conf</span>.</p>
|
||||
<br>
|
||||
<a id="hyp-install" href="confs/hyprland.conf"><button>hyprland.conf</button></a>
|
||||
<br>
|
||||
<br>
|
||||
<p>If it still does not work, something must be wrong with your install, try <a href="/install" style="color: aquamarine;"> installing</a> Hyprland again or asking our community in our <a href="https://discord.com/invite/hQ9XvMUjjr" target="_blank" rel="noopener" style="color: aquamarine;"> discord server</a>.</p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="bar"Per-device output>Removing that bothersome yellow message <br>on top</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>Change the <span class="code">autogenerated=1</span>to 0.</p>
|
||||
<div id="qi-content">
|
||||
<p>autogenerated=0</p>
|
||||
</div>
|
||||
<h1 id="startup">Starting your favorite apps</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<div id="qi-content">
|
||||
<p>exec = <i>the <b>TERMINAL</b> command used to start in up.</i></p>
|
||||
<p>exec-once = <i>the <b>TERMINAL</b> command used to start in up.</i></p>
|
||||
</div>
|
||||
<p>Where <span class="code">exec</span>will execute the command on every startup as-well-as every reload whereas-in <span class="code">exec-once</span>will only execute the command on startup, avoiding to run during reload(s).</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>Eg.</p>
|
||||
<div id="qi-content">
|
||||
<p>exec = swaybg -i ~/.config/hypr/wallpapers/wall-1.png</p>
|
||||
<p>exec-once = waybar</p>
|
||||
</div>
|
||||
<h1 id="wall">Setting up a wallpaper</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>Install <a href="https://github.com/hyprwm/hyprpaper">Hyprpaper</a><span style="color: rgba(243, 139, 168,1);">*</span> on your system then type the following command-</p>
|
||||
<br>
|
||||
<p>Hyprpaper is controlled by the config, like this:</p>
|
||||
<br>
|
||||
<p><span class="code">~/.config/hypr/hyprpaper.conf</span></p>
|
||||
<div id="qi-content"><p>preload = /path/to/image.png <br>
|
||||
<br>
|
||||
# .. more preloads <br>
|
||||
<br>
|
||||
wallpaper = monitor,/path/to/image.png <br>
|
||||
<br>
|
||||
# .. more monitors</p></div>
|
||||
<p>Preload will tell Hyprland to load a particular image (supported formats: png, jpg, jpeg). Wallpaper will apply the wallpaper to the selected output (monitor is the monitor's name, easily can be retrieved with hyprctl monitors)</p>
|
||||
<br>
|
||||
<p>You may add contain: before the file path in wallpaper= to set the mode to contain instead of cover:</p>
|
||||
<div id="qi-content"><p>wallpaper = monitor,contain:/path/to/image.jpg</p></div>
|
||||
<p>
|
||||
|
||||
A Wallpaper cannot be applied without preloading. The config is not reloaded dynamically.</p>
|
||||
|
||||
<p style="color: rgba(243, 139, 168,1); font-size: 14px;">*NOTE: Legacy X11 wallpaper managers like <span class="code" style="font-size: 12px;">feh</span> and <span class="code" style="font-size: 12px;">nitrogen</span> may not work on Wayland Compositor(s) such as Hyprland.</p>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="monitor">Setting up your monitor(s)</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>Your monitor can be configured by changing the <span class="code">monitor = </span> line on top of your <span class="code">hyprland.conf</span>file.</p>
|
||||
<div id="qi-content">
|
||||
<p>monitor = name,res,offset,scale</p>
|
||||
</div>
|
||||
<p>eg.</p>
|
||||
<div id="qi-content">
|
||||
<p>monitor = DP-1,1920x1080@240,0x0,1</p>
|
||||
</div>
|
||||
<p>will tell Hyprland to make the monitor on <span class="code">DP-1</span>with resolution <span class="code">1920x1080</span>capped at <span class="code">240 hz</span>, <span class="code">0x0</span>off from the beginning at a scale of <span class="code">1</span>.</p>
|
||||
<br>
|
||||
<p>Increasing the scale will make everything large.</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>Please use the offset for its intended purpose before asking stupid questions about "fixing" monitors being mirrored.</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>Please remember the offset is calculated with the scaled resolution, meaning if you want your 4K monitor with scale 2 to the left of your 1080p one, you'd use the offset <span class="code">1920x0</span> for the second screen. (3840 / 2)</p>
|
||||
<br>
|
||||
<p>To disable a monitor,</p>
|
||||
<div id="qi-content">
|
||||
<p>monitor = <i>NAME</i>, disable</p>
|
||||
</div>
|
||||
<p>If your workflow requires custom reserved area, you can add it with</p>
|
||||
<div id="qi-content">
|
||||
<p>monitor = <i>NAME</i>,<i> ADDRESERVED</i>, TOP, BOTTOM, LEFT, RIGHT</p>
|
||||
</div>
|
||||
<p>Where <span class="code">Top</span> <span class="code">BOTTOM</span> <span class="code">LEFT</span> and <span class="code">RIGHT</span> are integers in pixels of the reserved area to add. This does stack on top of the calculated one, (e.g. bars) but you may only use one of these rules per monitor in the config.</p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div id="qi-content">
|
||||
<p>workspace = <i>NAME</i>, <i>NUMBER</i></p>
|
||||
</div>
|
||||
<p>Will tell Hyprland where to make the default workspace of a specific monitor</p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<p>If you want to rotate a monitor,</p>
|
||||
<div id="qi-content">
|
||||
<p>monitor= <i>NAME</i>,transform,<i>TRANSFORM</i></p>
|
||||
</div>
|
||||
<p>where <span class="code">NAME</span> is the name, and <span class="code">TRANSFORM</span> is an integer, from 0 to 7, corresponding to your transform of choice.</p>
|
||||
<div id="qi-content">
|
||||
<p>WL_OUTPUT_TRANSFORM_NORMAL = 0</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_90 = 1</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_180 = 2</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_270 = 3</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_FLIPPED = 4</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_FLIPPED_90 = 5</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_FLIPPED_180 = 6</p>
|
||||
<p>WL_OUTPUT_TRANSFORM_FLIPPED_270 = 7</p>
|
||||
</div>
|
||||
<h1 id="keys">Configuring keybindings</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<div id="qi-content"><p>
|
||||
bind = SUPER, key, dispatcher, params
|
||||
</p></div>
|
||||
<div id="qi-content">
|
||||
<p>SUPER (or MOD) = Win/Alt Key</p>
|
||||
<p>SUPERSHIFT = Win/Alt + Shift*</p>
|
||||
<p>SUPERCTRL = Win/Alt + Ctrl*</p>
|
||||
<P>ALT = Alt key (independent of the mod key)</P>
|
||||
</div>
|
||||
<P>You can even use functional keys</P>
|
||||
<div id="qi-content">
|
||||
<p>f<i>x</i>= function key where <i>x</i> is your 1st-12th key <br>eg. f5</p></div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<p style="font-size: 32px; font-family: JosefinSans-Regular; font-weight: 600;">Introduction Flags!</p>
|
||||
<div id="qi-content">
|
||||
<p>l -> locked, aka. works also when an input inhibitor is active</p>
|
||||
<p>r -> release, will trigger on release of a key</p>
|
||||
<p>e -> repeat, will repeat when held.</p></div>
|
||||
<p>How to use flags?</p>
|
||||
<div id="qi-content">
|
||||
<p>bind[Flag] = ...</p> </div>
|
||||
<p>Eg.</p>
|
||||
<div id="qi-content">
|
||||
<p>bindrl=MOD,KEY,exec,amongus</p> </div>
|
||||
<p>For a full list of dispacters, <a href="https://github.com/hyprwm/Hyprland/wiki/Advanced-config#general-dispatcher-list" style="color: aquamarine;">click here.</a></p>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="workspaces">Workspaces</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p style="line-height: 2;">workspace args are unified. You have six choices: <br>
|
||||
ID: e.g. 1, 2, or 3 <br>
|
||||
Relative ID: e.g. +1, -3 or +100 <br>
|
||||
Relative workspace on monitor: e.g. m+1, m-1 or m+3 <br>
|
||||
Relative open workspace: e.g. e+1 or e-10 <br>
|
||||
Name: e.g. name:Web, name:Anime or name:Better anime <br>
|
||||
Special Workspace: special Warning: special is supported ONLY on movetoworkspace. Any other dispatcher will result in undocumented behavior.</p>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="rules">Window Rules</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>You can set window rules for various actions. These are applied on window open!</p>
|
||||
<div id="qi-content">
|
||||
<p>windowrule=RULE,WINDOW</p>
|
||||
</div>
|
||||
<p><span class="code">RULE</span> is a rule (and a param if applicable)</p>
|
||||
<p><span class="code">WINDOW</span> is a RegEx, either:</p>
|
||||
<ul><li>plain regex (for matching a window class)</li> <li><span class="code">title:</span> followed by a regex (for matching a window's title)</li></ul>
|
||||
<br>
|
||||
<p>You can get both by typing <span class="code">hyprctl clients</span>in your terminal.</p>
|
||||
<br>
|
||||
<p>A full list of rules can be found <a href="https://github.com/hyprwm/Hyprland/wiki/Advanced-config#rules" style="color: aquamarine;">here.</a></p>
|
||||
<br>
|
||||
<p>Eg.</p>
|
||||
<div id="qi-content">
|
||||
<p>windowrule=float,kitty</p>
|
||||
<p>windowrule=monitor 0,Firefox</p>
|
||||
<p>windowrule=opacity 0.8,Discord</p></div>
|
||||
<h1 id="animate">Animations</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<p>Animations are declared with the <span class="code">animation</span> keyword</p>
|
||||
<div id="qi-content">
|
||||
<p>animation=NAME,ONOFF,SPEED,CURVE,STYLE</p>
|
||||
</div>
|
||||
<p><span class="code">NAME</span> can be either 0 or 1, 0 to disable, 1 to enable.</p>
|
||||
<p><span class="code">ONOFF</span> is the amount of ds (1ds = 100ms) the animation will take</p>
|
||||
<p><span class="code">CURVE</span> is the bezier curve name, see curves above.</p>
|
||||
<p><span class="code">STYLE</span> (optional) is the animation style</p>
|
||||
<br>
|
||||
<p>Eg.</p>
|
||||
<div id="qi-content">
|
||||
<p>animation=workspaces,1,8,default</p>
|
||||
<p>animation=windows,1,10,myepiccurve,slide</p>
|
||||
</div>
|
||||
<p>The animations are a tree. If an animation is unset, it will inherit its' parent's values.</p>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="vars">Defining Variables</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<p>You can define your own custom variables like this:</p>
|
||||
<div id="qi-content">
|
||||
<p>$VAR = value</p></div>
|
||||
|
||||
<p>Then, to use them, simply use them. For example:</p>
|
||||
<div id="qi-content">
|
||||
<p>col.active_border=$MyColor</p></div>
|
||||
<h1 id="config">Sourcing (multi-files)</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>Use the source keyword to source another file.</p>
|
||||
<br>
|
||||
<p>For example, in your <span class="code">hyprland.conf</span> you can:</p>
|
||||
<div id="qi-content">
|
||||
<p>source=~/.config/hypr/myColors.conf</p></div>
|
||||
|
||||
<p>Please note it's LINEAR. Meaning lines above the source= will be parsed first, then lines inside <span class="code"> ~/.config/hypr/myColors.conf</span>, then lines below.</p>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="sub">Submaps</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>If you want keybind submaps, for example if you press ALT+R, you can enter a "resize" mode, resize with arrow keys, and leave with escape, do it like this:</p>
|
||||
<div id="qi-content"><p>bind=ALT,R,submap,resize # will switch to a submap called resize</p>
|
||||
<br>
|
||||
<p>submap=resize # will start a submap called "resize"</p>
|
||||
<br>
|
||||
<p>bind=,right,resizeactive,10 0</p>
|
||||
<p>bind=,left,resizeactive,-10 0</p>
|
||||
<p>bind=,up,resizeactive,0 -10</p>
|
||||
<p>bind=,down,resizeactive,0 10</p>
|
||||
<br>
|
||||
<p>bind=,escape,submap,reset # use reset to go back to the global submap</p>
|
||||
<br>
|
||||
<p>submap=reset # will reset the submap, meaning end the current one and return to the global one.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
# keybinds further down will be global again...</p></div>
|
||||
<p><b>IMPORTANT:</b> do not forget a keybind to reset the keymap while inside it! (In this case, escape)</p>
|
||||
<br>
|
||||
<p>If you get stuck inside a keymap, you can use hyprctl dispatch submap reset to go back. If you do not have a terminal open, tough luck buddy. I warned you.</p>
|
||||
<br>
|
||||
<br>
|
||||
<h1 id="input-sens">
|
||||
Per-device input
|
||||
</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>Warning: Some configs, notably touchpad ones, require a Hyprland restart.</p>
|
||||
<br>
|
||||
<p>Per-device config options will overwrite your options set in the input section. It's worth noting that ONLY values explicitly changed will be overwritten.</p>
|
||||
<br>
|
||||
<p>In order to apply per-device config options, make a new category like this:</p>
|
||||
<div id="qi-content"><p>
|
||||
device:name { <br>
|
||||
<br>
|
||||
}</p></div>
|
||||
<p>the <span class="code">name</span> can be easily obtained by doing <span class="code">hyprctl devices</span>.</p>
|
||||
<br>
|
||||
<p>Inside of it, put your config options. All options from the input category (and all subcategories, e.g. input:touchpad) can be put inside, EXCEPT:</p>
|
||||
<br>
|
||||
<span class="code" style="color: #cfe8f6;">force_no_accel, follow_mouse</span>
|
||||
<br>
|
||||
<br>
|
||||
<p>For example:</p>
|
||||
<div id="qi-content"><p>
|
||||
device:ROYUAN Akko Multi-modes Keyboard-B {<br>
|
||||
repeat_rate=50<br>
|
||||
repeat_delay=500<br>
|
||||
middle_button_emulation=0<br>
|
||||
} <br></p></div>
|
||||
<p><i>remember about the space after the end of the device's name (before the {)!</i></p>
|
||||
<br>
|
||||
<br><h1 id="layer-blur">Blurring layerSurfaces</h1>
|
||||
<hr>
|
||||
<br>
|
||||
<br>
|
||||
<p>LayerSurfaces are not windows. These are for example: Your wallpapers, notification overlays, bars, etc.</p>
|
||||
<br>
|
||||
<p>If you really want to blur them, use blurls=</p>
|
||||
<div id="qi-content">
|
||||
<p>blurls=NAMESPACE</p></div>
|
||||
<P>where <span class="code">NAMESPACE</span> is the namespace of the layerSurface. (You can get it from <span class="code">hyprctl layers</span> )</P>
|
||||
<br>
|
||||
<p>to remove a namespace from being blurred (useful in dynamic situations) use:</p>
|
||||
<br>
|
||||
<p>blurls=remove,NAMESPACE</p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<hr>
|
||||
<footer>
|
||||
<div>
|
||||
<p>© Hyprland Development 2022</p>
|
||||
|
||||
<div id="devs">
|
||||
<p>
|
||||
Developers -
|
||||
<a
|
||||
href="https://github.com/vaxry"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Vaxry (Lead Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/fufezan"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Fufezan (Supporting Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/ThatOneCalculator"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>ThatOneCalculator (Package Maintainer)</a
|
||||
><span> and </span
|
||||
><a
|
||||
href="https://github.com/hyprwm/Hyprland/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>our fellow contributors</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<p class="p2">
|
||||
Website created by -
|
||||
<a
|
||||
class="site"
|
||||
href="https://github.com/System-x64"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>System-x64 (Dikshant Namdeo)</a
|
||||
>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="p2" style="margin-bottom: 10px;">
|
||||
Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
|
||||
License.
|
||||
</p>
|
||||
</div>
|
||||
<div id="foot-icons">
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/github.svg" alt=""
|
||||
/></a>
|
||||
<a
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/discord.svg" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
<!-- <div id="qi-content">
|
||||
<p>mkdir ~/.config/hypr</p>
|
||||
</div> -->
|
||||
462
views/home.ejs
462
views/home.ejs
|
|
@ -1,289 +1,209 @@
|
|||
<!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" />
|
||||
<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/home.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
|
||||
/>
|
||||
<title>Hyprland</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="https://wiki.hyprland.org/Getting-Started/Installation/"
|
||||
>Install</a
|
||||
>
|
||||
<a id="header-link-configure" class="header-link" href="https://github.com/hyprwm/hyprland"
|
||||
>Github</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="top" class="top">
|
||||
<div id="text" class="top">
|
||||
<h1 id="text-h1">Welcome to Hyprland!</h1>
|
||||
<p class="text-para">
|
||||
A dynamic tiling
|
||||
<a
|
||||
href="https://wayland.app/protocols/"
|
||||
class="text-para-link"
|
||||
id="link-1"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Wayland</a
|
||||
>
|
||||
compositor based on
|
||||
<a
|
||||
href="https://way-cooler.org/book/wlroots_introduction.html"
|
||||
class="text-para-link"
|
||||
id="link-2"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>wlroots</a
|
||||
>
|
||||
that doesn't sacrifice on its looks.
|
||||
</p>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Installation">
|
||||
<button
|
||||
id="install-link"
|
||||
>
|
||||
Install Hyprland
|
||||
</button></a>
|
||||
</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>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img2.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img3.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img4.png" id="slide-img" />
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img5.png" id="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<title>Hyprland</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
||||
<a class="logo" href="/"><img src="svg/hyprland.svg" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li><a id="home-full" href="https://hyprland.org">Hyprland</a></li>
|
||||
<li><a href="https://wiki.hyprland.org">Wiki</a></li>
|
||||
<li><a href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">Github</a>
|
||||
<p class="mob-menu">≡</p>
|
||||
</header>
|
||||
|
||||
<!-- If we need navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="text">
|
||||
<h2 id="welcome">Welcome to Hyprland!</h2>
|
||||
<p>
|
||||
A dynamic tiling
|
||||
<a
|
||||
href="https://wayland.app/protocols/"
|
||||
class="text-para-link"
|
||||
id="link-1"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Wayland</a
|
||||
>
|
||||
compositor based on
|
||||
<a
|
||||
href="https://way-cooler.org/book/wlroots_introduction.html"
|
||||
class="text-para-link"
|
||||
id="link-2"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>wlroots</a
|
||||
>
|
||||
that doesn't sacrifice on its looks.
|
||||
</p>
|
||||
<a id="install-hypr" href="https://wiki.hyprland.org/Getting-Started/Installation/"><div><p>Install Hyprland</p></div></a>
|
||||
</div>
|
||||
<div id="slide" class="top">
|
||||
<div id="slide-content">
|
||||
|
||||
<div class="swiper">
|
||||
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img1.png" id="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="animations">
|
||||
<video src="videos/animation.mp4" autoplay="autoplay" loop="loop" controls=""></video> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div id="features">
|
||||
<h1 id="title-features">Features</h1>
|
||||
<div id="animation">
|
||||
<div id="animation-left">
|
||||
<div id="animation-vid">
|
||||
<video src="videos/animation.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img2.png" id="slide-img" />
|
||||
</div>
|
||||
<div id="animation-right">
|
||||
<h1 id="animation-h1">Smooth Animations</h1>
|
||||
<p id="animation-p">
|
||||
Hyprland offers super smooth and responsive animations, be it when
|
||||
switching between windows or workspaces, resizing windows or
|
||||
simply moving them around, plus you can easily customize it!
|
||||
</p>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img3.png" id="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="tiling">
|
||||
<div id="tiling-left">
|
||||
<h1 id="tiling-h1">Dynamic Tiling</h1>
|
||||
<p id="tiling-p">
|
||||
Tiling in Hyprland is "dynamic" meaning it handles the placement
|
||||
of windows automatically acquiring the position of your cursor.
|
||||
Hyprland also supports a variety of other layouts including
|
||||
floating, pseudotiling and even fullscreen!
|
||||
</p>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img4.png" id="slide-img" />
|
||||
</div>
|
||||
<div id="tiling-right">
|
||||
<div id="tiling-vid">
|
||||
<video src="videos/tiling.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img5.png" id="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="configure">
|
||||
<div id="configure-left">
|
||||
<div id="configure-vid">
|
||||
<video src="videos/configure.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/img6.png" id="slide-img" />
|
||||
</div>
|
||||
<div id="configure-right">
|
||||
<h1 id="configure-h1">Easy Configuration</h1>
|
||||
<p id="configure-p">
|
||||
Editing the config file for Hyprland is as easy as editing a word
|
||||
document, if you need any assist in configuring it, be sure to
|
||||
check the
|
||||
<a href="/configure" id="link-config">Configure Page</a> or feel
|
||||
free to ask us
|
||||
<a
|
||||
id="link-config-discord"
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>@Discord</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="and-many-more" class="amm">
|
||||
<h1 id="h1-amm" class="amm">And many more!</h1>
|
||||
<div id="ul-amm-div" class="amm">
|
||||
<ul id="ul-amm" class="amm">
|
||||
<li id="li-amm" class="amm">Dual Kawase blur</li>
|
||||
<li id="li-amm" class="amm">Pseudo Tiling</li>
|
||||
<li id="li-amm" class="amm">Rounded corners</li>
|
||||
<li id="li-amm" class="amm">Docks support</li>
|
||||
<li id="li-amm" class="amm">
|
||||
wlr_ext workspaces protocol support
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="ul-amm" class="amm">
|
||||
<li id="li-amm" class="amm">
|
||||
Custom bezier curve based animations
|
||||
</li>
|
||||
<li id="li-amm" class="amm">Drop shadows</li>
|
||||
<li id="li-amm" class="amm">Fully dynamic workspaces</li>
|
||||
<li id="li-amm" class="amm">Socket-based IPC</li>
|
||||
<li id="li-amm" class="amm">Closely follows wlroots-git</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="quickinstall">
|
||||
<h1>Quick Install (Arch Linux only)*</h1>
|
||||
<div id="qi-content">
|
||||
<p>
|
||||
<span id="yay">yay </span><span id="syyu">-S </span
|
||||
><span id="h-git">hyprland-git</span>
|
||||
</p>
|
||||
</div>
|
||||
<p id="info-install">
|
||||
*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">
|
||||
<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>
|
||||
<hr />
|
||||
<footer>
|
||||
<div>
|
||||
<p>© Hyprland Development 2022</p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination" style="color: #cfe8f6;"></div>
|
||||
|
||||
<div id="devs">
|
||||
<p>
|
||||
Developers -
|
||||
<a
|
||||
href="https://github.com/vaxry"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Vaxry (Lead Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/fufezan"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Fufezan (Supporting Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/ThatOneCalculator"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>ThatOneCalculator (Package Maintainer)</a
|
||||
><span> and </span
|
||||
><a
|
||||
href="https://github.com/hyprwm/Hyprland/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>our fellow contributors</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<p class="p2">
|
||||
Website created by -
|
||||
<a
|
||||
class="site"
|
||||
href="https://github.com/System-x64"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>System-x64 (Dikshant Namdeo)</a
|
||||
>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="p2" style="margin-bottom: 10px;">
|
||||
Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
|
||||
License.
|
||||
</p>
|
||||
</div>
|
||||
<div id="foot-icons">
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/github.svg" alt=""
|
||||
/></a>
|
||||
<a
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/discord.svg" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="swiper-button-prev" style="color: #cfe8f6;"></div>
|
||||
<div class="swiper-button-next" style="color: #cfe8f6;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features">
|
||||
<h1 id="features-text">Features</h1>
|
||||
<div class="animation">
|
||||
|
||||
<div id="ani-vid">
|
||||
<video src="videos/animation.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
<div id="ani-text">
|
||||
<h1 style="padding-bottom: 15px;">Smooth<br> Animations</h1>
|
||||
<p>Hyprland offers super smooth and responsive animations, be it when
|
||||
switching between windows or workspaces, resizing windows or
|
||||
simply moving them around, plus you can easily customize it!</p>
|
||||
<a href="https://wiki.hyprland.org/Configuring/Advanced-config/#animations"><div>MORE ABOUT ANIMATIONS</div></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiling">
|
||||
<div id="til-text">
|
||||
<h1 style="padding-bottom: 15px;">Dynamic<br> Tiling</h1>
|
||||
<p>Tiling in Hyprland is "dynamic" meaning it handles the placement
|
||||
of windows automatically acquiring the position of your cursor.
|
||||
Hyprland also supports a variety of other layouts including
|
||||
floating, pseudotiling and even fullscreen!</p>
|
||||
<a href="https://wiki.hyprland.org/Configuring/Master-Layout/"><div>MORE ABOUT TILING</div></a>
|
||||
</div>
|
||||
|
||||
<div id="til-vid">
|
||||
<video src="videos/tiling.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configure">
|
||||
|
||||
<div id="con-vid">
|
||||
<video src="videos/configure.mp4" muted autoplay loop></video>
|
||||
</div>
|
||||
<div id="con-text">
|
||||
<h1 style="padding-bottom: 15px;">Easy<br> Configuration</h1>
|
||||
<p>Editing the config file for Hyprland is as easy as editing a word
|
||||
document, if you need any assist in configuring it, be sure to
|
||||
check the
|
||||
<a href="https://wiki.hyprland.org/" id="link-config">Wiki Page</a> or feel
|
||||
free to ask us
|
||||
<a
|
||||
id="link-config-discord"
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>@Discord</a>.</p>
|
||||
<a id="feat-text" href="https://wiki.hyprland.org/Configuring/Configuring-Hyprland/"><div>GET STARTED</div></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="and-more">
|
||||
<a href="https://github.com/hyprwm/Hyprland#features" style="text-decoration: none;"><h1>And More!</h1></a>
|
||||
</div>
|
||||
<div class="get-started">
|
||||
<h1>Get Started_</h1>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Installation/"><div>Install Hyprland</div></a>
|
||||
</div>
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%;">
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
|
||||
<p style="margin-top: 10px">© Hyprland Development 2022</p>
|
||||
<div id="devs">
|
||||
<p>
|
||||
Developers -
|
||||
<a
|
||||
href="https://github.com/vaxerski"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Vaxerski (Lead Developer)</a>
|
||||
<span>,</span>
|
||||
<a
|
||||
class="site"
|
||||
href="https://github.com/System-x64"
|
||||
target="_blank"
|
||||
rel="noopener">
|
||||
System-x64 (Website Stuff)</a>
|
||||
<span>,</span>
|
||||
<a
|
||||
href="https://github.com/fufexan"
|
||||
target="_blank"
|
||||
rel="noopener">Fufexan (Supporting Developer)</a>
|
||||
<span>,</span>
|
||||
<a
|
||||
href="https://github.com/ThatOneCalculator"
|
||||
target="_blank"
|
||||
rel="noopener">
|
||||
ThatOneCalculator (Package Maintainer)</a>
|
||||
<span> and </span>
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener">
|
||||
our fellow contributors</a>.
|
||||
</p>
|
||||
</div>
|
||||
<p style=" margin-top: 20px; margin-bottom: 10px;">Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
|
||||
License.</p>
|
||||
</div>
|
||||
<div class="footer-icons">
|
||||
<a href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener"><img src="svg/github.svg" alt=""/></a>
|
||||
<a href="https://discord.com/invite/hQ9XvMUjjr" target="_blank" rel="noopener" ><img src="svg/discord.svg" alt=""/></a>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="mobile__menu" class="overlay">
|
||||
<a id="close-id" class="close">×</a>
|
||||
<div class="overlay__content">
|
||||
<a id="home" href="https://hyprland.org">Hyprland</a>
|
||||
<a href="https://wiki.hyprland.org">Wiki</a>
|
||||
<a href="https://wiki.hyprland.org/FAQ/">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/mobile.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
|
||||
<script src="js/swiper.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,427 +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/install.css" />
|
||||
<title>Install</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="install_h1"><img src="svg/download.svg" alt=""><h1 >Install_</h1></div>
|
||||
|
||||
<div id="warning">
|
||||
<img src="svg/gpu.svg" alt="" />
|
||||
<p style="line-height: 1.2">
|
||||
NVIDIA GPUs in ANY capacity are <b>NOT</b> supported, but you may ask
|
||||
for some help around on the
|
||||
<a href="https://discord.com/invite/hQ9XvMUjjr">Discord server</a>,
|
||||
people <b>have been running</b> Hyprland on NVIDIA with success.<b
|
||||
>*</b
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div id="req-div">
|
||||
<p id="req">Requirements -</p>
|
||||
<ul>
|
||||
<li>Internet (Which if you are reading this, must be having)</li>
|
||||
<li>Any Unix Terminal</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br />
|
||||
<p>Content:</p>
|
||||
<ul id="table">
|
||||
<li><a href="#arch">Install on Arch Linux</a></li>
|
||||
<li><a href="#nix">Install on Nix and NixOS</a></li>
|
||||
<li><a href="#fedora">Install on Fedora</a></li>
|
||||
<li><a href="#mb">Manually Building Hyprland</a></li>
|
||||
<li><a href="#help">Get Help</a></li>
|
||||
</ul>
|
||||
<br />
|
||||
<br />
|
||||
<h1 id="arch">Arch Linux</h1>
|
||||
<hr />
|
||||
<br />
|
||||
<br>
|
||||
<h3>AUR</h3>
|
||||
<div id="qi-content">
|
||||
<p>hyprland-git - compiles from latest source</p>
|
||||
<p>hyprland - compiles from latest release source</p>
|
||||
<p>hyprland-bin - compiled latest release</p>
|
||||
</div>
|
||||
<h1 id="nix">NixOS</h1>
|
||||
<hr />
|
||||
<br />
|
||||
<p>
|
||||
Make sure to check out the options of the
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland/blob/main/nix/module.nix"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Nix module</a
|
||||
>.
|
||||
</p>
|
||||
<br />
|
||||
<h3 style="margin-top: 20px">With Flakes</h3>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
<span># flake.nix</span> <br />
|
||||
<br />
|
||||
{<br />
|
||||
inputs = { <br />
|
||||
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";<br />
|
||||
hyprland = {<br />
|
||||
url = "github:hyprwm/Hyprland";<br />
|
||||
<span># build with your own instance of nixpkgs</span> <br />
|
||||
inputs.nixpkgs.follows = "nixpkgs"; <br />
|
||||
}; <br />
|
||||
}; <br />
|
||||
<br />
|
||||
outputs = { self, nixpkgs, hyprland }: { <br />
|
||||
nixosConfigurations.<span id="sp-hostname">HOSTNAME</span> =
|
||||
nixpkgs.lib.nixosSystem { <br />
|
||||
<span># ...</span> <br />
|
||||
modules = [ <br />
|
||||
hyprland.nixosModules.default <br />
|
||||
{ programs.hyprland.enable = true; } <br />
|
||||
<span># ... </span><br />
|
||||
]; <br />
|
||||
}; <br />
|
||||
};
|
||||
</p>
|
||||
</div>
|
||||
<p style="padding-bottom: 20px">
|
||||
Don't forget to replace <span id="sp-hostname">HOSTNAME</span> with your
|
||||
hostname!
|
||||
</p>
|
||||
<h3 style="margin-top: 20px">Without Flakes</h3>
|
||||
<p style="margin-top: 20px; margin-bottom: 20px">
|
||||
<b>NOTE:</b> If you're using Hyprland through an overlay, set
|
||||
<span id="code">programs.hyprland.package = pkgs.hyprland;</span>
|
||||
</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
<span># configuration.nix</span> <br />
|
||||
{config, pkgs, ...}: let <br />
|
||||
flake-compat = builtins.fetchTarball
|
||||
"https://github.com/edolstra/flake-compat/archive/master.tar.gz";
|
||||
<br />
|
||||
hyprland = (import flake-compat { <br />
|
||||
src = builtins.fetchTarball
|
||||
"https://github.com/hyprwm/Hyprland/archive/master.tar.gz"; <br />
|
||||
}).defaultNix; <br />
|
||||
in { <br />
|
||||
imports = [ <br />
|
||||
hyprland.nixosModules.default <br />
|
||||
]; <br />
|
||||
<br />
|
||||
nixpkgs.overlays = [ hyprland.overlays.default ]; <br />
|
||||
<br />
|
||||
programs.hyprland = { <br />
|
||||
enable = true; <br />
|
||||
package = pkgs.hyprland; <br />
|
||||
}; <br />
|
||||
} <br />
|
||||
</p>
|
||||
</div>
|
||||
<h3 style="font-size: 28px">Home Manager Module</h3>
|
||||
<p style="margin-top: 20px">
|
||||
You can use the Home Manager module by adding it to your configuration:
|
||||
</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
{ config, pkgs, inputs, ... }: { <br />
|
||||
imports = [ <br />
|
||||
inputs.hyprland.homeManagerModules.default <br />
|
||||
]; <br />
|
||||
<br />
|
||||
wayland.windowManager.hyprland.enable = true; <br />
|
||||
<span># ...</span> <br />
|
||||
} <br />
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
For a list of available options, check the
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland/blob/main/nix/module.nix"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
module file</a
|
||||
>.
|
||||
</p>
|
||||
<div id="mix-n-match">
|
||||
<h3 style="font-size: 28px; margin-top: 20px">Modules mix'n'match</h3>
|
||||
<p style="margin-top: 15px">
|
||||
If you plan on using the HM module alongside the NixOS module, set the
|
||||
NixOS <span id="code">programs.hyprland.package = null;</span>
|
||||
</p>
|
||||
<p style="margin-top: 15px">
|
||||
If you don't plan on using the NixOS module, but want to use the HM
|
||||
module, you will have to enable all the options the NixOS module
|
||||
enables.
|
||||
</p>
|
||||
<p style="margin-top: 15px">
|
||||
If you don't plan on using any module, manually enable whatever
|
||||
options the modules set.
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<h1 id="fedora">Fedora</h1>
|
||||
<hr />
|
||||
<br />
|
||||
<br />
|
||||
<p style="line-height: 2">
|
||||
The steps to build Hyprland on Fedora are relatively simple and very
|
||||
similar to the steps described in the wiki. The main difference is in
|
||||
the package names between Arch and Fedora. These steps were tested on
|
||||
Fedora 35 and Fedora 36 Workstation.
|
||||
</p>
|
||||
<br />
|
||||
<br />
|
||||
<p>Step 1 - Install all the Dependencies</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
sudo dnf install git ninja-build cmake meson gcc-c++ libxcb-devel
|
||||
libX11-devel pixman-devel wayland-protocols-devel cairo-devel
|
||||
pango-devel
|
||||
</p>
|
||||
</div>
|
||||
<p>Step 2 - Download the Hyprland Source Code</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
git clone
|
||||
<span style="color: #f38ba8">--recursive</span>
|
||||
https://github.com/hyprwm/Hyprland
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
The
|
||||
<span id="code" style="color: #f38ba8; font-size: 16px"
|
||||
>--recursive</span
|
||||
>
|
||||
argument is important - it will clone the required branch of wlroots
|
||||
into the subprojects directory. Note that compiling with the master
|
||||
branch of wlroots will cause compiler errors - you need the branch of
|
||||
wlroots with the modified structures.
|
||||
</p>
|
||||
<br />
|
||||
<p>Now you're ready to build Hyprland.</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
cd Hyprland <br />
|
||||
meson _build <br />
|
||||
ninja -C _build <br />
|
||||
sudo ninja -C _build install <br />
|
||||
</p>
|
||||
</div>
|
||||
<p>Finally, Copy the sample config into place</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
mkdir -p ~/.config/hypr <br />
|
||||
cp example/hyprland.conf ~/.config/hypr
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<b>NOTE FOR GDM USERS: </b>Hyprland <i>may</i> not show if gdm is
|
||||
running in a X session instead of Wayland, check
|
||||
<span id="code">/etc/gdm/custom.conf</span> to make sure Wayland is
|
||||
enabled
|
||||
</p>
|
||||
<br />
|
||||
<br />
|
||||
<h1 id="mb">Manual Build</h1>
|
||||
<hr />
|
||||
<br />
|
||||
<br />
|
||||
<p>Step 1 - Install these Dependencies* -</p>
|
||||
<br />
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
gdb ninja gcc cmake libxcb xcb-proto xcb-util xcb-util-keysyms
|
||||
libxfixes libx11 libxcomposite xorg-xinput libxrender pixman
|
||||
wayland-protocols cairo pango
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
*Please note Hyprland builds
|
||||
<span id="code" style="font-size: 16px">wlroots</span>. Make sure you
|
||||
have the dependencies of wlroots installed, you can make sure you have
|
||||
them by installing wlroots separately (Hyprland doesn't mind).
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Also note that Hyprland uses the C++23 standard, so your compiler has to
|
||||
support <span id="code" style="font-size: 16px">gcc>=12.1.0 </span>or
|
||||
<span id="code" style="font-size: 16px">clang>=15</span>.
|
||||
</p>
|
||||
<br />
|
||||
<br />
|
||||
<p>Step 2 - Download Hyprland source code</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
cd ~ <br />
|
||||
git clone
|
||||
<span style="color: #f38ba8">--recursive</span>
|
||||
https://github.com/hyprwm/Hyprland
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
The
|
||||
<span id="code" style="color: #f38ba8; font-size: 16px"
|
||||
>--recursive</span
|
||||
>
|
||||
argument is important - it will clone the required branch of wlroots
|
||||
into the subprojects directory. Note that compiling with the master
|
||||
branch of wlroots will cause compiler errors - you need the branch of
|
||||
wlroots with the modified structures.
|
||||
</p>
|
||||
<br />
|
||||
<br />
|
||||
<h3>Install with Cmake (Recommended)</h3>
|
||||
<br />
|
||||
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
cd Hyprland <br />
|
||||
sudo make install
|
||||
</p>
|
||||
</div>
|
||||
<h3>Install with Meson</h3>
|
||||
<br />
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
meson _build <br />
|
||||
ninja -C _build <br />
|
||||
sudo ninja -C _build install <br />
|
||||
</p>
|
||||
</div>
|
||||
<p>Finally, Step 4 - Copy the config</p>
|
||||
<div id="qi-content">
|
||||
<p id="p-nix">
|
||||
mkdir -p ~/.config/hypr <br />
|
||||
cp example/hyprland.conf ~/.config/hypr
|
||||
</p>
|
||||
</div>
|
||||
<p id="help">
|
||||
If you have any doubt(s) or are getting any error(s), please-
|
||||
</p>
|
||||
<div id="help-links">
|
||||
<a href="https://github.com/hyprwm/Hyprland/issues"
|
||||
>1) Create an issue.</a
|
||||
><br />
|
||||
<br />
|
||||
<a href="https://github.com/hyprwm/Hyprland/discussions"
|
||||
>2) Use the discussions page.</a
|
||||
><br />
|
||||
<br />
|
||||
<a href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
>3) Ask the community on our discord server.</a
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<hr />
|
||||
<footer>
|
||||
<div>
|
||||
<p>© Hyprland Development 2022</p>
|
||||
|
||||
<div id="devs">
|
||||
<p>
|
||||
Developers -
|
||||
<a href="https://github.com/vaxry" target="_blank" rel="noopener"
|
||||
>Vaxry (Lead Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/fufezan"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Fufezan (Supporting Developer)</a
|
||||
><span>,</span>
|
||||
<a
|
||||
href="https://github.com/ThatOneCalculator"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>ThatOneCalculator (Package Maintainer)</a
|
||||
><span> and </span
|
||||
><a
|
||||
href="https://github.com/hyprwm/Hyprland/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>our fellow contributors</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<p class="p2">
|
||||
Website created by -
|
||||
<a
|
||||
class="site"
|
||||
href="https://github.com/System-x64"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>System-x64 (Dikshant Namdeo)</a
|
||||
>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="p2" style="margin-bottom: 10px">
|
||||
Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
|
||||
License.
|
||||
</p>
|
||||
</div>
|
||||
<div id="foot-icons">
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/github.svg" alt=""
|
||||
/></a>
|
||||
<a
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img src="svg/discord.svg" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue