color coordinate

tubbymemes/static/css/custom.css

@@ -32,3 +32,16 @@
   background-color: rgba(242,37,52,.2);
   border: 2px solid rgba(243,37,52,1);
 }
+
+.navbar {
+  background-color: #ffecf5;
+}
+
+.navbar-item-link {
+  color: #ff7fbf !important;
+}
+
+.navbar-item-link:hover {
+  background-color: #ff7fbf !important;
+  color: #fff !important;
+}

tubbymemes/templates/includes/navbar.html

@@ -11,12 +11,12 @@
     </div>
 
     <div class="navbar-end">
-      <a class="navbar-item" href="{{ url_for('meme.index') }}" up-preload up-follow=".container">
+      <a class="navbar-item navbar-item-link" {% if request.path == '/' %}style="border-bottom: 4px solid #ff7fbf; padding-bottom: 4px;"{% endif %} href="{{ url_for('meme.index') }}" up-preload up-follow=".container">
-        Home
+        <strong>Home</strong>
       </a>
 
-      <a class="navbar-item" href="{{ url_for('meta.about') }}" up-preload up-follow=".container">
+      <a class="navbar-item navbar-item-link" {% if request.path == '/about' %}style="border-bottom: 4px solid #ff7fbf; padding-bottom: 4px;"{% endif %} href="{{ url_for('meta.about') }}" up-preload up-follow=".container">
-        About
+        <strong>About</strong>
       </a>
       <div class="navbar-item">
         <div class="buttons">