From 762c185d32621fc7511fe0afc2d6a2501e4c11c1 Mon Sep 17 00:00:00 2001
From: Mike Nikles <mikenikles@pm.me>
Date: Sun, 28 Nov 2021 02:27:59 +0000
Subject: [PATCH] Apply CSS styles.

---
 src/app.css                | 29 ++++++++++++
 src/lib/todo-item.svelte   | 90 +++++++++++++++++++++++++++++++++++---
 src/routes/__layout.svelte |  7 +++
 src/routes/index.svelte    | 52 ++++++++++++++++++----
 4 files changed, 164 insertions(+), 14 deletions(-)
 create mode 100644 src/app.css
 create mode 100644 src/routes/__layout.svelte

diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..2bbb30d
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,29 @@
+:root {
+  font-family: Arial, Helvetica, sans-serif;
+  --primary-color: #b9c6d2;
+  --secondary-color: #d0dde9;
+  --tertiary-color: #edf0f8;
+}
+
+body {
+  background-color: var(--primary-color);
+  background: linear-gradient(
+    180deg,
+    var(--primary-color),
+    var(--secondary-color),
+    var(--tertiary-color)
+  );
+  margin: 0;
+  min-height: 100vh;
+}
+
+h1 {
+  text-align: center;
+  font-size: 2rem;
+}
+
+@media (min-width: 720px) {
+  h1 {
+    font-size: 2.4rem;
+  }
+}
\ No newline at end of file
diff --git a/src/lib/todo-item.svelte b/src/lib/todo-item.svelte
index 238934a..9868996 100644
--- a/src/lib/todo-item.svelte
+++ b/src/lib/todo-item.svelte
@@ -1,15 +1,95 @@
-<div>
+<style>
+  .todo {
+    display: grid;
+		grid-template-columns: 2rem 1fr 2rem;
+		grid-gap: 0.5rem;
+		align-items: center;
+		margin: 0 0 0.5rem 0;
+		padding: 0.5rem;
+		background-color: white;
+		border-radius: 8px;
+		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
+		transform: translate(-1px, -1px);
+		transition: filter 0.2s, transform 0.2s;
+  }
+
+  .todo button {
+		width: 2em;
+		height: 2em;
+		border: none;
+		background-color: transparent;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+  }
+
+  .todo input {
+    flex: 1;
+		padding: 0.5em 2em 0.5em 0.8em;
+		border-radius: 3px;
+  }
+
+  button.toggle {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		box-sizing: border-box;
+		background-size: 1em auto;
+  }
+
+  .text {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex: 1;
+  }
+
+  .save {
+    position: absolute;
+		right: 0;
+		opacity: 0;
+		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+  }
+
+  .todo input:focus + .save,
+  .save:focus {
+    transition: opacity 0.2s;
+    opacity: 1;
+  }
+
+  .delete {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+		opacity: 0.2;
+  }
+
+  .delete:hover,
+  .delete:focus {
+    transition: opacity 0.2s;
+    opacity: 1;
+  }
+  
+  /* TODO: Uncomment when the API endpoints are available
+  .done {
+    transform: none;
+    opacity: 0.4;
+    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
+  }
+  
+  .done .toggle {
+    background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  } */
+</style>
+
+<div class="todo">
   <form action="" method="">
     <input type="hidden" name="done" value="" />
-    <button aria-label="Mark done/not done">Done/NotDone</button>
+    <button aria-label="Mark done/not done" class="toggle"></button>
   </form>
 
-  <form action="" method="">
+  <form action="" method="" class="text">
     <input type="text" />
-    <button aria-label="Save todo">Save</button>
+    <button aria-label="Save todo" class="save"></button>
   </form>
   
   <form action="" method="">
-    <button aria-label="Delete todo">Delete</button>
+    <button aria-label="Delete todo" class="delete"></button>
   </form>
 </div>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
new file mode 100644
index 0000000..bae4496
--- /dev/null
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import "../app.css";
+</script>
+
+<main>
+  <slot />
+</main>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 94bfe9b..cca60ed 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -4,16 +4,50 @@
   const title = "Todo";
 </script>
 
+<style>
+  .todos {
+    width: 100%;
+    max-width: 42rem;
+    margin: 4rem auto 0 auto;
+  }
+
+  .new {
+    margin: 0 0 0.5rem 0;
+  }
+
+  .new input {
+    font-size: 28px;
+    width: 100%;
+    padding: 0.5em 1em 0.3em 1em;
+    box-sizing: border-box;
+		background: rgba(255, 255, 255, 0.05);
+		border-radius: 8px;
+		text-align: center;
+  }
+
+  .todos :global(input) {
+    border: 1px solid transparent;
+  }
+
+  .todos :global(input:focus-visible) {
+    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ff3e00 !important;
+    outline: none;
+  }
+</style>
+
 <svelte:head>
   <title>{title}</title>
 </svelte:head>
 
-<h1>{title}</h1>
-
-<form action="" method="">
-  <input type="text" name="text" aria-label="Add a todo" placeholder="+ type to add a todo" />
-</form>
-
-<TodoItem />
-<TodoItem />
-<TodoItem />
\ No newline at end of file
+<div class="todos">
+  <h1>{title}</h1>
+  
+  <form action="" method="" class="new">
+    <input type="text" name="text" aria-label="Add a todo" placeholder="+ type to add a todo" />
+  </form>
+  
+  <TodoItem />
+  <TodoItem />
+  <TodoItem />
+</div>
\ No newline at end of file