Fix mobile navbar

This commit is contained in:
Jeremy Thomas 2018-04-13 17:03:40 +01:00
parent ddd15f70e3
commit a90a5153b9
10 changed files with 33 additions and 27 deletions

View file

@ -10,7 +10,9 @@
<div id="ghbtns" class="intro-ghbtns">
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<img src="https://img.shields.io/npm/dm/bulma.svg">
<a href="https://www.npmjs.com/package/bulma" target="_blank" rel="nofollow">
<img src="https://img.shields.io/npm/dm/bulma.svg">
</a>
</div>
{% assign npmInstall = 'npm install bulma' %}

View file

@ -272,22 +272,11 @@ document.addEventListener('DOMContentLoaded', () => {
const specialShadow = document.getElementById('specialShadow');
const NAVBAR_HEIGHT = 52;
const THRESHOLD = 160;
let navbarOpen = false;
let horizon = NAVBAR_HEIGHT;
let whereYouStoppedScrolling = 0;
let scrollFactor = 0;
let currentTranslate = 0;
navbarBurger.addEventListener('click', el => {
navbarOpen = !navbarOpen;
if (navbarOpen) {
rootEl.classList.add('bd-is-clipped-touch');
} else {
rootEl.classList.remove('bd-is-clipped-touch');
}
});
// Anchors highlight
let past_anchors = [];

View file

@ -7,7 +7,15 @@ name: "Website redesign"
icon: "star"
---
The Bulma website has been widely redesigned!
The Bulma website has been widely redesigned! There's been a lot of work, to say the least:
<figure>
<img src="/images/blog/v7/files.png" alt="files" width="312" height="37">
<br>
<img src="/images/blog/v7/diff.png" alt="diff" width="167" height="38">
</figure>
Just see for yourself!
<div class="columns">
<div class="column">

View file

@ -249,11 +249,18 @@
font-weight: $weight-semibold
.intro-ghbtns
height: 30px
margin-bottom: 26px
min-height: 30px
iframe,
a,
img
height: 30px
a
display: inline-block
min-width: 100px
vertical-align: top
img
display: block
.intro-npm
background: $black-ter

View file

@ -10682,15 +10682,26 @@ svg {
}
.intro-ghbtns {
height: 30px;
margin-bottom: 26px;
min-height: 30px;
}
.intro-ghbtns iframe,
.intro-ghbtns a,
.intro-ghbtns img {
height: 30px;
}
.intro-ghbtns a {
display: inline-block;
min-width: 100px;
vertical-align: top;
}
.intro-ghbtns img {
display: block;
}
.intro-npm {
background: #242424;
border-radius: 4px;

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -274,22 +274,11 @@ document.addEventListener('DOMContentLoaded', function () {
var specialShadow = document.getElementById('specialShadow');
var NAVBAR_HEIGHT = 52;
var THRESHOLD = 160;
var navbarOpen = false;
var horizon = NAVBAR_HEIGHT;
var whereYouStoppedScrolling = 0;
var scrollFactor = 0;
var currentTranslate = 0;
navbarBurger.addEventListener('click', function (el) {
navbarOpen = !navbarOpen;
if (navbarOpen) {
rootEl.classList.add('bd-is-clipped-touch');
} else {
rootEl.classList.remove('bd-is-clipped-touch');
}
});
// Anchors highlight
var past_anchors = [];