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;
$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;
$pre-background: none;
$code-padding: 0px;

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

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

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

@ -1,8 +1,8 @@
{% 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">
<a class="navbar-item has-text-white" href="{% pageurl homepage %}">
<a class="navbar-item home-link" href="{% pageurl homepage %}">
/home/theorangeone
</a>
@ -13,22 +13,22 @@
</a>
</div>
<div id="navbar" class="navbar-menu has-background-black">
<div id="navbar" class="navbar-menu">
<div class="navbar-start">
{% 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 }}
</a>
{% endfor %}
</div>
<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">
<i class="fab fa-github" aria-hidden="true"></i>
</span>
</a>
<a class="navbar-item has-text-white" id="search-button">
<a class="navbar-item navbar-icon" id="search-button">
<span class="icon">
<i class="fas fa-search" aria-hidden="true"></i>
</span>