hyprland-community · Phant80m · Apr 13, 2023 · Apr 13, 2023 · Apr 13, 2023 · Apr 14, 2023
diff --git 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
@@ -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
diff --git a/src/fonts/LondonBetween.ttf b/src/fonts/LondonBetween.ttf
diff --git 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
@@ -3,13 +3,40 @@
 	import { WiredLink } from "wired-elements";
 	title("Hyprland community website")
 </script>
-
-<header><h1>Hyprland community website</h1></header>
-<main>
-  <p>A place where people work together to make stuff for Hyprland</p>
-	<p>Pages:</p>
-	<ul>
-		<li><wired-link href="/themes">Hyprtheme themes</wired-link></li>
-		<li><wired-link href="/projects">Hyprland community projects</wired-link></li>
-	</ul>
-</main>
+<link rel="stylesheet" type="text/css" href="./box.css" />
+<body onload="showBox()">
+	<div class="container">
+		<div class="box">
+			<div class="heading">
+
+				<img src="assets/hyprland-community.svg" alt="Hyprland Community">
+				<header><h1>Hyprland community website</h1></header>
+
+			</div>
+			<div class="sub-heading"
+				<main>
+					<h3>A place where individuals collaborate to create products for Hyprland.</h3>
+									</main>
+			</div>
+			<div class="pages"> 
+				<h3>Pages:</h3>
+					<ul>
+						<li><wired-link href="/themes">Hyprtheme themes</wired-link></li>
+						<li><wired-link href="/projects">Hyprland community projects</wired-link></li>
+					</ul>
+
+			</div>
+
+			<script>
+				function showBox() {
+					const box = document.querySelector('.box');
+					setTimeout(() => {
+						box.classList.add('show');
+					}, 600); // Add the show class after a delay of 1 secon
+				}
+			</script>
+		</div>
+</body>
+
+
+
diff --git a/src/themes.js b/src/themes.js
@@ -80,6 +80,11 @@ export class ThemePreview extends LitElement {
 
 				return html`
 					<style>
+					@font-face {
+						font-family: 'LondonBetween';
+						src: url('fonts/LondonBetween.ttf') format('truetype');
+					}
+
 						.parent {
 							background: #000;
 							width: 192px;
@@ -88,7 +93,8 @@ export class ThemePreview extends LitElement {
 							display: flex; justify-content:center; align-items: center;
 						}
 						.window {
-							font-family: Nanum Gothic Coding;
+							background: #1b1b1b;
+							font-family: 'LondonBetween';
 							font-size: 7pt;
 							background: black;
 							width: 100%;

diff --git a/test.tmp b/test.tmp