CSS variables

src/lib/apps/todoApp.svelte

@@ -59,25 +59,28 @@
 input {
     padding: 5px;
     margin: 0px;
-    border: solid rgb(161, 161, 161) 1px;
+    border: solid var(--gray) 1px;
     border-radius: 5px;
 }
 
 button {
     padding: 5px;
     margin: 0px;
-    border: solid rgb(182, 182, 182) 1px;
+    background-color: var(--lightgray);
+    border: solid var(--gray) 1px;
     border-radius: 5px;
 }
 
 hr {
-    border: 1px solid rgb(182, 182, 182);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--gray);
 }
 
 .panel {
     background-color: rgb(245, 253, 255);
     padding: 10px;
-    border: solid rgb(182, 182, 182) 1px;
+    border: solid var(--gray) 1px;
     border-radius: 5px;
 }
 
@@ -113,7 +116,7 @@ hr {
     padding: 10px;
     margin: 5px 0px 5px 0px;
     background-color: rgb(255, 255, 255);
-    border: solid rgb(182, 182, 182) 1px;
+    border: solid var(--gray) 1px;
     border-radius: 5px;
     display: flex;
     flex-wrap: wrap;

src/lib/components/footer.svelte

@@ -4,4 +4,10 @@
         and 
         <a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
     </p>
-</footer>
+</footer>
+
+<style>
+    footer {
+        margin: 20px;
+    }
+</style>

src/lib/components/nav.svelte

@@ -1,16 +1,21 @@
-<nav class = "bg-gray-200 w-60 border-black border-2 rounded text-center">
-    <a class = "nav-button" href="/">Home</a>
+<nav>
+    <a class = "nav-button" href="/">home</a>
     <a class = "nav-button" href="/about">about</a>
 </nav>
 
 <style>
+    nav {
+        margin-bottom: 1rem;
+        display: flex;
+    }
     .nav-button {
         margin: 5px;
-        padding: 5px;
-        background-color: rgb(235, 235, 235);
+        padding: 8px;
+        background-color: var(--lightgray);
+        border-radius: 5px;
     }
 
     .nav-button:hover {
-        background-color: rgb(206, 206, 206);
+        background-color: var(--gray);
     }
 </style>

src/routes/__layout.svelte

@@ -3,22 +3,25 @@
     import Footer from "$lib/components/footer.svelte"
 </script>
 
-<div class="p-10 mx-auto flex flex-col items-center max-w-2xl site">
+<div class="site">
 <Nav/>
 <slot></slot>
 <Footer/>
 </div>
 
 <style>
-
 :global(*) {
-    padding: 0;
+    padding: 0px;
+    margin: 0px;
     text-decoration: none;
-    color : black
+    color : black;
+
+    --gray: rgb(160, 160, 160);
+    --lightgray: rgb(240, 240, 240);
 }
 
 .site {
-    padding: 10px;
+    padding: 2em;
     margin-left: auto;
     margin-right: auto;
     max-width: 50em;

src/routes/index.svelte

@@ -2,4 +2,10 @@
     import ToDo from "$lib/apps/todoApp.svelte"
 </script>
 <h1>APPS</h1>
-<ToDo/>
+<ToDo/>
+
+<style>
+    h1 {
+        margin: 10px;
+    }
+</style>