finish page

package.json

@@ -21,8 +21,8 @@
 		"@sveltejs/adapter-cloudflare": "^5.0.1",
 		"@sveltejs/kit": "^2.16.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.0.0",
 		"autoprefixer": "^10.4.20",
+		"date-fns": "^4.1.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -33,7 +33,7 @@
 		"sass-embedded": "^1.83.4",
 		"svelte": "^5.19.3",
 		"svelte-check": "^4.1.4",
-		"tailwindcss": "^4.0.0",
+		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.3",
 		"typescript-eslint": "^8.21.0",
 		"vite": "^6.0.11",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.scss

@@ -1 +1,16 @@
-@use 'tailwindcss';
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+@use "tailwindcss/utilities";
+@import url('https://fonts.bunny.net/css?family=inter:400');
+
+:root {
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  @apply bg-white text-black dark:bg-zinc-900 dark:text-white text-pretty;
+}
+
+.emoji {
+  @apply w-6 inline-block;
+}

src/lib/components/Footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+</script>
+
+<footer class="footer">
+	<p>Logo art by <a class="hover:text-sky-500 hover:underline text-gray-400" href="https://bsky.app/profile/did:plc:sqwkomf6gkzbhnctiqexepzx">Aegiscarr</a></p>
+	<p>&copy; {new Date().getFullYear()} Lara The Protogen. All rights reserved.</p>
+</footer>
+
+<style lang="scss">
+  .footer {
+    @apply w-full text-center p-4 text-white;
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+  }
+</style>

src/routes/+layout.svelte

@@ -2,9 +2,29 @@
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
 	import '../app.scss';
+
+	import Footer from '$lib/components/Footer.svelte';
+
 	let { children } = $props();
 </script>
 
 <ParaglideJS {i18n}>
-	{@render children()}
+	<div class="background">
+		<article class="content">
+			{@render children()}
+		</article>
+		<Footer />
+	</div>
 </ParaglideJS>
+
+<style lang="scss">
+  .background {
+    @apply relative w-full h-screen bg-cover bg-center bg-no-repeat;
+    background-image: url('/backdrop-logo.png');
+    background-size: 40%;
+  }
+
+  .content {
+    @apply absolute inset-0 flex flex-col justify-center p-72 items-center backdrop-blur-lg text-center;
+  }
+</style>

src/routes/+page.svelte

@@ -1,2 +1,16 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	import { formatDistanceToNow } from 'date-fns';
+
+	const prevDate = new Date(2023, 7, 5)
+
+</script>
+
+<h1 class="text-4xl font-bold">protogen.social</h1>
+<p>I intend to make protogen.social return sometime in the future, if i'm ever able to recover it's data</p>
+<p>The server used to host it is currently down and frankly, I don't know when it might be coming back, I do hope it will tho as i've been damn proud of the mastodon instance i've been running for <span class="font-bold">{formatDistanceToNow(prevDate)}</span> now</p>
+<p>I did have a local backup of it that was a few months old at the time of writing this (that being 1/25/2025 @ 17:34) but my linux ssd died, but hey, at least it got a replacement approved, but i'm never getting that data on it back</p>
+<p>I intend to get the data back and making protogen.social return</p>
+
+<style lang="scss">
+
+</style>

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

tailwind.config.ts

@@ -1,11 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-
-	theme: {
-		extend: {}
-	},
-
-	plugins: []
-} satisfies Config;

vite.config.ts

@@ -1,5 +1,4 @@
 import { paraglide } from '@inlang/paraglide-sveltekit/vite';
-import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vitest/config';
 import { sveltekit } from '@sveltejs/kit/vite';
 
@@ -10,7 +9,6 @@ export default defineConfig({
 			project: './project.inlang',
 			outdir: './src/lib/paraglide'
 		}),
-		tailwindcss()
 	],
 
 	test: {