mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-16 18:35:59 +01:00
System-x64
GitHub
parent
0ada531199
commit
37386bfd7b
28 changed files with 563 additions and 1394 deletions
|
|
@ -1,569 +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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,289 +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/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,119 +0,0 @@
|
|||
############# Copy the Content of this file to your Hyprland config file and edit it.################
|
||||
|
||||
|
||||
# This is an example Hyprland config file.
|
||||
|
||||
# Syntax is the same as in Hypr, but settings might differ.
|
||||
#
|
||||
# Refer to the wiki for more information.
|
||||
|
||||
#
|
||||
# Please note not all available settings / options are set here.
|
||||
# For a full list, see the wiki (basic and advanced configuring)
|
||||
#
|
||||
|
||||
monitor=,preferred,0x0,1
|
||||
workspace=DP-1,1
|
||||
|
||||
input {
|
||||
kb_layout=
|
||||
kb_variant=
|
||||
kb_model=
|
||||
kb_options=
|
||||
kb_rules=
|
||||
|
||||
follow_mouse=1
|
||||
|
||||
touchpad {
|
||||
natural_scroll=no
|
||||
}
|
||||
}
|
||||
|
||||
general {
|
||||
sensitivity=1.0 # for mouse cursor
|
||||
main_mod=SUPER
|
||||
|
||||
gaps_in=5
|
||||
gaps_out=20
|
||||
border_size=2
|
||||
col.active_border=0x66ee1111
|
||||
col.inactive_border=0x66333333
|
||||
|
||||
apply_sens_to_raw=0 # whether to apply the sensitivity to raw input (e.g. used by games where you aim using your mouse)
|
||||
|
||||
damage_tracking=full # leave it on full unless you hate your GPU and want to make it suffer
|
||||
}
|
||||
|
||||
decoration {
|
||||
rounding=10
|
||||
blur=1
|
||||
blur_size=3 # minimum 1
|
||||
blur_passes=1 # minimum 1, more passes = more resource intensive.
|
||||
# Your blur "amount" is blur_size * blur_passes, but high blur_size (over around 5-ish) will produce artifacts.
|
||||
# if you want heavy blur, you need to up the blur_passes.
|
||||
# the more passes, the more you can up the blur_size without noticing artifacts.
|
||||
}
|
||||
|
||||
animations {
|
||||
enabled=1
|
||||
animation=windows,1,7,default
|
||||
animation=border,1,10,default
|
||||
animation=fade,1,10,default
|
||||
animation=workspaces,1,6,default
|
||||
}
|
||||
|
||||
dwindle {
|
||||
pseudotile=0 # enable pseudotiling on dwindle
|
||||
}
|
||||
|
||||
gestures {
|
||||
workspace_swipe=no
|
||||
}
|
||||
|
||||
# example window rules
|
||||
# for windows named/classed as abc and xyz
|
||||
#windowrule=move 69 420,abc
|
||||
#windowrule=size 420 69,abc
|
||||
#windowrule=tile,xyz
|
||||
#windowrule=float,abc
|
||||
#windowrule=pseudo,abc
|
||||
#windowrule=monitor 0,xyz
|
||||
|
||||
# example binds
|
||||
bind=SUPER,Q,exec,kitty
|
||||
bind=SUPER,C,killactive,
|
||||
bind=SUPER,M,exit,
|
||||
bind=SUPER,E,exec,dolphin
|
||||
bind=SUPER,V,togglefloating,
|
||||
bind=SUPER,R,exec,wofi --show drun -o DP-3
|
||||
bind=SUPER,P,pseudo,
|
||||
|
||||
bind=SUPER,left,movefocus,l
|
||||
bind=SUPER,right,movefocus,r
|
||||
bind=SUPER,up,movefocus,u
|
||||
bind=SUPER,down,movefocus,d
|
||||
|
||||
bind=SUPER,1,workspace,1
|
||||
bind=SUPER,2,workspace,2
|
||||
bind=SUPER,3,workspace,3
|
||||
bind=SUPER,4,workspace,4
|
||||
bind=SUPER,5,workspace,5
|
||||
bind=SUPER,6,workspace,6
|
||||
bind=SUPER,7,workspace,7
|
||||
bind=SUPER,8,workspace,8
|
||||
bind=SUPER,9,workspace,9
|
||||
bind=SUPER,0,workspace,10
|
||||
|
||||
bind=ALT,1,movetoworkspace,1
|
||||
bind=ALT,2,movetoworkspace,2
|
||||
bind=ALT,3,movetoworkspace,3
|
||||
bind=ALT,4,movetoworkspace,4
|
||||
bind=ALT,5,movetoworkspace,5
|
||||
bind=ALT,6,movetoworkspace,6
|
||||
bind=ALT,7,movetoworkspace,7
|
||||
bind=ALT,8,movetoworkspace,8
|
||||
bind=ALT,9,movetoworkspace,9
|
||||
bind=ALT,0,movetoworkspace,10
|
||||
|
||||
bind=SUPER,mouse_down,workspace,e+1
|
||||
bind=SUPER,mouse_up,workspace,e-1
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
font-family: "SourceCodePro-Semibold";
|
||||
src: url("../fonts/SourceCodePro-Semibold.woff") format("woff");
|
||||
}
|
||||
/* #7069c5 */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
@ -36,6 +36,8 @@ header {
|
|||
padding: 0px 10%;
|
||||
padding-left: 8%;
|
||||
background-color: #1a1a2e;
|
||||
padding-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -46,14 +48,12 @@ header {
|
|||
.logo img {
|
||||
width: 190px;
|
||||
height: auto;
|
||||
padding-top: 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.nav__links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.nav__links a,
|
||||
|
|
@ -70,8 +70,6 @@ header {
|
|||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav__links li a:hover {
|
||||
color: aquamarine;
|
||||
}
|
||||
|
|
@ -80,6 +78,7 @@ header {
|
|||
margin-left: 20px;
|
||||
padding: 16px 25px;
|
||||
background-color: aquamarine;
|
||||
border: none;
|
||||
border: solid aquamarine;
|
||||
border-radius: 0.2rem;
|
||||
cursor: pointer;
|
||||
|
|
@ -89,14 +88,16 @@ header {
|
|||
|
||||
.cta:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#close-id {
|
||||
padding: 0px;
|
||||
padding: 0px;
|
||||
margin-right: 32px;
|
||||
font-size: 43px;
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
#home {
|
||||
|
|
@ -121,6 +122,7 @@ header {
|
|||
.top {
|
||||
background-color: #1a1a2e;
|
||||
display: flex;
|
||||
height: 643px;
|
||||
}
|
||||
|
||||
.text h2 {
|
||||
|
|
@ -132,6 +134,7 @@ header {
|
|||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 20px;
|
||||
color: #cfe8f6;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.text a {
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
|
|
@ -143,27 +146,28 @@ header {
|
|||
|
||||
.text {
|
||||
padding-top: 150px;
|
||||
padding-bottom: 200px;
|
||||
padding-left: 10%;
|
||||
margin-right: auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
#install-hypr div {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
background-color: aquamarine;
|
||||
margin-top: 45px;
|
||||
margin-top: 30px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
#install-hypr div p {
|
||||
text-align: center;
|
||||
color:#1a1a2e;
|
||||
color: #1a1a2e;
|
||||
background-color: aquamarine;
|
||||
padding-top: 1rem;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
font-size: 22px;
|
||||
border-radius: 0.2rem;
|
||||
border:solid aquamarine;
|
||||
transition: all 0.5s ease;
|
||||
|
|
@ -182,7 +186,6 @@ header {
|
|||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
|
||||
#slide {
|
||||
margin-top: 100px;
|
||||
margin-right: 6%;
|
||||
|
|
@ -198,8 +201,8 @@ header {
|
|||
height: auto;
|
||||
}
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
|
|
@ -207,7 +210,6 @@ header {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.swiper .swiper-button-prev,
|
||||
.swiper .swiper-button-next {
|
||||
color: #cfe8f6;
|
||||
|
|
@ -223,8 +225,8 @@ header {
|
|||
}
|
||||
/* Mobile Nav */
|
||||
|
||||
.menu {
|
||||
display: none ;
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
@ -271,12 +273,10 @@ header {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.mob-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.mob-menu {
|
||||
font-size: 40px;
|
||||
color: #cfe8f6;
|
||||
|
|
@ -336,23 +336,22 @@ header {
|
|||
}
|
||||
|
||||
#ani-text a div {
|
||||
color: #1a1a2e;
|
||||
color: #1a1a2e;
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
padding: 20px;
|
||||
margin: 0px 20%;
|
||||
margin-top: 40px;
|
||||
|
||||
background-color: aquamarine;
|
||||
text-align: center;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 0.2rem;
|
||||
border: solid aquamarine;
|
||||
background-color: aquamarine;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#ani-text a div:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
background-color: #1a1a2e;
|
||||
}
|
||||
|
||||
.tiling {
|
||||
|
|
@ -392,17 +391,16 @@ header {
|
|||
padding: 20px;
|
||||
margin: 0px 20%;
|
||||
margin-top: 40px;
|
||||
|
||||
border-radius: 0.2rem;
|
||||
border: solid aquamarine;
|
||||
background-color: aquamarine;
|
||||
text-align: center;
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#til-text a div:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
|
|
@ -443,147 +441,52 @@ header {
|
|||
padding: 20px;
|
||||
margin: 0px 20%;
|
||||
margin-top: 40px;
|
||||
|
||||
border: solid aquamarine;
|
||||
border: solid aquamarine;
|
||||
border-radius: 0.2rem;
|
||||
background-color: aquamarine;
|
||||
text-align: center;
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#con-text a div:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
|
||||
}
|
||||
|
||||
#con-text p a {
|
||||
#con-text p a {
|
||||
color: #cfe8f6;
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
#con-text p a:hover {
|
||||
#con-text p a:hover {
|
||||
color: aquamarine;
|
||||
}
|
||||
#link-config-discord:hover {
|
||||
color: #5865f2 !important;
|
||||
}
|
||||
|
||||
.and-more {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: #1a1a2e;
|
||||
}
|
||||
|
||||
.and-more h1 {
|
||||
padding-top: 30px;
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
font-size: 53px;
|
||||
text-align: center;
|
||||
font-family: "JosefinSans-Regular";
|
||||
background-color: #1a1a2e;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.and-more a {
|
||||
color: #cfe8f6;
|
||||
}
|
||||
|
||||
.and-more h1:hover {
|
||||
color: aquamarine;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.content {
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
/* .get-started {
|
||||
font-family: 'JosefinSans-Regular';
|
||||
font-size: 34px;
|
||||
color: #cfe8f6;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
|
||||
}
|
||||
.get-started a div {
|
||||
color: #1a1a2e;
|
||||
font-size: 24px;
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
padding: 15px 60px;;
|
||||
margin-right: 40%;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 100px;
|
||||
width: 300px;
|
||||
background-color: aquamarine;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.get-started a {
|
||||
text-decoration: none;
|
||||
} */
|
||||
/*
|
||||
.get-started a div:hover {
|
||||
transform: scale(1.2);
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
||||
#get-started-button {
|
||||
width: 330px;
|
||||
border-radius: 0.2rem;
|
||||
border: solid aquamarine;
|
||||
background-color: aquamarine;
|
||||
margin-inline: auto;
|
||||
margin-bottom: 160px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#get-started-button:hover {
|
||||
transform: scale(1.2);
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#get-started-button a{
|
||||
color: #1a1a2e;
|
||||
background-color: aquamarine;
|
||||
text-decoration: none;
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
font-size: 22px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#get-started-button a:hover {
|
||||
background-color: #1a1a2e;
|
||||
color: aquamarine;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
font-family: 'Sofia-Pro-Light';
|
||||
display: flex;
|
||||
width: 80%;
|
||||
font-size: 13px;
|
||||
color:#a3a3a3a5;
|
||||
margin: 0px 10%;
|
||||
font-family: "Sofia-Pro-Light";
|
||||
display: flex;
|
||||
width: 80%;
|
||||
font-size: 13px;
|
||||
color: #a3a3a3a5;
|
||||
margin: 0px 10%;
|
||||
}
|
||||
footer hr {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
footer a {
|
||||
color:#a3a3a3a5;
|
||||
color: #a3a3a3a5;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
footer a:hover {
|
||||
color:#cfe8f6;
|
||||
color: #cfe8f6;
|
||||
}
|
||||
#devs {
|
||||
max-width: 700px;
|
||||
|
|
@ -592,7 +495,7 @@ footer a:hover {
|
|||
}
|
||||
.footer-icons {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
width: 116px;
|
||||
height: 60px;
|
||||
margin-left: auto;
|
||||
margin-top: 30px;
|
||||
|
|
@ -610,8 +513,13 @@ footer a:hover {
|
|||
.footer-icons a svg:active path,
|
||||
.footer-icons a svg:focus path,
|
||||
.footer-icons a svg:hover path {
|
||||
color: aquamarine;
|
||||
color: #cfe8f6;
|
||||
}
|
||||
#licence {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.nav__links,
|
||||
|
|
@ -623,11 +531,11 @@ footer a:hover {
|
|||
}
|
||||
.mob-menu {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: inline;
|
||||
|
||||
}
|
||||
.text {
|
||||
text-align: center;
|
||||
|
|
@ -635,19 +543,19 @@ footer a:hover {
|
|||
padding-left: 0px;
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
padding-bottom: 100px;
|
||||
padding-bottom: 150px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.text h2 {
|
||||
font-size: 46px;
|
||||
text-align: center;
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
.text p {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
padding: 0px 10%;
|
||||
padding-top: 30px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
#install-hypr div {
|
||||
margin-left: auto;
|
||||
|
|
@ -660,7 +568,6 @@ footer a:hover {
|
|||
border: none;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
|
||||
}
|
||||
#slide-content {
|
||||
width: auto;
|
||||
|
|
@ -673,9 +580,9 @@ footer a:hover {
|
|||
.features {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding-top: 300px;
|
||||
padding-top: 200px;
|
||||
text-align: center;
|
||||
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
#features-text {
|
||||
padding-bottom: 100px;
|
||||
|
|
@ -687,14 +594,14 @@ footer a:hover {
|
|||
margin-left: 0px;
|
||||
}
|
||||
#ani-text h1 {
|
||||
padding-top: 80px;
|
||||
font-size: 42px;
|
||||
padding-top: 80px;
|
||||
font-size: 42px;
|
||||
}
|
||||
#ani-text p {
|
||||
margin: 0px 10%;
|
||||
}
|
||||
.tiling {
|
||||
margin-top: 500px;
|
||||
margin-top: 395px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
|
@ -703,12 +610,14 @@ footer a:hover {
|
|||
}
|
||||
#til-text h1 {
|
||||
padding-top: 80px;
|
||||
font-size: 42px;
|
||||
font-size: 42px;
|
||||
}
|
||||
#til-text p {
|
||||
margin: 0px 10%;
|
||||
}
|
||||
#til-text{margin-right: 0px;}
|
||||
#til-text {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.configure {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -719,8 +628,8 @@ footer a:hover {
|
|||
margin-left: 0px;
|
||||
}
|
||||
#con-text h1 {
|
||||
padding-top: 80px;
|
||||
font-size: 42px;
|
||||
padding-top: 80px;
|
||||
font-size: 42px;
|
||||
}
|
||||
#con-text p {
|
||||
margin: 0px 10%;
|
||||
|
|
@ -731,30 +640,11 @@ footer a:hover {
|
|||
#con-text {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.and-more {
|
||||
padding-top: 80px;
|
||||
}
|
||||
.get-started {
|
||||
margin-top: 200px;
|
||||
}
|
||||
.get-started a div {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.footer-text {
|
||||
max-width: 250px;
|
||||
}
|
||||
#get-started-button {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 80px;
|
||||
|
||||
}
|
||||
.get-started {
|
||||
margin-top: 80px;
|
||||
|
||||
footer {
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 648px) {
|
||||
header {
|
||||
|
|
@ -765,11 +655,21 @@ footer a:hover {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.swiper-slide img {
|
||||
width: 384px;
|
||||
height: auto;
|
||||
}
|
||||
#install-hypr div {
|
||||
width: 220px;
|
||||
height: 40px;
|
||||
}
|
||||
#install-hypr div p {
|
||||
font-size: 20px;
|
||||
}
|
||||
.text {
|
||||
padding-top: 20%;
|
||||
padding-bottom: 25%;
|
||||
}
|
||||
#slide {
|
||||
width: 384px;
|
||||
height: auto;
|
||||
|
|
@ -777,7 +677,6 @@ footer a:hover {
|
|||
border: none;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
|
||||
}
|
||||
.swiper {
|
||||
width: 384px;
|
||||
|
|
@ -802,7 +701,6 @@ footer a:hover {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.overlay a {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -810,10 +708,11 @@ footer a:hover {
|
|||
font-size: 40px;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
|
||||
}
|
||||
.mob-menu {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
|
||||
}
|
||||
.get-started a div {
|
||||
margin-left: 0px;
|
||||
|
|
@ -830,7 +729,38 @@ footer a:hover {
|
|||
margin-left: 20%;
|
||||
}
|
||||
|
||||
|
||||
#home {
|
||||
border-bottom: #cee7f5 solid 3px;
|
||||
}
|
||||
#close-id {
|
||||
margin-right: 7px;
|
||||
}
|
||||
footer {
|
||||
display: block;
|
||||
}
|
||||
.footer-text {
|
||||
max-width: none;
|
||||
}
|
||||
.footer-icons {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
height: 60px;
|
||||
margin-left: auto;
|
||||
margin-top: 30px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.bi.bi-github {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.footer-icons a svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
}
|
||||
#licence {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@
|
|||
}
|
||||
|
||||
.wofdiv > p {
|
||||
margin-bottom: 60px;
|
||||
|
||||
font-size: 20px;
|
||||
font-family: "Sofia-Pro-Medium";
|
||||
margin: 0 10%;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.bigtext {
|
||||
|
|
|
|||
BIN
public/ico/favicon-16x16.png
Normal file
BIN
public/ico/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
BIN
public/ico/favicon-32x32.png
Normal file
BIN
public/ico/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 980 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 903 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 595 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 593 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 2.3 MiB |
BIN
public/imgs/what-is-hyprland.png
Normal file
BIN
public/imgs/what-is-hyprland.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,008 KiB |
BIN
public/imgs/what-is-hyprland2.png
Normal file
BIN
public/imgs/what-is-hyprland2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 681 KiB |
BIN
public/imgs/what-is-wayland.png
Normal file
BIN
public/imgs/what-is-wayland.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
17
public/js/play-vid-on-focus.js
Normal file
17
public/js/play-vid-on-focus.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
$(document).ready(function () {
|
||||
$(".animatedVideo").each(function () {
|
||||
$(this).get(0).pause();
|
||||
});
|
||||
$(window).on("scroll", function () {
|
||||
$(".animatedVideo").each(function () {
|
||||
var scroll = $(window).scrollTop();
|
||||
var elementTop = $(this).offset().top;
|
||||
var elementHeight = $(this).height();
|
||||
if (scroll > elementTop - $(window).height() + elementHeight) {
|
||||
$(this).get(0).play();
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
11
public/js/smooth-view.js
Normal file
11
public/js/smooth-view.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const links = document.querySelectorAll(".like-this");
|
||||
|
||||
|
||||
links.forEach((link) => {
|
||||
link.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
const targetId = link.getAttribute("href");
|
||||
const target = document.querySelector(targetId);
|
||||
target.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
public/videos/windows.mp4
Normal file
BIN
public/videos/windows.mp4
Normal file
Binary file not shown.
|
|
@ -15,14 +15,18 @@
|
|||
<body>
|
||||
<header>
|
||||
|
||||
<a class="logo" href="/"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<a class="logo" href="https://hyprland.org"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li><a id="home-full" href="https://hyprland.org">Hyprland</a></li>
|
||||
<li><a href="https://hyprland.org/rices">Wall of Fame</a></li>
|
||||
<li><a href="https://wiki.hyprland.org">Wiki</a></li>
|
||||
<li><a href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
</ul>
|
||||
<li><a href="https://hyprland.org">Hyprland</a></li>
|
||||
<li>
|
||||
<a class="nav-link" data-value="Wall of Fame" href="https://www.hyprland.org/rices">Wall of Fame</a>
|
||||
</li>
|
||||
<li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
|
||||
<li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
|
||||
<li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">Github</a>
|
||||
<p class="mob-menu">≡</p>
|
||||
|
|
@ -34,10 +38,10 @@
|
|||
|
||||
<h1>Page Not Found!</h1>
|
||||
<p>Look where you land, open seas and empty hands</p>
|
||||
<a href="/"><button>Return to Home</button></a>
|
||||
<a href="/"><button>Return to Hyprland</button></a>
|
||||
</div>
|
||||
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%;">
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%; height: 2px; border: none; background-color: #a3a3a3a5;" />
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
|
||||
|
|
@ -82,10 +86,12 @@
|
|||
<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>
|
||||
<a href="https://hyprland.org">Hyprland</a>
|
||||
<a href="https://www.hyprland.org/rices">Wall Of Fame</a>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</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>
|
||||
|
|
|
|||
538
views/home.ejs
538
views/home.ejs
|
|
@ -1,203 +1,361 @@
|
|||
<!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="icon" href="ico/favicon.ico" type="image/ico" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="ico/favicon-32x32.png"
|
||||
size="32x32"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="ico/favicon-32x32.png"
|
||||
size="16x16"
|
||||
type="image/png"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/home.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
|
||||
/>
|
||||
<title>
|
||||
Hyprland - A wayland compositor that doesn't sacrifice on its looks!
|
||||
</title>
|
||||
|
||||
<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>
|
||||
<!--SEO-->
|
||||
<meta property="og:site_name" content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://www.hyprland.org/" />
|
||||
<meta
|
||||
name="twitter:card"
|
||||
content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="Hyprland - A wayland compositor that doesn't sacrifice on its looks!"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="tiling wayland compositor, wayland compositor, wayland, hyprland, tiling window manager, linux, arch, twm, x11, sway, bspwm, dwm"
|
||||
/>
|
||||
<meta name="robots" content="Wiki, https://wiki.hyprland.org" />
|
||||
<meta
|
||||
name="robots"
|
||||
content="Install, https://wiki.hyprland.org/Getting-Started/Installation/"
|
||||
/>
|
||||
<meta
|
||||
name="robots"
|
||||
content="Configure, https://wiki.hyprland.org/Configuring/Configuring-Hyprland/"
|
||||
/>
|
||||
<meta name="robots" content="FAQ, https://wiki.hyprland.org/FAQ/" />
|
||||
<meta name="robots" content="Contribute, https://wiki.hyprland.org/Contributing-and-Debugging/" />
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
</head>
|
||||
|
||||
<a class="logo" href="/"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li><a id="home-full" href="https://hyprland.org">Hyprland</a></li>
|
||||
<li><a href="https://hyprland.org/rices">Wall of Fame</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>
|
||||
<body>
|
||||
<header>
|
||||
<a class="logo" href="https://hyprland.org"><img src="imgs/hyprland.png" alt="logo" /></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<!-- <li><a id="home-full" href="https://hyprland.org">Hyprland</a></li> -->
|
||||
<li>
|
||||
<a class="nav-link" data-value="Wall of Fame" href="https://www.hyprland.org/rices">Wall of Fame</a>
|
||||
</li>
|
||||
<li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
|
||||
<li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
|
||||
<li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
|
||||
<div class="top">
|
||||
<div class="text">
|
||||
<h2 id="welcome">Welcome to Hyprland!</h2>
|
||||
<p>
|
||||
A dynamic tiling
|
||||
<a href="https://wayland.freedesktop.org/" 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">
|
||||
</ul>
|
||||
</nav>
|
||||
<a
|
||||
id="cta-github"
|
||||
class="cta"
|
||||
href="https://github.com/hyprwm/Hyprland"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Github</a
|
||||
>
|
||||
<p class="mob-menu">≡</p>
|
||||
</header>
|
||||
|
||||
<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 class="swiper-slide">
|
||||
<img src="imgs/img6.png" id="slide-img" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination" style="color: #cfe8f6;"></div>
|
||||
|
||||
|
||||
<div class="swiper-button-prev" style="color: #cfe8f6;"></div>
|
||||
<div class="swiper-button-next" style="color: #cfe8f6;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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 smooth and responsive animations, be it when
|
||||
switching between windows, changing a workspace or opening
|
||||
an app launcher, on top of being highly customizable!</p>
|
||||
<a href="https://wiki.hyprland.org/Configuring/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 based on multiple factors.
|
||||
Hyprland supports a variety of layouts, each with their own options
|
||||
to fine-tune them to your likings.</p>
|
||||
<a href="https://wiki.hyprland.org/Configuring/Dwindle-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 text
|
||||
document. Be sure to check the
|
||||
<a href="https://wiki.hyprland.org/" id="link-config">Wiki Page</a> for information
|
||||
about the config options, features and syntax. If you still feel lost,
|
||||
hit us up
|
||||
<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">
|
||||
<h1>
|
||||
<a href="https://github.com/hyprwm/Hyprland#features" style="text-decoration: none;">And More!</a>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="get-started">
|
||||
<div id="get-started-button"><a href="https://wiki.hyprland.org/Getting-Started/Installation/">Install Hyprland</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%;">
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
|
||||
<p style="margin-top: 10px">© Hyprland Development 2023</p>
|
||||
<div id="devs">
|
||||
<div class="top" id="top">
|
||||
<div class="text">
|
||||
<h2 id="welcome">Welcome to Hyprland!</h2>
|
||||
<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>.
|
||||
A dynamic tiling
|
||||
<a
|
||||
href="https://wayland.freedesktop.org/"
|
||||
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 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 class="swiper-slide">
|
||||
<img src="imgs/img6.png" id="slide-img" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination" style="color: #cfe8f6"></div>
|
||||
|
||||
<div class="swiper-button-prev" style="color: #cfe8f6"></div>
|
||||
<div class="swiper-button-next" style="color: #cfe8f6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features">
|
||||
<h1 id="features-text">Features</h1>
|
||||
<div class="animation">
|
||||
<div id="ani-vid">
|
||||
<video
|
||||
class="animatedVideo"
|
||||
src="videos/windows.mp4"
|
||||
muted
|
||||
loop
|
||||
></video>
|
||||
</div>
|
||||
<div id="ani-text">
|
||||
<h1 style="padding-bottom: 15px">
|
||||
Smooth<br />
|
||||
Animations
|
||||
</h1>
|
||||
<p>
|
||||
Hyprland offers smooth and responsive animations, be it when
|
||||
switching between windows, changing a workspace or opening an app
|
||||
launcher, on top of being highly customizable!
|
||||
</p>
|
||||
<a href="https://wiki.hyprland.org/Configuring/Animations/">
|
||||
<div>MORE ABOUT ANIMATIONS</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiling" id="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 based on multiple factors. Hyprland supports a
|
||||
variety of layouts, each with their own options to fine-tune them to
|
||||
your likings.
|
||||
</p>
|
||||
<a href="https://wiki.hyprland.org/Configuring/Dwindle-Layout/">
|
||||
<div>MORE ABOUT TILING</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="til-vid">
|
||||
<video
|
||||
class="animatedVideo"
|
||||
src="videos/tiling.mp4"
|
||||
muted
|
||||
loop
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configure">
|
||||
<div id="con-vid">
|
||||
<video
|
||||
class="animatedVideo"
|
||||
src="videos/configure.mp4"
|
||||
muted
|
||||
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 text
|
||||
document. Be sure to check the
|
||||
<a href="https://wiki.hyprland.org/" id="link-config">Wiki Page</a>
|
||||
for information about the config options, features and syntax. If
|
||||
you still feel lost, hit us up
|
||||
<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>
|
||||
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%; height: 2px; border: none; background-color: #a3a3a3a5;" />
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
<p style="margin-top: 10px">© Hyprland Development 2023</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
|
||||
>
|
||||
(thank you guys!).
|
||||
</p>
|
||||
</div>
|
||||
<p id="licence">
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland/blob/main/LICENSE"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>Hyprland is licensed under the BSD 3-Clause "New" or "Revised"
|
||||
License.</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 class="footer-icons">
|
||||
<a
|
||||
href="https://github.com/hyprwm/Hyprland"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-github"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
color="#a3a3a3a5"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.com/invite/hQ9XvMUjjr"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-discord"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
color="#a3a3a3a5"
|
||||
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
|
||||
/>
|
||||
</svg>
|
||||
</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://www.hyprland.org/rices">Wall Of Fame</a>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a>
|
||||
<a href="https://wiki.hyprland.org">Wiki</a>
|
||||
<a href="https://wiki.hyprland.org/FAQ/">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-icons">
|
||||
<a href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github"
|
||||
viewBox="0 0 16 16">
|
||||
<path color="#a3a3a3a5"
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://discord.com/invite/hQ9XvMUjjr" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord"
|
||||
viewBox="0 0 16 16">
|
||||
<path color="#a3a3a3a5"
|
||||
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
|
||||
</svg>
|
||||
</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>
|
||||
<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>
|
||||
<script src="js/smooth-view.js"></script>
|
||||
<script src="js/github-logo.js"></script>
|
||||
<script src="js/play-vid-on-focus.js"></script>
|
||||
|
||||
<!-- <script>
|
||||
let myDiv = document.getElementById("top");
|
||||
myDiv.style.height = window.innerHeight + "px";
|
||||
</script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,23 +5,38 @@
|
|||
<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="icon" href="ico/favicon.ico" type="image/ico" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="ico/favicon-32x32.png"
|
||||
size="32x32"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="ico/favicon-32x32.png"
|
||||
size="16x16"
|
||||
type="image/png"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/home.css" />
|
||||
<link rel="stylesheet" href="css/rices.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
|
||||
<title>Hyprland - Wall of Fame</title>
|
||||
<title>Wall of Fame - Hyprland</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a class="logo" href="/"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<a class="logo" href="https://hyprland.org"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li><a href="https://hyprland.org">Hyprland</a></li>
|
||||
<li><a id="home-full" href="https://hyprland.org/rices">Wall of Fame</a></li>
|
||||
<li><a href="https://wiki.hyprland.org">Wiki</a></li>
|
||||
<li><a href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
|
||||
</li>
|
||||
<li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
|
||||
<li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
|
||||
<li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">Github</a>
|
||||
<p class="mob-menu">≡</p>
|
||||
|
|
@ -32,7 +47,7 @@
|
|||
<p>The Wall of Fame documents the winning rices from past ricing competitons held on our Discord server.</p>
|
||||
</div>
|
||||
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%;" />
|
||||
<hr style="color: #cfe8f6; margin: 0px 10%; height: 3px; border: none; background-color: #cfe8f6;" />
|
||||
|
||||
<div class="ricewins">
|
||||
<ul>
|
||||
|
|
@ -45,7 +60,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%;" />
|
||||
<hr style="color: #a3a3a3a5; margin: 0px 10%; height: 2px; border: none; background-color: #a3a3a3a5;" />
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
|
||||
|
|
@ -92,9 +107,10 @@
|
|||
<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>
|
||||
<a href="https://www.hyprland.org/">Hyprland</a>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</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>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,16 @@
|
|||
<header>
|
||||
<a class="logo" href="/"><img src="imgs/hyprland.png" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
<li><a id="home-full" href="https://hyprland.org">Hyprland</a></li>
|
||||
<li><a href="https://hyprland.org/rices">Wall of Fame</a></li>
|
||||
<li><a href="https://wiki.hyprland.org">Wiki</a></li>
|
||||
<li><a href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
</ul>
|
||||
<ul class="nav__links">
|
||||
<li><a href="https://hyprland.org">Hyprland</a></li>
|
||||
<li>
|
||||
<a class="nav-link" data-value="Wall of Fame" href="https://www.hyprland.org/rices">Wall of Fame</a>
|
||||
</li>
|
||||
<li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
|
||||
<li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
|
||||
<li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="cta" href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">Github</a>
|
||||
<p class="mob-menu">≡</p>
|
||||
|
|
@ -32,10 +36,12 @@
|
|||
<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>
|
||||
<a href="https://hyprland.org">Hyprland</a>
|
||||
<a href="https://www.hyprland.org/rices">Wall Of Fame</a>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue