mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-12-22 18:29:48 +01:00
first push
This commit is contained in:
Christofer
parent
275a268af4
commit
02bf9940e5
83 changed files with 2791 additions and 4311 deletions
13
.eslintignore
Normal file
13
.eslintignore
Normal 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
14
.eslintrc.cjs
Normal 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
7
.gitattributes
vendored
Normal 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
3
.gitignore
vendored
|
|
@ -1,3 +1,6 @@
|
|||
old
|
||||
.svelte-kit
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
|
|
|||
2
.npmrc
Normal file
2
.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
engine-strict=true
|
||||
resolution-mode=highest
|
||||
13
.prettierignore
Normal file
13
.prettierignore
Normal 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
10
.prettierrc
Normal 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" } }]
|
||||
}
|
||||
|
|
@ -8,6 +8,10 @@ If you are here to Contribute to the Wiki, [click here](https://github.com/hyprw
|
|||
|
||||
feel free
|
||||
|
||||
## Requirements
|
||||
|
||||
Install [ `Git LFS` ](https://git-lfs.com) on your system.
|
||||
|
||||
## Credits
|
||||
|
||||
[System-x64](https://github.com/System-x64) - for the original site code
|
||||
|
|
|
|||
48
index.js
48
index.js
|
|
@ -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
17
jsconfig.json
Normal 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
1978
package-lock.json
generated
File diff suppressed because it is too large
Load diff
85
package.json
85
package.json
|
|
@ -1,33 +1,56 @@
|
|||
{
|
||||
"name": "hyprland-website",
|
||||
"version": "1.1.0",
|
||||
"description": "Website for Hyprland - Hyprland - A wayland compositor that doesn't sacrifice on its looks!",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "NODE_ENV=production node index.js",
|
||||
"dev": "nodemon index.js"
|
||||
},
|
||||
"keywords": [
|
||||
"hyprland"
|
||||
],
|
||||
"author": "",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"compression": "^1.7.4",
|
||||
"ejs": "^3.1.8",
|
||||
"express": "^4.18.1",
|
||||
"express-ejs-layouts": "^2.5.1"
|
||||
},
|
||||
"repository": "github:hyprwm/hyprland-website",
|
||||
"private": "true",
|
||||
"os": [
|
||||
"darwin",
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^2.0.20"
|
||||
}
|
||||
"name": "hyprland-website",
|
||||
"version": "1.1.0",
|
||||
"description": "Website for Hyprland - Hyprland - A wayland compositor with the looks.",
|
||||
"repository": "github:hyprwm/hyprland-website",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"keywords": [
|
||||
"hyprland"
|
||||
],
|
||||
"author": "",
|
||||
"license": "BSD-3-Clause",
|
||||
"private": "true",
|
||||
"os": [
|
||||
"darwin",
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.10",
|
||||
"@iconify/json": "^2.2.88",
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2492
pnpm-lock.yaml
2492
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
plugins: {
|
||||
'tailwindcss/nesting': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
1103
public/css/home.css
1103
public/css/home.css
File diff suppressed because it is too large
Load diff
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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.
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 |
|
|
@ -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");
|
||||
});
|
||||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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" });
|
||||
});
|
||||
});
|
||||
|
|
@ -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",
|
||||
},
|
||||
});
|
||||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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
15
src/app.d.ts
vendored
Normal 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
13
src/app.html
Normal 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>
|
||||
57
src/lib/components/Button.svelte
Normal file
57
src/lib/components/Button.svelte
Normal 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>
|
||||
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
BIN
src/lib/videos/prasanthrangan_rice.mp4
Normal file
BIN
src/lib/videos/prasanthrangan_rice.mp4
Normal file
Binary file not shown.
16
src/routes/+layout.svelte
Normal file
16
src/routes/+layout.svelte
Normal 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
3
src/routes/+page.js
Normal 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
13
src/routes/+page.svelte
Normal 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
106
src/routes/Counter.svelte
Normal 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
96
src/routes/Firefly.svelte
Normal 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
204
src/routes/Hero.svelte
Normal 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
47
src/routes/Navbar.svelte
Normal 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
73
src/routes/styles.css
Normal 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 }
|
||||
}
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
3
static/fonts/SpaceGrotesk-VariableFont_wght.ttf
Normal file
3
static/fonts/SpaceGrotesk-VariableFont_wght.ttf
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:e13b56b9bc84600ac672b2785c052bc2011aa8d503177e8b041981ab498f105c
|
||||
size 134112
|
||||
BIN
static/fonts/spacegrotesk.woff2
Normal file
BIN
static/fonts/spacegrotesk.woff2
Normal file
Binary file not shown.
3
static/robots.txt
Normal file
3
static/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
15
svelte.config.js
Normal file
15
svelte.config.js
Normal 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
20
tailwind.config.js
Normal 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')]
|
||||
}
|
||||
|
|
@ -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"/>
|
||||
|
|
@ -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">© 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>
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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;">≡</p>
|
||||
|
||||
</header>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<link rel="stylesheet" href="/css/mobile_menu.css"/>
|
||||
<div id="mobile__menu" class="overlay">
|
||||
<a id="close-id" class="close">×</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>
|
||||
|
|
@ -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>
|
||||
163
views/home.ejs
163
views/home.ejs
|
|
@ -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>
|
||||
|
|
@ -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
12
vite.config.js
Normal 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'
|
||||
})
|
||||
]
|
||||
})
|
||||
Loading…
Reference in a new issue