Prettyfied
Giulio Alessandrini
parent
ef42761ce4
commit
171559802f
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||||
|
"editor.cursorBlinking": "smooth",
|
||||||
|
"editor.formatOnSave": true
|
||||||
|
}
|
||||||
|
|
@ -1,204 +1,211 @@
|
||||||
<script>
|
<script>
|
||||||
import {todos} from "$lib/stores/todos.js";
|
import { todos } from '$lib/stores/todos.js';
|
||||||
let todo_text = "";
|
let todo_text = '';
|
||||||
let todo_type = "active";
|
let todo_type = 'active';
|
||||||
let filteredTodo = [];
|
let filteredTodo = [];
|
||||||
let addTodo = () => {
|
let addTodo = () => {
|
||||||
if (todo_text.length > 0) {
|
if (todo_text.length > 0) {
|
||||||
const todo = {
|
const todo = {
|
||||||
text: todo_text,
|
text: todo_text,
|
||||||
date: Date.now,
|
date: Date.now,
|
||||||
done: false
|
done: false
|
||||||
}
|
};
|
||||||
todo_text = "";
|
todo_text = '';
|
||||||
if (todo_type == "done") todo_type = "all";
|
if (todo_type == 'done') todo_type = 'all';
|
||||||
$todos = [todo, ...$todos];
|
$todos = [todo, ...$todos];
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
let solveTodo = (todo) => {
|
let solveTodo = (todo) => {
|
||||||
if(todo.done) {
|
if (todo.done) {
|
||||||
todo.done = false;
|
todo.done = false;
|
||||||
}
|
} else {
|
||||||
else {
|
todo.done = true;
|
||||||
todo.done = true;
|
}
|
||||||
}
|
$todos = $todos;
|
||||||
$todos = $todos
|
};
|
||||||
}
|
let clearTodo = (todo) => {
|
||||||
let clearTodo = (todo) => {
|
$todos = $todos.filter((x) => x != todo);
|
||||||
$todos = $todos.filter(x => x != todo)
|
};
|
||||||
}
|
let filterTodo = (type) => {
|
||||||
let filterTodo = (type) => {
|
todo_type = type;
|
||||||
todo_type = type;
|
switch (type) {
|
||||||
switch (type) {
|
case 'active':
|
||||||
case 'active':
|
filteredTodo = $todos.filter((todo) => !todo.done);
|
||||||
filteredTodo = $todos.filter(todo => !todo.done);
|
break;
|
||||||
break;
|
case 'done':
|
||||||
case 'done':
|
filteredTodo = $todos.filter((todo) => todo.done);
|
||||||
filteredTodo = $todos.filter(todo => todo.done);
|
break;
|
||||||
break;
|
case 'all':
|
||||||
case 'all':
|
filteredTodo = $todos;
|
||||||
filteredTodo = $todos;
|
break;
|
||||||
break;
|
}
|
||||||
}
|
};
|
||||||
}
|
$: {
|
||||||
$: {
|
filteredTodo = $todos;
|
||||||
filteredTodo = $todos;
|
filterTodo(todo_type);
|
||||||
filterTodo(todo_type)
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class = "panel">
|
<div class="panel">
|
||||||
<h2 class= "title">todo</h2>
|
<h2 class="title">todo</h2>
|
||||||
<hr/>
|
<hr />
|
||||||
<div class="todo-input">
|
<div class="todo-input">
|
||||||
<input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
|
<input class="todo-text" bind:value={todo_text} placeholder="title" />
|
||||||
<button on:click="{addTodo}" disabled = {todo_text.length == 0} class = "todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button>
|
<button
|
||||||
</div>
|
on:click={addTodo}
|
||||||
<div class="todo-filter">
|
disabled={todo_text.length == 0}
|
||||||
<button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
|
class="todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button
|
||||||
<button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
|
>
|
||||||
<button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>all</button>
|
</div>
|
||||||
</div>
|
<div class="todo-filter">
|
||||||
<ul class = "todo-list">
|
<button on:click={() => filterTodo('active')} class={todo_type == 'active' ? 'disabled' : ''}
|
||||||
{#each filteredTodo as todo}
|
>active</button
|
||||||
<li class = "todo {todo.done ? 'done' : ''}">
|
>
|
||||||
<p>{todo.text}</p>
|
<button on:click={() => filterTodo('done')} class={todo_type == 'done' ? 'disabled' : ''}
|
||||||
<div class = "todo-buttons">
|
>done</button
|
||||||
{#if todo.done}
|
>
|
||||||
<button class = "clear" on:click="{() => clearTodo(todo)}">✗</button>
|
<button on:click={() => filterTodo('all')} class={todo_type == 'all' ? 'disabled' : ''}
|
||||||
{/if}
|
>all</button
|
||||||
<button class = "solve" on:click="{() => solveTodo(todo)}">✓</button>
|
>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
<ul class="todo-list">
|
||||||
{/each}
|
{#each filteredTodo as todo}
|
||||||
</ul>
|
<li class="todo {todo.done ? 'done' : ''}">
|
||||||
|
<p>{todo.text}</p>
|
||||||
|
<div class="todo-buttons">
|
||||||
|
{#if todo.done}
|
||||||
|
<button class="clear" on:click={() => clearTodo(todo)}>✗</button>
|
||||||
|
{/if}
|
||||||
|
<button class="solve" on:click={() => solveTodo(todo)}>✓</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
--cream: #fef9ef;
|
||||||
|
--blue: #227c9d;
|
||||||
|
--blue-disabled: #aabac0;
|
||||||
|
--green: #17c3b2;
|
||||||
|
--yellow: #ffcb77;
|
||||||
|
--red: #fe6d73;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
.panel {
|
||||||
--cream: #FEF9EF;
|
padding-top: 1rem;
|
||||||
--blue: #227c9d;
|
padding-bottom: 1rem;
|
||||||
--blue-disabled: #aabac0;
|
background-color: var(--cream);
|
||||||
--green: #17C3B2;
|
font-size: 1rem;
|
||||||
--yellow: #FFCB77;
|
font-family: 'Atkinson Hyperlegible', sans-serif;
|
||||||
--red: #FE6D73;
|
}
|
||||||
}
|
@media only screen and (min-width: 500px) {
|
||||||
|
.panel {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 500px;
|
||||||
|
border: solid var(--cream) 0px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: 2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
.panel {
|
hr {
|
||||||
padding-top: 1rem;
|
margin-left: 1rem;
|
||||||
padding-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
background-color: var(--cream);
|
border: 2px solid var(--yellow);
|
||||||
font-size: 1rem;
|
}
|
||||||
font-family: 'Atkinson Hyperlegible', sans-serif;
|
|
||||||
}
|
|
||||||
@media only screen and (min-width: 500px) {
|
|
||||||
.panel {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 500px;
|
|
||||||
border: solid var(--cream) 0px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
button {
|
||||||
margin-left: 2rem;
|
padding: 5px;
|
||||||
font-weight: 400;
|
margin: 0px;
|
||||||
font-size: 3rem;
|
background-color: var(--blue);
|
||||||
color: var(--yellow);
|
border: solid var(--blue) 1px;
|
||||||
}
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Atkinson Hyperlegible', sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
.todo-input {
|
||||||
margin-left: 1rem;
|
font-size: 0px;
|
||||||
margin-bottom: 1rem;
|
margin: 1rem;
|
||||||
border: 2px solid var(--yellow);
|
display: flex;
|
||||||
}
|
}
|
||||||
|
.todo-text {
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0px;
|
||||||
|
border: solid white 2px;
|
||||||
|
border-right: 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
font-family: 'Atkinson Hyperlegible', sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
.todo-text:focus {
|
||||||
padding: 5px;
|
outline: none;
|
||||||
margin: 0px;
|
border-bottom-color: var(--blue);
|
||||||
background-color: var(--blue);
|
}
|
||||||
border: solid var(--blue) 1px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Atkinson Hyperlegible', sans-serif;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-input {
|
.todo-add {
|
||||||
font-size: 0px;
|
padding: 1rem;
|
||||||
margin: 1rem;
|
border-bottom-left-radius: 0px;
|
||||||
display: flex;
|
border-top-left-radius: 0px;
|
||||||
}
|
}
|
||||||
.todo-text {
|
|
||||||
padding: 1rem;
|
|
||||||
margin: 0px;
|
|
||||||
border: solid white 2px;
|
|
||||||
border-right: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
font-family: 'Atkinson Hyperlegible', sans-serif;
|
|
||||||
font-size: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-text:focus {
|
.disabled {
|
||||||
outline: none;
|
background-color: var(--blue-disabled);
|
||||||
border-bottom-color: var(--blue);
|
border-color: var(--blue-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-add {
|
button:active {
|
||||||
padding: 1rem;
|
background-color: var(--yellow);
|
||||||
border-bottom-left-radius: 0px;
|
border-color: var(--yellow);
|
||||||
border-top-left-radius: 0px;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled {
|
button:active.disabled {
|
||||||
background-color: var(--blue-disabled);
|
background-color: var(--blue-disabled);
|
||||||
border-color: var(--blue-disabled);
|
border-color: var(--blue-disabled);
|
||||||
}
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
button:active {
|
.todo-filter {
|
||||||
background-color: var(--yellow);
|
margin-top: 1rem;
|
||||||
border-color: var(--yellow);
|
display: flex;
|
||||||
color: black;
|
align-items: center;
|
||||||
}
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
button:active.disabled {
|
.todo-filter button {
|
||||||
background-color: var(--blue-disabled);
|
padding-left: 1rem;
|
||||||
border-color: var(--blue-disabled);
|
padding-right: 1rem;
|
||||||
color: white;
|
margin-right: 1px;
|
||||||
}
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.todo-filter {
|
.todo-list {
|
||||||
margin-top: 1rem;
|
margin-left: 1rem;
|
||||||
display: flex;
|
margin-right: 1rem;
|
||||||
align-items: center;
|
padding: 1rem;
|
||||||
padding-left: 1rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
background-color: var(--blue-disabled);
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
.todo-filter button {
|
border-top-right-radius: 5px;
|
||||||
padding-left: 1rem;
|
border-bottom-left-radius: 5px;
|
||||||
padding-right: 1rem;
|
border-bottom-right-radius: 5px;
|
||||||
margin-right: 1px;
|
/* list
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-list {
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
background-color: var(--blue-disabled);
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
/* list
|
|
||||||
* padding 1.5rem
|
* padding 1.5rem
|
||||||
todo
|
todo
|
||||||
* content 1.0rem
|
* content 1.0rem
|
||||||
|
|
@ -211,63 +218,60 @@ button:active.disabled {
|
||||||
(1.5 + 2.5*3)rem (9rem)
|
(1.5 + 2.5*3)rem (9rem)
|
||||||
+ (12*3)px (36px)
|
+ (12*3)px (36px)
|
||||||
*/
|
*/
|
||||||
min-height: calc(11.5rem + 48px);
|
min-height: calc(11.5rem + 48px);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.todo {
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
background-color: var(--cream);
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.todo {
|
.todo-buttons {
|
||||||
padding: 0.5rem;
|
margin-left: auto;
|
||||||
margin-bottom: 0.5rem;
|
}
|
||||||
background-color: var(--cream);
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-buttons {
|
.todo.done {
|
||||||
margin-left: auto;
|
background-color: var(--cream);
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo.done {
|
/* common properties */
|
||||||
background-color: var(--cream);
|
.todo button {
|
||||||
}
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0rem;
|
||||||
|
border: solid 0.2rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* common properties */
|
/* sovle button */
|
||||||
.todo button {
|
.todo button.solve {
|
||||||
width: 2rem;
|
background-color: var(--cream);
|
||||||
height: 2rem;
|
border-color: var(--green);
|
||||||
padding: 0rem;
|
color: transparent;
|
||||||
border: solid 0.2rem;
|
}
|
||||||
border-radius: 1rem;
|
.todo.done button.solve {
|
||||||
}
|
background-color: var(--cream);
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* clear button */
|
||||||
|
.todo button.clear {
|
||||||
|
background-color: var(--red);
|
||||||
|
border-color: var(--red);
|
||||||
|
color: var(--cream);
|
||||||
|
}
|
||||||
|
|
||||||
/* sovle button */
|
/* active buttons */
|
||||||
.todo button.solve {
|
.todo button:active {
|
||||||
background-color: var(--cream);
|
background-color: var(--yellow);
|
||||||
border-color: var(--green);
|
border-color: var(--yellow);
|
||||||
color: transparent;
|
}
|
||||||
}
|
.todo.done button:active {
|
||||||
.todo.done button.solve {
|
background-color: var(--yellow);
|
||||||
background-color: var(--cream);
|
border-color: var(--yellow);
|
||||||
color: var(--green)
|
}
|
||||||
}
|
</style>
|
||||||
|
|
||||||
/* clear button */
|
|
||||||
.todo button.clear {
|
|
||||||
background-color: var(--red);
|
|
||||||
border-color: var(--red);
|
|
||||||
color: var(--cream);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* active buttons */
|
|
||||||
.todo button:active {
|
|
||||||
background-color: var(--yellow);
|
|
||||||
border-color: var(--yellow)
|
|
||||||
}
|
|
||||||
.todo.done button:active {
|
|
||||||
background-color: var(--yellow);
|
|
||||||
border-color: var(--yellow)
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,15 @@
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
made with ❤️
|
made with ❤️ and
|
||||||
and
|
<a href="https://svelte.dev/">
|
||||||
<a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
|
<img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a
|
||||||
</p>
|
>
|
||||||
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
footer {
|
footer {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,20 @@
|
||||||
<script>
|
<script>
|
||||||
import { base } from '$app/paths';
|
import { base } from '$app/paths';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<a class = "nav-button" href="{base}/">home</a>
|
<a class="nav-button" href="{base}/">home</a>
|
||||||
<a class = "nav-button" href="{base}/about">about</a>
|
<a class="nav-button" href="{base}/about">about</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
nav {
|
nav {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.nav-button {
|
.nav-button {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-bottom: solid 1px black;
|
border-bottom: solid 1px black;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
const localStore = (key, initial) => {
|
const localStore = (key, initial) => {
|
||||||
const toString = (value) => JSON.stringify(value, null, 2);
|
const toString = (value) => JSON.stringify(value, null, 2);
|
||||||
const toObject = JSON.parse;
|
const toObject = JSON.parse;
|
||||||
|
|
||||||
if(process.browser) {
|
if (process.browser) {
|
||||||
if (localStorage.getItem(key) === null) {
|
if (localStorage.getItem(key) === null) {
|
||||||
localStorage.setItem(key, toString(initial))
|
localStorage.setItem(key, toString(initial));
|
||||||
}
|
}
|
||||||
|
|
||||||
const saved = toObject(localStorage.getItem(key));
|
const saved = toObject(localStorage.getItem(key));
|
||||||
|
|
||||||
const { subscribe, set, update } = writable(saved);
|
const { subscribe, set, update } = writable(saved);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
subscribe,
|
subscribe,
|
||||||
set: value => {
|
set: (value) => {
|
||||||
// both return and save in the local storage
|
// both return and save in the local storage
|
||||||
localStorage.setItem(key, toString(value));
|
localStorage.setItem(key, toString(value));
|
||||||
return set(value)
|
return set(value);
|
||||||
},
|
},
|
||||||
update
|
update
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// export const todos = localStore('todo-store', []);
|
// export const todos = localStore('todo-store', []);
|
||||||
console.log("here we are: " + typeof window);
|
console.log('here we are: ' + typeof window);
|
||||||
export const todos = writable([]);
|
export const todos = writable([]);
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,30 @@
|
||||||
<script>
|
<script>
|
||||||
import Nav from "$lib/components/nav.svelte"
|
import Nav from '$lib/components/nav.svelte';
|
||||||
import Footer from "$lib/components/footer.svelte"
|
import Footer from '$lib/components/footer.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="site">
|
<div class="site">
|
||||||
<Nav/>
|
<Nav />
|
||||||
<slot></slot>
|
<slot />
|
||||||
<Footer/>
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
|
||||||
|
|
||||||
:global(*) {
|
:global(*) {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
color : black;
|
color: black;
|
||||||
|
|
||||||
--gray: rgb(160, 160, 160);
|
--gray: rgb(160, 160, 160);
|
||||||
--lightgray: rgb(240, 240, 240);
|
--lightgray: rgb(240, 240, 240);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site {
|
.site {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<div class = "panel">
|
<div class="panel">
|
||||||
<h1>About this</h1>
|
<h1>About this</h1>
|
||||||
<p>This is a test website using sveltekit</p>
|
<p>This is a test website using sveltekit</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.panel {
|
.panel {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import ToDo from "$lib/apps/todoApp.svelte"
|
import ToDo from '$lib/apps/todoApp.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ToDo/>
|
<ToDo />
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
|
<div class="panel">
|
||||||
<div class = "panel">
|
<h1>APPS</h1>
|
||||||
<h1>APPS</h1>
|
<ul>
|
||||||
<ul>
|
<li><a href="/apps/todo">todo</a></li>
|
||||||
<li><a href="/apps/todo">todo</a></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.panel {
|
.panel {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 2em;
|
margin: 2em;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
list-style-type:circle;
|
list-style-type: circle;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue