less class!

static/css/style.css

@@ -27,37 +27,37 @@ main {
 }
 
 /* Navigation bar across all of the pages */
-.navbar {
+header nav {
   text-align: center;
 }
 
-.navbar li {
+header nav li {
   display: inline-block;
 }
 
 /* Maybe do this only with 'large' screens */
-.navbar p::after {
+header nav p::after {
   content: "·";
   padding: 10px;
 }
 
 /* breakpoint */
 @media only screen and (max-width: 640px) {
-  .navbar p::after {
+  header nav p::after {
     padding: 6px;
   }
 }
 
-.navbar li:last-child p::after {
+header nav li:last-child p::after {
   content: "";
 }
 
-.navbar a {
+header nav a {
   text-decoration: none;
   color: var(--link-color);
 }
 
-.navbar a:hover {
+header nav a:hover {
   text-decoration: underline;
 }
 

templates/navbar.html

@@ -1,5 +1,5 @@
 {{#data}}{{#navbar}}
-<nav class="navbar">
+<nav>
   <ul>
     <li>
       <!-- prettier-ignore -->