183 lines
5.3 KiB
HTML
183 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>oregano</title>
|
|
|
|
<main>
|
|
<p class=verse>
|
|
<span class=sentence><span class=oregano>Oregano</span> is best on italian cuisine.</span>
|
|
<span class=sentence>The green offsets the tomato sauce (I can hear the shouting: <q>Italians don't only use tomato sauce!</q>).</span>
|
|
<span class=sentence>It can be pronounced with an <span class=egg>egg</span> in
|
|
the middle or so that it rhymes with <span class=guano>guano</span>.</span>
|
|
<span class=sentence>Your choice.</span>
|
|
<p class=verse>
|
|
<span class=sentence>Every time I think of <span class=oregano>oregano</span> I think of my ex.</span>
|
|
<span class=sentence>She wrote a poem about her dying English grandfather, how he said <span class=oregano>oregano</span> with the long, <span class=guano>guano</span> <em>A</em>.</span>
|
|
<span class=sentence>There was a picture attached to it, he was looking through a donut.</span>
|
|
<span class=sentence>No <span class=oregano>oregano</span> in sight.</span>
|
|
<span class=sentence>Not even a plate of spaghetti in the photo, just him, the nurse, the donut, the machines.</span>
|
|
<span class=sentence>That's why I left her.</span>
|
|
<p class=verse>
|
|
<span class=sentence>Except that's not why I left, not really.</span>
|
|
<span class=sentence>In fact, she left me, if I'm being honest.</span>
|
|
<span class=sentence>There are times I wish I could get that time back, if I'm being more honest.</span>
|
|
<span class=sentence>I suspect she feels that way about her <span
|
|
class=guano>grandfather</span>.</span>
|
|
<p class=verse>
|
|
<span class=sentence>Or I don't want the time back, but it sits there in the back of my mind.</span>
|
|
<span class=sentence>Menacingly, maybe.</span>
|
|
<span class=sentence>Maybe just bored.</span>
|
|
<span class=sentence>It's got nothing better to do.</span>
|
|
</main>
|
|
<footer class=oregano>
|
|
[[oregano]]
|
|
<a href="index.html">return</a>
|
|
<audio id="reading"
|
|
src="https://sound.acdw.net/audiomo19.10.ogg"
|
|
preload autoplay>
|
|
Your browser does not support the <code>audio</code> element.
|
|
Check out the reading
|
|
<a href="https://sound.acdw.net/audiomo19.10.ogg">here</a>.
|
|
</audio>
|
|
</footer>
|
|
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
margin: 0; padding: 0;
|
|
}
|
|
main,footer {
|
|
font: 20px/3 monospace;
|
|
}
|
|
main {
|
|
text-shadow: 0 -60px red;
|
|
max-width: 4880px;
|
|
padding: 60px;
|
|
}
|
|
footer {
|
|
text-align: center;
|
|
text-shadow: 0 0 2px darkgreen;
|
|
}
|
|
a:link { text-decoration: none; color: inherit; padding: 6px; }
|
|
a:visited { color: inherit; }
|
|
a:hover { background: green; }
|
|
p {
|
|
margin: 0;
|
|
text-indent: 50%;
|
|
color: green;
|
|
}
|
|
.egg,.guano,.oregano {
|
|
color: white;
|
|
padding: 20px;
|
|
}
|
|
.egg {
|
|
background: center url("egg.png"), yellow;
|
|
box-shadow: 0 -60px yellow;
|
|
}
|
|
.guano {
|
|
background: center url("guano.jpg"), brown;
|
|
box-shadow: 0 -60px brown;
|
|
}
|
|
.oregano {
|
|
background: center/cover url("oregano.jpg"), green;
|
|
box-shadow: 0 -60px green;
|
|
}
|
|
.green {
|
|
background: green !important;
|
|
border-radius: 3px;
|
|
transition: background 0.25s;
|
|
}
|
|
|
|
.greenfade, .greenfade * {
|
|
background: green !important;
|
|
padding: 2em;
|
|
transition-property: background,padding;
|
|
transition-duration: 10s;
|
|
}
|
|
|
|
.erase {
|
|
color: white;
|
|
transition: color 0.25s;
|
|
}
|
|
|
|
.erase .egg,
|
|
.erase .guano,
|
|
.erase .oregano {
|
|
background: white;
|
|
box-shadow: none;
|
|
transition: background 0.25s;
|
|
}
|
|
|
|
.fuzz {
|
|
text-shadow: 0 -60px 400px red;
|
|
transition: text-shadow 30s ease-in;
|
|
}
|
|
.disappear, .disappear * {
|
|
height: 0;
|
|
transition: height 1s;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function hasClass(el, className) {
|
|
if (el.classList)
|
|
return el.classList.contains(className)
|
|
else
|
|
return
|
|
!!el.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))
|
|
}
|
|
function addClass(el, className) {
|
|
if (el.classList) { el.classList.add(className); }
|
|
else if (!hasClass(el, className)) { el.className += " " + className; }
|
|
}
|
|
function removeClass(el, className) {
|
|
if (el.classList) { el.classList.remove(className); }
|
|
else if (hasClass(el, className)) {
|
|
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
|
|
el.className = el.className.replace(reg, ' ');
|
|
}
|
|
}
|
|
|
|
const pace = 1000;
|
|
|
|
function updateTransition() {
|
|
var els = document.querySelectorAll(".sentence");
|
|
for (let i = 0; i < els.length; i++) {
|
|
let el = els[i]
|
|
let l = els.length;
|
|
let j = l - i;
|
|
setTimeout(function() {
|
|
addClass(el, 'green');
|
|
}, (pace*i));
|
|
setTimeout(function() {
|
|
addClass(el, 'erase');
|
|
}, (pace*j+pace*l));
|
|
}
|
|
}
|
|
function paragraphs(sentenceCount) {
|
|
let timeout = 2*pace * sentenceCount;
|
|
console.log("Paragraph counter started:", timeout);
|
|
var ps = document.querySelectorAll(".verse");
|
|
for (let i = 0; i < ps.length; i++) {
|
|
let el = ps[i];
|
|
setTimeout(function() {
|
|
addClass(el, 'fuzz');
|
|
}, timeout+i*pace/4);
|
|
setTimeout(function() {
|
|
addClass(el, 'greenfade');
|
|
}, timeout*2);
|
|
setTimeout(function() {
|
|
addClass(el, 'disappear');
|
|
}, timeout*2+pace*2*i+pace);
|
|
}
|
|
}
|
|
window.onload = function() {
|
|
updateTransition();
|
|
paragraphs(document.querySelectorAll('.sentence').length);
|
|
var reading = document.getElementById("reading");
|
|
reading.play();
|
|
}
|
|
</script>
|