From ffe5eea0ce73cae8657c547f881b6f41270fef37 Mon Sep 17 00:00:00 2001 From: mat Date: Tue, 15 Feb 2022 01:33:08 +0000 Subject: start adding stuff --- src/app.css | 236 +++++++++++++++++++++++++++-------------- src/app.d.ts | 20 ++-- src/app.html | 9 +- src/lib/form.ts | 36 +++---- src/lib/header/Header.svelte | 124 ---------------------- src/lib/header/svelte-logo.svg | 1 - src/routes/__layout.svelte | 41 +------ src/routes/todos/index.svelte | 32 +++--- 8 files changed, 209 insertions(+), 290 deletions(-) delete mode 100644 src/lib/header/Header.svelte delete mode 100644 src/lib/header/svelte-logo.svg (limited to 'src') diff --git a/src/app.css b/src/app.css index 77bf6af..5e12d43 100644 --- a/src/app.css +++ b/src/app.css @@ -1,107 +1,187 @@ -@import '@fontsource/fira-mono'; - :root { - font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --font-mono: 'Fira Mono', monospace; - --pure-white: #ffffff; - --primary-color: #b9c6d2; - --secondary-color: #d0dde9; - --tertiary-color: #edf0f8; - --accent-color: #ff3e00; - --heading-color: rgba(0, 0, 0, 0.7); - --text-color: #444444; - --background-without-opacity: rgba(255, 255, 255, 0.7); - --column-width: 42rem; - --column-margin-top: 4rem; + --theme-main-background: #111; + --theme-lighter-background: #222; + --theme-lightest-background: #333; + --theme-main-text: #eee; + --theme-darker-text: #999; + --theme-transparent-border: rgba(128, 128, 128, 0.3); + --theme-yellow: #ff0; +} +/* minecraft font */ +@font-face { + font-family: Minecraft; + src: url(https://cdn.matdoes.dev/fonts/Minecraft.ttf); + font-display: swap; +} +/* latin-ext */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, + U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, + U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, + U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: italic; + font-weight: 700; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, + U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, + U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, + U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, + U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, + U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - body { - min-height: 100vh; + font-family: 'Atkinson Hyperlegible', sans-serif; + color: var(--theme-main-text); + background-color: var(--theme-main-background); margin: 0; - background-color: var(--primary-color); - background: linear-gradient( - 180deg, - var(--primary-color) 0%, - var(--secondary-color) 10.45%, - var(--tertiary-color) 41.35% - ); + overflow-x: hidden; } -body::before { - content: ''; - width: 80vw; - height: 100vh; - position: absolute; - top: 0; - left: 10vw; - z-index: -1; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--pure-white) 0%, - rgba(255, 255, 255, 0) 100% - ); - opacity: 0.05; +html { + scroll-behavior: smooth; } -#svelte { - min-height: 100vh; - display: flex; - flex-direction: column; +/* content is uglier when its max width */ +main { + margin: 0 auto; + width: 80%; + padding: 1em; } -h1, -h2, -p { - font-weight: 400; - color: var(--heading-color); +/* makes random height and stuff look less broken */ +* { + box-sizing: border-box; + vertical-align: baseline; } -p { - line-height: 1.5; +/* base styles for inputs */ +input[type='text'], +input[type='submit'] { + -webkit-appearance: none; + background-color: transparent; + color: var(--theme-darker-text); + transition-duration: 250ms; + border: 1px solid var(--theme-transparent-border); + border-radius: 4px; + margin: 0; + height: 2em; + font-size: 1em; } -a { - color: var(--accent-color); - text-decoration: none; +/* base styles for text input boxes */ +input[type='text'] { + text-align: left; + padding-left: 0.5em; } -a:hover { - text-decoration: underline; +/* Selecting a text box */ +input[type='text']:focus { + /* make the text lighter */ + color: var(--theme-main-text); } -h1 { - font-size: 2rem; - text-align: center; +/* base styles for buttons */ +input[type='submit'] { + margin-left: 0.2em; + cursor: pointer; } -h2 { - font-size: 1rem; +/* Hovering over a button */ +input[type='submit']:hover { + /* make the text lighter */ + color: var(--theme-main-text); } -pre { - font-size: 16px; - font-family: var(--font-mono); - background-color: rgba(255, 255, 255, 0.45); - border-radius: 3px; - box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); - padding: 0.5em; - overflow-x: auto; - color: var(--text-color); +/* base styles for anchor tags */ +a { + color: #19f; + text-decoration: none; } -input, -button { - font-size: inherit; - font-family: inherit; +h1 { + font-size: 2.5em; + overflow-wrap: anywhere; } -button:focus:not(:focus-visible) { - outline: none; +h2, +h3 { + margin-top: 0; + margin-bottom: 0.2em; +} + +hr { + opacity: 0.2; } -@media (min-width: 720px) { - h1 { - font-size: 2.4rem; - } +button { + outline: none; + font-family: inherit; } diff --git a/src/app.d.ts b/src/app.d.ts index 3ddb22d..efdb902 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,15 +1,15 @@ /// -// See https://kit.svelte.dev/docs/typescript -// for information about these interfaces -declare namespace App { - interface Locals { - userid: string; - } +// // See https://kit.svelte.dev/docs/typescript +// // for information about these interfaces +// declare namespace App { +// interface Locals { +// userid: string; +// } - interface Platform {} +// interface Platform {} - interface Session {} +// interface Session {} - interface Stuff {} -} +// interface Stuff {} +// } diff --git a/src/app.html b/src/app.html index e7d2cbd..b0013f4 100644 --- a/src/app.html +++ b/src/app.html @@ -1,10 +1,11 @@ - - - - + + + + + %svelte.head% diff --git a/src/lib/form.ts b/src/lib/form.ts index 787a397..844ca2d 100644 --- a/src/lib/form.ts +++ b/src/lib/form.ts @@ -1,4 +1,4 @@ -import { invalidate } from '$app/navigation'; +import { invalidate } from '$app/navigation' // this action (https://svelte.dev/tutorial/actions) allows us to // progressively enhance a
that already works without JS @@ -32,16 +32,16 @@ export function enhance( }) => void; } = {} ): { destroy: () => void } { - let current_token: unknown; + let current_token: unknown async function handle_submit(e: Event) { - const token = (current_token = {}); + const token = (current_token = {}) - e.preventDefault(); + e.preventDefault() - const data = new FormData(form); + const data = new FormData(form) - if (pending) pending({ data, form }); + if (pending) pending({ data, form }) try { const response = await fetch(form.action, { @@ -52,33 +52,33 @@ export function enhance( body: data }); - if (token !== current_token) return; + if (token !== current_token) return if (response.ok) { - if (result) result({ data, form, response }); + if (result) result({ data, form, response }) - const url = new URL(form.action); - url.search = url.hash = ''; - invalidate(url.href); + const url = new URL(form.action) + url.search = url.hash = '' + invalidate(url.href) } else if (error) { - error({ data, form, error: null, response }); + error({ data, form, error: null, response }) } else { - console.error(await response.text()); + console.error(await response.text()) } } catch (e: any) { if (error) { - error({ data, form, error: e, response: null }); + error({ data, form, error: e, response: null }) } else { - throw e; + throw e } } } - form.addEventListener('submit', handle_submit); + form.addEventListener('submit', handle_submit) return { destroy() { - form.removeEventListener('submit', handle_submit); + form.removeEventListener('submit', handle_submit) } - }; + } } diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte deleted file mode 100644 index 9d3120f..0000000 --- a/src/lib/header/Header.svelte +++ /dev/null @@ -1,124 +0,0 @@ - - -
-
- - SvelteKit - -
- - - -
- -
-
- - diff --git a/src/lib/header/svelte-logo.svg b/src/lib/header/svelte-logo.svg deleted file mode 100644 index 49492a8..0000000 --- a/src/lib/header/svelte-logo.svg +++ /dev/null @@ -1 +0,0 @@ -svelte-logo \ No newline at end of file diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 7fef681..d1fca30 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,45 +1,8 @@ -
-
- - - - diff --git a/src/routes/todos/index.svelte b/src/routes/todos/index.svelte index e36b6cf..e23c1a1 100644 --- a/src/routes/todos/index.svelte +++ b/src/routes/todos/index.svelte @@ -1,17 +1,17 @@ @@ -27,8 +27,8 @@ method="post" use:enhance={{ result: async ({ form }) => { - form.reset(); - } + form.reset() + }, }} > @@ -46,8 +46,8 @@ method="post" use:enhance={{ pending: ({ data }) => { - todo.done = !!data.get('done'); - } + todo.done = !!data.get('done') + }, }} > @@ -65,7 +65,7 @@ action="/todos?_method=DELETE" method="post" use:enhance={{ - pending: () => (todo.pending_delete = true) + pending: () => (todo.pending_delete = true), }} > -- cgit