Add Oregano
This commit is contained in:
parent
b85ff280e4
commit
6f67870af5
|
@ -62,6 +62,7 @@
|
|||
<li><a href="same-page.html">same page</a></li>
|
||||
<li><a href="cornershop.html">corner shop</a></li>
|
||||
<li><a href="windy.html">windy</a></li>
|
||||
<li><a href="oregano.html">oregano</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,182 @@
|
|||
<!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>
|
Binary file not shown.
After Width: | Height: | Size: 250 KiB |
Loading…
Reference in New Issue