feat: add material theming and index page

2 years ago · 3403c4de93
parent ef54e7d61d
commit 3403c4de93
6 changed files with 111 additions and 0 deletions
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/x-icon" href="cursedcreations.png">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="theme.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@ -0,0 +1 @@
+export const prerender = true;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,8 @@
+<slot />
+
+<style>
+    :global(body) {
+        background: var(--md-sys-color-background);
+        color: var(--md-sys-color-on-background);
+    }
+</style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Cursed Creations | Home</title>
+</svelte:head>
+
+<h1>hi</h1>
--- a/static/reset.css
+++ b/static/reset.css
@ -0,0 +1,38 @@
+/* https://github.com/code913/snippets/blob/main/css/reset.scss */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    font-family: apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+    font-size: clamp(16px, 2.5vmin, 32px);
+    font-weight: 400;
+    font-display: swap;
+}
+
+body {
+    line-height: 1.6875;
+    min-height: 100vh;
+}
+
+body p:not(:last-child) {
+    margin-block-end: 1.6875em;
+}
+
+button {
+    display: inline-block;
+    border: none;
+    color: inherit;
+    font-size: 1rem;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: center;
+    box-shadow: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
--- a/static/theme.css
+++ b/static/theme.css
@ -0,0 +1,41 @@
+/* https://material-web.dev */
+:root,
+:host {
+    --md-sys-color-background: #121416;
+    --md-sys-color-on-background: #e2e2e5;
+    --md-sys-color-surface: #121416;
+    --md-sys-color-surface-dim: #121416;
+    --md-sys-color-surface-bright: #38393b;
+    --md-sys-color-surface-container-lowest: #0c0e10;
+    --md-sys-color-surface-container-low: #1a1c1e;
+    --md-sys-color-surface-container: #1e2022;
+    --md-sys-color-surface-container-high: #282a2c;
+    --md-sys-color-surface-container-highest: #333537;
+    --md-sys-color-on-surface: #e2e2e5;
+    --md-sys-color-surface-variant: #42474d;
+    --md-sys-color-on-surface-variant: #c2c7ce;
+    --md-sys-color-inverse-surface: #e2e2e5;
+    --md-sys-color-inverse-on-surface: #2f3033;
+    --md-sys-color-outline: #8c9198;
+    --md-sys-color-outline-variant: #42474d;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #a4cbec;
+    --md-sys-color-primary: #a4cbec;
+    --md-sys-color-on-primary: #01344f;
+    --md-sys-color-primary-container: #002a41;
+    --md-sys-color-on-primary-container: #90b7d8;
+    --md-sys-color-inverse-primary: #3b627f;
+    --md-sys-color-secondary: #bac8d7;
+    --md-sys-color-on-secondary: #24323d;
+    --md-sys-color-secondary-container: #313e4a;
+    --md-sys-color-on-secondary-container: #c3d2e1;
+    --md-sys-color-tertiary: #dfbae8;
+    --md-sys-color-on-tertiary: #41264b;
+    --md-sys-color-tertiary-container: #371c41;
+    --md-sys-color-on-tertiary-container: #caa6d4;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+}