CSS styling of sidebar

2 files changed, 34 insertions, 9 deletions

diff --git a/static/default.css b/static/default.css
index ad13930..a35597c 100644
--- a/static/default.css
+++ b/static/default.css
@@ -30,29 +30,48 @@ footer {
 /* Style */
 body {
     background-color: #c0dee2;
-    font-family: sans-serif;
+    font-family: helvetica, sans-serif;
 }
 
 header > h1 {
-    font-size: 20pt;
+    font-size: 18pt;
     text-align: center;
+    padding: 0;
+    margin: 4px;
+}
+
+nav h2 {
+    font-size: 14pt;
+    font-weight: normal;
+    margin: 0 8px 0 0;
+    padding: 8px 16px;
+    background-color: #eee;
 }
 
 nav ul {
     list-style-type: none;
-    margin: 0;
+    margin: 0 0 8px 0;
     padding: 0;
 }
 
 nav li a {
     display: block;
     color: #000;
-    background-color: #eee;
+    background-color: #fff;
     padding: 8px 16px;
-    margin: 0 8px 8px 0;
+    margin: 0 8px 0 0;
     text-decoration: none;
+    font-size: 12pt;
+}
+
+nav li a:hover {
+    background-color: #ccc;
 }
 
 main {
     background-color: #eee;
 }
+
+footer {
+    text-align: center;
+}
diff --git a/templates/layout.hbs b/templates/layout.hbs
index 90e5e6f..bd47622 100644
--- a/templates/layout.hbs
+++ b/templates/layout.hbs
@@ -11,17 +11,23 @@
             <h1>{{ title }}</h1>
         </header>
         <nav>
+            <h2>Templates</h2>
             <ul>
-                <li><a href="">Navigation 1</a></li>
-                <li><a href="">Navigation 2</a></li>
-                <li><a href="">Navigation 3</a></li>
+                <li><a href="">Exercise</a></li>
+                <li><a href="">Body Weight</a></li>
+                <li><a href="">Book List</a></li>
+            </ul>
+
+            <h2>Settings</h2>
+            <ul>
+                <li><a href="">Profile</a></li>
             </ul>
         </nav>
         <main>
             {{ ~> page }}
         </main>
         <footer>
-            <p>Footer goes here</p>
+            <p>© 2020 Kjetil Ørbekk Some Rights Reserved
         </footer>
     </body>
 </html>