first push

This commit is contained in:
Christofer 2023-07-10 10:15:17 +02:00
parent 275a268af4
commit 02bf9940e5
83 changed files with 2791 additions and 4311 deletions

13
.eslintignore Normal file
View file

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

14
.eslintrc.cjs Normal file
View file

@ -0,0 +1,14 @@
module.exports = {
root: true,
extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
}
};

7
.gitattributes vendored Normal file
View file

@ -0,0 +1,7 @@
*.ttf filter=lfs diff=lfs merge=lfs -text
.jpg filter=lfs diff=lfs merge=lfs -text
.png filter=lfs diff=lfs merge=lfs -text
.ico filter=lfs diff=lfs merge=lfs -text
.woff filter=lfs diff=lfs merge=lfs -text
.woff2 filter=lfs diff=lfs merge=lfs -text
.mp4 filter=lfs diff=lfs merge=lfs -text

3
.gitignore vendored
View file

@ -1,3 +1,6 @@
old
.svelte-kit
# Logs # Logs
logs logs
*.log *.log

2
.npmrc Normal file
View file

@ -0,0 +1,2 @@
engine-strict=true
resolution-mode=highest

13
.prettierignore Normal file
View file

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

10
.prettierrc Normal file
View file

@ -0,0 +1,10 @@
{
"useTabs": true,
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

View file

@ -8,6 +8,10 @@ If you are here to Contribute to the Wiki, [click here](https://github.com/hyprw
feel free feel free
## Requirements
Install [ `Git LFS` ](https://git-lfs.com) on your system.
## Credits ## Credits
[System-x64](https://github.com/System-x64) - for the original site code [System-x64](https://github.com/System-x64) - for the original site code

View file

@ -1,48 +0,0 @@
const express = require("express");
const app = express();
const { join } = require("path");
const compression = require("compression");
const expressEJSLayouts = require("express-ejs-layouts");
app.disable('x-powered-by');
app.use(compression());
app.use(express.static(join(__dirname, "public")));
app.set("view engine", "ejs");
app.set("views", join(__dirname, "views"));
app.set("layout extractScripts", true);
app.set("layout extractStyles", true);
app.use(expressEJSLayouts);
app.use((req, res, next) => {
// Security Headers - Refer to MDN and helmetjs docs
res.set("Content-Security-Policy", `default-src 'self'; img-src 'self'; media-src 'self'; script-src 'unsafe-inline' 'self' https://cdn.jsdelivr.net https://code.jquery.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; object-src 'none'; child-src 'none'; frame-ancestors 'none'; frame-src 'none'; upgrade-insecure-requests`);
res.set("Strict-Transport-Security", "max-age=15552000; includeSubDomains");
res.set("X-Content-Type-Options", "nosniff");
res.set("X-Frame-Options", "DENY");
next();
});
app.get("/", (req, res) => {
res.render("home");
});
app.get("/rices", (req, res) => {
res.render("rices");
});
app.get("/discord", (req, res) => {
res.status(200).send("<head><title>redirecting...</title><body><script>window.location.href='https://discord.gg/hQ9XvMUjjr';</script></body>");
});
app.use((_, res) => {
res.status(404).render("404");
});
app.listen(process.env.PORT || 4000, () => {
console.log("Listening to PORT: 4000");
});

17
jsconfig.json Normal file
View file

@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

1978
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,33 +1,56 @@
{ {
"name": "hyprland-website", "name": "hyprland-website",
"version": "1.1.0", "version": "1.1.0",
"description": "Website for Hyprland - Hyprland - A wayland compositor that doesn't sacrifice on its looks!", "description": "Website for Hyprland - Hyprland - A wayland compositor with the looks.",
"main": "index.js", "repository": "github:hyprwm/hyprland-website",
"scripts": { "scripts": {
"start": "NODE_ENV=production node index.js", "dev": "vite dev",
"dev": "nodemon index.js" "build": "vite build",
}, "preview": "vite preview",
"keywords": [ "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"hyprland" "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
], "lint": "prettier --plugin-search-dir . --check . && eslint .",
"author": "", "format": "prettier --plugin-search-dir . --write ."
"license": "BSD-3-Clause", },
"dependencies": { "keywords": [
"compression": "^1.7.4", "hyprland"
"ejs": "^3.1.8", ],
"express": "^4.18.1", "author": "",
"express-ejs-layouts": "^2.5.1" "license": "BSD-3-Clause",
}, "private": "true",
"repository": "github:hyprwm/hyprland-website", "os": [
"private": "true", "darwin",
"os": [ "linux"
"darwin", ],
"linux" "engines": {
], "node": ">=16.0.0"
"engines": { },
"node": ">=16.0.0" "devDependencies": {
}, "@fontsource/fira-mono": "^4.5.10",
"devDependencies": { "@iconify/json": "^2.2.88",
"nodemon": "^2.0.20" "@neoconfetti/svelte": "^1.0.0",
} "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"autoprefixer": "^10.4.14",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"postcss": "^8.4.25",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.0",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.0",
"vite": "^4.3.6"
},
"type": "module",
"dependencies": {
"clsx": "^1.2.1",
"simplex-noise": "^4.0.1",
"svelte-inview": "^4.0.1",
"tailwindcss-animate": "^1.0.6",
"ts-pattern": "^5.0.1",
"unplugin-icons": "^0.16.3"
}
} }

File diff suppressed because it is too large Load diff

7
postcss.config.js Normal file
View file

@ -0,0 +1,7 @@
export default {
plugins: {
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {}
}
};

View file

@ -1,45 +0,0 @@
.con404 {
margin: auto;
text-align: center;
color: #cfe8f6;
font-family: "LondonBetween";
}
.con404>img {
margin-top: 60px;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
max-height: 40vh;
max-width: 60vw;
}
.con404>h1 {
margin-bottom: 20px;
font-size: 48px;
}
.con404>p {
font-size: 20px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.con404>a>button {
padding: 20px;
background-color: aquamarine;
border: solid aquamarine;
border-radius: 0.2rem;
margin-bottom: 60px;
transition: all 0.5s ease;
font-size: 20px;
font-family: "LondonBetween";
}
.con404>a>button:hover {
background-color: #1a1a2e;
color: aquamarine;
transform: scale(1.2);
cursor: pointer;
}

File diff suppressed because it is too large Load diff

View file

@ -1,19 +0,0 @@
#mob-github {
color: #1a1a2e;
background-color: aquamarine;
/* width: 130px;
height: 50px; */
padding: 20px 30px;
text-align: center;
vertical-align: center;
margin-top: 20px ;
border-radius: 0.2rem;
}
#mob-github:hover {
transform: scale(1.2);
background-color: #1a1a2e;
color: aquamarine;
border: 4px solid aquamarine;
}

View file

@ -1,61 +0,0 @@
.wofdiv {
margin: auto;
text-align: center;
color: #cfe8f6;
}
.wofdiv>h1 {
font-family: "LondonBetween";
font-size: 48px;
margin-top: 60px;
margin-bottom: 30px;
}
.wofdiv>p {
font-size: 20px;
font-family: "LondonBetween";
margin: 0 10%;
margin-bottom: 60px;
}
.bigtext {
font-family: "LondonBetween";
color: #cfe8f6;
font-size: 5rem;
}
.ricewins {
text-align: center;
margin: auto;
margin-bottom: 60px;
}
div.ricewins>ul {
list-style-type: none;
}
.month {
font-family: "LondonBetween";
color: #cfe8f6;
margin: 30px;
}
.win-text {
font-size: 24px;
color: #cfe8f6;
font-family: "LondonBetween";
margin: 20px;
}
li.win-text>img {
max-width: 60vw;
}
@media only screen and (max-width: 1000px) {
li.win-text>img {
max-width: 80vw;
min-width: 80vw;
;
}
}

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 606 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 980 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 903 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 595 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 593 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 817 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 607 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 629 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 642 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

View file

@ -1,12 +0,0 @@
const doc = document;
const menuOpen = doc.querySelector(".mob-menu");
const menuClose = doc.querySelector(".close");
const overlay = doc.querySelector(".overlay");
menuOpen.addEventListener("click", () => {
overlay.classList.add("overlay--active");
});
menuClose.addEventListener("click", () => {
overlay.classList.remove("overlay--active");
});

View file

@ -1,15 +0,0 @@
$(document).ready(function () {
$(".animatedVideo").each(function () {
$(this).get(0).pause();
});
$(window).on("scroll", function () {
$(".animatedVideo").each(function () {
let scroll = $(window).scrollTop();
let elementTop = $(this).offset().top;
let elementHeight = $(this).height();
if (scroll > elementTop - $(window).height() + elementHeight) {
$(this).get(0).play();
}
});
});
});

View file

@ -1,11 +0,0 @@
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" });
});
});

