diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2467a5a --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +package-lock.json +.vscode/ +.TODO \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..10c9210 --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +const express = require("express"); +const path = require("path"); +const app = express(); + +app.use(express.static(path.join(__dirname, "public"))); + +app.set("view engine", "ejs"); +app.set("views", path.join(__dirname, "views")); + +app.get("/", (req,res) => { + res.render("home") +}) + +app.get("/install", (req, res) => { + res.render("install"); +}); + +app.get("/configure", (req, res) => { + res.render("configure"); +}); + +app.get("*", (req,res) => { + res.render("404") +}) + +app.listen(4000, () => { + console.log("Listening to PORT: 4000"); +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..0d215ce --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "hyprland-site", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "ejs": "^3.1.8", + "express": "^4.18.1" + } +} diff --git a/public/confs/hyprland.conf b/public/confs/hyprland.conf new file mode 100644 index 0000000..a9fa95b --- /dev/null +++ b/public/confs/hyprland.conf @@ -0,0 +1,119 @@ +############# 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 \ No newline at end of file diff --git a/public/css/404.css b/public/css/404.css new file mode 100644 index 0000000..e08932b --- /dev/null +++ b/public/css/404.css @@ -0,0 +1,179 @@ +@font-face { + font-family: "LondonBetween"; + src: url("../fonts/LondonBetween.woff") format("woff"); +} + +@font-face { + font-family: "JosefinSans-Regular"; + src: url("../fonts/JosefinSans-Regular.woff") format("woff"); +} +@font-face { + font-family: "Sofia-Pro-Light"; + src: url("../fonts/SofiaProLight.woff") format("woff"); +} + +@font-face { + font-family: "Sofia-Pro-Medium"; + src: url("../fonts/SofiaProMedium.woff") format("woff"); +} + +@font-face { + font-family: "SourceCodePro-Semibold"; + src: url("../fonts/SourceCodePro-Semibold.woff") format("woff"); +} + +* { + padding: 0px; + margin: 0px; + background-color: #1a1a2e; +} + +#content-center { + margin-left: 10%; + margin-right: 10%; +} + +#header { + display: flex; + background-color: #1a1a2e; + width: auto; + height: 6rem; + +} + +.header { + background-color: #1a1a2e; +} + +#header-logo-div { + width: 240px; +} + + + +#header-logo { + width: auto; + height: 100%; +} + +#header-links { + display: flex; + padding-top: 15%; + width: 260px; +} + +#header-links-div { + margin-left: auto; + padding-right: 10rem; +} + +.header-link { + color: #cfe8f6; + font-family: "LondonBetween"; + font-size: 20px; + text-decoration: none; + transition: transform 0.2s; +} + + + +.text-para-link:hover { + color: aquamarine; + font-size: 28px; +} + +.text-para-link { + color: #cfe8f6; + font-size: 22px; + transition: font-size 0.2s; +} +#header-link-install { + margin-left: 10%; +} +#header-link-configure { + margin-left: 10%; +} + + + +.header-link: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); +} + + +#div-img { + width: fit-content; + height: fit-content; + margin-left: 38%; + margin-top: 5%; + +} + +#div-img img { + width: 300px; + height: 300px; +} + +#div-text { + width: fit-content; + height: fit-content; + margin-left: 35%; +} + +#div-text p { + font-family: "Sofia-Pro-Medium"; + color: #cfe8f6; + font-size: 18px; +} + +#div-text h1 { + font-family: "JosefinSans-Regular"; + color: #cfe8f6; + font-size: 32px; + margin-left: 60px; +} + +#div-text a button { + padding: 20px; + padding-left: 80px; + padding-right: 80px; + margin-left:60px; + margin-top: 20px; + background-color: aquamarine; + border: none; + cursor: pointer; + font-family: "sofia-pro-medium"; + font-size: 18px; + border-radius: 15px; + transition: background-color 0.2s; +} + +#div-text a button:hover { + background-color: aqua; +} diff --git a/public/css/configure.css b/public/css/configure.css new file mode 100644 index 0000000..f2aa898 --- /dev/null +++ b/public/css/configure.css @@ -0,0 +1,347 @@ +@font-face { + font-family: "LondonBetween"; + src: url("../fonts/LondonBetween.woff") format("woff"); +} + +@font-face { + font-family: "JosefinSans-Regular"; + src: url("../fonts/JosefinSans-Regular.woff") format("woff"); +} +@font-face { + font-family: "Sofia-Pro-Light"; + src: url("../fonts/SofiaProLight.woff") format("woff"); +} + +@font-face { + font-family: "Sofia-Pro-Medium"; + src: url("../fonts/SofiaProMedium.woff") format("woff"); +} + +@font-face { + font-family: "SourceCodePro-Semibold"; + src: url("../fonts/SourceCodePro-Semibold.woff") format("woff"); +} + +* { + padding: 0px; + margin: 0px; + background-color: #1a1a2e; +} + +#content-center { + margin-left: 10%; + margin-right: 10%; +} + +#header { + display: flex; + background-color: #1a1a2e; + width: auto; + height: 6rem; + +} + +.header { + background-color: #1a1a2e; +} + +#header-logo-div { + width: 240px; +} + + + +#header-logo { + width: auto; + height: 100%; +} + +#header-links { + display: flex; + padding-top: 15%; + width: 260px; +} + +#header-links-div { + margin-left: auto; + padding-right: 10rem; +} + +.header-link { + color: #cfe8f6; + font-family: "LondonBetween"; + font-size: 20px; + text-decoration: none; + transition: transform 0.2s; +} + + + +.text-para-link:hover { + color: aquamarine; + font-size: 28px; +} + +.text-para-link { + color: #cfe8f6; + font-size: 22px; + transition: font-size 0.2s; +} +#header-link-install { + margin-left: 10%; +} +#header-link-configure { + margin-left: 10%; +} + +#header-link-configure { + border-bottom: 2px solid #cfe8f6; +} + +.header-link:hover { + transform: scale(1.3); + border-bottom: 2px solid aquamarine !important; + color: aquamarine; +} + +#links-out { + margin-left: auto; +} + +#github { + margin-top: 50%; +} + +#link-github { + padding: 15px; + background-color: aquamarine; + font-family: "LondonBetween"; + color: #1a1a2e; + text-decoration: none; +} + +#github { + transition: transform 0.2s; +} + +#github:hover { + transform: scale(1.2); +} + + +#install_h1 { + display: flex; + width: max-content; + height: max-content; + margin-top: 8rem; +} + +#install_h1 img { + width: 102px; + height: 102px; + margin-left: 20px; + color: #cfe8f6; +} + +#install_h1 h1 { + font-size: 104px; + margin-left: 20px; + font-family: "JosefinSans-Regular"; + color: #cfe8f6; +} + +p { + font-family: "Sofia-Pro-Medium"; + font-size: 20px; + color: #cfe8f6; + line-height: 1.5; +} + +.code { + background-color: #2d2d47; + padding: 1px; + border-radius:10px; + font-family: "sourceCodePro-Semibold"; + font-size: 16px; + padding-left: 5px; + padding-right: 5px; +} + +#qi-content { + width: auto; + height: max-content; + margin-top: 20px; + margin-bottom: 40px; + border-radius: 15px; + background-color: #2d2d47; +} + + + +#qi-content p { + padding-top: 10px; + padding-left: 30px; + border-radius: 15px; + padding-bottom: 10px; + background-color: #2d2d47; + font-family: "sourceCodePro-Semibold"; +} +#qi-content i { + background-color: #2d2d47; + font-family: "sourceCodePro-Semibold"; +} + +#qi-content b { + background-color: #2d2d47; + font-family: "sourceCodePro-Semibold"; +} + +#qi-content span { + color: #6c7086; + background-color: #2d2d47; +} + +#hyp-install button{ + padding: 15px; + padding-left: 60px; + padding-right: 60px; + background-color: aquamarine; + border: none; + border-radius: 10px; + transition: all 1s ease-out; +} + +#hyp-install button:hover{ + background-color: aqua; +} + +h1 { + font-family: "JosefinSans-Regular"; + font-size: 52px; + color: #cfe8f6; + +} + +hr { + color: #2d2d47; +} + + +h3 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + font-size: 42px; +} + +b{ + font-size: 24px; +} + +a { + color: #cfe8f6; +} + +li { + font-family: "Sofia-Pro-Medium"; + font-size: 20px; + color: #cfe8f6; + margin-left: 20px; + margin-top: 5px; +} + +ul { + margin-top: 10px; +} + +a { + color: aquamarine; +} + +footer { + width: 100%; + height: 130px; + display: flex; +} + +footer p { + + margin-top: 10px; + color: #a3a3a3a5; + font-family: "Sofia-Pro-Light"; + font-size: 13px; +} + +footer p a { + color: #a3a3a3a5; + text-decoration: none; +} + +footer p a:hover { + color: #cfe8f6; + text-decoration: none; +} + +#devs { + padding-top: 5px; +} + +.p2 { + margin-top: 9px; +} + +#foot-icons img { + padding-left: 20px; + width: 30px; + height: 30px; + +} + +#foot-icons { + margin-left: 35%; + margin-top: 4%; + display: flex; +} + + +#warning { + width: auto; + margin-top: 4rem; + margin-bottom: 2rem; + height: max-content; + background-color: rgb(249, 226, 175); + display: flex; + border-radius: 15px; +} + +#warning img { + width: auto; + height: 40px; + background-color: rgb(249, 226, 175); + margin-top: 20px; + margin-left: 30px; +} + +#warning p { + color: black; + font-family: "Sofia-Pro-Light"; + margin-left: 30px; + margin-top: 30px; + margin-bottom: 30px; + font-size: 18px; + border-radius: 15px; + background-color: rgb(249, 226, 175); +} + +#warning b { + font-family: "Sofia-Pro-Medium"; + background-color: rgb(249, 226, 175); +} + +#warning a { + font-family: "Sofia-Pro-Light"; + background-color: rgb(249, 226, 175); + color: black; + transition: font-size 0.2s; + text-decoration: none; + border-bottom: black solid 3px; +} diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..43f1ee4 --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,562 @@ +@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; + 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: 50%; + height: 100%; +} + +#slide-content { + margin-left: 10px; + margin-right: 10px; + margin-top: 120px; + display: flex; + width: auto; + border: 5px solid #cfe8f6; + margin-left: 30px; + height: auto; + max-height: 23rem; + max-width: 40rem; +} + +#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; +} + diff --git a/public/css/install.css b/public/css/install.css new file mode 100644 index 0000000..8778650 --- /dev/null +++ b/public/css/install.css @@ -0,0 +1,414 @@ +@font-face { + font-family: "LondonBetween"; + src: url("../fonts/LondonBetween.woff") format("woff"); +} + +@font-face { + font-family: "JosefinSans-Regular"; + src: url("../fonts/JosefinSans-Regular.woff") format("woff"); +} +@font-face { + font-family: "Sofia-Pro-Light"; + src: url("../fonts/SofiaProLight.woff") format("woff"); +} + +@font-face { + font-family: "Sofia-Pro-Medium"; + src: url("../fonts/SofiaProMedium.woff") format("woff"); +} + +@font-face { + font-family: "SourceCodePro-Semibold"; + src: url("../fonts/SourceCodePro-Semibold.woff") format("woff"); +} + +* { + padding: 0px; + margin: 0px; + background-color: #1a1a2e; +} + +#content-center { + margin-left: 10%; + margin-right: 10%; +} + +#header { + display: flex; + background-color: #1a1a2e; + width: auto; + height: 6rem; + +} + +.header { + background-color: #1a1a2e; +} + +#header-logo-div { + width: 240px; +} + + + +#header-logo { + width: auto; + height: 100%; +} + +#header-links { + display: flex; + padding-top: 15%; + width: 260px; +} + +#header-links-div { + margin-left: auto; + padding-right: 10rem; +} + +.header-link { + color: #cfe8f6; + font-family: "LondonBetween"; + font-size: 20px; + text-decoration: none; + transition: transform 0.2s; +} + + + +.text-para-link:hover { + color: aquamarine; + font-size: 28px; +} + +.text-para-link { + color: #cfe8f6; + font-size: 22px; + transition: font-size 0.2s; +} +#header-link-install { + margin-left: 10%; +} +#header-link-configure { + margin-left: 10%; +} + +#header-link-install { + border-bottom: 2px solid #cfe8f6; +} + +.header-link:hover { + transform: scale(1.3); + border-bottom: 2px solid aquamarine !important; + color: aquamarine; +} + +#links-out { + margin-left: auto; +} + +#github { + margin-top: 50%; +} + +#link-github { + padding: 15px; + background-color: aquamarine; + font-family: "LondonBetween"; + color: #1a1a2e; + text-decoration: none; +} + +#github { + transition: transform 0.2s; +} + +#github:hover { + transform: scale(1.2); +} + + +#warning { + width: auto; + margin-top: 4rem; + margin-bottom: 2rem; + height: max-content; + background-color: rgb(249, 226, 175); + display: flex; + border-radius: 15px; +} + +#warning img { + width: auto; + height: 50px; + background-color: rgb(249, 226, 175); + margin-top: 20px; + margin-left: 30px; +} + +#warning p { + color: black; + font-family: "Sofia-Pro-Light"; + margin-left: 30px; + margin-top: 30px; + margin-bottom: 30px; + font-size: 18px; + border-radius: 15px; + background-color: rgb(249, 226, 175); +} + +#warning b { + font-family: "Sofia-Pro-Medium"; + background-color: rgb(249, 226, 175); +} + +#warning a { + font-family: "Sofia-Pro-Light"; + background-color: rgb(249, 226, 175); + color: black; + transition: font-size 0.2s; + text-decoration: none; + border-bottom: black solid 3px; +} + +#warning a:hover { + font-size: 20px; + color: #5865f2; + border-bottom: #5865f2 solid 3px; + +} + +h1 { + font-family: "JosefinSans-Regular"; + color:#cfe8f6; + font-size: 52px; +} + +li { + font-family : "Sofia-Pro-Medium"; + color:#cfe8f6; + font-size: 18px; + margin-left: 20px; +} +p { + font-family : "Sofia-Pro-Medium"; + color:#cfe8f6; + font-size: 18px; + line-height: 2; +} + +#req { + margin-bottom: 5px; +} + +#req-div { + margin-bottom: 3rem; +} + +h3 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + font-size: 22px; +} + +#qi-content { + width: auto; + height: max-content; + margin-top: 20px; + margin-bottom: 40px; + border-radius: 15px; + background-color: #2d2d47; +} + + + +#qi-content p { + padding-top: 10px; + padding-left: 30px; + border-radius: 15px; + padding-bottom: 10px; + background-color: #2d2d47; + font-family: "sourceCodePro-Semibold"; +} + +#qi-content span { + color: #6c7086; + background-color: #2d2d47; +} +a { + color: #cfe8f6; + transition: color 0.2s; +} + +a:hover { + color: #b4befe; + +} + +#p-nix { + line-height: 2; +} + +#sp-hostname { + color: #94e2d5 !important; +} + +#code { + background-color: #2d2d47; + padding: 1px; + border-radius:10px; + font-family: "sourceCodePro-Semibold"; + padding-left: 5px; + padding-right: 5px; +} + +hr { + color: #2d2d47; +} + +#mix-n-match { + width: 100%; + height: max-content; + background-color:#2d2d47; + border-radius: 15px; + padding-left: 20px; +} + + +#mix-n-match h3 { + padding-top: 20px; + background-color:#2d2d47; + border-radius: 15px; + +} + + +#mix-n-match p { + background-color:#2d2d47; + border-radius: 15px; + +} + +#mix-n-match p:last-child { + padding-bottom: 20px; +} + +#mix-n-match #code{ + background-color:#1a1a2e; + padding-left: 5px; + padding-right: 5px; +} + +#releases { + width: 300px; + height: 50px; + transition: background-color 0.2s; +} + +#download { + width: 300px; + height: 50px; + + background-color: #94e2d5; + font-family: "Sofia-Pro-Medium"; + font-size: 22px; + border: none; + cursor: pointer; + transition: background-color 0.5s; + border-radius: 15px; + +} + +#down-a { + margin-left: 20px; + margin-top: 20px; + border-radius: 15px; +} + +#download:hover { + background-color: #89dceb; +} + +footer { + width: 100%; + height: 130px; + display: flex; +} + +footer p { + + margin-top: 10px; + color: #a3a3a3a5; + font-family: "Sofia-Pro-Light"; + font-size: 13px; +} + +footer p a { + color: #a3a3a3a5; + text-decoration: none; +} + +footer p a:hover { + color: #cfe8f6; + text-decoration: none; +} + +#devs { + padding-top: 5px; +} + +.p2 { + margin-top: 9px; +} + +#foot-icons img { + padding-left: 20px; + width: 30px; + height: 30px; + +} + +#foot-icons { + margin-left: 35%; + margin-top: 4%; + display: flex; +} + +#help-links a{ + transition: color 0.2s; + font-family: Sofia-Pro-Medium; + font-size: 18px; +} + +#help-links a:hover{ + color:#94e2d5; +} + +#table li { + padding-bottom: 10px; + color: #cfe8f6; +} + +#table li a { + color: #94e2d5; +} + +#install_h1 { + display: flex; + width: max-content; + height: max-content; + margin-top: 8rem; +} + +#install_h1 img { + width: 102px; + height: 102px; + margin-left: 20px; + color: #cfe8f6; +} + +#install_h1 h1 { + font-size: 104px; + margin-left: 20px; +} \ No newline at end of file diff --git a/public/fonts/JosefinSans-Regular.woff b/public/fonts/JosefinSans-Regular.woff new file mode 100644 index 0000000..877b9fa Binary files /dev/null and b/public/fonts/JosefinSans-Regular.woff differ diff --git a/public/fonts/LondonBetween.woff b/public/fonts/LondonBetween.woff new file mode 100644 index 0000000..22df529 Binary files /dev/null and b/public/fonts/LondonBetween.woff differ diff --git a/public/fonts/SofiaProLight.woff b/public/fonts/SofiaProLight.woff new file mode 100644 index 0000000..43ba06b Binary files /dev/null and b/public/fonts/SofiaProLight.woff differ diff --git a/public/fonts/SofiaProMedium.woff b/public/fonts/SofiaProMedium.woff new file mode 100644 index 0000000..0943625 Binary files /dev/null and b/public/fonts/SofiaProMedium.woff differ diff --git a/public/fonts/SourceCodePro-Semibold.woff b/public/fonts/SourceCodePro-Semibold.woff new file mode 100644 index 0000000..3ab2693 Binary files /dev/null and b/public/fonts/SourceCodePro-Semibold.woff differ diff --git a/public/ico/favicon.ico b/public/ico/favicon.ico new file mode 100644 index 0000000..5fd2a00 Binary files /dev/null and b/public/ico/favicon.ico differ diff --git a/public/imgs/default.png b/public/imgs/default.png new file mode 100644 index 0000000..74cd93c Binary files /dev/null and b/public/imgs/default.png differ diff --git a/public/imgs/hyprland.png b/public/imgs/hyprland.png new file mode 100644 index 0000000..ea30745 Binary files /dev/null and b/public/imgs/hyprland.png differ diff --git a/public/imgs/img1.png b/public/imgs/img1.png new file mode 100644 index 0000000..7a0a6cb Binary files /dev/null and b/public/imgs/img1.png differ diff --git a/public/imgs/img2.png b/public/imgs/img2.png new file mode 100644 index 0000000..f92a7fc Binary files /dev/null and b/public/imgs/img2.png differ diff --git a/public/imgs/img3.png b/public/imgs/img3.png new file mode 100644 index 0000000..18c1d90 Binary files /dev/null and b/public/imgs/img3.png differ diff --git a/public/imgs/img4.png b/public/imgs/img4.png new file mode 100644 index 0000000..402336e Binary files /dev/null and b/public/imgs/img4.png differ diff --git a/public/imgs/img5.png b/public/imgs/img5.png new file mode 100644 index 0000000..07437be Binary files /dev/null and b/public/imgs/img5.png differ diff --git a/public/imgs/logo.png b/public/imgs/logo.png new file mode 100644 index 0000000..e852e4b Binary files /dev/null and b/public/imgs/logo.png differ diff --git a/public/js/swiper.js b/public/js/swiper.js new file mode 100644 index 0000000..bc320db --- /dev/null +++ b/public/js/swiper.js @@ -0,0 +1,21 @@ +const swiper = new Swiper(".swiper", { + autoplay: { + delay: 2500, + disableOnInteraction: true, + }, + loop: true, + + pagination: { + el: ".swiper-pagination", + clickable: true, + }, + + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + + scrollbar: { + el: ".swiper-scrollbar", + }, +}); diff --git a/public/svg/arrow-down.svg b/public/svg/arrow-down.svg new file mode 100644 index 0000000..50d1c23 --- /dev/null +++ b/public/svg/arrow-down.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/svg/blank_canvas.svg b/public/svg/blank_canvas.svg new file mode 100644 index 0000000..90c8069 --- /dev/null +++ b/public/svg/blank_canvas.svg @@ -0,0 +1,2 @@ +width: fit-content; + height: fit-content; \ No newline at end of file diff --git a/public/svg/configure.svg b/public/svg/configure.svg new file mode 100644 index 0000000..a3dc31f --- /dev/null +++ b/public/svg/configure.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/svg/discord.svg b/public/svg/discord.svg new file mode 100644 index 0000000..07ac29a --- /dev/null +++ b/public/svg/discord.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/svg/download.svg b/public/svg/download.svg new file mode 100644 index 0000000..016efb1 --- /dev/null +++ b/public/svg/download.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/svg/github.svg b/public/svg/github.svg new file mode 100644 index 0000000..b075336 --- /dev/null +++ b/public/svg/github.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/svg/gpu.svg b/public/svg/gpu.svg new file mode 100644 index 0000000..b75ddce --- /dev/null +++ b/public/svg/gpu.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/svg/hyprland.svg b/public/svg/hyprland.svg new file mode 100644 index 0000000..5f8ba12 --- /dev/null +++ b/public/svg/hyprland.svg @@ -0,0 +1,72 @@ + + +
+ + + +

Hyprland

+
+
+
+
\ No newline at end of file diff --git a/public/svg/login.svg b/public/svg/login.svg new file mode 100644 index 0000000..c8da239 --- /dev/null +++ b/public/svg/login.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/svg/logo.svg b/public/svg/logo.svg new file mode 100644 index 0000000..c0ee18b --- /dev/null +++ b/public/svg/logo.svg @@ -0,0 +1,40 @@ + + +
+ + + + + +
+
+
\ No newline at end of file diff --git a/public/svg/warning.svg b/public/svg/warning.svg new file mode 100644 index 0000000..73c7e8d --- /dev/null +++ b/public/svg/warning.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/videos/animation.mp4 b/public/videos/animation.mp4 new file mode 100644 index 0000000..fccfa64 Binary files /dev/null and b/public/videos/animation.mp4 differ diff --git a/public/videos/configure.mp4 b/public/videos/configure.mp4 new file mode 100644 index 0000000..2028d20 Binary files /dev/null and b/public/videos/configure.mp4 differ diff --git a/public/videos/tiling.mp4 b/public/videos/tiling.mp4 new file mode 100644 index 0000000..2ebfb01 Binary files /dev/null and b/public/videos/tiling.mp4 differ diff --git a/views/404.ejs b/views/404.ejs new file mode 100644 index 0000000..66111b0 --- /dev/null +++ b/views/404.ejs @@ -0,0 +1,52 @@ + + + + + + + + + Oopsy... + + +
+ +
+

