diff --git a/build.sh b/build.sh index f1014e5..c0d0fef 100755 --- a/build.sh +++ b/build.sh @@ -13,6 +13,14 @@ source_dir="$PWD/src" mkdir -p $build_dir touch "${build_dir}"/.nojekyll cp "${source_dir}"/*.js "${build_dir}" + +# fonts +mkdir -p "${build_dir}"/fonts +cp "${source_dir}"/fonts/*.* "${build_dir}"/fonts + +# assets, +mkdir -p "${build_dir}"/assets +cp "${source_dir}"/assets/*.* "${build_dir}"/assets for i in "${files[@]}"; do file=$(echo "$i" | sed -E 's/ -> .*//') title=$(echo "$i" | sed -E 's/.* -> //') diff --git a/hotreload.sh b/hotreload.sh new file mode 100644 index 0000000..f1fba8c --- /dev/null +++ b/hotreload.sh @@ -0,0 +1,7 @@ +#!/bin/bash + +# Watch for changes in the src/ directory and run bash ./build.sh when a change is detected +while true; do + inotifywait -e modify -r src/ && bash ./build.sh +done + diff --git a/src/assets/hyprland-community.svg b/src/assets/hyprland-community.svg new file mode 100644 index 0000000..e345034 --- /dev/null +++ b/src/assets/hyprland-community.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/fonts/LondonBetween.ttf b/src/fonts/LondonBetween.ttf new file mode 100644 index 0000000..eea4e8f Binary files /dev/null and b/src/fonts/LondonBetween.ttf differ diff --git a/src/global.css b/src/global.css index a59c089..355fd2e 100644 --- a/src/global.css +++ b/src/global.css @@ -1,7 +1,86 @@ -body > :not(code) { - font-family: Nanum Pen Script; +@font-face { + font-family: 'LondonBetween'; + src: url('fonts/LondonBetween.ttf') format('truetype'); } +:root { + background: linear-gradient(45deg, #62cff4 15%, #ff00ff 158.5%); +} + +html, body { + width: 100%; + height:100%; +} + + code { font-family: Nanum Gothic Coding !important; } + +.container { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} +.box { + background-color: #1b1b1b; + position: relative; + opacity: 0; /* Start with an opacity of 0 to hide the box */ + transform: scale(0.5); /* Scale the box down to half its size */ + transition: all 0.5s ease-in-out; /* Use a transition for the pop-in effect */ + width: 70%; + height: 50%; + padding: 20px; + margin: 0 auto; /* Center the box horizontally */ + max-width: 90%; /* Set the maximum width of the box */ + padding: 20px; /* Add some padding inside the box */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); /* Add a blurred effect to the background */ + border-radius: 20px; /* Add rounded corners to the box */ + border: 2px solid rgba(0, 0, 0, 0.141); + box-shadow: 0 0 60px 2px #1b1b1c; + display: flex; /* Use flexbox to center the content */ + flex-direction: column; /* Set the flex direction to column */ + justify-content: center; /* Center the content vertically */ + align-items: center; /* Center the content horizontally */ + +} + +.box.show { + opacity: 1.0; /* Change opacity to 1 to show the box */ + transform: scale(1); /* Scale the box back to its original size */ +} + +/* heading */ +.heading { + font-family: 'LondonBetween'; + font-size: 3rem; + display: flex; + align-items: center; /* Align items vertically in the center */ + color: white; +} +.heading img { + margin-right: 20px; /* Add some space between the header and the image */ + margin-bottom: 20px; + width: 120px; +} + +.sub-heading { + font-family: monospace; + color: white; + font-size: 1rem; + margin-top: -60px; +} +.pages { + font-family: monospace; + font-size: 0.8rem; + color: white; + text-align: center; +} +wired-link { + text-decoration: none; +} + + +/* background */ diff --git a/src/index.html b/src/index.html index 9a34ea7..afd9548 100644 --- a/src/index.html +++ b/src/index.html @@ -3,13 +3,40 @@ import { WiredLink } from "wired-elements"; title("Hyprland community website") - -

Hyprland community website

-
-

A place where people work together to make stuff for Hyprland

-

Pages:

- -
+ + +
+
+
+ + Hyprland Community +

Hyprland community website

+ +
+
+

A place where individuals collaborate to create products for Hyprland.

+ +
+
+

Pages:

+
    +
  • Hyprtheme themes
    • +
  • Hyprland community projects
    • +
+ +
+ + +
+ + + + diff --git a/src/themes.js b/src/themes.js index 3aa043f..a324b7c 100644 --- a/src/themes.js +++ b/src/themes.js @@ -80,6 +80,11 @@ export class ThemePreview extends LitElement { return html`