From 4e5ab64db82fe968587693c7a000369b32fd6293 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 5 Feb 2021 16:16:52 +0100 Subject: portfolio scaffolding --- docs/portfolio/.gitignore | 2 + docs/portfolio/fonts/CrimsonText-Bold.ttf | Bin 0 -> 64424 bytes docs/portfolio/fonts/CrimsonText-BoldItalic.ttf | Bin 0 -> 50132 bytes docs/portfolio/fonts/CrimsonText-Italic.ttf | Bin 0 -> 87932 bytes docs/portfolio/fonts/CrimsonText-Regular.ttf | Bin 0 -> 125568 bytes docs/portfolio/fonts/CrimsonText-SemiBold.ttf | Bin 0 -> 52676 bytes .../portfolio/fonts/CrimsonText-SemiBoldItalic.ttf | Bin 0 -> 50080 bytes docs/portfolio/fonts/OFL.txt | 94 +++++++ docs/portfolio/img/doc.svg | 1 + docs/portfolio/img/graph.svg | 1 + docs/portfolio/img/grid.svg | 1 + docs/portfolio/img/note.svg | 1 + docs/portfolio/img/notes.svg | 1 + docs/portfolio/img/pause.svg | 1 + docs/portfolio/img/play.svg | 1 + docs/portfolio/img/sonification-share.png | Bin 0 -> 53777 bytes docs/portfolio/index.css | 301 +++++++++++++++++++++ docs/portfolio/index.html | 160 +++++++++++ docs/portfolio/index.js | 169 ++++++++++++ 19 files changed, 733 insertions(+) create mode 100644 docs/portfolio/.gitignore create mode 100644 docs/portfolio/fonts/CrimsonText-Bold.ttf create mode 100644 docs/portfolio/fonts/CrimsonText-BoldItalic.ttf create mode 100644 docs/portfolio/fonts/CrimsonText-Italic.ttf create mode 100644 docs/portfolio/fonts/CrimsonText-Regular.ttf create mode 100644 docs/portfolio/fonts/CrimsonText-SemiBold.ttf create mode 100644 docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf create mode 100644 docs/portfolio/fonts/OFL.txt create mode 100644 docs/portfolio/img/doc.svg create mode 100644 docs/portfolio/img/graph.svg create mode 100644 docs/portfolio/img/grid.svg create mode 100644 docs/portfolio/img/note.svg create mode 100644 docs/portfolio/img/notes.svg create mode 100644 docs/portfolio/img/pause.svg create mode 100644 docs/portfolio/img/play.svg create mode 100644 docs/portfolio/img/sonification-share.png create mode 100644 docs/portfolio/index.css create mode 100644 docs/portfolio/index.html create mode 100644 docs/portfolio/index.js (limited to 'docs/portfolio') diff --git a/docs/portfolio/.gitignore b/docs/portfolio/.gitignore new file mode 100644 index 0000000..8f87a49 --- /dev/null +++ b/docs/portfolio/.gitignore @@ -0,0 +1,2 @@ +media + diff --git a/docs/portfolio/fonts/CrimsonText-Bold.ttf b/docs/portfolio/fonts/CrimsonText-Bold.ttf new file mode 100644 index 0000000..2a4951e Binary files /dev/null and b/docs/portfolio/fonts/CrimsonText-Bold.ttf differ diff --git a/docs/portfolio/fonts/CrimsonText-BoldItalic.ttf b/docs/portfolio/fonts/CrimsonText-BoldItalic.ttf new file mode 100644 index 0000000..241ad8e Binary files /dev/null and b/docs/portfolio/fonts/CrimsonText-BoldItalic.ttf differ diff --git a/docs/portfolio/fonts/CrimsonText-Italic.ttf b/docs/portfolio/fonts/CrimsonText-Italic.ttf new file mode 100644 index 0000000..45e9168 Binary files /dev/null and b/docs/portfolio/fonts/CrimsonText-Italic.ttf differ diff --git a/docs/portfolio/fonts/CrimsonText-Regular.ttf b/docs/portfolio/fonts/CrimsonText-Regular.ttf new file mode 100644 index 0000000..a173714 Binary files /dev/null and b/docs/portfolio/fonts/CrimsonText-Regular.ttf differ diff --git a/docs/portfolio/fonts/CrimsonText-SemiBold.ttf b/docs/portfolio/fonts/CrimsonText-SemiBold.ttf new file mode 100644 index 0000000..ea3bb66 Binary files /dev/null and b/docs/portfolio/fonts/CrimsonText-SemiBold.ttf differ diff --git a/docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf b/docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf new file mode 100644 index 0000000..8c18b09 Binary files /dev/null and b/docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf differ diff --git a/docs/portfolio/fonts/OFL.txt b/docs/portfolio/fonts/OFL.txt new file mode 100644 index 0000000..bb385d2 --- /dev/null +++ b/docs/portfolio/fonts/OFL.txt @@ -0,0 +1,94 @@ +Copyright (c) 2010, Sebastian Kosch (sebastian@aldusleaf.org), +with Reserved Font Name "Crimson" and "Crimson Text". + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/portfolio/img/doc.svg b/docs/portfolio/img/doc.svg new file mode 100644 index 0000000..fb3237a --- /dev/null +++ b/docs/portfolio/img/doc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/graph.svg b/docs/portfolio/img/graph.svg new file mode 100644 index 0000000..0abb9c2 --- /dev/null +++ b/docs/portfolio/img/graph.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/grid.svg b/docs/portfolio/img/grid.svg new file mode 100644 index 0000000..ea1563d --- /dev/null +++ b/docs/portfolio/img/grid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/note.svg b/docs/portfolio/img/note.svg new file mode 100644 index 0000000..13e42c8 --- /dev/null +++ b/docs/portfolio/img/note.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/notes.svg b/docs/portfolio/img/notes.svg new file mode 100644 index 0000000..aba0726 --- /dev/null +++ b/docs/portfolio/img/notes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/pause.svg b/docs/portfolio/img/pause.svg new file mode 100644 index 0000000..48baa51 --- /dev/null +++ b/docs/portfolio/img/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/play.svg b/docs/portfolio/img/play.svg new file mode 100644 index 0000000..9ef742f --- /dev/null +++ b/docs/portfolio/img/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/portfolio/img/sonification-share.png b/docs/portfolio/img/sonification-share.png new file mode 100644 index 0000000..b9f9041 Binary files /dev/null and b/docs/portfolio/img/sonification-share.png differ diff --git a/docs/portfolio/index.css b/docs/portfolio/index.css new file mode 100644 index 0000000..caf9524 --- /dev/null +++ b/docs/portfolio/index.css @@ -0,0 +1,301 @@ + +@font-face { + font-family: 'Crimson'; + src: url('fonts/CrimsonText-Bold.ttf') format('truetype'); + font-weight: bold; +} +@font-face { + font-family: 'Crimson'; + src: url('fonts/CrimsonText-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: 'Crimson'; + src: url('fonts/CrimsonText-Regular.ttf') format('truetype'); +} +@font-face { + font-family: 'Crimson'; + src: url('fonts/CrimsonText-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; +} + +* { box-sizing: border-box; } +html,body { + margin: 0; padding: 0; + width: 100%; height: 100%; +} +body { + font-family: 'Crimson', serif; + font-size: 1.2em; + transition: background-color 100ms; + background-color: #fff; + background-image: linear-gradient(30deg, #fff0f8, #ffffff, #f4fbff); + background-attachment: fixed; +} +.app { + font-family: sans-serif; + font-size: 0.8em; +} +.app div { + display: inline-block; +} +i { + font-weight: normal; + font-style: italic; +} +p { + line-height: 1.5; + color: #111; +} +h1 { + color: #001808; + margin: 10px 0; + font-weight: normal; + max-width: 640px; +} +h2 { + color: #222; + margin: 20px 0; + font-weight: normal; + font-size: 1.4em; +} +h3 { + font-size: 1.8em; + color: #000; + margin: 0px 5px 10px 0; + font-weight: normal; + font-style: italic; + display: inline-block; +} +h3 + small { + display: inline-block; + font-size: 1.2em; + font-style: italic; +} +ul { + list-style-type: none; +} +li { + line-height: 1.5; + font-size: 0.8em; +} +li::before { + content: "\2022"; + color: #888; + display: inline-block; + width: 1em; + margin-left: -1em; +} + +.links .link { + color: #11f; + text-decoration: underline; + cursor: pointer; + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 0.1em; + max-width: 640px; +} +.links .icon { + display: inline-block; + background: white; + margin-right: 0.4em; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 1.2em; + height: 1.2em; +} + +.icon.notes { background-image: url(img/notes.svg);} +.icon.note { background-image: url(img/note.svg);} +.icon.grid { background-image: url(img/grid.svg);} +.icon.graph { background-image: url(img/graph.svg);} +.playing .icon.audio, +.icon.pause { background-image: url(img/pause.svg);} +.icon.audio, +.icon.play { background-image: url(img/play.svg); background-size: 80% 80%;} + +.player { + position: fixed; + bottom: 0; left: 0; + width: 100%; + max-width: 720px; + padding-right: 40px; + box-shadow: 0 0 2px rgba(0,0,0,0.3); + background: white; + transition: 0.2s cubic-bezier(0,0,1,1); + transform: translate3d(0,110%,0); + display: flex; + flex-direction: column; +} +.player.active { + transform: translate3d(0,0%,0); +} +.player .icon { + cursor: pointer; + height: 80px; + width: 60px; + margin-left: 30px; + display: flex; + justify-content: center; + align-items: center; +} +.player .pos { + flex: 1; + position: relative; + cursor: pointer; + height: 80px; +} +.player .title, +.player .time { + font-size: 0.8em; + color: #333; + padding-left: 20px; + text-transform: capitalize; +} +.player .title { + padding: 20px 0px 0 50px; +} +.player .icon img { + display: none; + width: 1.2em; +} +.player .icon.active .play_icon { + display: none; +} +.player .icon.active .pause_icon { + display: block; +} +.player .icon .pause_icon { + display: none; +} +.player .icon .play_icon { + display: block; +} +.player .track { + pointer-events: none; + position: absolute; + top: 50%; left: 0; + margin-top: -1px; + height: 2px; + background: #333; + width: 100%; +} +.player .dot { + pointer-events: none; + position: absolute; + top: 50%; left: 0; + margin-top: -6px; + width: 12px; + height: 12px; + border-radius: 50%; + background: black; +} + +.menu { + line-height: 1.5; +} +.menu a.a { + margin-left: 20px; +} + +.mobile .player .icon { + margin-left: 10px; +} +.mobile .player .title { + padding-left: 20px; +} +#dataset_name { + text-transform: capitalize; +} +.desktop body { + user-select: none; +} +.top { + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 50px; + padding-bottom: 200px; + max-width: 800px; + margin: 0 auto; +} +.mobile .content { + padding: 10px; + padding-bottom: 200px; +} +.mobile .links { + margin-top: 10px; +} +.desktop p { + width: 640px; +} +.corner { + position: absolute; + bottom: 0; + margin: 10px; + padding: 10px; + background: white; + display: flex; +} +.corner.left { + left: 0; +} +.corner.right { + right: 0; +} +body { + transition: 0.1s; +} +.loading { + opacity: 0; +} +.column { + display: flex; + flex-direction: column; +} +.row { + display: flex; + flex-direction: row; + align-items: center; +} +.block { + display: flex; + flex-direction: column; + align-items: center; + margin-right: 10px; +} +.block > span { + display: block; + margin-top: 10px; +} +.radio { + display: flex; + flex-direction: row; + align-items: center; + margin-top: 20px; + margin-bottom: 20px; +} +.radio > span { + margin-left: 10px; +} +.buttons { + margin: 0 0 10px 0; +} +label { display: flex; flex-direction: row; margin-bottom: 10px; } +label > span { display: block; min-width: 80px; } +#recording_msg { display: none; } +.recording #recording_msg { display: inline; } +#cases { + margin-top: 10px; + height: 60px; +} diff --git a/docs/portfolio/index.html b/docs/portfolio/index.html new file mode 100644 index 0000000..e5ea486 --- /dev/null +++ b/docs/portfolio/index.html @@ -0,0 +1,160 @@ + + + + + Bethany Barrett + + + + + + + + + + + + +
+
+
+

Bethany Barrett

+

Musician, composer, sound designer

+ +

+ Hello and welcome to my portfolio! Here you will find various recordings and soundtracks + that I have produced over the last few years. I hope you find something you enjoy. I am + always available for new commissions and client work. Please email me at + to start a converation. Thanks! +

+ +

+ 🦄 Bethany +

+ +

SocialSim

+ 2020 + +
+ +
+ Glacial Catacomb + + +
+ Ennio Morricone - Rabbia e Tarantella + +
+ +

+ Hito Steyerl’s 2020 installation SocialSim used one of my dungeon synth compositions, Glacial Catacomb, as the music inside an art gallery‘s “secret VIP room” full of self-evolving artworks. The film’s credits music was my rendition of Ennio Morricone's Rabbia e Tarantella (1974), performed + using guitars, drums, and synths. +

+ +

Drill

+ 2019 + +
+ +
+ Mass Shootings (1999-2018) + + +
+ AR-15 (2016-17) + + +
+ Firearms Manufactured (1986-2016) + + +
+ Yale Marching Band - Mass Shootings (1999-2018) + + +
+ Flowers of Inequality + + +
+ Six Days + +
+ +

+ Drill was a film shot by Hito Steyerl at the Park Avenue Armory in New York City. + The piece centered around gun violence in America, both its history (the Armory is where + the NRA was founded) and the present-day situation where mass shootings happen nearly + every week. I scored the film using data sonifications of mass shooting data, performed + using the Deepmind 12 synthesizer and JX-8P. These were later arranged and + performed by the Yale University Precision Marching Band in the Drill Hall at the Armory. + Finally, I composed two long drones using income inequality data. +

+ +

This is the Future / Power Plants

+ 2019 + +
+ +
+ (drone) + + +
+ +

+ Hito Steyerl's This is the Future / Power Plants used one of my drones to illustrate a garden of + imaginary flowers. It showed in 2019 at the Venice Biennale. +

+ +

Figaros Wölfe

+ 2017 + +
+ +
+ Cold Sweat - Mescaline + + +
+ +

+ I composed the soundtrack to Dominik Galizia's film Figaros Wölfe, a feature-length psychological drama about a woman overcoming her past trauma through the help of a friend. The synth-driven score features some of my favorite instruments, including the Roland JX-8P and the Moog SubPhatty. +

+ +
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ 0:00 / 0:00 +
+
+
+ + + + diff --git a/docs/portfolio/index.js b/docs/portfolio/index.js new file mode 100644 index 0000000..c556c3b --- /dev/null +++ b/docs/portfolio/index.js @@ -0,0 +1,169 @@ + +var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) +var links = document.querySelectorAll(".link") +var audio, music = [], current_index = -1, typing = false +var active = false +// var comment = document.querySelector("#comment") +Array.prototype.slice.apply(links).forEach(function(url){ + const href = url.getAttribute('href') + if (!href) return + if (href.match(/\.(mp3|wav|ogg)/i)) { + var index = music.length + // if (is_mobile) href = href.replace(/^https/,"http") + music.push(url) + url.addEventListener("click", function(e){ + if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + e.preventDefault() + play(index) + }) + } + else if (href.match(/(gif|jpe?g|png|bmp)/i)) { + // url.innerHTML = "" + // url.addEventListener("click", function(e){ + // if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + // e.preventDefault() + // url.classList.toggle("zoomed") + // }) + } +}) +const el = document.querySelector('.player') +const title_el = el.querySelector('.title') +const icon_el = el.querySelector('.icon') +const pos_el = el.querySelector('.pos') +const track_el = el.querySelector('.track') +const dot_el = el.querySelector('.dot') +const time_el = el.querySelector('.time') +const track_width = track_el.offsetWidth +const track_left = pos_el.offsetLeft +if (music.length) { + audio = document.createElement("audio") + window.a = audio + audio.setAttribute("controls", true) + audio.addEventListener("ended", next) + audio.addEventListener("timeupdate", timeupdate) + // audio.src = music[0].href + // var player = document.querySelector("table") + // player.parentNode.insertBefore(audio, player) + document.body.addEventListener("keydown", keydown) + // comment.addEventListener("focus", focusTextBox) + // comment.addEventListener("blur", blurTextBox) +} +icon_el.addEventListener('click', toggle) + +if (is_mobile) { + pos_el.addEventListener('touchstart', e => mousedown(e.touches[0])) + pos_el.addEventListener('touchmove', e => mousemove(e.touches[0])) + window.addEventListener('touchup', mouseup) +} else { + pos_el.addEventListener('mousedown', mousedown) + pos_el.addEventListener('mousemove', mousemove) + window.addEventListener('mouseup', mouseup) +} +var down = false +var mousex = 0 +function mousedown(e) { + e.preventDefault && e.preventDefault() + down = true + mousex = (e.pageX - track_left) / track_width +} +function mousemove(e) { + if (!down) return + mousex = Math.min(Math.max(0, (e.pageX - track_left) / track_width), 1) + dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)' +} +function mouseup(e) { + if (!down) return + down = false + var t = mousex * audio.duration + audio.currentTime = Math.round(t) + dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)' +} + +function play(index){ + if (!active) { + active = true + el.classList.add('active') + } + // if (index === music.length) return stop(); + if (!icon_el.classList.contains('active')) { + icon_el.classList.add('active') + } + current_index = (index + music.length) % music.length + const a_el = music[current_index] + audio.src = a_el.getAttribute('href') + audio.play() + + const header = prevUntil(a_el.parentNode, 'h3') + const title = (index + 1) + '. ' + header.innerText + ': ' + a_el.innerText + title_el.innerHTML = title + var playing = document.querySelector(".playing") + if (playing) playing.classList.remove("playing") + music[current_index].classList.add("playing") +} +function prev(){ + play(current_index - 1) +} +function next(){ + play(current_index + 1) +} +function pause() { + icon_el.classList.remove('active') +} +function stop() { + el.classList.remove('active') + var playing = document.querySelector(".playing") + if (playing) playing.classList.remove("playing") + active = false +} +function toggle(){ + if (audio.paused) { + icon_el.classList.add('active') + audio.play() + } else { + pause() + audio.pause() + } +} +function timeupdate() { + if (down) return + let { currentTime, duration } = audio + let t = currentTime / duration + dot_el.style.transform = 'translateX(' + (track_width * t) + 'px)' + time_el.innerHTML = time(currentTime) + ' / ' + time(duration) +} +function time(n) { + if (!n) return '0:00' + n = Math.floor(n) + let s = n % 60 + if (s < 10) s = '0' + s + let m = Math.floor(n / 60) + return m + ':' + s +} +function keydown(e){ + if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + switch (e.keyCode) { + case 37: // left + prev() + break; + case 39: // right + next() + break; + case 32: // spacebar + e.preventDefault() + toggle() + break; + } +} + +function prevUntil (elem, selector) { + elem = elem.previousElementSibling; + while (elem) { + if (elem.matches(selector)) break; + elem = elem.previousElementSibling; + } + return elem; +} +// function focusTextBox (){ typing = true } +// function blurTextBox (){ typing = false } + +document.querySelector('.loading').classList.remove('loading') -- cgit v1.2.3-70-g09d2