Page Not Found!

Look where you land, open seas and empty hands

+ +
+ + \ No newline at end of file diff --git a/views/configure.ejs b/views/configure.ejs new file mode 100644 index 0000000..aa10d7c --- /dev/null +++ b/views/configure.ejs @@ -0,0 +1,468 @@ + + + + + + + + + Configure + + +
+ +

Configure_

+
+
+

Content:

+ +
+
+
+ +

+ This is just a basic config documentation, for a more detailed one, visit our github page + .

+
+
+
+

Welcome to Hyprland, now that you've done completing the install, hop onto Hyprland by selecting "Hyprland" on your desired display manager.

+
+
+

On your first launch, Hyprland should automatically make a config file for you, and you should see something like this -

+
+ +
+
+

If it doesn't, you've probly messed up,

+
+

Make sure the default config hyprland.conf exists at ~/.config/hypr.

+
+
+

If it doesn't, follow along -

+
+
+

mkdir ~/.config/hypr

+
+

Then copy the code linked below to ~/.config/hypr/hyprland.conf.

+
+ +
+
+

If it still does not work, something must be wrong with your install, try installing Hyprland again or asking our community in our discord server.

+
+
+
+

Removing that bothersome yellow message
on top

+
+
+
+

Change the autogenerated=1to 0.

+
+

autogenerated=0

+
+

Starting your favorite apps

+
+
+
+
+

exec = the TERMINAL command used to start in up.

+

exec-once = the TERMINAL command used to start in up.

+
+

Where execwill execute the command on every startup as-well-as every reload whereas-in exec-oncewill only execute the command on startup, avoiding to run during reload(s).

+
+
+

Eg.

+
+

exec = swaybg -i ~/.config/hypr/wallpapers/wall-1.png

+

exec-once = waybar

+
+

Setting up a wallpaper

+
+
+
+

Install Hyprpaper* on your system then type the following command-

+
+

Hyprpaper is controlled by the config, like this:

+
+

~/.config/hypr/hyprpaper.conf

+

preload = /path/to/image.png
+
+# .. more preloads
+
+wallpaper = monitor,/path/to/image.png
+
+# .. more monitors

+

Preload will tell Hyprland to load a particular image (supported formats: png, jpg, jpeg). Wallpaper will apply the wallpaper to the selected output (monitor is the monitor's name, easily can be retrieved with hyprctl monitors)

+
+

You may add contain: before the file path in wallpaper= to set the mode to contain instead of cover:

+

wallpaper = monitor,contain:/path/to/image.jpg

+

+ +A Wallpaper cannot be applied without preloading. The config is not reloaded dynamically.

+ +

*NOTE: Legacy X11 wallpaper managers like feh and nitrogen may not work on Wayland Compositor(s) such as Hyprland.

+
+
+

Setting up your monitor(s)

+
+
+
+

Your monitor can be configured by changing the monitor = line on top of your hyprland.conffile.

+
+

monitor = name,res,offset,scale

+
+

eg.

+
+

monitor = DP-1,1920x1080@240,0x0,1

+
+

will tell Hyprland to make the monitor on DP-1with resolution 1920x1080capped at 240 hz, 0x0off from the beginning at a scale of 1.

+
+

Increasing the scale will make everything large.

+
+
+

Please use the offset for its intended purpose before asking stupid questions about "fixing" monitors being mirrored.

+
+
+

Please remember the offset is calculated with the scaled resolution, meaning if you want your 4K monitor with scale 2 to the left of your 1080p one, you'd use the offset 1920x0 for the second screen. (3840 / 2)

+
+

To disable a monitor,

+
+

monitor = NAME, disable

+
+

If your workflow requires custom reserved area, you can add it with

+
+

monitor = NAME, ADDRESERVED, TOP, BOTTOM, LEFT, RIGHT

+
+

Where Top BOTTOM LEFT and RIGHT are integers in pixels of the reserved area to add. This does stack on top of the calculated one, (e.g. bars) but you may only use one of these rules per monitor in the config.

+
+
+
+ +
+

workspace = NAME, NUMBER

+
+

Will tell Hyprland where to make the default workspace of a specific monitor

+
+
+
+
+

If you want to rotate a monitor,

+
+

monitor= NAME,transform,TRANSFORM

+
+

where NAME is the name, and TRANSFORM is an integer, from 0 to 7, corresponding to your transform of choice.

+
+

WL_OUTPUT_TRANSFORM_NORMAL = 0

+

WL_OUTPUT_TRANSFORM_90 = 1

+

WL_OUTPUT_TRANSFORM_180 = 2

+

WL_OUTPUT_TRANSFORM_270 = 3

+

WL_OUTPUT_TRANSFORM_FLIPPED = 4

+

WL_OUTPUT_TRANSFORM_FLIPPED_90 = 5

+

WL_OUTPUT_TRANSFORM_FLIPPED_180 = 6

+

WL_OUTPUT_TRANSFORM_FLIPPED_270 = 7

+
+

Configuring keybindings

+
+
+
+

+ bind = SUPER, key, dispatcher, params +

+
+

SUPER (or MOD) = Win/Alt Key

+

SUPERSHIFT = Win/Alt + Shift*

+

SUPERCTRL = Win/Alt + Ctrl*

+

ALT = Alt key (independent of the mod key)

+
+

You can even use functional keys

+
+

fx= function key where x is your 1st-12th key
eg. f5

+
+
+
+

Introduction Flags!

+
+

l -> locked, aka. works also when an input inhibitor is active

+

r -> release, will trigger on release of a key

+

e -> repeat, will repeat when held.

+

How to use flags?

+
+

bind[Flag] = ...

+

Eg.

+
+

bindrl=MOD,KEY,exec,amongus

+

For a full list of dispacters, click here.

+
+
+

Workspaces

+
+
+
+

workspace args are unified. You have six choices:
+ ID: e.g. 1, 2, or 3
+ Relative ID: e.g. +1, -3 or +100
+ Relative workspace on monitor: e.g. m+1, m-1 or m+3
+ Relative open workspace: e.g. e+1 or e-10
+ Name: e.g. name:Web, name:Anime or name:Better anime
+ Special Workspace: special Warning: special is supported ONLY on movetoworkspace. Any other dispatcher will result in undocumented behavior.

+
+
+

Window Rules

+
+
+
+

You can set window rules for various actions. These are applied on window open!

+
+

windowrule=RULE,WINDOW

+
+

RULE is a rule (and a param if applicable)

+

WINDOW is a RegEx, either:

+ +
+

You can get both by typing hyprctl clientsin your terminal.

+
+

A full list of rules can be found here.

+
+

Eg.

+
+

windowrule=float,kitty

+

windowrule=monitor 0,Firefox

+

windowrule=opacity 0.8,Discord

+

Animations

+
+
+

Animations are declared with the animation keyword

+
+

animation=NAME,ONOFF,SPEED,CURVE,STYLE

+
+

NAME can be either 0 or 1, 0 to disable, 1 to enable.

+

ONOFF is the amount of ds (1ds = 100ms) the animation will take

+

CURVE is the bezier curve name, see curves above.

+

STYLE (optional) is the animation style

+
+

Eg.

+
+

animation=workspaces,1,8,default

+

animation=windows,1,10,myepiccurve,slide

+
+

The animations are a tree. If an animation is unset, it will inherit its' parent's values.

+
+
+

Defining Variables

+
+
+

You can define your own custom variables like this:

+
+

$VAR = value

+ +

Then, to use them, simply use them. For example:

+
+

col.active_border=$MyColor

+

Sourcing (multi-files)

+
+
+
+

Use the source keyword to source another file.

+
+

For example, in your hyprland.conf you can:

+
+

source=~/.config/hypr/myColors.conf

+ +

Please note it's LINEAR. Meaning lines above the source= will be parsed first, then lines inside ~/.config/hypr/myColors.conf, then lines below.

+
+
+

Submaps

+
+
+
+

If you want keybind submaps, for example if you press ALT+R, you can enter a "resize" mode, resize with arrow keys, and leave with escape, do it like this:

+

bind=ALT,R,submap,resize # will switch to a submap called resize

+
+

submap=resize # will start a submap called "resize"

+
+

bind=,right,resizeactive,10 0

+

bind=,left,resizeactive,-10 0

+

bind=,up,resizeactive,0 -10

+

bind=,down,resizeactive,0 10

+
+

bind=,escape,submap,reset # use reset to go back to the global submap

+
+

submap=reset # will reset the submap, meaning end the current one and return to the global one. +

+
+

+# keybinds further down will be global again...

+

IMPORTANT: do not forget a keybind to reset the keymap while inside it! (In this case, escape)

+
+

If you get stuck inside a keymap, you can use hyprctl dispatch submap reset to go back. If you do not have a terminal open, tough luck buddy. I warned you.

+
+
+

+ Per-device input +

+
+
+
+

Warning: Some configs, notably touchpad ones, require a Hyprland restart.

+
+

Per-device config options will overwrite your options set in the input section. It's worth noting that ONLY values explicitly changed will be overwritten.

+
+

In order to apply per-device config options, make a new category like this:

+

+ device:name {
+
+}

+

the name can be easily obtained by doing hyprctl devices.

+
+

Inside of it, put your config options. All options from the input category (and all subcategories, e.g. input:touchpad) can be put inside, EXCEPT:

+
+force_no_accel, follow_mouse +
+
+

For example:

+

+ device:ROYUAN Akko Multi-modes Keyboard-B {
+ repeat_rate=50
+ repeat_delay=500
+ middle_button_emulation=0
+ }

+

remember about the space after the end of the device's name (before the {)!

+
+

Blurring layerSurfaces

+
+
+
+

LayerSurfaces are not windows. These are for example: Your wallpapers, notification overlays, bars, etc.

+
+

If you really want to blur them, use blurls=

+
+

blurls=NAMESPACE

+

where NAMESPACE is the namespace of the layerSurface. (You can get it from hyprctl layers )

+
+

to remove a namespace from being blurred (useful in dynamic situations) use:

+
+

blurls=remove,NAMESPACE

+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/views/home.ejs b/views/home.ejs new file mode 100644 index 0000000..466a374 --- /dev/null +++ b/views/home.ejs @@ -0,0 +1,289 @@ + + + + + + + + + + Hyprland + + +
+ +
+
+

Welcome to Hyprland!

+

+ A dynamic tiling + Wayland + compositor based on + wlroots + that doesn't sacrifice on its looks. +

+ + +
+
+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+
+
+
+ + +
+
+

Features

+
+
+
+ +
+
+
+

Smooth Animations

+

+ 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! +

+
+
+
+
+

Dynamic Tiling

+

+ 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! +

+
+
+
+ +
+
+
+
+
+
+ +
+
+
+

Easy Configuration

+

+ 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 + Configure Page or feel + free to ask us + @Discord. +

+
+
+
+

And many more!

+
+
    +
  • Dual Kawase blur
  • +
  • Pseudo Tiling
  • +
  • Rounded corners
  • +
  • Docks support
  • +
  • + wlr_ext workspaces protocol support +
  • +
+
    +
  • + Custom bezier curve based animations +
  • +
  • Drop shadows
  • +
  • Fully dynamic workspaces
  • +
  • Socket-based IPC
  • +
  • Closely follows wlroots-git
  • +
+
+
+
+

Quick Install (Arch Linux only)*

+
+

+ yay -S hyprland-git +

+
+

+ *For a more detailed Installation process, please visit the + Install wiki page. +

+ +
+
+ +
+
+ + + + + diff --git a/views/install.ejs b/views/install.ejs new file mode 100644 index 0000000..96b0fd1 --- /dev/null +++ b/views/install.ejs @@ -0,0 +1,427 @@ + + + + + + + + + Install + + +
+ +

Install_

+ +
+ +

+ NVIDIA GPUs in ANY capacity are NOT supported, but you may ask + for some help around on the + Discord server, + people have been running Hyprland on NVIDIA with success.* +

+
+
+

Requirements -

+
    +
  • Internet (Which if you are reading this, must be having)
  • +
  • Any Unix Terminal
  • +
+
+
+

Content:

+ +
+
+

Arch Linux

+
+
+
+

AUR

+
+

hyprland-git - compiles from latest source

+

hyprland - compiles from latest release source

+

hyprland-bin - compiled latest release

+
+

NixOS

+
+
+

+ Make sure to check out the options of the + + Nix module. +

+
+

With Flakes

+
+

+ # flake.nix
+
+ {
+ inputs = {
+ nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+ hyprland = {
+ url = "github:hyprwm/Hyprland";
+ # build with your own instance of nixpkgs
+ inputs.nixpkgs.follows = "nixpkgs";
+ };
+ };
+
+ outputs = { self, nixpkgs, hyprland }: {
+ nixosConfigurations.HOSTNAME = + nixpkgs.lib.nixosSystem {
+ # ...
+ modules = [
+ hyprland.nixosModules.default
+ { programs.hyprland.enable = true; }
+ # ...
+ ];
+ };
+ }; +

+
+

+ Don't forget to replace HOSTNAME with your + hostname! +

+

Without Flakes

+

+ NOTE: If you're using Hyprland through an overlay, set + programs.hyprland.package = pkgs.hyprland; +

+
+

+ # configuration.nix
+ {config, pkgs, ...}: let
+ flake-compat = builtins.fetchTarball + "https://github.com/edolstra/flake-compat/archive/master.tar.gz"; +
+ hyprland = (import flake-compat {
+ src = builtins.fetchTarball + "https://github.com/hyprwm/Hyprland/archive/master.tar.gz";
+ }).defaultNix;
+ in {
+ imports = [
+ hyprland.nixosModules.default
+ ];
+
+ nixpkgs.overlays = [ hyprland.overlays.default ];
+
+ programs.hyprland = {
+ enable = true;
+ package = pkgs.hyprland;
+ };
+ }
+

+
+

Home Manager Module

+

+ You can use the Home Manager module by adding it to your configuration: +

+
+

+ { config, pkgs, inputs, ... }: {
+ imports = [
+ inputs.hyprland.homeManagerModules.default
+ ];
+
+ wayland.windowManager.hyprland.enable = true;
+ # ...
+ }
+

+
+

+ For a list of available options, check the + + module file. +

+
+

Modules mix'n'match

+

+ If you plan on using the HM module alongside the NixOS module, set the + NixOS programs.hyprland.package = null; +

+

+ If you don't plan on using the NixOS module, but want to use the HM + module, you will have to enable all the options the NixOS module + enables. +

+

+ If you don't plan on using any module, manually enable whatever + options the modules set. +

+
+
+
+

Fedora

+
+
+
+

+ The steps to build Hyprland on Fedora are relatively simple and very + similar to the steps described in the wiki. The main difference is in + the package names between Arch and Fedora. These steps were tested on + Fedora 35 and Fedora 36 Workstation. +

+
+
+

Step 1 - Install all the Dependencies

+
+

+ sudo dnf install git ninja-build cmake meson gcc-c++ libxcb-devel + libX11-devel pixman-devel wayland-protocols-devel cairo-devel + pango-devel +

+
+

Step 2 - Download the Hyprland Source Code

+
+

+ git clone + --recursive + https://github.com/hyprwm/Hyprland +

+
+

+ The + --recursive + argument is important - it will clone the required branch of wlroots + into the subprojects directory. Note that compiling with the master + branch of wlroots will cause compiler errors - you need the branch of + wlroots with the modified structures. +

+
+

Now you're ready to build Hyprland.

+
+

+ cd Hyprland
+ meson _build
+ ninja -C _build
+ sudo ninja -C _build install
+

+
+

Finally, Copy the sample config into place

+
+

+ mkdir -p ~/.config/hypr
+ cp example/hyprland.conf ~/.config/hypr +

+
+

+ NOTE FOR GDM USERS: Hyprland may not show if gdm is + running in a X session instead of Wayland, check + /etc/gdm/custom.conf to make sure Wayland is + enabled +

+
+
+

Manual Build

+
+
+
+

Step 1 - Install these Dependencies* -

+
+
+

+ gdb ninja gcc cmake libxcb xcb-proto xcb-util xcb-util-keysyms + libxfixes libx11 libxcomposite xorg-xinput libxrender pixman + wayland-protocols cairo pango +

+
+

+ *Please note Hyprland builds + wlroots. Make sure you + have the dependencies of wlroots installed, you can make sure you have + them by installing wlroots separately (Hyprland doesn't mind). +

+
+

+ Also note that Hyprland uses the C++23 standard, so your compiler has to + support gcc>=12.1.0 or + clang>=15. +

+
+
+

Step 2 - Download Hyprland source code

+
+

+ cd ~
+ git clone + --recursive + https://github.com/hyprwm/Hyprland +

+
+

+ The + --recursive + argument is important - it will clone the required branch of wlroots + into the subprojects directory. Note that compiling with the master + branch of wlroots will cause compiler errors - you need the branch of + wlroots with the modified structures. +

+
+
+

Install with Cmake (Recommended)

+
+ +
+

+ cd Hyprland
+ sudo make install +

+
+

Install with Meson

+
+
+

+ meson _build
+ ninja -C _build
+ sudo ninja -C _build install
+

+
+

Finally, Step 4 - Copy the config

+
+

+ mkdir -p ~/.config/hypr
+ cp example/hyprland.conf ~/.config/hypr +

+
+

+ If you have any doubt(s) or are getting any error(s), please- +

+ +
+
+
+
+ +
+ +