Format all files

package-lock.json

@@ -13,6 +13,7 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.4",
+        "prettier": "^3.4.2",
         "svelte": "^5.15.0",
         "svelte-check": "^4.1.1",
         "typescript": "~5.6.2",
@@ -1108,6 +1109,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",

package.json

@@ -7,11 +7,13 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "format": "prettier ./src --write"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
+    "prettier": "^3.4.2",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
     "typescript": "~5.6.2",

src/app.css

@@ -1,119 +1,121 @@
 :root {
-    font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial,
-    line-height: 1.5;
+    sans-serif;
-    font-weight: 400;
+  line-height: 1.5;
+  font-weight: 400;
 
-    font-synthesis: none;
+  font-synthesis: none;
-    text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-    margin: 0;
+  margin: 0;
 }
 
 main {
-    min-height: 100vh;
+  min-height: 100vh;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    background-color: #e0e0e0;
+  background-color: #e0e0e0;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    padding: 1em;
+  padding: 1em;
 }
 
 h1 {
-    font-size: 3em;
+  font-size: 3em;
-    line-height: 1.1;
+  line-height: 1.1;
-    margin: 1.25em 0;
+  margin: 1.25em 0;
-    text-wrap: balance;
+  text-wrap: balance;
-    padding-left: 0.5em;
+  padding-left: 0.5em;
 }
 
 button {
-    appearance: none;
+  appearance: none;
-    border-radius: 0;
+  border-radius: 0;
-    border: 0;
+  border: 0;
-    padding: 0;
+  padding: 0;
-    font-size: 1em;
+  font-size: 1em;
-    font-weight: 500;
+  font-weight: 500;
-    font-family: inherit;
+  font-family: inherit;
 }
 
-    article {
+article {
-        opacity: 0.8;
+  opacity: 0.8;
-        label {
+  label {
-            display: block;
+    display: block;
-            padding: 1em 0.66em;
+    padding: 1em 0.66em;
 
-            input {
+    input {
-                grid-area: input;
+      grid-area: input;
-                position: absolute;
+      position: absolute;
-                opacity: 0;
+      opacity: 0;
-                pointer-events: none;
+      pointer-events: none;
-            }
-            strong {
-                display: block;
-                font-size: 1.25em;
-            }
-            small {
-                grid-area: date;
-            }
-        }
-}
-    article:has(:checked) {
-        opacity: 0.25;
-
-        + article:not(:has(:checked)) {
-            opacity: 1;
-        }
     }
+    strong {
+      display: block;
+      font-size: 1.25em;
+    }
+    small {
+      grid-area: date;
+    }
+  }
+}
+article:has(:checked) {
+  opacity: 0.25;
+
+  + article:not(:has(:checked)) {
+    opacity: 1;
+  }
+}
 
 .clickable {
-    box-shadow: 0 3px 0 rgba(0, 0, 0, .75);
+  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.75);
-    border: 2px solid #222;
+  border: 2px solid #222;
-    border-radius: 8px;
+  border-radius: 8px;
-    background-color: #f1f1f1;
+  background-color: #f1f1f1;
-    display: block;
+  display: block;
 
-    &:hover, &:focus {
+  &:hover,
-        background-color: #e1e1e1;
+  &:focus {
-    }
+    background-color: #e1e1e1;
+  }
 
-    &:active {
+  &:active {
-        transform: translateY(1px);
+    transform: translateY(1px);
-    }
+  }
 }
 
 .back {
-    background-color: #e0e0e0;
+  background-color: #e0e0e0;
-    color: #000;
+  color: #000;
 
-    &:hover, &:focus {
+  &:hover,
-        background-color: #d0d0d0;
+  &:focus {
-    }
+    background-color: #d0d0d0;
+  }
 }
 
-    .calendar {
+.calendar {
-        display: grid;
+  display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
-        gap: 2em 0.5em;
+  gap: 2em 0.5em;
-    }
+}
 
-    header {
+header {
-        display: flex;
+  display: flex;
-        padding: 1em;
+  padding: 1em;
-        gap: 0.5em;
+  gap: 0.5em;
-        align-items: center;
+  align-items: center;
 
-        button {
+  button {
-            padding: 0.5em 1em;
+    padding: 0.5em 1em;
-        }
+  }
 
-        h1 {
+  h1 {
-            font-size: 1.25em;
+    font-size: 1.25em;
-            flex: 1;
+    flex: 1;
-            margin: 0;
+    margin: 0;
-        }
+  }
-    }
+}
-    

src/main.ts

@@ -1,9 +1,9 @@
-import { mount } from 'svelte'
+import { mount } from "svelte";
-import './app.css'
+import "./app.css";
-import App from './App.svelte'
+import App from "./App.svelte";
 
 const app = mount(App, {
-  target: document.getElementById('app')!,
+  target: document.getElementById("app")!,
-})
+});
 
-export default app
+export default app;