Cleaned up spacing in the rest of the site

src/lib/components/footer.svelte

@@ -8,6 +8,7 @@
 
 <style>
     footer {
-        margin: 20px;
+        margin: 1em;
+        padding: 1em;
     }
 </style>

src/lib/components/nav.svelte

@@ -9,17 +9,13 @@
 
 <style>
     nav {
-        margin-bottom: 1rem;
+        margin: 1em;
+        padding: 1em;
         display: flex;
     }
     .nav-button {
-        margin: 5px;
         padding: 8px;
-        background-color: var(--lightgray);
-        border-radius: 5px;
+        border-bottom: solid 1px black;
     }
 
-    .nav-button:hover {
-        background-color: var(--gray);
-    }
 </style>

src/routes/__layout.svelte

@@ -14,6 +14,7 @@
     padding: 0px;
     margin: 0px;
     text-decoration: none;
+    list-style-type: none;
     color : black;
 
     --gray: rgb(160, 160, 160);

src/routes/about.svelte

@@ -1,2 +1,11 @@
-<h1>About this</h1>
-<p>This is a test website using sveltekit</p>
+<div class = "panel">
+    <h1>About this</h1>
+    <p>This is a test website using sveltekit</p>
+</div>
+
+<style>
+    .panel {
+        margin: 1em;
+        padding: 1em;
+    }
+</style>

src/routes/index.svelte

@@ -1,12 +1,22 @@
 
-<h1>APPS</h1>
+<div class = "panel">
+    <h1>APPS</h1>
+    <ul>
+        <li><a href="/apps/todo">todo</a></li>
+    </ul>    
+</div>
 
-<ul>
-    <li><a href="/apps/todo">todo</a></li>
-</ul>
 
 <style>
-    h1 {
-        margin: 10px;
+    .panel {
+        margin: 1em;
+        padding: 1em;
+    }
+
+    ul {
+        margin: 2em;
+    }
+    li {
+        list-style-type:circle;
     }
 </style>