From ab4f7128c9d4350b7815d4b1845ae750e501a9a5 Mon Sep 17 00:00:00 2001 From: suroh Date: Fri, 15 Mar 2019 15:53:48 +0100 Subject: [PATCH] Changing website design completely --- css/master.css | 57 +++++++++ css/print.css | 0 css/resets.css | 52 -------- css/styles.css | 72 ----------- index.html | 83 ++++--------- js/audio.js | 58 +++++++++ js/interaction.js | 33 +++++ js/menu.js | 45 ------- prototyping/outline.pdf | Bin 0 -> 961 bytes prototyping/outline.svg | 261 ++++++++++++++++++++++++++++++++++++++++ 10 files changed, 433 insertions(+), 228 deletions(-) create mode 100644 css/master.css delete mode 100755 css/print.css delete mode 100644 css/resets.css delete mode 100755 css/styles.css create mode 100644 js/audio.js create mode 100644 js/interaction.js delete mode 100755 js/menu.js create mode 100644 prototyping/outline.pdf create mode 100644 prototyping/outline.svg diff --git a/css/master.css b/css/master.css new file mode 100644 index 0000000..119fc3f --- /dev/null +++ b/css/master.css @@ -0,0 +1,57 @@ +/* PAGE STYLES */ +@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css); + +/* --> BASE STYLES <-- */ +body { + font-family: 'fira code', monospace; + font-size: 1.2em; + color: #1e1e3cff; + margin: 0; + padding: 0; +} + +a, a:visited { + color: #1e1e3cff; + text-decoration: none; +} + +/* --> NAVIGATION <-- */ +nav { + margin: 20px; +} + +nav>span { + font-size: 1.5em; + color: #1e1e3c33; + transition: color ease 0.1s; +} + +nav>span:hover { + color: #1e1e3cff; + transition: color ease 0.1s; + cursor: pointer; +} + +h1#menuItem { + position: absolute; + left: 20px; + bottom: 20px; + margin: 0; + padding: 0; + font-size: 31vw; + opacity: 0; + transform: translateY(300px); + transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s; + +} + +h1#menuItem.active { + opacity: 1 !important; + transform: translateY(0px) !important; +} + +/* --> MAINPAGE CONSTRUCTION <-- */ + +section#content { + margin: 40px 20px; +} diff --git a/css/print.css b/css/print.css deleted file mode 100755 index e69de29..0000000 diff --git a/css/resets.css b/css/resets.css deleted file mode 100644 index c043909..0000000 --- a/css/resets.css +++ /dev/null @@ -1,52 +0,0 @@ -@import url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira code.css'); - -body { - padding: 0; - margin: 0; - font-family: 'fira code', monospace; - font-weight: 100; -} - -h1, h2, h3, h4, h5 { - font-weight: 100; - margin: 0; -} - -/* -~ NAV ~- */ -a#mobileButt { - visibility: hidden; - height: 0px; - font-size: 5em; -} - -nav ul { - list-style: none; - padding: 0; - margin: 0; -} - -nav ul li { - display: inline-block; -} - -nav ul li.spacer { - color: #FF670F; -} - -/* -~ WORK ~- */ -.work ul { - list-style: none; - padding: 0; - margin: 0; -} - -.work ul li { -} - -.work ul li h3 { - margin: 0; -} - -.work ul li p { - margin: 0; -} diff --git a/css/styles.css b/css/styles.css deleted file mode 100755 index e3d763e..0000000 --- a/css/styles.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Portables ----------- */ -@media only screen -and (max-device-width : 1024px) { - /* Styles */ - - body { - width: 100vw; - height: 100vh; - } - - /* -~ HEADER ~- */ - - header { - position: relative; - } - - /* -~ NAV ~- */ - a#mobileButt { - position: absolute; - bottom: 0px; - right: 0px; - visibility: visible; - } - - nav.navigation { - position: fixed; - display: block; - width: 100%; - max-height: 0px; - overflow: hidden; - background: #FFF; - transition: all 0.25s ease; - } - - nav.navigation.open { - max-height: 100vh; - transition: all 1s ease; - } - - nav.navigation ul { - list-style: none; - margin: 10% 0 0 0; - font-size: 2em; - } - - nav.navigation ul li { - display: block; - text-align: center; - padding: 5px 0 7px; - } - - - nav.navigation ul li.spacer { - color: #FF670F; - } - -} - -/* Desktops and laptops ----------- */ -@media only screen -and (min-width : 1224px) { - /* Styles */ - - -} - -/* Large screens ----------- */ -@media only screen -and (min-width : 1824px) { - /* Styles */ - -} diff --git a/index.html b/index.html index cc46197..f9bdd8f 100755 --- a/index.html +++ b/index.html @@ -1,72 +1,37 @@ - - wkflw - - - + + wkflw + + + + + + + + + -
-

max
franklin

- menu -
+ - +
+
+

+
+
-
-

=> audio

+
- -
+
-
-

=> other

- - -
- - + diff --git a/js/audio.js b/js/audio.js new file mode 100644 index 0000000..f9d106d --- /dev/null +++ b/js/audio.js @@ -0,0 +1,58 @@ +// audio for events +// AUDIO SETUP +let audioEngine = new(window.AudioContext || window.webkitAudioContext)() +let masterGain = audioEngine.createGain() + +let voice = { + gain: audioEngine.createGain(), + osc: audioEngine.createOscillator(), + adsr: { + a: typeof amount === 'number' ? amount * 1000 : 0.025, + d: typeof amount === 'number' ? amount * 1000 : 0.5, + sv: typeof amount === 'number' ? amount : 0.8, + r: typeof amount === 'number' ? amount * 1000 : 0.5, + t: audioEngine.currentTime + }, + play: function(note) { + freq = typeof note === 'number' ? note : (Math.random() * 350) + 50 + this.osc.frequency.setValueAtTime(freq, audioEngine.currentTime) + this.engage() + }, + engage: function() { + + // clear preScheduled events + this.gain.gain.cancelScheduledValues(this.adsr.t) + // initial value + this.gain.gain.setValueAtTime(0.0, this.adsr.t) + // attack + this.gain.gain.setTargetAtTime(0.9, this.adsr.t, this.adsr.a) + // decay + this.gain.gain.setTargetAtTime(this.adsr.sv, this.adsr.t + this.adsr.a, this.adsr.d) + }, + release: function() { + this.adsr.t = audioEngine.currentTime + // release + this.gain.gain.setTargetAtTime(0.0, this.adsr.t, this.adsr.r) + } +} + +window.onload = function() { + // create gain + voice.gain.gain.setValueAtTime(0.0001, audioEngine.currentTime) + masterGain.gain.value = 0.9 + voice.gain.connect(masterGain) + + // create oscilator + voice.osc.type = 'sine' + voice.osc.connect(voice.gain) + voice.osc.start() + + masterGain.connect(audioEngine.destination) +} + + +// AMBIENT + + + +// BUTTON HOVER diff --git a/js/interaction.js b/js/interaction.js new file mode 100644 index 0000000..c4c9795 --- /dev/null +++ b/js/interaction.js @@ -0,0 +1,33 @@ +// interaction + +const primaryNav = document.querySelector('nav') +const menuItem = document.querySelector('#menuItem') + +// TODO: (create voice class per button) +// let menuVoices = [] + +for (let c of primaryNav.children) { + // TODO: (create voice class per button) + // menuVoices[c.dataset.link] = new voice() + + c.addEventListener('click', () => { + console.log(`clicked : ${c.dataset.link}`) + }) + + c.addEventListener('mouseenter', () => { + menuItem.innerHTML = c.dataset.link + menuItem.className = 'active' + voice.play() + }) + + c.addEventListener('mouseout', () => { + menuItem.className = 'inactive' + voice.release() + }) + + menuItem.addEventListener('transitionend', () => { + if (menuItem.className == 'inactive') { + menuItem.innerHTML = '' + } + }) +} diff --git a/js/menu.js b/js/menu.js deleted file mode 100755 index f7102cf..0000000 --- a/js/menu.js +++ /dev/null @@ -1,45 +0,0 @@ -// GET ELEMENTS TO INTERACT WITH -// main menu -let audioBut = document.getElementById('audioButton') -let otherBut = document.getElementById('otherButton') - -// GET DOMs TO ALTER -let audioSection = document.getElementById('audioSection') -let otherSection = document.getElementById('otherSection') - -// MAIN MENU -audioBut.addEventListener("click", () => { - if (audioSection) { - otherSection.style.visibility = "hidden" - otherSection.style.display = "none" - audioSection.style.visibility = "visible" - audioSection.style.display = "inherit" - } else { - console.log('No section') - } -}) - -otherBut.addEventListener("click", () => { - if (otherSection) { - audioSection.style.visibility = "hidden" - audioSection.style.display = "none" - otherSection.style.visibility = "visible" - otherSection.style.display = "inherit" - } else { - console.log('No section') - } -}) - -// MOBILE menu - -var menuButton = document.querySelector("#mobileButt"); - - menuButton.addEventListener("click", function(event) { - event.preventDefault(); - var parent = document.querySelector(".navigation"); - if (parent.classList.contains("open")) { - parent.classList.remove("open"); - } else { - parent.classList.add("open"); - } -}); diff --git a/prototyping/outline.pdf b/prototyping/outline.pdf new file mode 100644 index 0000000000000000000000000000000000000000..32ecb3490b8f7d9b5c4e1f73e4bc36f215bcff0f GIT binary patch literal 961 zcmZWo&2G~`5UzUM8*ea|h(w5Z*YRJfs1k9Sv<1|Vq;NnzY@Cg46ui-TQ>C2x2s}U! z9DC{k1W&*Li3^W_1VZA#9f=FG&QGIeW!c_uJ>Pua%(&ETwI8yoOG+RA-25XBP>{n{ zq|pHDiO6D|fQwL%0D#p_Ct4_cPPi5=5y_Dt`}-uTvht{v%-=6>BGWp~T%EzaNKgiGBoxjiT zeJ3ItEqU?HC^9n46NUJ`IX0WxT5cimV6HoTjpCruFaR!#Q`~?RJ^}_-#PN=j@c{35 zEqUxU4_JeXsQ|0XV*w>#1#g!tk!cKFRpO}_rMxNU@Dd>kz865?uxb$0eV@Tu5fsWy zV^j{Nri%i0l$=dBv@KE<=t^!M1t^~7QH*ou&a7maLx0 zTrf+Gob^27$Lh&{c9Yi*ORk5l@u_R%Kq5 zLOIcTn(tXyWkh4er%4*+RjJ}irAQRwoaj_$Ez_ZLYtN>vPHW6%wp+J@2bA5Xw6c-Y z-^jTT9dgYlGA`Imhw^1lZaX1cbm_{F + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + max franklin + + + + + + audio + + + + teach + + + + + +