Style navbar
This commit is contained in:
parent
5979741e0a
commit
7ee5538bd7
GPG key ID:
57AFB45680EDD477
8 changed files with 72 additions and 5 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
static/src/scss/variables.scss
Normal file
2
static/src/scss/variables.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
$primary: #E85537;
|
||||
$navbar-height: 45px;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" %}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<li><a href="{% url reverse %}">{{ text }}</a></li>
|
||||
<li><a href="{% url reverse %}" class="nav-link"><code>~/{{ text | lower }}</code></a></li>
|
||||
|
|
|
|||
Reference in a new issue