more style changes

src/lib/components/billboard.svelte

@@ -3,7 +3,7 @@
 	// import quote from randomquote function
 </script>
 
-<div class="billboard">
+<div class="billboard noselect">
 	<div class="quote">
 		<img src={star} alt="" />
 		<p>meowwww</p>
@@ -14,7 +14,8 @@
 <style lang="scss">
 	@use '$lib/styles/variables' as vars;
 	.billboard {
-		border: solid 2px vars.$base-color;
+		border: solid 2px vars.$base-colour;
+		background-color: black;
 		box-sizing: border-box;
 		overflow: hidden;
 		width: 800px;
@@ -24,9 +25,13 @@
 		display: flex;
 		justify-content: center;
 
-		line-height: 32px;
+		// line-height: 32px;
 		margin: 8px 0 8px 0;
 
+		p {
+			padding-top: .3em;
+		}
+
 		animation: billboard 20s linear infinite;
 	}
 	img {

src/lib/components/blinkies.svelte

@@ -6,7 +6,7 @@
 	}
 </script>
 
-<div class="holder">
+<div class="holder noselect">
 	<div class="marquee">
 		{#each blinkies as blinkie}
 			<img src={blinkie} alt="" />
@@ -23,8 +23,9 @@
 		height: 20px;
 	}
     .holder {
+		font-family: none;
 		width: 800px;
-		margin: 0 auto;
+		margin: 1em auto;
         overflow: hidden;
 		height: 20px;
     }

src/lib/components/nav.svelte

@@ -10,6 +10,11 @@
 			name: "home",
 			image: ""
 		},
