repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Simplify navbar styling and disable variants

Browse source
This commit is contained in:
Jake Howard 2022-07-20 21:54:09 +01:00
parent 261d35385f
commit fafc0e8828
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/src/scss/_bulma_overrides.scss
View file

@ -9,6 +9,12 @@ $primary: #e85537;
$link: $primary; $link: $primary;
$dark: #17181c; $dark: #17181c;
$navbar-item-color: $grey-light;
$navbar-background-color: $dark;
$navbar-item-hover-color: $grey-lighter;
$navbar-item-hover-background-color: $navbar-background-color;
$navbar-colors: (); // Disable other variants to keep the size down
$code-background: none; $code-background: none;
$pre-background: none; $pre-background: none;
$code-padding: 0px; $code-padding: 0px;

8
static/src/scss/_navbar.scss
View file

@ -1,8 +1,8 @@
.navbar-item { .navbar-item.home-link,
font-family: $family-code; .navbar-item.navbar-icon {
color: $grey-lighter;
&:hover { &:hover {
background-color: black !important; color: $white;
color: $grey-light !important;
} }
} }

12
website/common/templates/common/navbar.html
View file

@ -1,8 +1,8 @@
{% load wagtailcore_tags %} {% load wagtailcore_tags %}
<nav class="navbar has-background-black has-text-white" role="navigation" aria-label="main navigation"> <nav class="navbar is-family-code" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item has-text-white" href="{% pageurl homepage %}"> <a class="navbar-item home-link" href="{% pageurl homepage %}">
/home/theorangeone /home/theorangeone
</a> </a>
@ -13,22 +13,22 @@
</a> </a>
</div> </div>
<div id="navbar" class="navbar-menu has-background-black"> <div id="navbar" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
{% for nav_page in nav_pages %} {% for nav_page in nav_pages %}
<a class="navbar-item has-text-grey" href="{% pageurl nav_page %}"> <a class="navbar-item" href="{% pageurl nav_page %}">
~/{{ nav_page.slug }} ~/{{ nav_page.slug }}
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
<div class="navbar-end is-hidden-touch mr-2"> <div class="navbar-end is-hidden-touch mr-2">
<a class="navbar-item has-text-white"> <a class="navbar-item navbar-icon">
<span class="icon"> <span class="icon">
<i class="fab fa-github" aria-hidden="true"></i> <i class="fab fa-github" aria-hidden="true"></i>
</span> </span>
</a> </a>
<a class="navbar-item has-text-white" id="search-button"> <a class="navbar-item navbar-icon" id="search-button">
<span class="icon"> <span class="icon">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
</span> </span>