From 53bc137454cbbefcdde0d399e9eaef62afe55b1e Mon Sep 17 00:00:00 2001 From: suroh Date: Mon, 2 Dec 2019 18:11:32 +0100 Subject: [PATCH] added go to top page button and added smooth scroll in css --- .eleventy.js | 14 +++++++----- _content/index.md | 4 ---- _includes/nav.njk | 28 ++++++++++++++--------- assets/css/master.css | 48 ++++++++++++++++++++++++++++++++++++++++ assets/js/interaction.js | 44 ++++++++++++++++++++++++------------ 5 files changed, 103 insertions(+), 35 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index c21257c..ac6309b 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,20 +1,22 @@ module.exports = (config) => { - - + // add collection for pages config.addCollection('pages', (collection) => { return collection.getFilteredByGlob("**/*.md"); }) + // added passthrough for global assets config.addPassthroughCopy("assets") + // added passthrough for images in their respective folders config.addPassthroughCopy("_content/**/images/**") + // reutrn updated config return { dir: { - input: "_content", - includes: "../_includes", - output: "_site", - data: "../_data" + input: "_content", // content + includes: "../_includes", // templates + output: "_site", // rendered site + data: "../_data" // global data files } } } \ No newline at end of file diff --git a/_content/index.md b/_content/index.md index f4d0b2a..35436fd 100644 --- a/_content/index.md +++ b/_content/index.md @@ -2,7 +2,3 @@ title: index layout: page.njk --- - -# index - -Something here on the index page... \ No newline at end of file diff --git a/_includes/nav.njk b/_includes/nav.njk index ea54c9d..f72c1fd 100644 --- a/_includes/nav.njk +++ b/_includes/nav.njk @@ -1,26 +1,32 @@ - + -
-
+
+

+ + \ No newline at end of file diff --git a/assets/css/master.css b/assets/css/master.css index a6ab348..cb8f604 100644 --- a/assets/css/master.css +++ b/assets/css/master.css @@ -1,6 +1,10 @@ /* PAGE STYLES */ @import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css); +* { + scroll-behavior: smooth; +} + /* --> BASE STYLES <-- */ body { font-family: 'fira code', monospace; @@ -36,6 +40,10 @@ hr { border-right: none; } +section { + isolation: auto; +} + /* --> LISTS <-- */ ul { list-style: none; @@ -86,6 +94,7 @@ nav#primary>span.active::after { nav#sub { max-height: 0px; + margin-left: 1.5em; overflow: hidden; transition: max-height 0.5s ease; } @@ -105,6 +114,43 @@ nav#sub > ul.active { height: inherit; } +nav#toTop { + position: fixed; + display: inline-block; + visibility: hidden; + top: calc(95vh - 2em); + right: 3em; + overflow: hidden; + padding: 0 0em 0.25em; + z-index: 100; +} + +nav#toTop.active { + visibility: visible; +} + +nav#toTop > span { + display: block; + opacity: 0.0; + transform: translateY(-2em); + transition: transform ease 0.5s, opacity ease 1s; +} + +nav#toTop > span::after { + font-size: 1.25em; + content: '△' +} + +nav#toTop.active > span { + opacity: 0.4; + transform: translateY(0em); +} + +nav#toTop.active > span:hover { + opacity: 1; + cursor: pointer; +} + h1#menuItem { position: absolute; line-height: inherit; @@ -115,10 +161,12 @@ h1#menuItem { opacity: 0; transform: translateY(100px); transform-origin: bottom left; + mix-blend-mode: difference; transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s; } h1#menuItem.active { + mix-blend-mode: difference; opacity: 1 !important; transform: translateY(-100px) !important; } diff --git a/assets/js/interaction.js b/assets/js/interaction.js index c4e8b55..3d29fc1 100644 --- a/assets/js/interaction.js +++ b/assets/js/interaction.js @@ -6,49 +6,50 @@ const audioEngine = new (window.AudioContext || window.webkitAudioContext)() audioEngine.suspend() const masterGain = audioEngine.createGain() const audioEl = document.querySelector('#audioToggle') +let audioAllowed = true masterGain.gain.value = 0.9 masterGain.connect(audioEngine.destination) const audioToggle = () => { - audioEl.classList.toggle('active'); + audioEl.classList.toggle('active') if (audioEngine.state == 'suspended') { - console.log('resumed') audioEngine.resume() + audioAllowed = true } else { audioEngine.suspend() - console.log('suspended') + audioAllowed = false } } const audioEnable = () => { - + if (audioEngine.state == 'suspended' && audioAllowed) { + audioEngine.resume() + } } -// audioEl.addEventListener('click', audioToggle) +audioEl.addEventListener('click', audioToggle) // NAVIGATION -let primaryNav = document.querySelectorAll('nav>span') +let primaryNav = document.querySelectorAll('nav#primary>span') let subNav = document.querySelector('nav#sub') let menuItem = document.querySelector('#menuItem') let menuVoices = [] for (let n of primaryNav) { + // remove shitty firefox span spacing n.nextSibling.parentNode.removeChild(n.nextSibling) + // create synthVoices per navItem menuVoices[n.dataset.link] = new Synth(audioEngine) menuVoices[n.dataset.link].gain.connect(masterGain) - n.addEventListener('mouseenter', (e) => { - console.log('mouse enter') - if (audioEngine.state == 'suspended') { - audioEngine.resume() - } - }) + // unsuspend sound on mouseenter + n.addEventListener('mouseenter', audioEnable) + // primary navigation click events n.addEventListener('click', (e) => { - for (let _n of primaryNav) { if (n === _n && n.dataset.link != '~') { n.classList.toggle('active') @@ -73,6 +74,7 @@ for (let n of primaryNav) { } }) + // mouseover on primary nav for big botom text n.addEventListener('mouseenter', () => { if (n.dataset.link == '~') { menuItem.textContent = '\u003C\u007E' @@ -87,6 +89,20 @@ for (let n of primaryNav) { menuItem.className = 'inactive' menuVoices[n.dataset.link].noteOff() }) +} +// SCROLL TO TOP NAVIGATION +const toTop = document.querySelector('nav#toTop') -} \ No newline at end of file +toTop.addEventListener('click', (e) => { + window.scrollTo(0,0) +}) + +window.addEventListener('scroll', (e) => { + let scrollY = window.scrollY + if (scrollY > 50) { + toTop.classList.add('active') + } else { + toTop.classList.remove('active') + } +}) \ No newline at end of file