Add spaced navbar

This commit is contained in:
Jeremy Thomas 2018-04-11 01:38:07 +01:00
parent 077763cb74
commit 89f2c47003
14 changed files with 36 additions and 15 deletions

View File

@ -1,4 +1,4 @@
<nav id="navbar" class="navbar"> <nav id="navbar" class="navbar is-spaced">
<div class="container"> <div class="container">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}"> <a class="navbar-item" href="{{ site.url }}">
@ -47,7 +47,7 @@
<a class="navbar-link" href="{{ site.url }}{{ link.path }}"> <a class="navbar-link" href="{{ site.url }}{{ link.path }}">
{{ link.name }} {{ link.name }}
</a> </a>
<div id="moreDropdown" class="navbar-dropdown is-boxed"> <div id="moreDropdown" class="navbar-dropdown">
{% for link_id in site.data.links.more %} {% for link_id in site.data.links.more %}
{% assign link = site.data.links.by_id[link_id] %} {% assign link = site.data.links.by_id[link_id] %}
<a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}"> <a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}">

View File

@ -6,11 +6,11 @@
<script src="https://player.vimeo.com/api/player.js" ></script> <script src="https://player.vimeo.com/api/player.js" ></script>
<script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script> <script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
<script> <script>
WebFont.load({ WebFontConfig = {
google: { google: {
families: ['Nunito:400,700'] families: ['Nunito:400,700']
} }
}); };
(function(d) { (function(d) {
var wf = d.createElement('script'), s = d.scripts[0]; var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'; wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';

View File

@ -6496,7 +6496,6 @@ body.has-navbar-fixed-bottom {
a.navbar-item, a.navbar-item,
.navbar-link { .navbar-link {
border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
@ -6631,13 +6630,23 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar-menu, .navbar-menu,
.navbar-start, .navbar-start,
.navbar-end { .navbar-end {
align-items: center; align-items: stretch;
display: flex; display: flex;
} }
.navbar { .navbar {
min-height: 3.25rem; min-height: 3.25rem;
}
.navbar.is-spaced {
padding: 1rem 2rem; padding: 1rem 2rem;
} }
.navbar.is-spaced .navbar-start,
.navbar.is-spaced .navbar-end {
align-items: center;
}
.navbar.is-spaced a.navbar-item,
.navbar.is-spaced .navbar-link {
border-radius: 4px;
}
.navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active,
.navbar.is-transparent .navbar-link:hover, .navbar.is-transparent .navbar-link:hover,
.navbar.is-transparent .navbar-link.is-active { .navbar.is-transparent .navbar-link.is-active {
@ -6672,7 +6681,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
transform: rotate(135deg) translate(0.25em, -0.25em); transform: rotate(135deg) translate(0.25em, -0.25em);
} }
.navbar-item.has-dropdown-up .navbar-dropdown { .navbar-item.has-dropdown-up .navbar-dropdown {
border-bottom: 1px solid #dbdbdb; border-bottom: 2px solid #dbdbdb;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
border-top: none; border-top: none;
bottom: 100%; bottom: 100%;
@ -6682,7 +6691,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block; display: block;
} }
.navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
transform: translateY(0); transform: translateY(0);
@ -6708,7 +6717,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
background-color: white; background-color: white;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-top: 1px solid #dbdbdb; border-top: 2px solid #dbdbdb;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
display: none; display: none;
font-size: 0.875rem; font-size: 0.875rem;
@ -6733,7 +6742,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
background-color: whitesmoke; background-color: whitesmoke;
color: #3273dc; color: #3273dc;
} }
.navbar-dropdown.is-boxed { .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
border-radius: 6px; border-radius: 6px;
border-top: none; border-top: none;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);

Binary file not shown.

After

Width:  |  Height:  |  Size: 739 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 928 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 957 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -1,5 +1,8 @@
$navbar-background-color: $white !default $navbar-background-color: $white !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default $navbar-height: 3.25rem !default
$navbar-padding: 1rem 2rem !default
$navbar-z: 30 !default $navbar-z: 30 !default
$navbar-fixed-z: 30 !default $navbar-fixed-z: 30 !default
@ -19,7 +22,7 @@ $navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default $navbar-tab-active-border-bottom-width: 3px !default
$navbar-dropdown-background-color: $white !default $navbar-dropdown-background-color: $white !default
$navbar-dropdown-border-top: 1px solid $border !default $navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default $navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default $navbar-dropdown-arrow: $link !default
$navbar-dropdown-radius: $radius-large !default $navbar-dropdown-radius: $radius-large !default
@ -44,7 +47,7 @@ $navbar-divider-height: 2px !default
.navbar .navbar
background-color: $navbar-background-color background-color: $navbar-background-color
box-shadow: 0 2px 0 0 $background box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
min-height: $navbar-height min-height: $navbar-height
position: relative position: relative
z-index: $navbar-z z-index: $navbar-z
@ -153,7 +156,7 @@ body
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
border-radius: $radius // background-color: coral
cursor: pointer cursor: pointer
&:hover, &:hover,
&.is-active &.is-active
@ -254,11 +257,18 @@ a.navbar-item,
.navbar-menu, .navbar-menu,
.navbar-start, .navbar-start,
.navbar-end .navbar-end
align-items: center align-items: stretch
display: flex display: flex
.navbar .navbar
min-height: $navbar-height min-height: $navbar-height
padding: 1rem 2rem &.is-spaced
padding: $navbar-padding
.navbar-start,
.navbar-end
align-items: center
a.navbar-item,
.navbar-link
border-radius: $radius
&.is-transparent &.is-transparent
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
@ -302,6 +312,7 @@ a.navbar-item,
&.is-hoverable:hover &.is-hoverable:hover
.navbar-dropdown .navbar-dropdown
display: block display: block
.navbar.is-spaced &,
&.is-boxed &.is-boxed
opacity: 1 opacity: 1
pointer-events: auto pointer-events: auto
@ -344,6 +355,7 @@ a.navbar-item,
&.is-active &.is-active
background-color: $navbar-dropdown-item-active-background-color background-color: $navbar-dropdown-item-active-background-color
color: $navbar-dropdown-item-active-color color: $navbar-dropdown-item-active-color
.navbar.is-spaced &,
&.is-boxed &.is-boxed
border-radius: $navbar-dropdown-boxed-radius border-radius: $navbar-dropdown-boxed-radius
border-top: none border-top: none