Welcome to Hyprland!
++ A dynamic tiling + Wayland + compositor based on + wlroots + that doesn't sacrifice on its looks. +
+Install Hyprland
diff --git a/index.js b/index.js index 10c9210..ac075ac 100644 --- a/index.js +++ b/index.js @@ -11,13 +11,6 @@ app.get("/", (req,res) => { res.render("home") }) -app.get("/install", (req, res) => { - res.render("install"); -}); - -app.get("/configure", (req, res) => { - res.render("configure"); -}); app.get("*", (req,res) => { res.render("404") diff --git a/package.json b/package.json index 0d215ce..c010b22 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "license": "ISC", "dependencies": { "ejs": "^3.1.8", - "express": "^4.18.1" + "express": "^4.18.1", + "nodemon": "^2.0.19" } } diff --git a/public/backups/home.old.css b/public/backups/home.old.css new file mode 100644 index 0000000..dd540c1 --- /dev/null +++ b/public/backups/home.old.css @@ -0,0 +1,569 @@ +@font-face { + font-family: "LondonBetween"; + src: url("../fonts/LondonBetween.woff") format("woff"); + } + + @font-face { + font-family: "JosefinSans-Regular"; + src: url("../fonts/JosefinSans-Regular.woff") format("woff"); + } + @font-face { + font-family: "Sofia-Pro-Light"; + src: url("../fonts/SofiaProLight.woff") format("woff"); + } + + @font-face { + font-family: "Sofia-Pro-Medium"; + src: url("../fonts/SofiaProMedium.woff") format("woff"); + } + + @font-face { + font-family: "SourceCodePro-Semibold"; + src: url("../fonts/SourceCodePro-Semibold.woff") format("woff"); + } + + * { + padding: 0px; + margin: 0px; + background-color: #1a1a2e; + } + + body { + overflow-x: hidden; + } + + #content-center { + margin-left: 10%; + margin-right: 10%; + } + + #header { + display: flex; + background-color: #1a1a2e; + width: auto; + height: 6rem; + + } + + .header { + background-color: #1a1a2e; + } + + #header-logo-div { + width: 240px; + } + + + + #header-logo { + width: auto; + height: 100%; + } + + #header-links { + display: flex; + padding-top: 15%; + width: 260px; + } + + #header-links-div { + margin-left: auto; + padding-right: 10rem; + } + + .header-link { + color: #cfe8f6; + font-family: "LondonBetween"; + font-size: 20px; + text-decoration: none; + transition: transform 0.2s; + } + + + + .text-para-link:hover { + color: aquamarine; + font-size: 28px; + } + + .text-para-link { + color: #cfe8f6; + font-size: 22px; + transition: font-size 0.2s; + } + #header-link-install { + margin-left: 10%; + } + #header-link-configure { + margin-left: 10%; + } + + #header-link-home { + border-bottom: 2px solid #cfe8f6; + } + + .header-link:hover { + transform: scale(1.3); + border-bottom: 2px solid aquamarine !important; + color: aquamarine; + } + + #links-out { + margin-left: auto; + } + + #github { + margin-top: 50%; + } + + #link-github { + padding: 15px; + background-color: aquamarine; + font-family: "LondonBetween"; + color: #1a1a2e; + text-decoration: none; + } + + #github { + transition: transform 0.2s; + } + + #github:hover { + transform: scale(1.2); + } + #top { + width: 100%; + height: 40rem; + /* background-color: #1a1a2e; */ + display: flex; + } + + #text { + width: 50%; + height: 100%; + margin-top: 8rem; + margin-right: 2%; + padding-right: 20px; + } + + #text-h1 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + font-size: 65px; + line-height: 1; + } + + .text-para { + padding-top: 20px; + color: #cfe8f6; + font-family: "Sofia-Pro-Medium"; + font-size: 22px; + line-height: 1.3; + } + + #slide { + width: 640px; + height: auto; + margin-top: 6%; + } + + #slide-content { + + border: 5px solid #cfe8f6; + + } + + #slide-img { + width: auto; + max-width: 40rem; + height: auto; + max-height: 23rem; + } + + .swiper { + width: auto; + } + + .swiper-slide { + width: auto; + } + + .swiper-wrapper { + width: auto; + height: auto; + } + + .swiper .swiper-button-prev, + .swiper .swiper-button-next { + color: #cfe8f6; + background-color: transparent; + } + + .swiper .swiper-pagination-bullet-active { + background-color: #cfe8f6; + } + + .swiper .swiper-pagination { + background-color: transparent; + } + + #install-link { + margin-top: 2rem; + padding: 15px; + background-color: aquamarine; + border: 5px solid #1a1a2e; + /* border-radius: 15px; */ + font-family: "Sofia-Pro-Medium"; + transition: transform 0.2s; + font-size: 16px; + cursor: pointer; + } + + #install-link:hover { + transform: scale(1.2); + } + + #title-features { + font-family: "JosefinSans-Regular"; + color: #cfe8f6; + font-size: 102px; + } + + #features { + width: 100%; + height: 130rem; + } + + #animation { + margin-top: 10rem; + + display: flex; + } + + #animation-left { + width: 50%; + height: 100%; + } + + video { + width: 100%; + height: 10%; + } + + #animation-right { + width: 50%; + height: 100%; + } + + #animation-h1 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + margin-left: 25%; + margin-top: 15%; + font-size: 46px; + line-height: 1; + width: 100%; + } + + #animation-p { + color: #cfe8f6; + font-family: "Sofia-Pro-Light"; + margin-left: 20%; + margin-top: 2%; + font-size: 18px; + line-height: 1.5; + text-align: center; + } + + #tiling { + margin-top: 20rem; + display: flex; + } + + #tiling-left { + width: 50%; + height: 100%; + } + + #tiling-right { + width: 50%; + height: 100%; + } + + #tiling-h1 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + margin-left: 13%; + margin-top: 15%; + font-size: 46px; + line-height: 1; + width: 100%; + } + + #tiling-p { + color: #cfe8f6; + font-family: "Sofia-Pro-Light"; + margin-right: 20%; + margin-top: 2%; + font-size: 18px; + line-height: 1.5; + text-align: center; + } + + #configure { + margin-top: 20rem; + + display: flex; + } + + #configure-left { + width: 50%; + height: 100%; + } + + #configure-right { + width: 50%; + height: 100%; + } + + #configure-h1 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + margin-left: 26%; + margin-top: 15%; + font-size: 46px; + line-height: 1; + width: 100%; + } + + #configure-p { + color: #cfe8f6; + font-family: "Sofia-Pro-Light"; + margin-left: 20%; + margin-top: 2%; + font-size: 18px; + line-height: 1.5; + text-align: center; + } + + #link-config { + color: #cfe8f6; + transition: font-size 0.2s; + } + + #link-config-discord { + color: #cfe8f6; + transition: font-size 0.2s; + } + + #link-config:hover { + color: aquamarine; + font-size: 20px; + } + + #link-config-discord:hover { + color: #5865f2; + font-size: 20px; + } + + #and-many-more { + width: auto; + margin-top: 15rem; + margin-left: 10%; + margin-right: 10%; + margin-bottom: 6rem; + height: 30rem; + background-color: #2d2d47; + border-radius: 15px; + } + + .amm { + background-color: #2d2d47; + border-radius: 15px; + } + + #h1-amm { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + margin-left: 28%; + padding-top: 4%; + font-size: 52px; + line-height: 1; + } + + #ul-amm-div { + display: flex; + margin-top: 5%; + padding-left: 50px; + } + + #ul-amm { + margin-left: 10%; + } + #li-amm { + color: #cfe8f6; + font-family: "Sofia-Pro-Medium"; + padding-bottom: 3rem; + } + + #quickinstall { + width: 100%; + height: 20rem; + + } + + #quickinstall h1 { + color: #cfe8f6; + font-family: "JosefinSans-Regular"; + font-size: 48px; + } + + #qi-content { + width: auto; + height: 6rem; + margin-top: 20px; + border-radius: 15px; + background-color: #2d2d47; + } + + #qi-content p span { + + font-family: "SourceCodePro-Semibold"; + font-size: 22px; + background-color: #2d2d47; + } + + #qi-content p { + padding-top: 32px; + padding-left: 30px; + background-color: #2d2d47; + border-radius: 15px; + } + + #yay { + color: #f9e2af + } + + #syyu { + color: #94e2d5; + } + + #h-git { + color:#cfe8f6; + } + + #warning { + width: auto; + margin-top: 4rem; + margin-bottom: 10rem; + height: 6rem; + background-color: rgba(243, 139, 168,1); + display: flex; + border-radius: 15px; + } + + #warning img { + width: auto; + height: 60%; + background-color: rgba(243, 139, 168,1); + margin-top: 20px; + margin-left: 30px; + } + + #warning p { + color: black; + font-family: "Sofia-Pro-Light"; + margin-left: 30px; + margin-top: 40px; + font-size: 20px; + background-color: rgba(243, 139, 168,1); + } + + #warning i { + background-color: rgba(243, 139, 168,1); + } + + #info-install { + color:#cfe8f6; + font-family: "Sofia-Pro-Medium"; + margin-top: 10px; + font-size: 14px; + } + + #info-install-link { + color:#cfe8f6; + font-family: "Sofia-Pro-Medium"; + font-size: 14px; + transition: font-size 0.2s; + + } + + #info-install-link:hover { + color: aquamarine; + font-family: "Sofia-Pro-Medium"; + font-size: 18px; + + } + + hr { + margin-top: 100px; + color:#a3a3a3a5; + } + + footer { + width: 100%; + height: 130px; + display: flex; + } + + footer p { + + margin-top: 10px; + color: #a3a3a3a5; + font-family: "Sofia-Pro-Light"; + font-size: 13px; + } + + footer p a { + color: #a3a3a3a5; + text-decoration: none; + } + + footer p a:hover { + color: #cfe8f6; + text-decoration: none; + } + + #devs { + padding-top: 5px; + } + + .p2 { + margin-top: 9px; + } + + #foot-icons img { + padding-left: 20px; + width: 30px; + height: 30px; + + } + + #foot-icons { + margin-left: 35%; + margin-top: 4%; + display: flex; + } + + @media (max-width: 1080px){ + #top { + display: inline; + } + } + + @media (max-width: 480px){ + #header-logo-div { + width: 40%; + height: auto; + } + } \ No newline at end of file diff --git a/public/backups/home.old.ejs b/public/backups/home.old.ejs new file mode 100644 index 0000000..b52fbd2 --- /dev/null +++ b/public/backups/home.old.ejs @@ -0,0 +1,289 @@ + + +
+ + + + + + +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.
-Change the autogenerated=1to 0.
-autogenerated=0
-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
-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.
-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
-- 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.
-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.
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 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.
-You can define your own custom variables like this:
-$VAR = value
Then, to use them, simply use them. For example:
-col.active_border=$MyColor
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.
-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.
-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:
-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 {)!
-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
-- A dynamic tiling - Wayland - compositor based on - wlroots - that doesn't sacrifice on its looks. -
- - -+ A dynamic tiling + Wayland + compositor based on + wlroots + that doesn't sacrifice on its looks. +
+Install Hyprland
- 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! -
+ -- 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! -
+ -- 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. -
-- yay -S hyprland-git -
-- *For a more detailed Installation process, please visit the - Install wiki page. -
- -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!
+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!
+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 + Wiki Page or feel + free to ask us + @Discord.
+