Forgot to prettier

src/components/Footer.astro

@@ -43,7 +43,8 @@ const today = new Date();
 <style>
   footer {
     padding: 2em 1em 4em 1em;
-    background: linear-gradient(var(--background-secondary), var(--background)) no-repeat;
+    background: linear-gradient(var(--background-secondary), var(--background))
+      no-repeat;
     color: rgb(var(--background-dark));
     text-align: center;
   }

src/components/Header.astro

@@ -1,32 +1,37 @@
 ---
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
-import Toggle from './Toggle.astro'
+import Toggle from './Toggle.astro';
 ---
+
 <script>
-  const root = document.querySelector(':root')
-  const themeToggle = document.getElementById('themeToggle') as HTMLInputElement
+  const root = document.querySelector(':root');
+  const themeToggle = document.getElementById(
+    'themeToggle',
+  ) as HTMLInputElement;
 
-  const savedTheme = localStorage.getItem('darkTheme'); 
+  const savedTheme = localStorage.getItem('darkTheme');
 
   // Set default theme
-  themeToggle.checked = savedTheme ? savedTheme === 'true' : window.matchMedia('(prefers-color-scheme: dark)').matches
+  themeToggle.checked = savedTheme
+    ? savedTheme === 'true'
+    : window.matchMedia('(prefers-color-scheme: dark)').matches;
 
   const updateTheme = () => {
     if (themeToggle.checked) {
-      root?.classList.add('dark')
-      localStorage.setItem('darkTheme', 'true')
+      root?.classList.add('dark');
+      localStorage.setItem('darkTheme', 'true');
     } else {
-      root?.classList.remove('dark')
-      localStorage.setItem('darkTheme', 'false')
+      root?.classList.remove('dark');
+      localStorage.setItem('darkTheme', 'false');
     }
-  }
+  };
 
   // Set default toggle value
-  updateTheme()
+  updateTheme();
 
   // Add togglable theme
-  themeToggle?.addEventListener('change', updateTheme)
+  themeToggle?.addEventListener('change', updateTheme);
 </script>
 
 <header>
@@ -38,7 +43,7 @@ import Toggle from './Toggle.astro'
       <HeaderLink href='/about'>About</HeaderLink>
     </div>
     <div class='social-links'>
-      <Toggle id="themeToggle"/>
+      <Toggle id='themeToggle' />
 
       <a href='https://nfld.social/@devthedevel' target='_blank'>
         <span class='sr-only'>Follow [email protected] on Mastodon</span>
@@ -98,7 +103,7 @@ import Toggle from './Toggle.astro'
     align-items: center;
   }
   .social-links a:hover {
-    color: var(--primary)
+    color: var(--primary);
   }
   @media (max-width: 720px) {
     .social-links {

src/components/Toggle.astro

@@ -1,57 +1,57 @@
 ---
 interface Props {
-    id: string;
-    name?: string;
+  id: string;
+  name?: string;
 }
 
 const { id, name } = Astro.props;
 ---
 
 <style>
-    .toggleContainer {
-        display: flex;
-        align-items: center;
-        padding-left: 10px;
-        padding-right: 10px;
-    }
-
-    .toggleBox {
-        display: none;
-    }
-    
-    .toggle {
-      display: inline-block;;
-      width: 40px;
-      height: 20px;
-      background-color: #ccc;
-      border-radius: 10px;
-      position: relative;
-      cursor: pointer;
-    }
-
-    .toggle::before {
-      content: "";
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      width: 16px;
-      height: 16px;
-      background-color: white;
-      border-radius: 50%;
-      transition: transform 0.3s;
-    }
-    
-    .toggleBox:checked + .toggle {
-      background-color: var(--primary);
-    }
-
-    .toggleBox:checked + .toggle::before {
-      transform: translateX(20px);
-    }
+  .toggleContainer {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .toggleBox {
+    display: none;
+  }
+
+  .toggle {
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    background-color: #ccc;
+    border-radius: 10px;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .toggle::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.3s;
+  }
+
+  .toggleBox:checked + .toggle {
+    background-color: var(--primary);
+  }
+
+  .toggleBox:checked + .toggle::before {
+    transform: translateX(20px);
+  }
 </style>
 
-<div class="toggleContainer">
-    {name}
-    <input id={id} type="checkbox" class="toggleBox"/>
-    <label for={id} class="toggle"/>
-</div>
+<div class='toggleContainer'>
+  {name}
+  <input id={id} type='checkbox' class='toggleBox' />
+  <label for={id} class='toggle'></label>
+</div>

src/styles/global.css

@@ -43,16 +43,16 @@
   --box-shadow: 0 2px 6px rgba(var(--gray), 25%),
     0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
 
-  --primary: #5FA4FF;
-  --primary-dark: #1F80FF;
+  --primary: #5fa4ff;
+  --primary-dark: #1f80ff;
 
-  --title: #EDEDED;
-  --text: #D6D6D6;
-  --text-dark: #D6D6D6;
-  --text-light: #D6D6D6;
+  --title: #ededed;
+  --text: #d6d6d6;
+  --text-dark: #d6d6d6;
+  --text-light: #d6d6d6;
 
   --background: #141414;
-  --background-secondary: #1F1F1F;
+  --background-secondary: #1f1f1f;
 
   --code-background: #24292e;
 }
@@ -76,7 +76,8 @@ body {
   margin: 0;
   padding: 0;
   text-align: left;
-  background: linear-gradient(var(--background-secondary), var(--background)) no-repeat;
+  background: linear-gradient(var(--background-secondary), var(--background))
+    no-repeat;
   background-color: var(--background);
   background-size: 100% 600px;
   word-wrap: break-word;