+
+
+
\ 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