BUGFIX: we cannot dynamically create classes

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	// The ordering of these imports is critical to your app working properly
 	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
 	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/all.css';
+	import '@skeletonlabs/skeleton/styles/skeleton.css';
     import '$lib/scss/icons.scss'
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
@@ -27,10 +27,23 @@
         globalvars = value;
     });
 </script>
+<style lang="scss">
+    .alert {
+      &.error {
+        @apply variant-filled-error;
+      }
+      &.warning {
+        @apply variant-filled-warning;
+      }
+      &.success {
+        @apply variant-filled-success;
+      }
+    }
+</style>
 <svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
 {#if typeof globalvars.user !== 'undefined' }
     {#each alertsvar as alert, i}
-        <aside class="alert variant-filled-{alert.class}">
+        <aside class="alert {alert.class}">
             <!-- Icon -->
             <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
             <!-- Message -->

src/routes/+page.svelte

@@ -1,6 +1,4 @@
 <script>
-    import { goto } from '$app/navigation';
-    import { onMount } from 'svelte';
     import {globals} from "$lib/stores.js";
 
     let globalvars;
@@ -8,15 +6,11 @@
     globals.subscribe(value => {
         globalvars = value;
     });
-
-    onMount(async () => {
-        if(typeof globalvars.user === 'undefined') {
-            goto("/account/login");
-        }
-    });
-
 </script>
 
 {#if typeof globalvars.user !== 'undefined'}
     <h1>Welcome {globalvars.user.name}</h1>
+{:else}
+    <h1 class="h1">Blackbird Chess</h1>
+    <a href="/account/login" class="anchor">Go to login page</a>
 {/if}

src/routes/account/+layout.svelte

@@ -1,9 +1,9 @@
 <div class="container h-full mx-auto flex justify-center items-center flex-col">
-    <h1 class="my-3">Blackbird Chess</h1>
+    <h1 class="my-3 h1">Blackbird Chess</h1>
 
     {#if typeof globalvars.user == 'undefined' }
         {#each alertsvar as alert, i}
-            <aside class="alert variant-filled-{alert.class} mb-3">
+            <aside class="alert {alert.class} mb-3">
                 <!-- Icon -->
                 <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
                 <!-- Message -->
@@ -22,7 +22,17 @@
 </div>
 
 <style lang="scss">
-
+  .alert {
+    &.error {
+      @apply variant-filled-error;
+    }
+    &.warning {
+      @apply variant-filled-warning;
+    }
+    &.success {
+      @apply variant-filled-success;
+    }
+  }
 </style>
 
 <script lang="js">

src/routes/account/login/Login.svelte

@@ -14,10 +14,10 @@
 
     <div class="flex justify-between">
         {#if globalvars.server.caps.register }
-            <a href="/account/register">Register</a>
+            <a href="/account/register" class="anchor">Register</a>
         {/if}
         {#if globalvars.server.caps.reset }
-            <a href="/account/reset">Reset your password</a>
+            <a href="/account/reset" class="anchor">Reset your password</a>
         {/if}
     </div>