Style navbar

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",

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"

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
 

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;
+  }
+}

static/src/scss/variables.scss

@@ -0,0 +1,2 @@
+$primary: #E85537;
+$navbar-height: 45px;

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>

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" %}

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>