added go to top page button and added smooth scroll in css

.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",
+      input: "_content", // content
-      includes: "../_includes",
+      includes: "../_includes", // templates
-      output: "_site",
+      output: "_site", // rendered site
-      data: "../_data"
+      data: "../_data" // global data files
     }
   }
 }

_content/index.md

@@ -2,7 +2,3 @@
 title: index
 layout: page.njk
 ---
-
-# index
-
-Something here on the index page...

_includes/nav.njk

@@ -5,22 +5,28 @@
   {% endfor %}
 </nav>
 
-<span id="audioToggle"></span>
+<span id="audioToggle" class="active"></span>
 
 <nav id="sub">
   {% for c in siteSettings.categories %}
     <ul id="{{c}}">
       {% for p in collections.pages %}
         {% if (p.data.category == c) %}
-      <li><a href="{{p.url}}">{{p.data.title or p.fileSlug}}</a></li>
+          <li>
+            <a href="{{p.url}}">{{p.data.title or p.fileSlug}}</a>
+          </li>
         {% endif %}
       {% endfor %}
     </ul>
   {% endfor %}
 </nav>
 
-<section style="position: fixed; bottom: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 50vh; z-index: 100;">
+<section style="position: fixed; bottom: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 50vh; z-index: 100;mix-blend-mode: difference;">
-  <div style="position: relative; width: 100%; height: 100%;">
+  <div style="position: relative; width: 100%; height: 100%;mix-blend-mode: difference;">
     <h1 id="menuItem" class=""></h1>
   </div>
 </section>
+
+<nav id="toTop">
+  <span>top</span>
+</nav>

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;
 }

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) => {
+  // unsuspend sound on mouseenter
-    console.log('mouse enter')
+  n.addEventListener('mouseenter', audioEnable)
-    if (audioEngine.state == 'suspended') {
-      audioEngine.resume()
-    }
-  })
 
+  // 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')
+
+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')
+  }
+})