feat: add material theming and index page
code913
2 years ago
parent
ef54e7d61d
commit
3403c4de93
@ -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>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export const prerender = true;
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<slot />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(body) {
|
||||||
|
background: var(--md-sys-color-background);
|
||||||
|
color: var(--md-sys-color-on-background);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<svelte:head>
|
||||||
|
<title>Cursed Creations | Home</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<h1>hi</h1>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue