From 7ee5538bd70040f0b7194beeb4fe9394e7746726 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 3 May 2020 14:52:27 +0100
Subject: [PATCH] Style navbar

---
 package-lock.json               |  5 ++++
 package.json                    |  1 +
 scripts/build-static.sh         |  3 ++
 static/src/scss/index.scss      | 53 +++++++++++++++++++++++++++++++++
 static/src/scss/variables.scss  |  2 ++
 templates/base.html             |  4 +--
 templates/navigation/index.html |  7 +++--
 templates/navigation/item.html  |  2 +-
 8 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 static/src/scss/variables.scss

diff --git a/package-lock.json b/package-lock.json
index 648c610..ff43bb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1544,6 +1544,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index d78d559..c0d5f14 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "homepage": "https://github.com/RealOrangeOne/website#readme",
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.13.0",
+    "bootstrap": "4.4.1",
     "materialize-css": "1.0.0",
     "parcel-bundler": "1.12.4",
     "sass": "1.26.5"
diff --git a/scripts/build-static.sh b/scripts/build-static.sh
index 02988b7..f3489e5 100755
--- a/scripts/build-static.sh
+++ b/scripts/build-static.sh
@@ -13,6 +13,9 @@ parcel build --no-autoinstall --no-source-maps -d static/build/js static/src/js/
 # Separate step because parcel process images itself, and breaks them
 sass -I node_modules/ -s compressed --no-source-map static/src/scss/index.scss static/build/css/index.css
 
+# Install bootstrap-reboot
+cp node_modules/bootstrap/dist/css/bootstrap-reboot.min.css static/build/css/bootstrap-reboot.min.css
+
 # Install materialize CSS
 cp node_modules/materialize-css/dist/js/materialize.min.js static/build/js/materialize.min.js
 
diff --git a/static/src/scss/index.scss b/static/src/scss/index.scss
index 8e04fb7..78d72de 100644
--- a/static/src/scss/index.scss
+++ b/static/src/scss/index.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 @import "materialize-css/sass/materialize";
 
 @import "homepage";
@@ -11,6 +13,25 @@ body {
   background-color: #17181C;
 }
 
+a {
+  color: $primary;
+
+  &:hover {
+    @extend .grey-text, .text-lighten-3;
+    transition: color 0.5s;
+
+    text-decoration: none;
+  }
+
+  &.colour-invert {
+    @extend .grey-text, .text-lighten-3;
+
+    &:hover {
+      color: $primary;
+    }
+  }
+}
+
 main {
   flex: 1 0 auto;
 }
@@ -41,3 +62,35 @@ footer.page-footer {
     height: 100%;
   }
 }
+
+nav {
+  height: initial;
+  line-height: initial;
+
+  a.sidenav-trigger {
+    padding: 0 5px;
+  }
+}
+
+nav ul, ul.sidenav {
+  padding: 7.5px 5px;
+
+  .nav-link {
+    @extend .grey-text;
+
+    &:hover {
+      @extend .grey-text, .text-lighten-2;
+    }
+  }
+
+  .index-link {
+    &:hover {
+      color: $primary !important;
+    }
+  }
+
+  code {
+    color: inherit;
+    font-size: 14px;
+  }
+}
diff --git a/static/src/scss/variables.scss b/static/src/scss/variables.scss
new file mode 100644
index 0000000..3ae7fde
--- /dev/null
+++ b/static/src/scss/variables.scss
@@ -0,0 +1,2 @@
+$primary: #E85537;
+$navbar-height: 45px;
diff --git a/templates/base.html b/templates/base.html
index 1296408..37e606d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,6 +16,7 @@
     <title>{% block title %}{% endblock %} :: TheOrangeOne</title>
 
     {% sri "css/font-awesome.min.css" %}
+    {% sri "css/bootstrap-reboot.min.css" %}
     {% sri "css/index.css" %}
 
   </head>
@@ -23,8 +24,7 @@
     <header id="top">
       <nav>
         <div class="nav-wrapper black">
-          <a href="#" class="brand-logo right">Logo</a>
-          <a href="#" data-target="mobile-nav" class="sidenav-trigger">menu</a>
+          <a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="fas fa-bars"></i></a>
           <ul class="left hide-on-med-and-down">
             {% include "navigation/index.html" %}
           </ul>
diff --git a/templates/navigation/index.html b/templates/navigation/index.html
index 0e3f59d..d4d4c78 100644
--- a/templates/navigation/index.html
+++ b/templates/navigation/index.html
@@ -1,2 +1,5 @@
-{% include "navigation/item.html" with reverse="homepage" text="Home" %}
-{% include "navigation/item.html" with reverse="about" text="About" %}
+<li><a href="{% url 'homepage' %}" class="index-link"><code>/home/theorangeone</code></a></li>
+
+{% include "navigation/item.html" with reverse="about" text="about" %}
+{% include "navigation/item.html" with reverse="about" text="about" %}
+{% include "navigation/item.html" with reverse="about" text="about" %}
diff --git a/templates/navigation/item.html b/templates/navigation/item.html
index f129bba..7b9b456 100644
--- a/templates/navigation/item.html
+++ b/templates/navigation/item.html
@@ -1 +1 @@
-<li><a href="{% url reverse %}">{{ text }}</a></li>
+<li><a href="{% url reverse %}" class="nav-link"><code>~/{{ text | lower }}</code></a></li>