transitioned basic structure and interaction over to webc

.eleventy.js

@@ -1,7 +1,14 @@
+const pluginWebc = require('@11ty/eleventy-plugin-webc')
 const markdownIt = require('markdown-it')
 const mdla = require('markdown-it-link-attributes')
+const fs = require('fs')
 
 module.exports = (config) => {
+  // webc
+  config.addPlugin(pluginWebc, {
+    components: '_includes/components/**/*.webc'
+  })
+
   // markdown setup
   const mdOptions = {
     html: true,
@@ -18,15 +25,22 @@ module.exports = (config) => {
         target: '_blank',
       },
     })
-    .disable('code')
 
   config.setLibrary('md', markdownLib)
 
   // add collection for pages
-  config.addCollection('pages', (collection) => {
+  config.addCollection('categories', (collection) => {
+    // let categories = collection.getFilteredByGlob('**')
+    let categories = fs.readdirSync('_content')
+    categories = categories.filter(c => !c.match(/\.[^/.]{1,4}$/i))
+
+    let _cat = {}
+
+    categories.forEach(cat => {
       let sorted = []
       let unsorted = []
-    let pages = collection.getFilteredByGlob('**/*.md')
+
+      let pages = collection.getFilteredByGlob(`_content/${cat}/*.md`)
 
       for (let page of pages) {
         if (page.data.sort) {
@@ -39,10 +53,12 @@ module.exports = (config) => {
           unsorted.push(page)
         }
       }
-
       sorted = sorted.filter(p => p.data.published)
 
-    return sorted.concat(unsorted)
+      _cat[cat] = sorted.concat(unsorted)
+    })
+
+    return _cat
   })
 
   // custom filters
@@ -54,13 +70,13 @@ module.exports = (config) => {
 
   // added passthrough for global assets
   config.addPassthroughCopy('assets')
-  config.addPassthroughCopy('admin')
 
   // added passthrough for images in their respective folders
   config.addPassthroughCopy('_content/**/images/**')
 
   // reutrn updated config
   return {
+    htmlTemplateEngine: 'webc',
     dir: {
       input: '_content', // content
       includes: '../_includes', // templates

_content/audio/alternativeEchelons.md

@@ -1,8 +1,5 @@
 ---
 title: alternative echelons
-layout: page.njk
-imgFeat: 
-gallery: 
 ---
 
 
@@ -19,4 +16,3 @@ Sound design for [alternative echelons](http://www.amypickles.co.uk/research-ing
 The video above is the trailer to the live performance, and projection that was to happen in November 2020. An improvised soundtrack was performed live and consisted of pre-recorded and synthesised material. Documentation of the performance can be watched on [vimeo](https://vimeo.com/495285427)
 
 Its soundtrack of the trailer (video above) was generated through a self oscillating reverb module unit on a eurorack synthesiser. Achieved through no input, self patching, the recording is a re-edited live improvisation. As the work centres around the British listening station at Dhekelia in Cyprus, experimentation with no-input feedback mixing seemed relevant. A sinister acoustic aesthetic is then contrasted against the sunny warm scenes of Cyprus, in which digital surveillance is being orchestrated at a global level.
-

_content/audio/andoror.md

@@ -1,6 +1,5 @@
 ---
 title: "&//"
-layout: page.njk
 ---
 
 # &//

_content/audio/audio.json

@@ -1,4 +1,5 @@
 {
   "category": "audio",
-  "published": true
+  "published": true,
+  "layout": "page.webc"
 }

_content/audio/dirtc.md

@@ -1,8 +1,5 @@
 ---
 title: dirtc
-layout: page.njk
-imgFeat: 
-gallery: 
 ---
 
 <div style="padding:56.25% 0 0 0;position:relative;">

_content/audio/post-toast.md

@@ -1,6 +1,5 @@
 ---
 title: post toast
-layout: page.njk
 imgFeat: /audio/images/postoast/FOMORADIO_PostToast.jpg
 gallery:
   - /audio/images/postoast/redlightradio.jpg

_content/audio/read-my-lips.md

@@ -1,6 +1,5 @@
 ---
 title: read my lips
-layout: page.njk
 imgFeat: /audio/images/read-my-lips/djuna.jpg
 gallery:
   - /audio/images/read-my-lips/poster.jpg

_content/audio/solo.md

@@ -1,6 +1,5 @@
 ---
 title: anomolous faces
-layout: page.njk
 imgFeat: /audio/images/anomolous/thumb-_DSC5695.jpg
 gallery:
   - /audio/images/anomolous/patch.png

_content/index.md

@@ -1,4 +1,4 @@
 ---
 title: index
-layout: page.njk
+layout: page.webc
 ---

_content/other/cv.md

@@ -1,141 +0,0 @@
----
-title: cv
-layout: page.njk
----
-
-## Max Franklin
-
-_mx[at]suroh.tk_<br>
-_+33 (0) 7 66 14 33 99_<br>
-_[@suroh@post.lurk.org](https://post.lurk.org/@suroh)_
-
-### Education
-
-_Piet Zwart Institute_<br>
-2016 - 2018 // Rotterdam, NL<br>
-Master's in Media Design : Experimental Publishing
-
-_Conservatorium of Sydney (University of Sydney)_<br>
-2009 // Sydney, AU<br>
-Bachelor Jazz Performance (Saxophone) &amp; Creative Sound Engineering
-
-### Teaching
-
-_Willem de Kooning Academie_<br>
-2020 - current // Rotterdam, NL<br>
-Tutor within the Graphic Design Major
-
-_Paris College of Art_<br>
-2014 - 2022 // Paris, FR<br>
-Faculty Member within the Communication Design department
-
-_LISAA Graphic Design_<br>
-2020 - 2021 // Paris, FR<br>
-Faculty Member within the Graphic Design department
-
-_École Européenne des Métiers de l'Internet_<br>
-2018 - 2019 // Paris, FR<br>
-Faculty Member within the Graphic Design department
-
-### Selected Exhibitions & Events
-
-_Sounds to See_<br>
-Sign Gallery<br>
-2019 // Groningen, NL<br>
-Group exhibition. Presented _A Container in Two Movements_.
-
-_Autonomous Archive_<br>
-Het Nieuw Instituut<br>
-2017 // Rotterdam, NL<br>
-Archival machine, installation and research project centred around autonomous living and archival practices. Presented alongside the Architecture of Appropriation exhibition.
-
-_TGC#3 : Euclid_<br>
-De Player<br>
-2017 // Rotterdam, NL<br>
-Experimental sound publication object and performative instrument. Collaborative project between De Player and the Piet Zwart Experimental Publishing unit.</p>
-
-_LowTechLabLondon2016_<br>
-Saatchi Gallery<br>
-2016 // London, UK<br>
-International art lab organised by Raul Marroquin around the theme of Low Tech.
-
-_Festival de Projets Scolaires_<br>
-La Gaîté lyrique<br>
-2016 // Paris, FR<br>
-Partnership workshop show with Paris College of Art students and faculty.
-
-_IDENTITE REVE(L)EE_<br>
-*Mi Gallery<br>
-Paris Digital Week<br>
-2015 // Paris, FR<br>
-Collaborative piece presented at *Mi Gallery as part of Paris Digital Week.
-
-_Barcu Art Fair_<br>
-2015 // Bogota, CO<br>
-Presentation via Skype on Collaborative Art, Interactivity and Improvisation.
-
-### Recent PRogrammes & Resdencies
-
-_Thresholds of the Algorithmic_<br>
-Algorithms that Matter<br>
-2018 // Bergen, NO<br>
-Workshop-in-Exposition is a hybrid format that places the workshop inside an exhibition context, where the exposed works and artefacts form the basis of the workshop’s activity.
-
-_Get a Room Residency_<br>
-Frontyard<br>
-2018 // Sydney, AU<br>
-Research residency around Master's research on Software and Improvisation.
-
-### Sound
-
-#### Performances
-_alternative echelons_<br>
-2020 // UBIK, Rotterdam, NL<br>
-
-_Design Days Finnisage_<br>
-Espace 15<br>
-2019 // Paris, FR
-
-_Read My Lips: No New Taxes_<br>
-Galerie Lecq
-2019 // Rotterdam, NL
-
-_E-ARTHA_<br>
-DePlayer
-2018 // Rotterdam, NL
-
-_North Sea Jazz Around Town_<br>
-VARIA<br>
-2018 // Rotterdam, NL
-
-_POST TOAST_<br>
-Red Light Radio<br>
-2018 // Amsterdam, NL
-
-#### Soundtracks
-
-_alternative echelons_ (trailer)<br>
-by Amy Pickles<br>
-2019
-
-_Ghost Terminal_<br>
-by Ryan Cherewaty<br>
-2019
-
-_Memory of Death's Dream_<br>
-by Ryan Cherewaty<br>
-2019
-
-### Professional Experience
-
-_Willem de Kooning Academie_<br>
-2018 // Rotterdam, NL<br>
-Publication Station teaching and technical assistant
-
-_Freelance Graphic Designer_<br>
-2009 – 2014 // Sydney, AU<br>
-Web-design, poster and album design
-
-_Linear Recording_<br>
-2009 – 2010 // Sydney, AU<br>
-Assistant Sound Engineer</p>

_content/other/other.json

@@ -1,4 +0,0 @@
-{ 
-  "category": "other", 
-  "published": true
-}

_content/work/adelaide.md

@@ -1,6 +1,5 @@
 ---
 title: Adelaïde
-layout: page.njk
 ---
 
 # Adelaïde

_content/work/auto-archive.md

@@ -1,6 +1,5 @@
 ---
 title: Autonomous Archive
-layout: page.njk
 imgFeat: /work/images/autonomousArchive/pgbwstreet.jpg
 gallery:
   - /work/images/autonomousArchive/20171110_0061.jpg

_content/work/container2mvmnts.md

@@ -1,6 +1,5 @@
 ---
 title: A Container in Two Movements
-layout: page.njk
 imgFeat: /work/images/container2mvmnts/DSC_7873.jpg
 gallery:
   - /work/images/container2mvmnts/DSC_7864.jpg

_content/work/euclid.md

@@ -1,6 +1,5 @@
 ---
 title: euclid
-layout: page.njk
 gallery:
   - /work/images/tetra/tetra.jpg
   - /work/images/tetra/playingTetra.jpg

_content/work/fragile-mastery.md

@@ -1,6 +1,5 @@
 ---
 title: fragile mastery
-layout: page.njk
 ---
 
 # fragile mastery

_content/work/stone-throw.md

@@ -1,6 +1,5 @@
 ---
 title: stone throw
-layout: page.njk
 imgFeat: /work/images/stoneThrow/scanPage.png
 published: false
 sort: 1

_content/work/work.json

@@ -1,4 +1,5 @@
 {
   "category": "work",
-  "published": true
+  "published": true,
+  "layout": "page.webc"
 }

_data/site.js

@@ -1,9 +1,9 @@
+const fs = require('fs/promises')
 const eleventyPackage = require('@11ty/eleventy/package.json')
 
-module.exports = () => {
+module.exports = async () => {
   return {
-    siteName: 'wrk.suroh',
+    name: 'wrk.suroh',
-    categories: ['work', 'audio', 'other'],
     generator: `${eleventyPackage.name} v${eleventyPackage.version}`,
   }
 }

_includes/base.njk

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>{{ site.siteName }}</title>
-
-  <meta name="generator" content="{{ site.generator }}">
-
-
-  <!-- styles -->
-  <link rel="stylesheet" href="/assets/css/master.css">
-
-  <!-- javascript -->
-  <script src="/assets/js/script.js" type="module"></script>
-
-  <!-- tracking -->
-  <script async defer data-website-id="f24934aa-ee11-49ee-993f-a64b8df6a01c"
-    src="https://analytics.suroh.tk/umami.js"></script>
-
-  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
-</head>
-
-<body>
-
-  <div id="wrapper">
-    {% include 'nav.njk' %}
-
-    {% block content %}{% endblock %}
-
-    {% block footer %}{% endblock %}
-  </div>
-
-  <script>
-    if (window.netlifyIdentity) {
-      window.netlifyIdentity.on("init", user => {
-        if (!user) {
-          window.netlifyIdentity.on("login", () => {
-            document.location.href = "/admin/";
-          });
-        }
-      });
-    }
-  </script>
-</body>

_includes/nav.njk

@@ -1,30 +0,0 @@
-<nav id="primary">
-  <span data-link="~"><~</span>
-  {% for c in site.categories %}
-    <span data-link="{{c}}">█</span>
-  {% endfor %}
-</nav>
-
-<span id="audioToggle" class="active"></span>
-
-<nav id="sub">
-  {% for c in site.categories %}
-    <ul id="{{c}}">
-      {% for p in collections.pages %}
-        {% if (p.data.category == c) %}
-          <li>
-            <a href="{{p.url}}">{{p.data.title | makeLowercase or p.fileSlug | makeLowercase}}</a>
-          </li>
-        {% endif %}
-      {% endfor %}
-    </ul>
-  {% endfor %}
-</nav>
-
-<section style="position: fixed; bottom: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 0px; overflow: visible; z-index: 100;mix-blend-mode: difference;">
-    <h1 id="menuItem" class=""></h1>
-</section>
-
-<nav id="toTop">
-  <span>top</span>
-</nav>

_includes/page.njk

@@ -1,24 +0,0 @@
-{% extends "base.njk" %}
-
-{% block content %}
-  <section class="page">
-    {% if imgFeat %}
-      <div class="imgFeat">
-        <img src="{{imgFeat}}" alt="">
-      </div>
-    {% endif %}
-
-    <section class="text {{url}}">
-      {{ content | safe}}
-    </section>
-
-    {% if gallery %}
-      <section class="imgs">
-        {% for img in gallery %}
-          <img src="{{img}}" alt="">
-        {% endfor %}
-      </section class="imgs">
-    {% endif %}
-  </section>
-{% endblock %}
-

admin/config.yml

@@ -1,45 +0,0 @@
-backend:
-  name: gitea
-  repo: suroh/work.suroh.tk
-  app_id: 7bfaec5d-9c01-49bc-8c3c-d38ad5c7b16a
-  api_root: https://git.suroh.tk/api/v1
-  base_url: https://git.suroh.tk
-  site_domain: work.suroh.tk
-  branch: main
-media_folder: "assets/media"
-public_folder: "/assets/media"
-  # Please run "npx netlify-cms-proxy-server" for local backend
-local_backend: false
-collections:
-  - label: "work"
-    name: "work"
-    folder: "_content/work"
-    create: true
-    fields:
-      - { label: "title", name: "title", widget: "string" }
-      - { label: "layout", name: "layout", widget: "hidden", default: "page.njk" }
-      - { label: "body", name: "body", widget: "markdown" }
-      - { label: "feature image", name: "imgFeat", widget: "image", media_folder: "images" }
-      - { label: "gallery", name: "gallery", widget: "image", allow_multiple: true, media_folder: "images" }
-  - label: "audio"
-    name: "audio"
-    folder: "_content/audio"
-    create: true
-    fields:
-      - { label: "title", name: "title", widget: "string" }
-      - { label: "layout", name: "layout", widget: "hidden", default: "page.njk" }
-      - { label: "body", name: "body", widget: "markdown" }
-      - { label: "feature image", name: "imgFeat", widget: "image", media_folder: "images" }
-      - { label: "gallery", name: "gallery", widget: "image", allow_multiple: true, media_folder: "images" }
-  - label: "Settings"
-    name: "settings"
-    editor:
-      preview: false
-    files:
-      - label: "Meta Settings"
-        name: "settings"
-        file: "src/_data/settings.yaml"
-        fields:
-          - { label: Name, name: name, widget: string }
-          - { label: Author, name: author, widget: string }
-          - { label: URL, name: url, widget: string }

admin/index.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="robots" content="noindex" />
-  <title>Content Manager</title>
-
-  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
-</head>
-
-<body>
-  <!-- Include the script that builds the page and powers Decap CMS -->
-  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
-</body>
-
-</html>

assets/css/master.css

@@ -1,432 +0,0 @@
-/* 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;
-  color: #1e1e3cff;
-}
-
-p {
-  max-width: 80ch;
-}
-
-p > img:first-of-type {
-  margin-top: 2em;
-}
-
-em {
-  font-family: serif;
-  font-size: 1.03em;
-}
-
-a, a:visited {
-  color: #1e1e3cff;
-  padding-bottom: 2px;
-  text-decoration: none;
-  border-bottom: 1px #1e1e3c50 solid;
-  transition: color ease 0.5s, border ease 0.2s;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-hr {
-  border-bottom: thin dotted grey;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-}
-
-section {
-  isolation: auto;
-}
-
-/* --> LISTS <-- */
-ul {
-  list-style: none;
-  margin-left: 16px;
-  padding-left: 0;
-}
-
-li {
-  padding: 0.2em 0 0.2em 1em;
-  text-indent: -0.5em;
-}
-
-li:before {
-  content: "▸";
-  padding-right: 16px;
-}
-
-/* --> NAVIGATION <-- */
-nav#primary>span {
-  display: inline-block;
-  color: #1e1e3c33;
-  transition: color ease 0.5s;
-}
-
-nav#primary>span:hover {
-  color: #1e1e3cff;
-  transition: color ease 0.1s;
-  cursor: pointer;
-}
-
-nav#primary>span.active {
-  color: #1e1e3cff;
-  transition: color 1s ease;
-}
-
-nav#primary>span::after {
-  display: inline-block;
-  content: attr(data-link);
-  max-width: 0px;
-  overflow: hidden;
-  color: #1e1e3cff;
-  transition: max-width 0.5s ease;
-}
-
-nav#primary>span.active::after {
-  max-width: 10em;
-}
-
-nav#sub {
-  max-height: 0px;
-  margin-left: 1.5em;
-  padding-bottom: 0.5em;
-  overflow: hidden;
-  transition: max-height 0.5s ease;
-}
-
-nav#sub.active {
-  max-height: 50vh;
-}
-
-nav#sub > ul {
-  padding: 0px;
-  margin: 0px;
-  max-height: 0px;
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity 0.5s ease, max-height 0.025s ease;
-}
-
-nav#sub > ul.active {
-  max-height: 50vh;
-  opacity: 1;
-}
-
-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);
-  background-color: rgba(255,255,255,0.0);
-  padding: 0.3em 0.5em 0.5em;
-  border-radius: 1em;
-  transition: transform ease 0.5s, opacity ease 1s, background-color ease 0.5s 0.5s;
-}
-
-nav#toTop > span::after {
-  font-size: 1.25em;
-  content: '△'
-}
-
-nav#toTop.active > span {
-  opacity: 0.5;
-  background-color: rgba(255,255,255,0.9);
-  transform: translateY(0em);
-}
-
-nav#toTop.active > span:hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-h1#menuItem {
-  position: absolute;
-  line-height: inherit;
-  bottom: -500px;
-  margin: 0;
-  padding: 0;
-  font-size: 33vw;
-  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(-600px) !important;
-}
-
-/* --> AUDIO TOGGLE <-- */
-span#audioToggle {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  transition: color ease-in-out 0.1s;
-}
-
-span#audioToggle:hover {
-  color: #CECECE;
-  cursor: pointer;
-  transition: color ease-in-out 0.1s;
-}
-
-span#audioToggle::after {
-  content: '🔇'
-}
-
-span#audioToggle.active::after {
-  content: '🔉'
-}
-
-/* --> MAINPAGE CONSTRUCTION <-- */
-div#wrapper {
-  max-width: 95vw;
-  margin: 0 auto;
-}
-
-nav#sub > ul {
-  margin: 0;
-  padding: 0;
-  list-style: none !important;
-}
-
-nav#sub > ul > li {
-  border-left: thin solid #d2d2d8;
-  text-decoration: none;
-  padding: 5px 10px;
-}
-
-nav#sub > ul > li:before {
-  content: "";
-  padding-right: 16px;
-}
-
-nav#sub > ul > li:hover {
-  background: #d2d2d8;
-  cursor: pointer;
-}
-
-nav#sub > ul > li > a {
-  border: none;
-}
-
-/* --> SUBCONTENT CONSTRUCTION <-- */
-section.page {
-  display: grid;
-  animation: fadeIn 1s ease;
-}
-
-section.page h1 {
-  margin: 0px;
-  padding: 0px;
-}
-
-@media screen and (min-width: 1360px) {
-  body {
-    font-size: 19px;
-    line-height: 24px;
-    margin: 0;
-    padding: 0;
-  }
-
-  /* --> NAVIGATION <-- */
-  nav {
-    margin: 23px 0px 8px;
-    font-size: 1.5em;
-  }
-
-  nav>span {
-    margin-right: 8px;
-  }
-
-  nav>span.active::after {
-    margin-left: 8px;
-  }
-
-  /* --> MAINPAGE CONSTRUCTION <-- */
-  section ul.subMenu {
-    font-size: 1.5em;
-  }
-
-  /* --> SUBCONTENT CONSTRUCTION <-- */
-  section.page {
-    max-width: 1960px;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 24px;
-  }
-
-  section.page h1 {
-    margin-top: 0.25em;
-    margin-bottom: 0.4em;
-    font-size: 6em;
-    line-height: 0.95em;
-  }
-
-  section.page div.imgFeat {
-    grid-column: span 4;
-  }
-
-  section.page section.imgs {
-    grid-column: 4 / span 2;
-    grid-row: 2;
-  }
-
-  section.page section.imgs>img {
-    max-width: 100%;
-    margin-bottom: 24px;
-    height: auto;
-  }
-
-  section.page section.text {
-    grid-column: 1 / span 3;
-    grid-row: 2;
-  }
-}
-
-@media screen and (max-width: 1359px) {
-  body {
-    font-size: 19px;
-    line-height: 24px;
-    margin: 0;
-    padding: 0;
-  }
-
-  /* --> NAVIGATION <-- */
-  nav {
-    margin: 23px 0px 8px;
-    font-size: 1.5em;
-  }
-
-  nav>span {
-    margin-right: 8px;
-  }
-
-  nav>span.active::after {
-    margin-left: 8px;
-  }
-
-  /* --> MAINPAGE CONSTRUCTION <-- */
-  section ul.subMenu {
-    font-size: 1.5em;
-  }
-
-  /* --> SUBCONTENT CONSTRUCTION <-- */
-  section.page {
-    max-width: 1960px;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 24px;
-  }
-
-  section.page h1 {
-    margin-top: 0.25em;
-    margin-bottom: 0.5em;
-    font-size: 4em;
-    line-height: 0.95em;
-  }
-
-  section.page div.imgFeat {
-    grid-column: span 4;
-  }
-
-  section.page section.imgs {
-    grid-column: 4 / span 2;
-    grid-row: 2
-  }
-
-  section.page section.imgs>img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  section.page section.text {
-    grid-column: 1 / span 3;
-    grid-row: 2;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  body {
-    font-size: 20px;
-    line-height: 24px;
-    margin: 0;
-    padding: 0;
-  }
-
-  /* --> NAVIGATION <-- */
-  nav {
-    margin: 23px 0px 8px;
-    font-size: 1.75em;
-  }
-
-  nav>span {
-    margin-right: 8px;
-  }
-
-  nav>span.active::after {
-    position: relative;
-    top: 2px;
-    margin-left: 8px;
-  }
-
-  /* --> MAINPAGE CONSTRUCTION <-- */
-
-  /* --> SUBCONTENT CONSTRUCTION <-- */
-  section.page {
-    display: inherit;
-    max-width: 650px;
-    grid-gap: 24px;
-  }
-
-  section.page h1 {
-    margin-top: 0.35em;
-    margin-bottom: 0.5em;
-    font-size: 3em;
-    line-height: 0.95em;
-    margin: 24px 0 32px;
-  }
-
-  section#teach h1 {
-    font-size: 3em;
-    line-height: 0.75em;
-    margin: 40px 0 48px;
-  }
-
-}
-
-/* ANIMATIONS */
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

assets/js/interaction.js

@@ -86,7 +86,6 @@ for (let n of primaryNav) {
 
   // mouseover on primary nav for big botom text
   n.addEventListener('mouseenter', () => {
-    
     // unsuspend sound on mouseenter
     audioEnable()
 

package.json

@@ -3,14 +3,14 @@
   "version": "1.1.0",
   "description": "",
   "dependencies": {
+    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-plugin-webc": "^0.11.1",
+    "@11ty/is-land": "^4.0.0",
     "markdown-it": "^13.0.1",
     "markdown-it-link-attributes": "^4.0.1"
   },
-  "devDependencies": {
-    "@11ty/eleventy": "^0.9.0"
-  },
   "scripts": {
-    "dev": "eleventy --serve",
+    "dev": "eleventy --serve --incremental",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {