Skip to content

Commit

Permalink
tweek index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@douglasjsmith404
douglasjsmith404 committed Apr 19, 2024
1 parent 361a989 commit 1b15e01
Show file tree
Hide file tree
Showing 3 changed files with 583 additions and 0 deletions.
25 changes: 25 additions & 0 deletions _site/README/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<h1>create-svelte</h1>
<p>Everything you need to build a Svelte project, powered by <a href="https://github.com/sveltejs/kit/tree/main/packages/create-svelte"><code>create-svelte</code></a>.</p>
<h2>Creating a project</h2>
<p>If you're seeing this, you've probably already done this step. Congrats!</p>
<pre><code class="language-bash"># create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
</code></pre>
<h2>Developing</h2>
<p>Once you've created a project and installed dependencies with <code>npm install</code> (or <code>pnpm install</code> or <code>yarn</code>), start a development server:</p>
<pre><code class="language-bash">npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
</code></pre>
<h2>Building</h2>
<p>To create a production version of your app:</p>
<pre><code class="language-bash">npm run build
</code></pre>
<p>You can preview the production build with <code>npm run preview</code>.</p>
<blockquote>
<p>To deploy your app, you may need to install an <a href="https://kit.svelte.dev/docs/adapters">adapter</a> for your target environment.</p>
</blockquote>
290 changes: 290 additions & 0 deletions _site/build/404/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,290 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark light" />

<link rel="modulepreload" href="/_app/immutable/entry/start.DIQFazSV.js">
<link rel="modulepreload" href="/_app/immutable/chunks/entry.Bb6qI4ka.js">
<link rel="modulepreload" href="/_app/immutable/chunks/scheduler.BvLojk_z.js">
<link rel="modulepreload" href="/_app/immutable/entry/app.CMq6yLwz.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index.BIGF01Tb.js">

<style>
body {
--bg-1: hsl(0, 0%, 100%);
--bg-2: hsl(206, 20%, 90%);
--bg-3: hsl(206, 20%, 80%);
--fg-1: hsl(0, 0%, 13%);
--fg-2: hsl(0, 0%, 20%);
--fg-2: hsl(0, 0%, 30%);
--link: hsl(208, 77%, 47%);
--link-hover: hsl(208, 77%, 55%);
--link-active: hsl(208, 77%, 40%);
--border-radius: 4px;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
'DejaVu Sans Mono', monospace;
background: var(--bg-1);
color: var(--fg-1);
font-family: var(--font);
line-height: 1.5;
margin: 1rem;
height: calc(100vh - 2rem);
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}

:is(h1, h2, h3, h4, h5, h6, p) {
margin: 1rem 0.1rem;
}

label {
margin: 0.5rem 0.1rem;
}

:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
margin-top: 0;
}

:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
margin-bottom: 0;
}

a {
color: var(--link);
}

a:hover {
color: var(--link-hover);
}

a:active {
color: var(--link-active);
}

label {
display: flex;
gap: 0.5rem;
align-items: center;
}

label input {
margin: 0;
}

button,
input,
select {
font-family: inherit;
font-size: inherit;
}

button {
background: var(--link);
color: var(--bg-1);
padding: 0.5rem 1rem;
border: none;
border-radius: var(--border-radius);
}

button:hover {
background: var(--link-hover);
}

button:active {
background: var(--link-active);
}

:is(button, button:hover, button:active):disabled {
background: var(--link);
filter: grayscale(1);
opacity: 0.4;
}

input,
textarea,
select {
padding: 0.5rem;
border: 1px solid var(--bg-2);
border-radius: var(--border-radius);
box-sizing: border-box;
}

input,
textarea {
background: var(--bg-1);
color: inherit;
}

select:not([multiple]) {
background: var(--bg-2);
}

textarea {
font-family: var(--font-mono);
font-size: 0.9rem;
}

form {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: baseline;
}

ul:has(li):has(form) {
list-style: none;
padding: 0;
}

li form {
flex-direction: row;
gap: 0.5rem;
margin: 0.5rem 0;
}

nav {
position: relative;
display: flex;
gap: 1em;
padding: 1em;
background: var(--bg-2);
z-index: 2;
margin: 0 0 1em 0;
border-radius: var(--border-radius);
}

nav a {
text-decoration: none;
}

nav a[aria-current='true'] {
border-bottom: 2px solid;
}

ul:has(form) {
list-style: none;
padding: 0;
}

progress {
margin: 0.5rem 0;
}

progress:first-child {
margin-top: 0;
}

progress:lsat-child {
margin-bottom: 0;
}

.error {
color: red;
}

code {
background: var(--bg-2);
font-family: var(--font-mono);
font-size: 0.9em;
padding: 0.15rem 0.3rem;
border-radius: var(--border-radius);
}

ul.todos {
padding: 0;
}

ul.todos li:not(:has(> form)),
ul.todos li form {
position: relative;
display: flex;
align-items: center;
padding: 0.5em 0.5em 0.5em 1em;
margin: 0 0 0.5em 0;
gap: 0.5em;
border-radius: 5px;
user-select: none;
background: var(--bg-1);
filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
transition: filter 0.2s, opacity 0.2s;
}

ul.todos .done {
filter: none;
opacity: 0.4;
}

ul.todos button {
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 1rem 1rem;
cursor: pointer;
width: 3em;
height: 3em;
margin: -0.5em -0.5em -0.5em 0;
aspect-ratio: 1;
opacity: 0.5;
transition: opacity 0.2s;
}

ul.todos button:hover {
opacity: 1;
}

body.dark {
--bg-1: hsl(0, 0%, 18%);
--bg-2: hsl(0, 0%, 30%);
--bg-3: hsl(0, 0%, 40%);
--fg-1: hsl(0, 0%, 90%);
--fg-2: hsl(0, 0%, 70%);
--fg-3: hsl(0, 0%, 60%);
--link: hsl(206, 96%, 72%);
--link-hover: hsl(206, 96%, 78%);
--link-active: hsl(206, 96%, 64%);
}
</style>
</head>
<body>
<div style="display: contents">
<script>
{
__sveltekit_v8s17j = {
base: ""
};

const element = document.currentScript.parentElement;

Promise.all([
import("/_app/immutable/entry/start.DIQFazSV.js"),
import("/_app/immutable/entry/app.CMq6yLwz.js")
]).then(([kit, app]) => {
kit.start(app, element);
});
}
</script>
</div>

<script>
const theme = new URL(window.location).searchParams.get('theme');

document.body.classList.remove('light', 'dark');
document.body.classList.add(theme || 'light');
</script>
</body>
</html>
Loading

0 comments on commit 1b15e01

Please sign in to comment.