style changes + add desktop footer + add terms & stuff

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@yusurko/vigil",
 	"private": true,
-	"version": "0.1.0-dev45",
+	"version": "0.1.0-dev46",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/lib/Centered.svelte

@@ -1,14 +1,15 @@
 
 <script lang="ts">
-let { narrow = false, children } : { narrow?: boolean, children: any } = $props();
+let { narrow = false, small = false, children } : { narrow?: boolean, small ?: boolean, children: any } = $props();
 </script>
 
-<div class="centered" class:narrow={narrow}>
+<div class="centered" class:narrow={narrow} class:small={small}>
   {@render children () }
 </div>
 
 <style>
   .centered {text-align: center;}
   .centered.narrow { max-width: 400px; margin: auto; }
+  .centered.small { font-size: smaller; }
 </style>
 

src/lib/DesktopFooter.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import Centered from "./Centered.svelte";
+
+</script>
+
+<Centered small={true}>
+    <p>&copy; 2021-2025 Sakuragasaki46.</p>
+    <ul>
+        <li><a href="/about">About</a></li>
+        <li><a href="/terms">Terms</a></li>
+        <li><a href="/privacy">Privacy</a></li>
+        <li><a href="https://nekode.yusur.moe/yusur/freak" target="_blank">GitHub</a></li>
+    </ul>
+</Centered>
+
+<style>
+    ul {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: stretch;
+        max-width: 640px;
+        margin: auto;
+    }
+
+    ul > li {
+        flex: 1;
+    }
+</style>

src/lib/FeedPost.svelte

@@ -30,10 +30,11 @@ let { id, title, content = "", votes, my_vote, comment_count } = post;
   .post-frame {
     padding-inline-start: 2em;
     position: relative;
+    min-height: 7em;
   }
   .message-stats {
     position: absolute;
-    inset-inline-start: 0;
+    inset-inline-start: -6px;
     top: 0;
     width: 2em;
     display: flex;

src/lib/FullPost.svelte

@@ -81,12 +81,13 @@ let { title, id, content = '', to, votes, my_vote, comment_count } = post;
   }
   .message-stats {
     position: absolute;
-    inset-inline-start: 0;
+    inset-inline-start: -6px;
     top: 0;
     width: 2em;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
+    margin-inline-end: 6px;
   }
 </style>

src/routes/+layout.svelte

@@ -9,6 +9,7 @@ import type { ServerHealth, UserEntry } from '$lib/backend';
     import { getFlash } from 'sveltekit-flash-message';
     import { page } from "$app/state";
     import FlashMessage from '$lib/FlashMessage.svelte';
+    import DesktopFooter from '$lib/DesktopFooter.svelte';
 
 let { data, children } : { 
   data: {me: UserEntry},
@@ -53,6 +54,8 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
     {@render children()}
   </main>
 
+  <DesktopFooter />
+
   <MobileFooter />
 </div>
 

src/routes/privacy/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { SvelteShowdown } from "svelte-showdown";
+
+    let { data }: { data: {content: string} } = $props();
+
+    let { content } = data;
+</script>
+
+<article class="card">
+    <p class="faint">Privacy Policy</p>
+
+    <SvelteShowdown {content} />
+</article>

src/routes/privacy/+page.ts

@@ -0,0 +1,19 @@
+import { backend } from '$lib/backend.js';
+import { error } from '@sveltejs/kit';
+
+
+
+export async function load(event) {
+
+    const resp = await backend.withEvent(event).fetch('about/privacy');
+
+    if(resp.status === 404) {
+        error(404);
+    }
+
+    const respJ = await resp.json();
+
+    const { content } = respJ;
+
+    return { content };
+}

src/routes/rules/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { SvelteShowdown } from "svelte-showdown";
+
+    let { data }: { data: {content: string} } = $props();
+
+    let { content } = data;
+</script>
+
+<article class="card">
+    <p class="faint">Community Guidelines</p>
+
+    <SvelteShowdown {content} />
+</article>

src/routes/rules/+page.ts

@@ -0,0 +1,19 @@
+import { backend } from '$lib/backend.js';
+import { error } from '@sveltejs/kit';
+
+
+
+export async function load(event) {
+
+    const resp = await backend.withEvent(event).fetch('about/rules');
+
+    if(resp.status === 404) {
+        error(404);
+    }
+
+    const respJ = await resp.json();
+
+    const { content } = respJ;
+
+    return { content };
+}

src/routes/terms/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { SvelteShowdown } from "svelte-showdown";
+
+    let { data }: { data: {content: string} } = $props();
+
+    let { content } = data;
+</script>
+
+<article class="card">
+    <p class="faint">Terms of Service</p>
+
+    <SvelteShowdown {content} />
+</article>

src/routes/terms/+page.ts

@@ -0,0 +1,19 @@
+import { backend } from '$lib/backend.js';
+import { error } from '@sveltejs/kit';
+
+
+
+export async function load(event) {
+
+    const resp = await backend.withEvent(event).fetch('about/terms');
+
+    if(resp.status === 404) {
+        error(404);
+    }
+
+    const respJ = await resp.json();
+
+    const { content } = respJ;
+
+    return { content };
+}

src/routes/user/[id]/+page.ts

@@ -11,8 +11,6 @@ export async function load(event) {
         error(404);
       }
       
-      
-      
       const respJ = await resp.json();
 
         let { users } = respJ;