From fedc092d3229ac87b11f8f22b7d7e170e9bc2e88 Mon Sep 17 00:00:00 2001
From: Franck Cuny <franck@fcuny.net>
Date: Thu, 22 Apr 2021 12:44:27 -0700
Subject: layout: add a navbar

I want to differentiate blog's entries from more general notes. For
this, we create two menu entries, and add a navbar at the top.

The nav bar let us select between the two kind of articles: blogs or
notes. For now we have a single blog entry, and no notes.

The page to list entries is simplified: we use the same layout for all
lists (tags, notes, blogs).

The CSS is updated to support the new nav bar.
---
 static/css/custom.css | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

(limited to 'static')

diff --git a/static/css/custom.css b/static/css/custom.css
index 7592e8e..f363bee 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -38,7 +38,7 @@ h2 {
 }
 
 span.published, span.updated {
-    display: block;
+    display: center;
     font-style: oblique;
 }
 
@@ -92,3 +92,42 @@ blockquote {
     padding-left: 5px;
     font-style: italic;
 }
+
+nav {
+    display: flex;
+    flex: 2 0px;
+    justify-content: flex-end;
+    padding-left: 1em;
+    margin: 0 auto;
+    line-height: 0.2rem;
+}
+
+nav ul {
+    display: flex;
+    list-style-type: none;
+    margin: 0
+}
+
+nav a {
+    padding: 1em;
+    display: inline-block;
+    color: black;
+    font-family: sans-serif;
+    text-decoration: none;
+    transition: all 75ms ease-in;
+}
+
+nav a:hover {
+    color: #fff;
+    background-color: #007d9c;
+}
+
+nav a.menu-active:hover {
+    color: #fff;
+    background-color: #007d9c;
+}
+
+nav a.menu-active {
+    color: #007d9c;
+}
+
-- 
cgit 1.4.1