yuzu-emu/yuzu-emu.github.io
1
0
Fork 0
mirror of https://github.com/yuzu-emu/yuzu-emu.github.io.git synced 2024-12-02 13:14:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Changed navbar from is-light to is-dark, updated SCSS to use dark theme.

Browse Source
This commit is contained in:
Chris 2018-01-06 01:48:28 -05:00
parent 67cae77ebc
commit 3fd3554a1b
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/layouts/partials/header_homepage.html
View File

@ -1,6 +1,6 @@
<section id="homepage-hero" class="hero is-medium is-info is-bold"> <section id="homepage-hero" class="hero is-medium is-info is-bold">
<div class="hero-head"> <div class="hero-head">
<nav class="navbar is-fixed-top" id="hero-navbar"> <nav id="hero-navbar" class="navbar is-dark is-size-6 is-fixed-top" role="navigation" aria-label="main navigation">
{{ partial "nav_contents" . }} {{ partial "nav_contents" . }}
</nav> </nav>
</div> </div>

8
src/js/hero.js
View File

@ -1,11 +1,11 @@
let navbar = document.getElementById("hero-navbar"); const navbar = document.getElementById('hero-navbar');
if (navbar) { if (navbar) {
window.addEventListener('scroll', function (e) { window.addEventListener('scroll', () => {
if (window.scrollY > 0) { if (window.scrollY > 0) {
navbar.classList.add("is-freestanding"); navbar.classList.add('is-freestanding');
} else { } else {
navbar.classList.remove("is-freestanding"); navbar.classList.remove('is-freestanding');
} }
}); });
} }

24
src/scss/shared.scss
View File

@ -1,20 +1,20 @@
// Used to smoothly change background colors // Center a column's content vertically.
#hero-navbar {
transition: background-color 0.2s ease;
}
// Used to distinguish the hero navbar when the page has been scrolled
.hero .navbar.is-freestanding {
background: $info;
}
// Used as helper
.columns .column.is-centered-vertically { .columns .column.is-centered-vertically {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
// Used to smoothly change background colors when transitioning on the homepage.
.navbar {
transition: background-color 0.2s ease;
}
// TODO: $navbar-background-color is the wrong variable to use here, as it's a dark theme?
.hero .navbar.is-freestanding {
background: #363636;
}
// https://github.com/jgthms/bulma/issues/935 // https://github.com/jgthms/bulma/issues/935
.navbar-dropdown { .navbar-dropdown {
a.navbar-item { a.navbar-item {
@ -27,7 +27,7 @@
} }
} }
// Works around incorrect coloring on navbar dropdown, related to above // Works around incorrect coloring on navbar dropdown, related to above.
.is-info div { .is-info div {
color: inherit !important; color: inherit !important;
} }