suroh
/
work.suroh.tk
0
0
Fork 0
Code Pull Requests Actions Activity

transitioned basic structure and interaction over to webc

This commit is contained in:
suroh 2023-10-26 20:12:52 +02:00
parent b5726fb54c
commit 3860c9dd79
28 changed files with 2244 additions and 12114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
.eleventy.js
View File

@ -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,31 +25,40 @@ module.exports = (config) => {
target: '_blank',
},
})
.disable('code')
config.setLibrary('md', markdownLib)
// add collection for pages
config.addCollection('pages', (collection) => {
let sorted = []
let unsorted = []
let pages = collection.getFilteredByGlob('**/*.md')
config.addCollection('categories', (collection) => {
// let categories = collection.getFilteredByGlob('**')
let categories = fs.readdirSync('_content')
categories = categories.filter(c => !c.match(/\.[^/.]{1,4}$/i))
for (let page of pages) {
if (page.data.sort) {
if (sorted[page.data.sort]) {
sorted.splice(page.data.sort, 0, page)
let _cat = {}
categories.forEach(cat => {
let sorted = []
let unsorted = []
let pages = collection.getFilteredByGlob(`_content/${cat}/*.md`)
for (let page of pages) {
if (page.data.sort) {
if (sorted[page.data.sort]) {
sorted.splice(page.data.sort, 0, page)
} else {
sorted[page.data.sort] = page
}
} else {
sorted[page.data.sort] = page
unsorted.push(page)
}
} else {
unsorted.push(page)
}
}
sorted = sorted.filter(p => p.data.published)
sorted = sorted.filter(p => p.data.published)
_cat[cat] = sorted.concat(unsorted)
})
return 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

4
_content/audio/alternativeEchelons.md
View File

@ -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.

3
_content/audio/andoror.md
View File

@ -1,6 +1,5 @@
---
title: "&//"
layout: page.njk
---
# &//
@ -9,4 +8,4 @@ layout: page.njk
<iframe scrolling="no" allow="autoplay" style="margin-top: 24px;" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/631370700&amp;color=%23333333&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" width="100%" height="166" frameborder="no"></iframe>
<iframe scrolling="no" allow="autoplay" style="margin-top: 24px;" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/636081960&amp;color=%23333333&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" width="100%" height="166" frameborder="no"></iframe>
<iframe scrolling="no" allow="autoplay" style="margin-top: 24px;" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/636081960&amp;color=%23333333&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" width="100%" height="166" frameborder="no"></iframe>

5
_content/audio/audio.json
View File

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

5
_content/audio/dirtc.md
View File

@ -1,8 +1,5 @@
---
title: dirtc
layout: page.njk
imgFeat:
gallery:
---
<div style="padding:56.25% 0 0 0;position:relative;">
@ -13,7 +10,7 @@ gallery:
# dirtc
Workshop experimenting with mobile phones and live real time conferencing protocol. Individual's phones joined voice, performed and environmental noises in a dirty feedback.
Workshop experimenting with mobile phones and live real time conferencing protocol. Individual's phones joined voice, performed and environmental noises in a dirty feedback.
Texts collated by [Amy Pickles](http://amypickles.co.uk/) discussing the first recording of a human voice, an unknown female, and texts that considered how we record, what is lost, edited, removed and forgotten were the source.

3
_content/audio/post-toast.md
View File

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

1
_content/audio/read-my-lips.md
View File

@ -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

3
_content/audio/solo.md
View File

@ -1,6 +1,5 @@
---
title: anomolous faces
layout: page.njk
imgFeat: /audio/images/anomolous/thumb-_DSC5695.jpg
gallery:
- /audio/images/anomolous/patch.png
@ -19,4 +18,4 @@ My performance practice is coupled with research that takes many other forms, wh
All of the code is freely accessible on my git repository here : [git.suroh.tk](https://git.suroh.tk).
<iframe scrolling="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/476223060&amp;color=%23333333&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" width="100%" height="166" frameborder="no"></iframe>
<iframe scrolling="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/476223060&amp;color=%23333333&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" width="100%" height="166" frameborder="no"></iframe>

2
_content/index.md
View File

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

141
_content/other/cv.md
View File

@ -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>

4
_content/other/other.json
View File

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

1
_content/work/adelaide.md
View File

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

1
_content/work/auto-archive.md
View File

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

5
_content/work/container2mvmnts.md
View File

@ -1,8 +1,7 @@
---
title: A Container in Two Movements
layout: page.njk
imgFeat: /work/images/container2mvmnts/DSC_7873.jpg
gallery:
gallery:
- /work/images/container2mvmnts/DSC_7864.jpg
- /work/images/container2mvmnts/DSC_7865.jpg
sort: 2
@ -12,7 +11,7 @@ sort: 2
# A Container in Two Movements
A synthesiser and a record player play the role of black boxes. Black boxes contain systems of whose function is only apparent by the deduction of its inputs and outputs. Every day devices such as phones, online services, and algorithms have this inaccessibility built into them by design, excluding us from understanding the breadth of their intentions and full functionality. Without our knowledge or understanding, they harvest data, share our information, or profile us and the communities in which we live.
A synthesiser and a record player play the role of black boxes. Black boxes contain systems of whose function is only apparent by the deduction of its inputs and outputs. Every day devices such as phones, online services, and algorithms have this inaccessibility built into them by design, excluding us from understanding the breadth of their intentions and full functionality. Without our knowledge or understanding, they harvest data, share our information, or profile us and the communities in which we live.
This work plays with, and raises discussion on, how we are complicit in this relationship. It highlights how designed inaccessibility is reinforced through consistent use of devices and systems that have been designed to exploit us.
I have taken two devices synonymous with a long history of sound making, one as instrument, the other distribution and ingest. Viewers and listeners may accept these devices from apparent input and outputs, bringing their preconceptions of these devices to them. However, just like the systematically complex devices that we use every day, these doppelgangers are more nuanced than they first appear.

3
_content/work/euclid.md
View File

@ -1,6 +1,5 @@
---
title: euclid
layout: page.njk
gallery:
- /work/images/tetra/tetra.jpg
- /work/images/tetra/playingTetra.jpg
@ -26,4 +25,4 @@ The instrument is controlled via a series of touch conductive points. These poin
The end result was an interactive, improvisational, chaotic music machine. Its score, a mash of software and numbers, humanly unintelligible, and musically irreproducible.
This project was the catalyst for my Master's thesis, final project and now forms the base of my current practice and research.
This project was the catalyst for my Master's thesis, final project and now forms the base of my current practice and research.

1
_content/work/fragile-mastery.md
View File

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

1
_content/work/stone-throw.md
View File

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

5
_content/work/work.json
View File

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

6
_data/site.js
View File

@ -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',
categories: ['work', 'audio', 'other'],
name: 'wrk.suroh',
generator: `${eleventyPackage.name} v${eleventyPackage.version}`,
}
}

47
_includes/base.njk
View File

@ -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>

30
_includes/nav.njk
View File

@ -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>

24
_includes/page.njk
View File

@ -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 %}

45
admin/config.yml
View File

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

18
admin/index.html
View File

@ -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>

432
assets/css/master.css
View File

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

13
assets/js/interaction.js
View File

@ -55,7 +55,7 @@ for (let n of primaryNav) {
// create synthVoices per navItem
menuVoices[n.dataset.link] = new Synth(audioEngine)
menuVoices[n.dataset.link].gain.connect(masterGain)
// primary navigation click events
n.addEventListener('click', (e) => {
for (let _n of primaryNav) {
@ -67,14 +67,14 @@ for (let n of primaryNav) {
_n.classList.remove('active')
}
}
// subnav is nav element
if (primaryActive()) {
if (primaryActive()) {
subNav.classList.add('active')
} else {
subNav.classList.remove('active')
}
for (let s of subNav.children) {
if (s.id == n.dataset.link && primaryActive()) {
s.classList.add('active')
@ -83,10 +83,9 @@ for (let n of primaryNav) {
}
}
})
// mouseover on primary nav for big botom text
n.addEventListener('mouseenter', () => {
// unsuspend sound on mouseenter
audioEnable()
@ -121,4 +120,4 @@ window.addEventListener('scroll', (e) => {
} else {
toTop.classList.remove('active')
}
})
})

13499
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -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": {