diff --git a/src/lib/apps/todoApp.svelte b/src/lib/apps/todoApp.svelte
index 6341402..66f2db0 100644
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@@ -45,7 +45,7 @@
-
TODO
+
todo
@@ -71,6 +71,7 @@
* {
--cream: #FEF9EF;
--blue: #227c9d;
+ --blue-disabled: #aabac0;
--green: #17C3B2;
--yellow: #FFCB77;
--red: #FE6D73;
@@ -78,23 +79,33 @@
.panel {
- padding: 10px;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
background-color: var(--cream);
+ 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) 1px;
- border-radius: 5px;
+ border: solid var(--cream) 0px;
+ border-radius: 10px;
}
}
+.title {
+ margin-left: 2rem;
+ font-weight: 400;
+ font-size: 3rem;
+ color: var(--yellow);
+}
+
hr {
- margin-top: 10px;
- margin-bottom: 20px;
- border: 1px solid var(--yellow);
+ margin-left: 1rem;
+ margin-bottom: 1rem;
+ border: 2px solid var(--yellow);
}
button {
@@ -103,106 +114,118 @@ button {
background-color: var(--blue);
border: solid var(--blue) 1px;
border-radius: 5px;
- color: var(--cream);
+ color: white;
+ font-family: 'Atkinson Hyperlegible', sans-serif;
+ font-size: 1rem;
}
.todo-input {
font-size: 0px;
+ margin: 1rem;
}
.todo-text {
- padding: 7px;
+ padding: 4px;
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;
}
.todo-text:focus {
outline: none;
border-bottom-color: var(--blue);
- /* border-left-color: var(--blue);
- border-top-color: var(--blue); */
}
.todo-add {
- padding: 8px;
- border-radius: 0px;
- border-bottom-right-radius: 5px;
- border-top-right-radius: 5px;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
}
.disabled {
+ background-color: var(--blue-disabled);
+ border-color: var(--blue-disabled);
+}
+
+button:active {
background-color: var(--yellow);
border-color: var(--yellow);
color: black;
}
-button:active {
- background-color: var(--yellow);
- color: black;
-}
-
-.title {
- padding: 0px;
- margin: 0px;
- margin-left: 5px;
- font-weight: 400;
- font-size: 1.5rem;
- color: var(--yellow);
+button:active.disabled {
+ background-color: var(--blue-disabled);
+ border-color: var(--blue-disabled);
+ color: white;
}
.todo-filter {
- padding-top: 10px;
- padding-bottom: 10px;
+ margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.todo-filter button {
- margin-right: 5px;
+ margin-right: 0.5rem;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
}
.todo-list {
- display: flex;
- flex-direction: column;
- min-height: 10em;
+ padding: 1rem;
+ padding-bottom: 0.5rem;
+ background-color: var(--blue-disabled);
+ /* list
+ * padding 1.5rem
+ todo
+ * content 1.0rem
+ * padding 1.0rem
+ * marging 0.5rem
+ button
+ * padding 6px
+ * border 6px
+ total
+ (1.5 + 2.5*3)rem (9rem)
+ + (12*3)px (36px)
+ */
+ min-height: calc(11.5rem + 48px);
+
}
.todo {
- padding: 10px;
- margin: 5px 0px 5px 0px;
+ padding: 0.5rem;
+ margin-bottom: 0.5rem;
background-color: var(--yellow);
border-radius: 5px;
display: flex;
- flex-wrap: wrap;
align-items: center;
- font-size: 1.2rem;
}
.todo.done {
- /* background-color: #FEF9EF; */
-}
-
-.done p {
- /* text-decoration: line-through; */
- color: var(--cream);
+ background-color: var(--cream);
}
.todo button {
+ padding: 3px;
margin-left: auto;
background-color: var(--green);
- border-color: var(--green);
- font-size: 1rem;
+ border: solid 3px var(--green);
color: var(--cream)
}
.todo.done button {
background-color: var(--red);
border-color: var(--red);
- color:var(--cream);
+ color: var(--cream);
+}
+
+.todo button:active {
+ background-color: var(--yellow);
+ color: black;
}
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 604417f..8f9f6a6 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -10,6 +10,8 @@
\ No newline at end of file