View file

@ -1,17 +0,0 @@
const swiper = new Swiper(".swiper", {
autoplay: {
delay: 2000,
disableOnInteraction: true,
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-in-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1h-2z" color="#cfe8f6"/>
<path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" color="#cfe8f6"/>
</svg>

Before

Width:  |  Height:  |  Size: 585 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 12 KiB

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal" viewBox="0 0 16 16">
<path color="#cfe8f6" d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z"/>
<path color="#cfe8f6" d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12z"/>
</svg>

Before

Width:  |  Height:  |  Size: 497 B

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" color="#cfe8f6"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" color="#cfe8f6"/>
</svg>

Before

Width:  |  Height:  |  Size: 459 B

View file

@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gpu-card" viewBox="0 0 16 16">
<path d="M4 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm7.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/>
<path d="M0 1.5A.5.5 0 0 1 .5 1h1a.5.5 0 0 1 .5.5V4h13.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H2v2.5a.5.5 0 0 1-1 0V2H.5a.5.5 0 0 1-.5-.5Zm5.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM9 8a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0Z"/>
<path d="M3 12.5h3.5v1a.5.5 0 0 1-.5.5H3.5a.5.5 0 0 1-.5-.5v-1Zm4 1v-1h4v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 575 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 506 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.2 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 462 KiB

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>

Before

Width:  |  Height:  |  Size: 354 B

Binary file not shown.

Binary file not shown.

Binary file not shown.

15
src/app.d.ts vendored Normal file
View file

@ -0,0 +1,15 @@
/// <reference types="@sveltejs/kit" />
/// <reference types="unplugin-icons/types/svelte" />
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}
}
export {}

13
src/app.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<style></style>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View file

@ -0,0 +1,57 @@
<script>
import clsx from 'clsx'
/** @type { 'md'|'lg'}*/
export let size = 'md'
/** @type { 'primary'|'outline'|'fancyOutline' }*/
export let type = 'primary'
$: classes = clsx(
'animate rounded font-bold text-sm hover:scale-[1.03] active:scale-95',
'primary' == type && 'bg-slate-200 text-black',
'outline' == type && 'outline-2 outline outline-slate-200 text-white bg-transparent',
'fancyOutline' == type && 'fancy',
'md' == size && 'px-4 py-2 min-w-[5rem]',
'lg' == size && 'px-6 py-2.5 min-w-[5rem] text-lg',
$$restProps.class
)
</script>
{#if type === 'fancyOutline'}
<div class="relative">
<button class={classes} on:click><slot>NO LABEL PROVIDED</slot></button>
<span
class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-cyan-500/90 blur-xl scale-y-75"
style="--easing: x; --duration: 8s;"
/>
<span
class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-secondary/90 blur-xl scale-y-75"
style="--easing: y; --duration: 8s;"
/>
<span
class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-purple-500/90 blur-xl scale-y-75"
style="--easing: z;--duration: 8s;"
/>
</div>
{:else}
<button class={classes} on:click><slot>NO LABEL PROVIDED</slot></button>
{/if}
<style lang="postcss">
.animate {
animation: pop 380ms cubic-bezier(0.1, -0, 0.42, 1.8);
transition: transform 180ms cubic-bezier(0.1, -0, 0.42, 1.8);
}
/*!!! FIREFLIES IN THE BACKGROUND */
.fancy {
/* background: rgba(theme(colors.black), 0.8); */
background-clip: padding-box;
outline: 2px theme(colors.primary) solid;
}
.fancy-bg {
animation: var(--easing, 'x') var(--duration, 8s) infinite;
}
</style>

View file

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

16
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,16 @@
<script>
import Navbar from './Navbar.svelte'
import './styles.css'
</script>
<div class="flex flex-col min-h-screen">
<Navbar />
<main class="mx-auto w-full flex flex-col">
<slot />
</main>
<footer>
<p>Footer</p>
</footer>
</div>

3
src/routes/+page.js Normal file
View file

@ -0,0 +1,3 @@
// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
export const prerender = true;

13
src/routes/+page.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import Hero from './Hero.svelte';
</script>
<svelte:head>
<title>Hyprland</title>
<meta name="description" content="Hyprland - Dynamic tiling Wayland compositor with the looks." />
</svelte:head>
<Hero />
<style>
</style>

106
src/routes/Counter.svelte Normal file
View file

@ -0,0 +1,106 @@
<script>
import { spring } from 'svelte/motion';
let count = 0;
const displayed_count = spring();
$: displayed_count.set(count);
$: offset = modulo($displayed_count, 1);
/**
* @param {number} n
* @param {number} m
*/
function modulo(n, m) {
// handle negative numbers
return ((n % m) + m) % m;
}
</script>
<div class="counter">
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
<svg aria-hidden="true" viewBox="0 0 1 1">
<path d="M0,0.5 L1,0.5" />
</svg>
</button>
<div class="counter-viewport">
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
<strong>{Math.floor($displayed_count)}</strong>
</div>
</div>
<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
<svg aria-hidden="true" viewBox="0 0 1 1">
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
</svg>
</button>
</div>
<style>
.counter {
display: flex;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: 1rem 0;
}
.counter button {
width: 2em;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
touch-action: manipulation;
font-size: 2rem;
}
.counter button:hover {
background-color: var(--color-bg-1);
}
svg {
width: 25%;
height: 25%;
}
path {
vector-effect: non-scaling-stroke;
stroke-width: 2px;
stroke: #444;
}
.counter-viewport {
width: 8em;
height: 4em;
overflow: hidden;
text-align: center;
position: relative;
}
.counter-viewport strong {
position: absolute;
display: flex;
width: 100%;
height: 100%;
font-weight: 400;
color: var(--color-theme-1);
font-size: 4rem;
align-items: center;
justify-content: center;
}
.counter-digits {
position: absolute;
width: 100%;
height: 100%;
}
.hidden {
top: -100%;
user-select: none;
}
</style>

96
src/routes/Firefly.svelte Normal file
View file

@ -0,0 +1,96 @@
<script>
import { onMount } from 'svelte'
import { createNoise2D } from 'simplex-noise'
import { match } from 'ts-pattern'
import clsx from 'clsx'
// Idea: Boid behavior
const maxSize = 12
const size = Math.max(Math.random() * maxSize, 6)
/** How much the fireflies can vanish into the edges of the screen. Include their invisible padding for mouse detection. */
const edgeClip = maxSize * 8
const noiseY = createNoise2D()
const noiseX = createNoise2D()
let classes = clsx(Math.random() > 0.5 ? 'bg-primary/70' : 'bg-sky-500/70')
let x = 0
let y = 0
onMount(() => {
x = window.innerWidth / 2 - maxSize * 6
y = window.innerHeight / 2 + 100
let animationId
let i = 0
animate()
async function animate() {
x += match(x)
.when(
(x_) => x_ > window.innerWidth + edgeClip,
() => -10
)
.when(
(x) => x < -edgeClip,
() => 10
)
.otherwise(() => noiseX(i, 1) * 5)
y += match(y)
.when(
(y) => y > window.innerHeight + edgeClip,
() => -10
)
.when(
(y) => y < -edgeClip,
() => 10
)
.otherwise(() => noiseY(i, 1) * 5)
i += 0.005
animationId = requestAnimationFrame(animate)
}
return () => cancelAnimationFrame(animationId)
})
</script>
<div
class="absolute p-24 top-0 left-0 firefly pointer-events-auto opacity-50 hover:opacity-100 transition-opacity"
style="--x:{x}px; --y:{y}px;--size:{size}px; --fadeDelay: {Math.random() * 6 - 3}s"
>
<div class="firefly-inner {classes}" />
</div>
<style lang="postcss">
.firefly {
/* transform: translate3d(50px, calc(var(--x) * 200px), 0px); */
transform: translate3d(var(--x, 5), var(--y, 2), 0px);
contain: strict;
}
.firefly-inner {
background-color: theme(colors.sky.400 / 70%);
min-height: var(--size);
min-width: var(--size);
border-radius: 50%;
contain: layout;
box-shadow: 0px 0px 25px theme(colors.emerald.400), 0px 0px 12px theme(colors.sky.400);
animation: fade 3s ease-in-out infinite alternate;
animation-delay: var(--fadeDelay);
}
@keyframes fade {
0%,
40%,
66% {
opacity: 0%;
}
99%,
20% {
opacity: 100%;
}
}
</style>

204
src/routes/Hero.svelte Normal file
View file

@ -0,0 +1,204 @@
<script>
/** eslint-disable no-unused-vars */
import Button from '$lib/components/Button.svelte'
import Logo from '$lib/images/logo.png'
import Firefly from './Firefly.svelte'
import previewRice from '$lib/videos/prasanthrangan_rice.mp4'
import { inview } from 'svelte-inview'
let isVisible = true
/** @type HTMLVideoElement */
let videoElement
</script>
<section
class="w-full relative flex flex-col items-center justify-center min-h-screen h-max"
use:inview
on:inview={({ detail: { inView } }) => {
isVisible = inView
}}
>
<!-- Hero text and logo -->
<div class="flex h-screen min-h-max justify-center flex-col items-center z-10">
<div class="ani-in fill-mode-backwards text-center items-center flex flex-col gap-6 mb-8">
<img src={Logo} alt="Hyprland Logo" class="w-32 mb-4 logo" />
<div class="relative">
<h1 class="text-7xl p-2 font-bold bg-clip-text text-transparent hyprgradient">Hyprland</h1>
<div
aria-hidden="true"
class="text-7xl top-0 pointer-events-none p-2 font-bold title-shadow absolute -z-10"
>
Hyprland
</div>
</div>
</div>
<h2
class="ani-in text-center mb-14 [animation-delay:344ms] fill-mode-backwards font-medium text-xl text-blue-200/60"
>
Dynamic tiling Wayland compositor<br />with the looks.
</h2>
<div
class="flex gap-6 items-center animate-in fade-in-0 slide-in-from-bottom-1 [animation-delay:990ms] duration-500 fill-mode-backwards"
>
<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
<Button size="lg">Install</Button>
</a>
<Button type="fancyOutline" size="lg">Github</Button>
</div>
</div>
<!-- Preview rice -->
<div
class="max-w-7xl relative mx-6 -mt-12 animate-in [animation-delay:1400ms] fade-in-0 fill-mode-backwards [animation-duration:1700ms] zoom-in-75"
>
<div
class="rounded-xl opacity-20 overflow-hidden border-purple-400 border-2 scale-90 transition-all duration-1000"
use:inview={{ unobserveOnEnter: true, threshold: 0.8 }}
on:inview_enter={({ detail: { node } }) => {
node.classList.remove('opacity-20')
node.classList.remove('scale-90')
videoElement.play()
}}
>
<!--TODO Play and scale up on enter -->
<video
bind:this={videoElement}
src={previewRice}
disablepictureinpicture="true"
disableremoteplayback="true"
loop
muted
preload="auto"
/>
</div>
<div class="preview-rice-bg" aria="hidden" />
</div>
<!-- Fireflies -->
{#if isVisible}
<div
class="absolute animate-in fade-in-0 duration-75 pointer-events-none max-w-screen inset-0 overflow-hidden z-0"
>
<!--!FIXME jaggy when hitting bottom edge -->
{#await new Promise((resolve) => setTimeout(() => resolve(), 940)) then _}
{#each { length: 40 } as _}
<Firefly />
{/each}
{/await}
</div>
{/if}
<!-- Gradient background -->
<div
class="absolute -z-50 animate-in fade-in-75 duration-150 max-w-screen w-screen min-h-screen h-full right-0 top-0 overflow-hidden"
>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div
class="bg-gradient-radial via-emerald-300/0 to-emerald-200/0 from-sky-400/20 bg"
style="--seed: 20;"
/>
</div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div
class="bg-gradient-radial to-cyan-400/0 from-blue-500/10 bg"
style="--offset: -3s; --seed: 4; --duration:102s"
/>
</div>
</div>
<!-- Gradient background //-->
</section>
<style lang="postcss">
.bg {
width: calc(120vw + 500px);
height: calc(120vh + 500px);
animation: move var(--duration, 50s) ease-in-out var(--offset, 0ms) infinite alternate both;
}
.logo {
animation: logo 6s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
.title-shadow {
text-shadow: 8px 9px 32px theme(colors.secondary / 30%),
-8px -9px 32px theme(colors.primary / 50%), 1px 0px 3px theme(colors.purple.500 / 50%),
0px 9px 16px theme(colors.black / 50%);
animate: title_effect 1s ease infinite alternate;
}
.preview-rice-bg {
@apply w-full h-full absolute -z-10 -top-20 inset-x-0;
/* background-color: red; */
background-image: radial-gradient(closest-side, theme(colors.purple.500), transparent);
}
@keyframes logo {
from {
opacity: 80%;
}
to {
opacity: 100%;
transform: scale(1.03) translateY(12px);
}
}
@keyframes title_effect {
0% {
transform: translateX(-99px);
opacity: 0;
}
50% {
transform: translateX(0px);
}
100% {
transform: translateX(9px);
}
}
@keyframes move {
0% {
transform: translate3d(
calc(10vw * sin(var(--seed, 1))),
calc(20vh * sin(var(--seed, 1))),
0px
);
}
30% {
transform: translate3d(
calc(-20vw * sin(var(--seed, 1))),
calc(12vh * sin(var(--seed, 1))),
0px
);
}
70% {
transform: translate3d(
calc(-230px * sin(var(--seed, 1))),
calc(-160px * sin(var(--seed, 1))),
0px
);
opacity: sin(var(--seed, 1));
}
to {
transform: translate3d(
calc(50px * sin(var(--seed, 1))),
calc(200px * sin(var(--seed, 1))),
0px
);
}
}
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
.ani-in {
@apply animate-in slide-in-from-bottom-4 fade-in-0 zoom-in-95 duration-700;
}
</style>

47
src/routes/Navbar.svelte Normal file
View file

@ -0,0 +1,47 @@
<script>
import { page } from '$app/stores'
import logo from '$lib/images/logo.png'
import GithubIcon from '~icons/akar-icons/github-fill'
import DiscordIcon from '~icons/prime/discord'
</script>
<header
class="flex items-center p-1 z-10 justify-between text-blue-300 bg-black/50 fixed inset-4 h-7 rounded-full backdrop-blur animate-in slide-in-from-top-1 [animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards"
>
<a href="/" class="flex gap-2 pl-2 text-sm items-center font-bold tracking-wide text-white">
<img src={logo} alt="Hyprland Logo" class="w-6" />Hyprland</a
>
<nav class="flex font-semibold gap-4 items-center">
<ul class="flex gap-4 px-3 rounded-full max-h-full border-primary border-1 border h-full">
<li>
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get_started</a>
</li>
<li>
<a href="https://wiki.hyprland.org">Wiki</a>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/rices">Wall_of_fame</a>
</li>
</ul>
<ul class="bg-purple-400 rounded-full flex items-center gap-3 px-2 py-1">
<li>
<a href="https://github.com/hyprwm/Hyprland">
<DiscordIcon class="text-black" />
</a>
</li>
<li>
<a href="https://github.com/hyprwm/Hyprland">
<GithubIcon class="text-black" />
</a>
</li>
</ul>
<a
class="bg-primary rounded-full px-4 py-1 text-black"
href="https://wiki.hyprland.org/Getting-Started/Installation/">Install</a
>
</nav>
</header>
<style>
</style>

73
src/routes/styles.css Normal file
View file

@ -0,0 +1,73 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Space Grotesk';
src: url('/fonts/spacegrotesk.woff2') format('woff2');
font-weight: 300 700;
font-display: swap;
}
body {
color: theme(colors.white);
background-color: theme(colors.black);
min-height: 100vh;
}
.hyprgradient {
background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #00a1f8);
}
::selection {
background: theme(colors.cyan.600);
color: theme(colors.white);
}
/* Scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: theme(colors.slate.200/50) transparent;
}
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: theme(colors.slate.700);
border-radius: 24px;
}
@keyframes pop {
0% {
scale: 0.98;
}
40% {
scale: 1.02;
}
100% {
scale: 1;
}
}
/* Taken from Vercel */
/* prettier-ignore */
@keyframes x {
0%,16.667%,to { opacity: 1 }
33%,83.333% { opacity: 0 }
}
/* prettier-ignore */
@keyframes y {
0%,16.667%,66.667%,to { opacity: 0 }
33.333%,50% { opacity: 1 }
}
/* prettier-ignore */
@keyframes z {
0%,50%,to { opacity: 0 }
66.667%,83.333% { opacity: 1 }
}

View file

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e13b56b9bc84600ac672b2785c052bc2011aa8d503177e8b041981ab498f105c
size 134112

Binary file not shown.

3
static/robots.txt Normal file
View file

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

15
svelte.config.js Normal file
View file

@ -0,0 +1,15 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
},
preprocess: vitePreprocess()
};
export default config;

20
tailwind.config.js Normal file
View file

@ -0,0 +1,20 @@
const { fontFamily } = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: { black: '#0D0E0F', primary: '#58E1FF', secondary: '#00A2F8' },
fontFamily: {
...fontFamily,
// sans: ['"Space Grotesk"', ...fontFamily['sans']]
sans: ['"Space Grotesk"']
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))'
}
}
},
plugins: [require('tailwindcss-animate')]
}

View file

@ -1,8 +0,0 @@
<div class="con404">
<img src="/imgs/404.png" alt="not found?">
<h1>Page Not Found!</h1>
<p>Look where you land, open seas and empty hands</p>
<a href="/"><button>Return to Hyprland</button></a>
</div>
<link rel="stylesheet" href="/css/404.css"/>

View file

@ -1,37 +0,0 @@
<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>.
</p>
</div>
<p style="margin-top: 20px; margin-bottom: 10px;">Hyprland is licensed under the BSD 3-Clause "New" or "Revised" License.</p>
</div>
<div class="footer-icons">
<a href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">
<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>

View file

@ -1,43 +0,0 @@
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" href="/favicon.ico" type="image/ico"/>
<meta name="darkreader-lock"/>
<link rel="icon" href="/ico/favicon-32x32.png" size="32x32" type="image/png"/>
<link rel="icon" href="/ico/favicon-16x16.png" size="16x16" type="image/png"/>
<title>Hyprland - A wayland compositor that doesn't sacrifice on its looks!</title>
<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 property="og:image" content="/imgs/wall_4k.png"/>
<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="twitter:image" content="/imgs/wall_4k.png"/>
<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/"/>
<link rel="stylesheet" href="/css/home.css"/>
<%- style %>
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="css/rices.css"/>
<link rel="stylesheet" href="css/404.css"/>
-->
<script defer src="/js/mobile.js"></script>
<%- script %>
<!--
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/swiper.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/smooth-view.js"></script>
<script src="js/play-vid-on-focus.js"></script>
<script src="js/github-logo.js"></script>
-->

View file

@ -1,15 +0,0 @@
<header>
<a class="logo" href="/"><img src="/imgs/hyprland.png" alt="logo"></a>
<nav>
<ul class="nav__links">
<li><a class="nav-link" data-value="Home" href="/">Hyprland</a></li>
<li><a class="nav-link" data-value="Wall of Fame" href="/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" style="margin-left: 20px;">&equiv;</p>
</header>

View file

@ -1,12 +0,0 @@
<link rel="stylesheet" href="/css/mobile_menu.css"/>
<div id="mobile__menu" class="overlay">
<a id="close-id" class="close">&times;</a>
<div class="overlay__content">
<a id="home" href="/">Hyprland</a>
<a href="/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>
<a id="mob-github"href="https://github.com">Github</a>
</div>
</div>

View file

@ -1,3 +0,0 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script defer src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script defer src="/js/swiper.js"></script>

View file

@ -1,163 +0,0 @@
<div class="top" id="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
class="animatedVideo"
src="/videos/windows.mp4"
autoplay
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"
autoplay
muted
loop
></video>
</div>
</div>
<div class="configure">
<div id="con-vid">
<video
class="animatedVideo"
src="/videos/configure.mp4"
autoplay
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="/discord"
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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<%- include("./components/swiperjs") %>
<script defer src="/js/smooth-view.js"></script>
<script defer src="/js/github-logo.js"></script>
<script defer src="/js/play-vid-on-focus.js"></script>

View file

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include("./components/head") %>
</head>
<body>
<%- include("./components/header") %>
<%- body %>
<%- include("./components/mobile_menu") %>
<%- include("./components/footer") %>
</body>
</html>

12
vite.config.js Normal file
View file

@ -0,0 +1,12 @@
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'
export default defineConfig({
plugins: [
sveltekit(),
Icons({
compiler: 'svelte'
})
]
})