+        {
+			destination: "/about",
+			name: "about",
+			image: ""
+		},
         {
 			destination: "/pets",
 			name: "pets",
@@ -31,13 +36,14 @@
 <nav>
   {#each navlinks as links}
     <a href="{links.destination}" class="link">
-        <img src="{links.image}" alt="">
+        <img class="noselect" src="{links.image}" alt="">
         <p>{links.name}</p>
     </a>
   {/each}
 </nav>
 
 <style lang="scss">
+    @use '$lib/styles/variables' as vars;
     nav {
         display: flex;
         justify-content: space-evenly;
@@ -48,10 +54,20 @@
         img {
             width: 100px;
             height: 100px;
+            background-color: black;
         }
         p {
             text-align: center;
         }
+        &:hover {
+            p {
+                color: vars.$highlight;
+            }
+            img {
+                border: 2px solid vars.$highlight;
+                box-sizing: border-box;
+            }
+        }
     }
     a {
         color: white;

src/lib/components/title.svelte

@@ -1,6 +1,6 @@
-<div>
+<div class="noselect">
 	<p>welcome to...</p>
-	<h1>BANII.CAFE</h1>
+	<h1>バニー BANII.CAFE カフェ</h1>
 </div>
 
 <style lang="scss">
@@ -11,11 +11,13 @@
         margin: 1em 0;
     }
 	h1 {
+		font-family: easvhsregular;
+		font-size: 3em;
 		background: linear-gradient(
 			90deg,
 			#00d4ff00 0%,
-			vars.$base-color 25%,
+			vars.$base-colour 25%,
-			vars.$base-color 75%,
+			vars.$base-colour 75%,
 			#00d4ff00 100%
 		);
 		color: black;

src/lib/components/window.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	let { name, children } : {name: string, children?: any} = $props();
+</script>
+
+<div class="window">
+	<div class="title">
+		<h2>{name}</h2>
+		<div class="minimise noselect">_</div>
+	</div>
+	<div class="content">
+		{#if children}
+			{@render children?.()}
+		{:else}
+			<p>meoww :3</p>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	@use '$lib/styles/variables' as vars;
+	h2 {
+		color: black;
+	}
+	.title {
+		font-family: easvhsregular;
+		h2 {
+			margin-top: 8px;
+			font-size: 2em;
+		}
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: vars.$base-colour;
+		// background: linear-gradient(-2deg,vars.$base-colour 65%, vars.$highlight 100%);
+		padding: 0 2px 0 1em;
+		gap: 1em;
+	}
+	.content {
+		border: 1px solid vars.$base-colour;
+		padding: 1em;
+		background-color: black;
+	}
+	.minimise {
+		color: black;
+		border: 1px solid black;
+		box-sizing: border-box;
+		line-height: 32px;
+		height: 40px;
+		width: 40px;
+		text-align: center;
+	}
+	.minimise:hover {
+		background-color: #53461f;
+		cursor: pointer;
+	}
+</style>

src/lib/styles/base.scss

@@ -1,5 +1,17 @@
 @use './variables' as vars;
 
+@font-face {
+    font-family: easvhsregular;
+    src: url('$lib/assets/fonts/easvhs/easvhs-webfont.woff2') format("woff2"), url('$lib/assets/fonts/easvhs/easvhs-webfont.woff') format("woff");
+    font-weight: 400;
+    font-style: normal
+}
+
+@font-face {
+    font-family: minecraftia;
+    src: url('$lib/assets/fonts/minecraft/minecraftia-webfont.woff2') format("woff2"), url('$lib/assets/fonts/minecraft/minecraftia-webfont.woff') format("woff");
+}
+
 * {
     margin: 0;
 }
@@ -10,11 +22,24 @@ body {
 
     color: #fefefe;
 
+    font-family: minecraftia;
+
     /* display: flex;
     justify-content: center;
     width: 100%; */
 }
 
-.window {
+.noselect {
-    border: solid 2px vars.$base-color;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.imgwrap {
+    display: flex;
+    gap: 1em;
+    align-items: center;
 }

src/lib/styles/variables.scss

@@ -1 +1,3 @@
-$base-color: #dede6c;
+$base-colour: #dede6c;
+$highlight: #00fffa;
+$warning: #cc4c4c;

src/routes/+layout.svelte

@@ -31,7 +31,7 @@
 	@use '$lib/styles/variables' as vars;
 
 	main {
-		border: 1px dashed vars.$base-color;
+		border: 1px dashed vars.$base-colour;
 		width: 800px;
 		margin: 0 auto;
 		box-sizing: border-box;

src/routes/+page.svelte

@@ -1,4 +1,187 @@
 <script lang="ts">
+	import Window from '$lib/components/window.svelte';
 
+	import pfp from '$lib/assets/img/pfp.webp';
+	import alert from '$lib/assets/img/alert.gif';
+
+	const imported = import.meta.glob('$lib/assets/img/stamps/*', { eager: true });
+	let stamps: Array<string> = [];
+	for (const img in imported) {
+		stamps.push(img);
+	}
 </script>
 
+<div class="container">
+	<!-- about -->
+	<Window name="about">
+		<p>
+			hello!&nbsp;&nbsp; ^w^/<br />welcome to my site, feel free to look around and learn something your government
+			doesn't want you to know :3
+		</p>
+	</Window>
+
+	<!-- most wanted -->
+	<Window name="most wanted">
+		<div id="mostwanted">
+			<div class="imgwrap money">
+				<img class="noselect" alt="" />
+				<h1>FBI's most wanted</h1>
+				<img class="noselect" src="" alt="" />
+			</div>
+			<div id="profile">
+				<img class="noselect" src={pfp} alt="" />
+				<table>
+					<tbody>
+						<tr>
+							<td>name:</td>
+							<td>placeholder</td>
+						</tr>
+						<tr>
+							<td>height:</td>
+							<td>placeholder</td>
+						</tr>
+						<tr>
+							<td>species:</td>
+							<td>placeholder</td>
+						</tr>
+						<tr>
+							<td>wanted for:</td>
+							<td>placeholder</td>
+						</tr>
+						<tr>
+							<td>last seen:</td>
+							<td>placeholder</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div id="info">
+				<h3>!INFO!</h3>
+				<p>
+					likes to smell plants and imprison bugs... can be found eating plastic from your bins and
+					drinking kerosene at your nearest airport
+				</p>
+			</div>
+			<div id="caution">
+				<h3>!CAUTION!</h3>
+				<div class="imgwrap">
+					<img class="noselect" src={alert} alt="" />
+					<p>will bark very loud if approached</p>
+					<img class="noselect" src={alert} alt="" />
+				</div>
+			</div>
+			<div id="reward">
+				<h3>!REWARD!</h3>
+				<br />
+				<div class="imgwrap">
+					<img class="noselect" src="" alt="" />
+					<p>
+						second-hand Hwasong-18 ICBM<br />
+						[fuel not included]
+					</p>
+					<img class="noselect" src="" alt="" />
+				</div>
+			</div>
+		</div>
+	</Window>
+
+	<!-- latest posts -->
+	<!-- <Window name="posts"></Window> -->
+
+	<!-- stampbook -->
+	<Window name="stampbook">
+		<div id="stampbook">
+			{#each stamps as stamp}
+				<img class="stamp noselect" src={stamp} alt="oops..." />
+			{/each}
+		</div>
+	</Window>
+</div>
+
+<style lang="scss">
+	@use '$lib/styles/variables' as vars;
+	td {
+		padding: 1em;
+	}
+	#mostwanted {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1em;
+		h1 {
+			color: vars.$warning;
+			font-size: 3em;
+			padding-top: .5em;
+		}
+		h3 {
+			text-align: center;
+		}
+		#profile {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 1em;
+			img {
+				width: 256px;
+				height: 256px;
+				border: 2px solid vars.$highlight;
+				box-sizing: border-box;
+			}
+		}
+		#info {
+			h3 {
+				color: vars.$highlight;
+			}
+		}
+		#caution {
+			h3 {
+				color: vars.$warning;
+			}
+			img {
+				height: 24px;
+				width: 24px;
+			}
+		}
+		#reward {
+			border: 2px solid vars.$base-colour;
+			background-color: black;
+			padding: 1em;
+			h3 {
+				font-size: 3em;
+				color: vars.$base-colour;
+				text-decoration: underline;
+			}
+			img {
+				height: 64px;
+				width: 64px;
+			}
+		}
+		.money {
+			img {
+				height: 64px;
+				width: 64px;
+			}
+		}
+	}
+	#stampbook {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 1em;
+	}
+	.container {
+		display: flex;
+		justify-content: space-evenly;
+		flex-wrap: wrap;
+
+		padding: 1em;
+		gap: 1em;
+	}
+	.stamp {
+		width: 99px;
+		height: 56px;
+	}
+	p {
+		text-align: center;
+	}
+</style>