diff --git a/package-lock.json b/package-lock.json index 90b5655..6d421d6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f0da2dd..b0b3bee 100644 --- a/package.json +++ b/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", diff --git a/src/app.css b/src/app.css index a8edb43..832c457 100644 --- a/src/app.css +++ b/src/app.css @@ -1,119 +1,121 @@ :root { - font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; + font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, + sans-serif; + line-height: 1.5; + font-weight: 400; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { - margin: 0; + margin: 0; } main { - min-height: 100vh; - display: flex; - flex-direction: column; - background-color: #e0e0e0; - box-sizing: border-box; - padding: 1em; + min-height: 100vh; + display: flex; + flex-direction: column; + background-color: #e0e0e0; + box-sizing: border-box; + padding: 1em; } h1 { - font-size: 3em; - line-height: 1.1; - margin: 1.25em 0; - text-wrap: balance; - padding-left: 0.5em; + font-size: 3em; + line-height: 1.1; + margin: 1.25em 0; + text-wrap: balance; + padding-left: 0.5em; } button { - appearance: none; - border-radius: 0; - border: 0; - padding: 0; - font-size: 1em; - font-weight: 500; - font-family: inherit; + appearance: none; + border-radius: 0; + border: 0; + padding: 0; + font-size: 1em; + font-weight: 500; + font-family: inherit; } - article { - opacity: 0.8; - label { - display: block; - padding: 1em 0.66em; +article { + opacity: 0.8; + label { + display: block; + padding: 1em 0.66em; - input { - grid-area: input; - position: absolute; - opacity: 0; - 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; - } + input { + grid-area: input; + position: absolute; + opacity: 0; + 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; + } +} .clickable { - box-shadow: 0 3px 0 rgba(0, 0, 0, .75); - border: 2px solid #222; - border-radius: 8px; - background-color: #f1f1f1; - display: block; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.75); + border: 2px solid #222; + border-radius: 8px; + background-color: #f1f1f1; + display: block; - &:hover, &:focus { - background-color: #e1e1e1; - } + &:hover, + &:focus { + background-color: #e1e1e1; + } - &:active { - transform: translateY(1px); - } + &:active { + transform: translateY(1px); + } } .back { - background-color: #e0e0e0; - color: #000; + background-color: #e0e0e0; + color: #000; - &:hover, &:focus { - background-color: #d0d0d0; - } + &:hover, + &:focus { + background-color: #d0d0d0; + } } - .calendar { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 2em 0.5em; - } +.calendar { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 2em 0.5em; +} - header { - display: flex; - padding: 1em; - gap: 0.5em; - align-items: center; +header { + display: flex; + padding: 1em; + gap: 0.5em; + align-items: center; - button { - padding: 0.5em 1em; - } + button { + padding: 0.5em 1em; + } - h1 { - font-size: 1.25em; - flex: 1; - margin: 0; - } - } - + h1 { + font-size: 1.25em; + flex: 1; + margin: 0; + } +} diff --git a/src/main.ts b/src/main.ts index 664a057..d47b930 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,9 @@ -import { mount } from 'svelte' -import './app.css' -import App from './App.svelte' +import { mount } from "svelte"; +import "./app.css"; +import App from "./App.svelte"; const app = mount(App, { - target: document.getElementById('app')!, -}) + target: document.getElementById("app")!, +}); -export default app +export default app;