home page revamp 2023 (#14)

* home page revamp 2023
This commit is contained in:
System-x64 2023-01-31 22:48:42 +05:30 committed by GitHub
parent 0ada531199
commit 37386bfd7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 563 additions and 1394 deletions

View File

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

View File

@ -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>&#169; 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>

View File

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

View File

@ -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;
@ -801,8 +700,7 @@ footer a:hover {
width: 384px;
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;
@ -829,8 +728,39 @@ footer a:hover {
.footer-icons {
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;
}
}

View File

@ -12,9 +12,11 @@
}
.wofdiv > p {
margin-bottom: 60px;
font-size: 20px;
font-family: "Sofia-Pro-Medium";
margin: 0 10%;
margin-bottom: 60px;
}
.bigtext {

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1008 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 681 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 680 KiB

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

Binary file not shown.

View File

@ -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">&equiv;</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">&times;</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>

View File

@ -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">&equiv;</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>
</ul>
</nav>
<a
id="cta-github"
class="cta"
href="https://github.com/hyprwm/Hyprland"
target="_blank"
rel="noopener"
>Github</a
>
<p class="mob-menu">&equiv;</p>
</header>
<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">
<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">&#169; 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">&#169; 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">&times;</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">&times;</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>

View File

@ -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">&equiv;</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">&times;</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>

View File

@ -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">&equiv;</p>
@ -32,10 +36,12 @@
<div id="mobile__menu" class="overlay">
<a id="close-id" class="close">&times;</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>