Add a navbar

sass/styles/components/navbar.scss

@@ -0,0 +1,26 @@
+.ewp-navbar {
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  hr {
+    margin: 0;
+    border-top: 2px solid;
+  }
+
+  .navbar-items {
+    width: max-content;
+    padding: 0;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+
+    & > li {
+      display: inline-block;
+    }
+
+    .separator {
+      content: "|";
+    }
+  }
+}

sass/styles/layout.scss

@@ -0,0 +1,5 @@
+.page {
+  & > .container {
+    max-width: 800px;
+  }
+}

sass/styles/typography.scss

@@ -18,6 +18,7 @@ span {
 }
 a {
   text-decoration: none;
+  color: blue;
 
   &:visited {
     color: blue;

templates/base.html

@@ -42,6 +42,7 @@
     <link rel="stylesheet" href="/styles/fixes/youtube.css">
     <link rel="stylesheet" href="/styles/typography.css">
     <link rel="stylesheet" href="/styles/utils.css">
+    <link rel="stylesheet" href="/styles/layout.css">
 
     {# Component styles #}
     {% block component_styles %}
@@ -53,6 +54,11 @@
     {# The whole page #}
     <div class="page">
 
+        {# Navbar #}
+        <div class="container">
+            {% include "components/navbar.html" %}
+        </div>
+
         {# Actual content #}
         <div id="content" class="container">
             <article class="markdown-body">

templates/components/navbar.html

@@ -0,0 +1,18 @@
+{% block component_styles %}
+{{ super() }}
+<link rel="stylesheet" href="/styles/components/navbar.css">
+{% endblock component_styles %}
+
+<div class="ewp-navbar">
+    <hr>
+    <ul class="navbar-items">
+        <li><a href="/">Home</a></li>
+        <li class="separator">|</li>
+        <li><a href="/blog">Blog</a></li>
+        <li class="separator">|</li>
+        <li><a href="#" role="button">More</a></li>
+        <li class="separator">|</li>
+        <li><a href="#" role="button">Profiles</a></li>
+    </ul>
+    <hr>
+</div>