From 0df06c44bd8a97404a926802a8f33f4b7b8b8595 Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Fri, 25 Nov 2022 13:23:59 -0500
Subject: [PATCH] Add a navbar

---
 sass/styles/components/navbar.scss | 26 ++++++++++++++++++++++++++
 sass/styles/layout.scss            |  5 +++++
 sass/styles/typography.scss        |  1 +
 templates/base.html                |  6 ++++++
 templates/components/navbar.html   | 18 ++++++++++++++++++
 5 files changed, 56 insertions(+)
 create mode 100644 sass/styles/components/navbar.scss
 create mode 100644 sass/styles/layout.scss
 create mode 100644 templates/components/navbar.html

diff --git a/sass/styles/components/navbar.scss b/sass/styles/components/navbar.scss
new file mode 100644
index 0000000..f27cfaf
--- /dev/null
+++ b/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: "|";
+    }
+  }
+}
diff --git a/sass/styles/layout.scss b/sass/styles/layout.scss
new file mode 100644
index 0000000..6a067f1
--- /dev/null
+++ b/sass/styles/layout.scss
@@ -0,0 +1,5 @@
+.page {
+  & > .container {
+    max-width: 800px;
+  }
+}
diff --git a/sass/styles/typography.scss b/sass/styles/typography.scss
index 7a71634..8799421 100644
--- a/sass/styles/typography.scss
+++ b/sass/styles/typography.scss
@@ -18,6 +18,7 @@ span {
 }
 a {
   text-decoration: none;
+  color: blue;
 
   &:visited {
     color: blue;
diff --git a/templates/base.html b/templates/base.html
index 346f830..6838adf 100644
--- a/templates/base.html
+++ b/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">
diff --git a/templates/components/navbar.html b/templates/components/navbar.html
new file mode 100644
index 0000000..7329913
--- /dev/null
+++ b/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>
\ No newline at end of file