feat: some stuff

.github/workflows/default.yaml

@@ -63,6 +63,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - name: Checkout LFS Files
+        run: git lfs pull
+
       - name: Install, build, and upload your site output
         run: pnpm i && pnpm build
 

src/components/ThemeToggle.svelte

@@ -20,39 +20,36 @@
 </script>
 
 <button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">
-  {#if $theme === "dark"}
+  <svg
-    <svg
+    xmlns="http://www.w3.org/2000/svg"
-      xmlns="http://www.w3.org/2000/svg"
+    width="24"
-      width="24"
+    height="24"
-      height="24"
+    viewBox="0 0 24 24"
-      viewBox="0 0 24 24"
+    fill="none"
-      fill="none"
+    stroke="currentColor"
-      stroke="currentColor"
+    stroke-width="1.5"
-      stroke-width="1.5"
+    stroke-linecap="round"
-      stroke-linecap="round"
+    stroke-linejoin="round"
-      stroke-linejoin="round"
+    class="light icon icon-tabler icons-tabler-outline icon-tabler-sun"
-      class="icon icon-tabler icons-tabler-outline icon-tabler-sun"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
-      ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+      d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
-        d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
+    /><path
-      /><path
+      d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
-        d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+    /></svg
-      /></svg
+  >
-    >
+  <svg
-  {:else}
+    xmlns="http://www.w3.org/2000/svg"
-    <svg
+    width="24"
-      xmlns="http://www.w3.org/2000/svg"
+    height="24"
-      width="24"
+    viewBox="0 0 24 24"
-      height="24"
+    fill="none"
-      viewBox="0 0 24 24"
+    stroke="currentColor"
-      fill="none"
+    stroke-width="1.25"
-      stroke="currentColor"
+    stroke-linecap="round"
-      stroke-width="1.25"
+    stroke-linejoin="round"
-      stroke-linecap="round"
+    class="dark hidden icon icon-tabler icons-tabler-outline icon-tabler-moon"
-      stroke-linejoin="round"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
-      class="icon icon-tabler icons-tabler-outline icon-tabler-moon"
+      d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
-      ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+    /></svg
-        d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
+  >
-      /></svg
-    >
-  {/if}
 </button>

src/layouts/Layout.astro

@@ -64,6 +64,11 @@ const { title, width = "compact" } = Astro.props;
         --neutral-100: #d5d5d7;
         --neutral-000: #f1f1f4;
         --fill: #cb5a5a;
+
+        --border-radius-md: 20px;
+
+        --spacing-sm: 10px;
+        --spacing-md: 20px;
       }
 
       body {
@@ -74,16 +79,11 @@ const { title, width = "compact" } = Astro.props;
         --text: var(--neutral-800);
         --text-light: black;
 
-        --border-radius-md: 20px;
+        background-color: var(--neutral-100);
-
-        --spacing-sm: 10px;
-        --spacing-md: 20px;
-
-        background-color: var(--layer100);
         transition: background-color 0.1s;
         color: var(--text);
         font-family: "Nunito Sans", sans-serif;
-        background-color: var(--neutral-000);
+        background-color: var(--background-dark);
       }
 
       .dark body {
@@ -98,7 +98,15 @@ const { title, width = "compact" } = Astro.props;
         --outline: var(--neutral-300);
         --text: var(--neutral-100);
         --text-light: white;
-        background-color: var(--neutral-1000);
+      }
+
+      .dark .icon-tabler-sun,
+      .light .icon-tabler-moon {
+        display: none;
+      }
+      .dark .icon-tabler-moon,
+      .light .icon-tabler-sun {
+        display: block;
       }
     </style>
     <script>