add fermyon colors and favicon
Signed-off-by: karthik2804 <karthik.ganeshram@fermyon.com>
This commit is contained in:
karthik2804
parent
bcb52f2807
commit
fdf22b9347
|
|
@ -7,7 +7,7 @@ version = "0.1.0"
|
|||
|
||||
[[component]]
|
||||
id = "todo-api"
|
||||
source = "$CARGO_TARGET_DIR/wasm32-wasi/release/todo.wasm"
|
||||
source = "target/wasm32-wasi/release/todo.wasm"
|
||||
allowed_http_hosts = []
|
||||
sqlite_databases = ["default"]
|
||||
[component.trigger]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
html, body {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #0E092D;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
|
||||
section.todoapp {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
color: #A87CE6;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header input {
|
||||
width: 60%;
|
||||
max-width: 800px;
|
||||
height: 2rem;
|
||||
border-radius: 0.67rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #384687;
|
||||
color: #E7D3F2;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #C5FFF1;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.todo-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list .todo {
|
||||
width: 60%;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 800px;
|
||||
height: 3rem;
|
||||
background-color: #C5FFF1;
|
||||
border-bottom: 1px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.todo .view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.todo .view label {
|
||||
flex-grow: 1;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.todo .view button {
|
||||
background: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.todo .view input{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.todo .view input:checked + label{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo .view button svg{
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.todo-list .todo:nth-child(1) {
|
||||
border-radius: 0.67rem 0.67rem 0 0;
|
||||
}
|
||||
|
||||
.todo-list .todo:last-child {
|
||||
border-radius: 0 0 0.67rem 0.67rem;
|
||||
}
|
||||
|
||||
.todo-list .todo:only-child {
|
||||
border-radius: 0.67rem;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -3,7 +3,13 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css"> -->
|
||||
<!-- <link rel="stylesheet" href="css/styles.css"> -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="icon" type="image/x-icon" href="/icon/favicon.png">
|
||||
<title>Spin TODO</title>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
|
|
@ -15,7 +21,7 @@
|
|||
<body>
|
||||
<section class="todoapp" v-cloak>
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<h1>Todos</h1>
|
||||
<input class="new-todo" autofocus autocomplete="off" placeholder="Add a todo" v-model="todo"
|
||||
@keyup.enter="addTodo">
|
||||
</header>
|
||||
|
|
@ -26,7 +32,14 @@
|
|||
<input class="toggle" type="checkbox" :value="todo.is_completed"
|
||||
@input="() => toggleComplete(todo)">
|
||||
<label>{{todo.description}}</label>
|
||||
<button class="destroy" @click="deleteTodo(todo)"></button>
|
||||
<button class="destroy" @click="deleteTodo(todo)">
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 105.16 122.88">
|
||||
<title>delete</title>
|
||||
<path class="cls-1"
|
||||
d="M11.17,37.16H94.65a8.4,8.4,0,0,1,2,.16,5.93,5.93,0,0,1,2.88,1.56,5.43,5.43,0,0,1,1.64,3.34,7.65,7.65,0,0,1-.06,1.44L94,117.31v0l0,.13,0,.28v0a7.06,7.06,0,0,1-.2.9v0l0,.06v0a5.89,5.89,0,0,1-5.47,4.07H17.32a6.17,6.17,0,0,1-1.25-.19,6.17,6.17,0,0,1-1.16-.48h0a6.18,6.18,0,0,1-3.08-4.88l-7-73.49a7.69,7.69,0,0,1-.06-1.66,5.37,5.37,0,0,1,1.63-3.29,6,6,0,0,1,3-1.58,8.94,8.94,0,0,1,1.79-.13ZM5.65,8.8H37.12V6h0a2.44,2.44,0,0,1,0-.27,6,6,0,0,1,1.76-4h0A6,6,0,0,1,43.09,0H62.46l.3,0a6,6,0,0,1,5.7,6V6h0V8.8h32l.39,0a4.7,4.7,0,0,1,4.31,4.43c0,.18,0,.32,0,.5v9.86a2.59,2.59,0,0,1-2.59,2.59H2.59A2.59,2.59,0,0,1,0,23.62V13.53H0a1.56,1.56,0,0,1,0-.31v0A4.72,4.72,0,0,1,3.88,8.88,10.4,10.4,0,0,1,5.65,8.8Zm42.1,52.7a4.77,4.77,0,0,1,9.49,0v37a4.77,4.77,0,0,1-9.49,0v-37Zm23.73-.2a4.58,4.58,0,0,1,5-4.06,4.47,4.47,0,0,1,4.51,4.46l-2,37a4.57,4.57,0,0,1-5,4.06,4.47,4.47,0,0,1-4.51-4.46l2-37ZM25,61.7a4.46,4.46,0,0,1,4.5-4.46,4.58,4.58,0,0,1,5,4.06l2,37a4.47,4.47,0,0,1-4.51,4.46,4.57,4.57,0,0,1-5-4.06l-2-37Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue