Update content/formatting

src/lib/Banner.svelte

@@ -2,6 +2,13 @@
     export let title = "Quartznet";
 </script>
 
+<div class="overlay">
+    <div class="description col-md-5">
+        <h1 class="title">{title}</h1>
+        <p>Software, Games, Science, Space!</p>
+    </div>
+</div>
+
 <style>
     .overlay {
         display: flex;
@@ -20,10 +27,3 @@
         text-decoration: none;
     }
 </style>
-
-<div class="overlay">
-    <div class="description col-md-5">
-        <h1 class="title">{title}</h1>
-        <p>Software, Games, Science, Space!</p>
-    </div>
-</div>

src/lib/Modal.svelte

@@ -44,22 +44,22 @@
     const toCssString = (props) =>
         Object.keys(props).reduce(
             (str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`,
-            ""
+            "",
         );
 
     $: cssBg = toCssString(Object.assign({}, styleBg, customStyleBg));
     $: cssWindow = toCssString(
-        Object.assign({}, styleWindow, customStyleWindow)
+        Object.assign({}, styleWindow, customStyleWindow),
     );
     $: cssContent = toCssString(
-        Object.assign({}, styleContent, customStyleContent)
+        Object.assign({}, styleContent, customStyleContent),
     );
 
     const open = (
         NewComponent,
         newProps = {},
         style = { bg: {}, window: {}, content: {} },
-        newCallback = () => {}
+        newCallback = () => {},
     ) => {
         Component = NewComponent;
         props = newProps;
@@ -213,7 +213,8 @@ https://github.com/flekschas/svelte-simple-moda
         border-radius: 1.5rem;
         background: white;
         box-shadow: 0 0 0 1px black;
-        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+        transition:
+            transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
             background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
         -webkit-appearance: none;
     }
@@ -229,7 +230,8 @@ https://github.com/flekschas/svelte-simple-moda
         height: 1px;
         background: black;
         transform-origin: center;
-        transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+        transition:
+            height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
             background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
     }
 

src/lib/Nav.svelte

@@ -1,3 +1,21 @@
+<header>
+    <nav>
+        <ul>
+            <li>
+                <a href="/">Quartznet</a>
+            </li>
+            <li>
+                <a href="/about">About</a>
+            </li>
+        </ul>
+        <ul>
+            <li>
+                <a href="/admin">Admin</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+
 <style>
     a {
         font-size: 1rem;
@@ -33,21 +51,3 @@
         border-bottom: 2px solid var(--line-color);
     }
 </style>
-
-<header>
-    <nav>
-        <ul>
-            <li>
-                <a href="/">Quartznet</a>
-            </li>
-            <li>
-                <a href="/about">About</a>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="/admin">Admin</a>
-            </li>
-        </ul>
-    </nav>
-</header>

src/lib/ThemeContext.svelte

@@ -1,7 +1,7 @@
 <svelte:head>
     <script>
         if (document) {
-            const defaultTheme = 'dark';
+            const defaultTheme = "dark";
             const itemTheme = localStorage.getItem("theme") ?? defaultTheme;
 
             localStorage.setItem("theme", itemTheme);

src/lib/UserManager.svelte

@@ -4,6 +4,8 @@
     export let onClick;
 </script>
 
+<a href="/admin">Admin</a>
+
 <style>
     img {
         display: inline-block;
@@ -12,5 +14,3 @@
         height: 100%;
     }
 </style>
-
-<a href="/admin">Admin</a>

src/routes/+page.svelte

@@ -4,16 +4,8 @@
 
     let games = [
         {
-            name: "Sirius",
+            name: "Test",
-            link: "./sirius",
+            link: "/",
-            img: "img/600x300.png",
-            size: { width: 600, height: 300 },
-            description:
-                "A 2D game about a wannabe space captain exploring the galaxy.",
-        },
-        {
-            name: "Quartz",
-            link: "./sirius",
             img: "img/600x300.png",
             size: { width: 600, height: 300 },
             description: "Test",

src/routes/about/+page.svelte

@@ -1,12 +1,12 @@
 <script>
-    import Banner from '$lib/Banner.svelte'
+    import Banner from "$lib/Banner.svelte";
 </script>
 
 <svelte:head>
     <title>Quartznet - About</title>
 </svelte:head>
 
-<Banner title="About"/>
+<Banner title="About" />
 
 <main class="container">
     <section>
@@ -15,9 +15,11 @@
         <p>A small team developing games and software.</p>
 
         <h3>Why the name Quartznet</h3>
-        <p>Naming things is hard. We ended up with the name quartz and added net making quartznet.
+        <p>
-
+            Naming things is hard. We ended up with the name quartz and added
+            net making quartznet.
+        </p>
         <h3>SPAAAAACEEEE</h3>
         <p>Space!</p>
     </section>
-</main>
+</main>

src/routes/admin/+page.svelte

@@ -1,20 +1,34 @@
 <script>
-    import Banner from '$lib/Banner.svelte'
+    import Banner from "$lib/Banner.svelte";
 
     let services = [
-        {
-            name: "Status",
-            link: "https://quartznet.info/status",
-            description: "Server monitoring and troubleshooting",
-        },
         {
             name: "Gitea",
             link: "https://git.quartznet.info",
-            description: "Software development version control"
+            description: "Software development version control",
-        }
+        },
-    ]
+    ];
 </script>
 
+<svelte:head>
+    <title>Quartznet - Admin</title>
+</svelte:head>
+
+<Banner title="Admin" />
+
+<main class="container">
+    <section>
+        <h2>Services</h2>
+        <ul>
+            {#each services as service}
+                <li>
+                    <a href={service.link}>{service.name}</a>
+                </li>
+            {/each}
+        </ul>
+    </section>
+</main>
+
 <style>
     section {
         display: flex;
@@ -48,22 +62,3 @@
         margin-bottom: 20px;
     }
 </style>
-
-<svelte:head>
-    <title>Quartznet - Admin</title>
-</svelte:head>
-
-<Banner title="Admin"/>
-
-<main class="container">
-    <section>
-        <h2>Services</h2>
-        <ul>
-            {#each services as service}
-                <li>
-                    <a href="{service.link}">{service.name}</a>
-                </li>
-            {/each}
-        </ul>
-    </section>
-</main>

src/routes/admin/login.svelte

@@ -1,37 +1,61 @@
 <script>
-    import Banner from '$lib/Banner.svelte'
+    import Banner from "$lib/Banner.svelte";
 
     let username = "";
     let password = "";
 
     const submitHandler = () => {
         alert("TODO: implement login backend");
-    }
+    };
 </script>
 
 <svelte:head>
     <title>Quartznet - Login</title>
 </svelte:head>
 
-<Banner title="Login"/>
+<Banner title="Login" />
 
 <main class="container">
-    <form on:submit|preventDefault={submitHandler} class="form-signin" method="post">
+    <form
+        on:submit|preventDefault={submitHandler}
+        class="form-signin"
+        method="post"
+    >
         <div class="form-label-group">
             <label for="username">Username</label>
-            <input type="text" id="username" class="form-control" bind:value={username}
+            <input
-                name="username" placeholder="Username" required>
+                type="text"
+                id="username"
+                class="form-control"
+                bind:value={username}
+                name="username"
+                placeholder="Username"
+                required
+            />
         </div>
 
         <div class="form-label-group">
             <label for="inputPassword">Password</label>
-            <input type="password" id="password" class="form-control" bind:value={password}
+            <input
-                name="password" placeholder="Password" required>
+                type="password"
+                id="password"
+                class="form-control"
+                bind:value={password}
+                name="password"
+                placeholder="Password"
+                required
+            />
         </div>
 
         <div class="custom-control custom-checkbox mb-3">
-            <input type="checkbox" class="custom-control-input" id="customCheck1">
+            <input
-            <label class="custom-control-label" for="customCheck1">Remember password</label>
+                type="checkbox"
+                class="custom-control-input"
+                id="customCheck1"
+            />
+            <label class="custom-control-label" for="customCheck1"
+                >Remember password</label
+            >
         </div>
         <button class="btn btn-primary" type="submit">Sign in</button>
     </form>

src/routes/sirius/+page.svelte

@@ -1,17 +0,0 @@
-<script>
-  import Banner from '$lib/Banner.svelte'
-</script>
-
-<svelte:head>
-  <title>Quartznet - Sirius</title>
-</svelte:head>
-
-<Banner title="Sirius"/>
-
-<main class="container">
-    <section class="content">
-        <h1>Sirius game</h1>
-        <p>Sirius game. Work in progress</p>
-        <a href="https://quartznet.info/presskit">Presskit</a>
-    </section>
-</main>