1
Fork 0

Style navbar

This commit is contained in:
Jake Howard 2020-05-03 14:52:27 +01:00
parent 5979741e0a
commit 7ee5538bd7
Signed by: jake
GPG key ID: 57AFB45680EDD477
8 changed files with 72 additions and 5 deletions

5
package-lock.json generated
View file

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

View file

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

View file

@ -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

View file

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

View file

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

View file

@ -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>

View file

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

View file

@ -1 +1 @@
<li><a href="{% url reverse %}">{{ text }}</a></li>
<li><a href="{% url reverse %}" class="nav-link"><code>~/{{ text | lower }}</code></a></li>