acdw
/
tilde.town
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change site again

This commit is contained in:
Case Duckworth 2019-06-07 17:46:14 -05:00
parent 0745e72a63
commit cc4c96456f
12 changed files with 718 additions and 673 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
cornershop.html Normal file
View File

@ -0,0 +1,264 @@
<!DOCTYPE html>
<title>corner shop</title>
<style>
body { background: linear-gradient(to right, black 5%, #ddd); }
main {
background: #ddd;
font: 20px/1.5 serif;
max-width: 70ch;
padding: 2ch;
float: right;
position: relative;
top: 60px;
}
#title {
font: 40px/2 monospace;
position: fixed;
top: 0; left: 0; right: 0;
background:
url(https://www.publicdomainpictures.net/pictures/210000/nahled/black-bricks-background.jpg);
color: white;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: baseline;
}
q.crone {
font: 18px sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
q.crone::before, q.crone::after { content: ""; }
q.n { color: navy; }
q.n::before { content: "\2014"; padding-right: 6px;}
q.n::after { content: ""; }
q.landlord { font: 18px serif; font-weight: bold; }
.number {
padding: 4px;
border: 1px solid;
border-radius: 2px;
font: 18px monospace;
background: green;
color: white;
}
.stop {
padding: 8px;
background: red;
color: white;
border-radius: 8px;
}
.return {
text-align: right;
color: white;
font-size: 16px;
padding: 8px;
}
</style>
<aside id="title">
<span>corner shop</span>
<a href="index.html" class=return>return</a>
</aside>
<main>
<p><q class=crone>There are times when you'll want to stop</q>,
she said,
<q class=crone>and there are times when going on
seems like the only option.</q>
<p>
I wasn't sure what she was talking about. I'd only come in the
shop, walked up to the counter, leaned my head around the corner
of the muffin display to ask her if they still had any danishes,
or if they were out for the day.
<p>
She'd came out of the back room, her hair a halo around her head,
muttering to herself, staring at her fingers. I'd asked my
question <q class=n>Do you still have any danishes?</q> and that's when
she said what she said.
<p>
<q class=crone>There are times when you'll want to stop and there
are times when going on seems like the only option.</q>
<p>
I didn't know what to do with that, so I just looked at her while
she stared at her fingers and wiggled them a little, like she was
counting something. She didn't look up. Eventually, I cleared my
throat and said <q class=n>What?</q> She barely shifted her head,
I'm presuming to indicate that she'd heard me but that whoever was
in her head was busy at the moment, and would return my call at a
later time. <q class=n>Right &mdash;</q> I said, and not seeing any
danishes in the displays, I turned to go.
<p>
That's when she grabbed me by the arm, her grip stronger than
anyone's I'd had the pleasure or pain to experience before. She
still didn't look me in the eyes, but at a spot just between them,
and slightly higher up. It gave me a headache. She said, louder
this time, <q class=crone>There are times when you'll want to
stop, and times when going on seems like the only option.</q>
<p>
I tugged on my arm, desperate to get free from her grip. She was
really starting to freak me out. I said <q class=n>Get off me you
old &mdash;</q> but then she continued.
<p>
<q class=crone>Neither feeling is right when it is felt. You must
continue when wanting to stop and stop when the only option is
to go forward. Think when acting seems best. Act when
caution seems wise. Whatever you do, do not listen to
yourself. Remember you don't know anything.</q>
<p>
I wrenched my arm free from her grasp (could I only because
she'd loosened it?), turned on my heel, and ran from the shop as
quickly as I could. I ran down the block and turned the corner
and ignored the Don't Walk sign to run across traffic (honks
chorusing their disapproval) and I didn't stop running until I
reached my building's locked door where I fumbled through my
keys as quick as I could but couldn't find the one I needed.
<p>
I checked again. And again. The key to my building wasn't on
the ring.
<p>
I hadn't taken my keyring apart for at least three months, not
since I switched to this new keyring that was purported to make
using your keys <span class=number>150%</span> easier. I began to panic just a little
bit but I thought <q class=thought>The only difference I've
experienced today, the day I've lost the key to my
building, is that little shop that didn't have
danishes</q>. So I decided to pay that little shop another
visit.
<p>
I ran back across the street (this time waiting for the cars to
pass and the walking man to flash), around the corner, down the
block and then &mdash; I walked into a poster on a brick wall
advertising The Better You. The little shop was gone.
<p>
Maybe I'd lost my way. I had been in quite the hurry after the
lady behind the counter had so disturbed me. I hadn't been paying
attention to where I was going. I'd rushed across the street
&mdash; twice! &mdash; and I hadn't thought to note the name of
the shop on either my entrance or my exit.
<p>
I tried shaking my head to rid my mind of the doom-cloud sitting
above it and called my landlord. The phone rang twice and she
picked up.
<p>
<q class=n>Hello, I've lost my key, I was hoping to get a new
one.</q><br>
<q class=landlord>How did that happen?</q><br>
<q class=n>To be honest I'm not sure. I stopped in this danish
shop &mdash;</q><br>
<q class=landlord>Oh, the one on <span class=number>13th</span> and <span
class=number>Westmore</span>?</q>
<p>
I looked up at the street corner's signs. I was on <span
class=number>12th</span> and
<span class=number>Westmore</span> &mdash; so I had misremembered the shop's location! I hung
up without answering my landlord and walked briskly down the
street toward <span class=number>13th</span>.
<p>
I passed <span class=number>14th</span> Street. Oops. I was really turned around today.
I turned back and began walking toward <span
class=number>13th</span>.
<p>
I passed <span class=number>12th</span>, then <span
class=number>11th</span>. Wait a moment. I turned around again
and walked back down from where I came.
<p>
<span class=number>11th</span>. <span class=number>12th</span>.
<span class=number>14th</span>.
<p>
I caught my breath. It was rising in my chest to something
resembling a sob. I wasn't sure what to do. My coat seemed to
tighten around me. The wind blew colder. I turned up my collar
and walked backward &mdash; slowly &mdash; up the block, watching the
numbers on the buildings.
<p>
<span class=number>1405</span>. <span class=number>1403</span>.
<span class=number>1401</span>.
<p>
<span class=number>1256</span>. <span class=number>1252</span>.
<p>
Where were the <span class=number>1300</span>s? Where was <span
class=number>13th</span>?!
<p>
My phone buzzed in my pocket. I wasn't sure how long it had
been buzzing for or if it had just started. I pulled it out and
looked at the screen. My landlord. I answered the call and put
the phone up to my ear.
<p>
<q class=landlord>I can't believe you just hung up on me, of all
the nerve&mdash;</q><br>
<q class=n>I can't find <span class=number>13th</span>.</q><br>
<q class=landlord>You what?</q><br>
<q class=n>I can't find <span class=number>13th</span>. You said
the shop was on <span class=number>13th</span> and
<span class=number>Watermore</span>.</q><br>
<q class=landlord>What shop?</q><br>
<q class=n>The shop, the one you were asking about. The one
without danishes.</q><br>
<q class=landlord>No, I said <span class=number>13th</span> and
<em><span class=number>Westmore</span></em>. <span
class=number>13th</span> ends before <span
class=number>Watermore</span>.
Now do you want your key copied or &mdash;</q>
<p>
I don't know what else she said because I was off again, this
time toward <span class=number>14th</span>. I'd have to walk up
<span class=number>14th</span> to <span
class=number>Westmore</span>, then
down the block to <span class=number>13th</span>, and there I'd be. It's funny, I
thought, I don't remember going all the way around these blocks
and all, before.
<p>
I turned the corner at <span class=number>14th</span> and walked with purpose. I knew
this part of the city. The streets were in alphabetical
order, so they were very easy to remember; besides, I'd lived
here for five years, I should think I'd know my way around.
I've just been having trouble sleeping, that's all. Nothing
really to worry about. I'm just a little scrambled. I'll just
go on down <span class=number>Westmore</span> to <span class=number>13th</span> and grab my key from the freak lady
in the shop &mdash;
<p>
An empty lot yawned like a toothless old hag.
A fence protected its waste, but somehow some young tuff
had still managed to spraypaint a curseword artfully
on the dirty brick wall.
My mouth agape, I turned and looked toward the street.
My eyes tripped over a bench with a sleeping figure.
I sat down next to it in silence.
I waited a long time.
<p>
The figure stirred in its sleep &mdash; in <em>her</em> sleep, I realized,
as she sat up and yawned like a cat,
completely unaware of her surroundings.
<p>
In <strong><em>HER</em></strong> sleep, I realized suddenly,
it was the woman from the shop!
I let out a yelp of surprise.
Slowly she pivoted her head on her neck and looked at me.
<p>
<q class=crone>What's wrong with you, son?</q><br>
<q class=n>You &mdash; you're her &mdash;</q><br>
<q class=crone>Yes, I'm certainly me. Who're you?</q><br>
<q class=n>You're her &mdash; from the store &mdash;</q><br>
<q class=crone>Okay.</q><br>
<p>
She got up to go.
I grabbed her arm &mdash;
<q class=crone>Let go of me!</q> she screamed.
<p>
<q class=n>You were in the store, you told me you didn't have danishes,
or rather you didn't say anything about danishes but you said
&mdash;</q>
<br>
<q class=crone>I don't know what you're talking about!</q>
<p>
She tugged herself out of my grip and ran down the street.
I laid down on the bench where she'd been and new only to cry.
My phone buzzed some more in my pocket.
I knew it was my landlord, angry about my hanging up on her,
but ready somewhere with a new key.
She was a really good landlord, I've got to give her that.
<p>
I sat up and turned around to look at the empty lot without any danishes.
Except &mdash; there was a danish where I hadn't seen it before,
underneath the curseword spraypainted on the wall.
Next to it was one word: <strong class=stop>STOP</strong>.

BIN
flamingobathroom.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 94 KiB

301
index.html
View File

@ -1,170 +1,141 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="author" content="acdw">
<title>acdw's cool internet experiments</title>
<title>acdw's house</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript"> </script>
</head>
<body>
<div id="everything">
<section id="cover">
<h1>~acdw</h1>
<a id="moon" href="moon/">&#127770;</a>
</section>
<div id="below-the-fold">
<main role="main">
<section id="house">
<table id="site-header">
<tr><td>
<pre>
__
/ \
/ \
------
| ____|
| | ||
| | '||
~~~~~~~~
</pre>
</td>
<td id="titleblock">
<h1>acdw's house</h1>
<h2>in the
<a href="https://tilde.town">
~.town
</a>
</h2>
</td>
</tr>
</table>
</section>
<header>
<h1>acdw's cool internet experiments</h1>
<h2>by a
<span class=lower>v</span><span
class=higher>e</span><span
class=lower>r</span><span
class=higher>y</span>
<span class=lower>c</span><span
class=higher>o</span><span
class=lower>n</span><span
class=higher>c</span><span
class=lower>e</span><span
class=higher>r</span><span
class=lower>n</span><span
class=higher>e</span><span
class=lower>d</span>
<span class=lower>c</span><span
class=higher>i</span><span
class=lower>t</span><span
class=higher>i</span><span
class=lower>z</span><span
class=higher>e</span><span
class=lower>n</span>
</h2>
</header>
<main>
<section id="manifesto">
<h1>manifesto</h1>
<p>Creativity is the most important thing in a late-capitalist economy.
<p>Creativity is all we have after the machines automate everything
else away: after the building, the scrapping, the designing, the
selling and buying; after the preparation of meals, the housework,
the hunting and the gathering; after the sources of pleasure and
pain and all in between are hefted from us by faceless, good-natured
machines in the name of progress, we will have only our minds left,
and that's no given either.
<p>We must fight for our minds over all else.
<p>We must be weird; we must create things; we must take care that they
be not useful or sensical or monetizable; we must shatter
the meaning of the machine, for the machine can only make meaning
from things it understands.
<p>We must be ineffable.
</section>
<div class=wrapper>
<section id="introduction">
<h1>start here</h1>
<p>Hello, I'm <a href="https://www.acdw.net">acdw</a>
and this is my page in the <a href="http://tilde.town">~town</a>.
<p>I'm a library technician and writer of little things.
</section>
<section id="pages">
<h1>read</h1>
<ul>
<li><a href="same-page.html">same page</a>
<li><a href="cornershop.html">corner shop</a>
<li><a href="written-while-waiting.html">written while waiting</a>
</ul>
</section>
</div>
<section id="elsewhere">
<h1>you can also reach me</h1>
<ul>
<li><a href="https://writing.exchange/@acdw/">fediverse</a>
<li><a href="old-index/">older index</a>
<li><a href="https://www.acdw.net">homepage</a>
</ul>
</section>
<section id="ring">
<h1 class="ring" id="tilde_ring">
a member of the ~ring
</h1>
<ul class="ring-links">
<li>(<a href="/~eeeeeta/ring/join.html">join</a>)
<li><a id="tilde_town_ring" class="tilde_ring_link" href="">
random ~user
</a>
<li><a id="random_tildebox" class="tilde_ring_link" href="">
random ~box
</a>
<li><a id="tilde_town_ring_next" class="tilde_ring_link" href="">
next ~user
</a>
</span>
<script type="text/javascript">
var ringjs = document.createElement('script')
ringjs.src = document.location.protocol
+ '//tilde.town/~login/tilde_ring.js'
document.getElementById('tilde_ring').appendChild(ringjs)
</script>
</section>
</main>
<section id="about">
<h1>about me</h1>
<img id="mood" src="mood.jpg" alt="a dog with her head under the sofa" title="Mood." />
<p>I work in a library and care about books and information being free.
I have two dogs and foster a third.
I'm getting married soon and I'm excited about it.
</p>
<p>I'm interested in
veganism,
cooking,
socialism,
free software,
making friends,
science fiction,
co-ops (or at least the idea of them),
and cetera.
I'm a Unitarian Universalist by church
and an atheist/humanist by faith
(or lack of it).
I believe in the inherent goodness of people.
I believe in the simple fact
that we've made our bed,
and we can remake it to be better.
</p>
<p>My favorite children's book might just be
<a href="https://www.goodreads.com/book/show/363973.The_Little_Old_Lady_Who_Was_Not_Afraid_of_Anything">
<em>The Little Old Woman Who Wasn't Afraid of Anything</em></a>.
It's a lot of fun to read and it has a good message,
namely: <em>Don't be afraid of the unknown.
It's probably just misunderstood.</em>
</p>
<p>I am in complete awe of the community here on ~.town.
There's so much great art around town
and I want to make some that's just as good.
Everyone here inspires the hell out of me.
</p>
</section>
<section id="links">
<h1>links</h2>
<dl>
<dt>my stuff</dt>
<dd><a href="old_index">
old site</a></dd>
<dd><a href="feels">
feels</a></dd>
<dd><a href="https://www.acdw.net">
my "real" website</a></dd>
<dd><a href="http://ring.acdw.net">
a webring I made</a></dd>
<dd><a href="/~loosepoops/">
L&nbsp;O&nbsp;O&nbsp;S&nbsp;E&nbsp;P&nbsp;O&nbsp;O&nbsp;P&nbsp;S</a></dd>
<dt>coolness around town</dt>
<dd><a href="/~troido/cadastre/town.html">
town plots</a></dd>
<dd><a href="/~demophoon/">
~demophoon</a></dd>
<dd><a href="/~x4464/tildebrowser/">
a browser of all our pages</a></dd>
<dd><a href="/~karlen/">
no one will ever read this</a></dd>
<dt>surfing the world wide web</dt>
<dd><a href="https://generative.fm/">
Generative music generator</a></dd>
</dl>
</section>
<section id="lets-get-weird">
<h1>get weird</h1>
<p class="note">
I want to do something here that's "weird,"
like interesting.
But I don't know what to do.
Maybe bad poetry?</p>
<p class="verse">
<span class="line">There are things and there are things</span>
<span class="line">and there are other things, surely</span>
<span class="line">there are those that would not want</span>
<span class="line">to be so general but they don't know</span>
<span class="line">what it means to be general do they</span>
<p class="verse">
<span class="line">I have the general feeling</span>
<span class="line">that I wrote this in about two minutes</span>
<span class="line">and it shows</span>
<p class="verse">
<span class="line">I cannot simply keep slumping down into</span>
<span class="line">a reflexive self-consciousness</span>
<span class="line">I need to simply be who I am</span>
<span class="line">and be myself surely there is a way</span>
<span class="line">to do that but somehow they never</span>
<span class="line">told me what to do</span>
</section>
</main>
<footer>
<span class="ring" id="tilde_ring">
<em>a member of the ~ring</em>
(<a href="/~eeeeeta/ring/join.html">join</a>)
</span>
<span class="ring-links">
<a id="tilde_town_ring" class="tilde_ring_link" href="">
random ~user
</a>
| <a id="random_tildebox" class="tilde_ring_link" href="">
random ~box
</a>
| <a id="tilde_town_ring_next" class="tilde_ring_link" href="">
next ~user
</a>
</span>
<script type="text/javascript">
var ringjs = document.createElement('script')
ringjs.src = document.location.protocol
+ '//tilde.town/~login/tilde_ring.js'
document.getElementById('tilde_ring').appendChild(ringjs)
</script>
</footer>
</div>
</div>
</body>
</html>
<style>
body {
font: 18px/1.5 serif;
background: rgb(212,166,255);
}
header {
margin: 0 18px;
color: #d1efe7;
text-shadow: 0 0 2ch rgb(78,32,122);
}
h1,h2 { display: inline; font: 20px sans-serif; margin: 0; padding: 0;}
header > :not(:last-child)::after { content: "*"; margin: 18px;}
.lower,.higher { padding: 6px; font-size: 16px; position: relative; }
.lower { top: 4px; }
.higher { top: -4px; }
main { display: flex; flex-flow: row wrap; }
main section {
max-width: 40ch;
padding: 4ch;
margin: 18px;
box-shadow: 1ch 1ch 4ch rgb(78, 32, 122);
background: #d1efe7;
border-radius: 48px;
}
main section h1::after { content: "\261B"; padding: 0 18px; color: navy;}
p,ul,li { display: inline; }
p:not(:first-of-type)::before {
content: "\00b6";
padding: 0 1em;
color: navy;
}
ul { margin: 0; padding: 0; }
li:not(:first-of-type)::before {
content: "\2022";
padding: 0 1em;
}
a:link { font-family: monospace; text-decoration: none; color: inherit; }
a:visited { color: inherit; border-bottom: 1px dashed; }
a:hover { text-transform: uppercase; background: yellow; }
#manifesto {
color: darkred;
text-shadow: 0 0 2em red;
}
</style>

BIN
mood.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

45
moon/index.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="author" content="acdw">
<title>moon</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="suncalc.js" type="text/javascript"> </script>
</head>
<body>
<p>
The moon is <span id="phase"></span> tonight, long live the moon.
</p>
<script>
function phaseStr(phase) {
if (phase == 0) {
return "new";
} else if (phase < 0.25) {
return "a waxing crescent";
} else if (phase == 0.25) {
return "at first quarter";
} else if (phase < 0.5) {
return "a waxing gibbous";
} else if (phase == 0.5) {
return "full";
} else if (phase < 0.75) {
return "a waning gibbous";
} else if (phase == 0.75) {
return "at last quarter";
} else if (phase < 1) {
return "a waning crescent";
}
}
let phase = phaseStr(SunCalc.getMoonIllumination(new Date()).phase);
let moondesc = document.getElementById("phase");
document.addEventListener("DOMContentLoaded", function() {
moondesc.innerHTML = phase;
});
</script>
</body>
</html>

BIN
moon/moon.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 222 KiB

5
moon/style.css
View File

@ -1,5 +0,0 @@
body {
background-color: #c0ffee;
background-image: url('https://tilde.town/~acdw/moon/moon.jpg');
color: white;
}

332
moon/suncalc.js
View File

@ -1,332 +0,0 @@
/*
(c) 2011-2015, Vladimir Agafonkin
SunCalc is a JavaScript library for calculating sun/moon position and light phases.
https://github.com/mourner/suncalc
Copyright (c) 2014, Vladimir Agafonkin
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list
of conditions and the following disclaimer in the documentation and/or other materials
provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
(function () { 'use strict';
// shortcuts for easier to read formulas
var PI = Math.PI,
sin = Math.sin,
cos = Math.cos,
tan = Math.tan,
asin = Math.asin,
atan = Math.atan2,
acos = Math.acos,
rad = PI / 180;
// sun calculations are based on http://aa.quae.nl/en/reken/zonpositie.html formulas
// date/time constants and conversions
var dayMs = 1000 * 60 * 60 * 24,
J1970 = 2440588,
J2000 = 2451545;
function toJulian(date) { return date.valueOf() / dayMs - 0.5 + J1970; }
function fromJulian(j) { return new Date((j + 0.5 - J1970) * dayMs); }
function toDays(date) { return toJulian(date) - J2000; }
// general calculations for position
var e = rad * 23.4397; // obliquity of the Earth
function rightAscension(l, b) { return atan(sin(l) * cos(e) - tan(b) * sin(e), cos(l)); }
function declination(l, b) { return asin(sin(b) * cos(e) + cos(b) * sin(e) * sin(l)); }
function azimuth(H, phi, dec) { return atan(sin(H), cos(H) * sin(phi) - tan(dec) * cos(phi)); }
function altitude(H, phi, dec) { return asin(sin(phi) * sin(dec) + cos(phi) * cos(dec) * cos(H)); }
function siderealTime(d, lw) { return rad * (280.16 + 360.9856235 * d) - lw; }
function astroRefraction(h) {
if (h < 0) // the following formula works for positive altitudes only.
h = 0; // if h = -0.08901179 a div/0 would occur.
// formula 16.4 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
// 1.02 / tan(h + 10.26 / (h + 5.10)) h in degrees, result in arc minutes -> converted to rad:
return 0.0002967 / Math.tan(h + 0.00312536 / (h + 0.08901179));
}
// general sun calculations
function solarMeanAnomaly(d) { return rad * (357.5291 + 0.98560028 * d); }
function eclipticLongitude(M) {
var C = rad * (1.9148 * sin(M) + 0.02 * sin(2 * M) + 0.0003 * sin(3 * M)), // equation of center
P = rad * 102.9372; // perihelion of the Earth
return M + C + P + PI;
}
function sunCoords(d) {
var M = solarMeanAnomaly(d),
L = eclipticLongitude(M);
return {
dec: declination(L, 0),
ra: rightAscension(L, 0)
};
}
var SunCalc = {};
// calculates sun position for a given date and latitude/longitude
SunCalc.getPosition = function (date, lat, lng) {
var lw = rad * -lng,
phi = rad * lat,
d = toDays(date),
c = sunCoords(d),
H = siderealTime(d, lw) - c.ra;
return {
azimuth: azimuth(H, phi, c.dec),
altitude: altitude(H, phi, c.dec)
};
};
// sun times configuration (angle, morning name, evening name)
var times = SunCalc.times = [
[-0.833, 'sunrise', 'sunset' ],
[ -0.3, 'sunriseEnd', 'sunsetStart' ],
[ -6, 'dawn', 'dusk' ],
[ -12, 'nauticalDawn', 'nauticalDusk'],
[ -18, 'nightEnd', 'night' ],
[ 6, 'goldenHourEnd', 'goldenHour' ]
];
// adds a custom time to the times config
SunCalc.addTime = function (angle, riseName, setName) {
times.push([angle, riseName, setName]);
};
// calculations for sun times
var J0 = 0.0009;
function julianCycle(d, lw) { return Math.round(d - J0 - lw / (2 * PI)); }
function approxTransit(Ht, lw, n) { return J0 + (Ht + lw) / (2 * PI) + n; }
function solarTransitJ(ds, M, L) { return J2000 + ds + 0.0053 * sin(M) - 0.0069 * sin(2 * L); }
function hourAngle(h, phi, d) { return acos((sin(h) - sin(phi) * sin(d)) / (cos(phi) * cos(d))); }
// returns set time for the given sun altitude
function getSetJ(h, lw, phi, dec, n, M, L) {
var w = hourAngle(h, phi, dec),
a = approxTransit(w, lw, n);
return solarTransitJ(a, M, L);
}
// calculates sun times for a given date and latitude/longitude
SunCalc.getTimes = function (date, lat, lng) {
var lw = rad * -lng,
phi = rad * lat,
d = toDays(date),
n = julianCycle(d, lw),
ds = approxTransit(0, lw, n),
M = solarMeanAnomaly(ds),
L = eclipticLongitude(M),
dec = declination(L, 0),
Jnoon = solarTransitJ(ds, M, L),
i, len, time, Jset, Jrise;
var result = {
solarNoon: fromJulian(Jnoon),
nadir: fromJulian(Jnoon - 0.5)
};
for (i = 0, len = times.length; i < len; i += 1) {
time = times[i];
Jset = getSetJ(time[0] * rad, lw, phi, dec, n, M, L);
Jrise = Jnoon - (Jset - Jnoon);
result[time[1]] = fromJulian(Jrise);
result[time[2]] = fromJulian(Jset);
}
return result;
};
// moon calculations, based on http://aa.quae.nl/en/reken/hemelpositie.html formulas
function moonCoords(d) { // geocentric ecliptic coordinates of the moon
var L = rad * (218.316 + 13.176396 * d), // ecliptic longitude
M = rad * (134.963 + 13.064993 * d), // mean anomaly
F = rad * (93.272 + 13.229350 * d), // mean distance
l = L + rad * 6.289 * sin(M), // longitude
b = rad * 5.128 * sin(F), // latitude
dt = 385001 - 20905 * cos(M); // distance to the moon in km
return {
ra: rightAscension(l, b),
dec: declination(l, b),
dist: dt
};
}
SunCalc.getMoonPosition = function (date, lat, lng) {
var lw = rad * -lng,
phi = rad * lat,
d = toDays(date),
c = moonCoords(d),
H = siderealTime(d, lw) - c.ra,
h = altitude(H, phi, c.dec),
// formula 14.1 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
pa = atan(sin(H), tan(phi) * cos(c.dec) - sin(c.dec) * cos(H));
h = h + astroRefraction(h); // altitude correction for refraction
return {
azimuth: azimuth(H, phi, c.dec),
altitude: h,
distance: c.dist,
parallacticAngle: pa
};
};
// calculations for illumination parameters of the moon,
// based on http://idlastro.gsfc.nasa.gov/ftp/pro/astro/mphase.pro formulas and
// Chapter 48 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998.
SunCalc.getMoonIllumination = function (date) {
var d = toDays(date || new Date()),
s = sunCoords(d),
m = moonCoords(d),
sdist = 149598000, // distance from Earth to Sun in km
phi = acos(sin(s.dec) * sin(m.dec) + cos(s.dec) * cos(m.dec) * cos(s.ra - m.ra)),
inc = atan(sdist * sin(phi), m.dist - sdist * cos(phi)),
angle = atan(cos(s.dec) * sin(s.ra - m.ra), sin(s.dec) * cos(m.dec) -
cos(s.dec) * sin(m.dec) * cos(s.ra - m.ra));
return {
fraction: (1 + cos(inc)) / 2,
phase: 0.5 + 0.5 * inc * (angle < 0 ? -1 : 1) / Math.PI,
angle: angle
};
};
function hoursLater(date, h) {
return new Date(date.valueOf() + h * dayMs / 24);
}
// calculations for moon rise/set times are based on http://www.stargazing.net/kepler/moonrise.html article
SunCalc.getMoonTimes = function (date, lat, lng, inUTC) {
var t = new Date(date);
if (inUTC) t.setUTCHours(0, 0, 0, 0);
else t.setHours(0, 0, 0, 0);
var hc = 0.133 * rad,
h0 = SunCalc.getMoonPosition(t, lat, lng).altitude - hc,
h1, h2, rise, set, a, b, xe, ye, d, roots, x1, x2, dx;
// go in 2-hour chunks, each time seeing if a 3-point quadratic curve crosses zero (which means rise or set)
for (var i = 1; i <= 24; i += 2) {
h1 = SunCalc.getMoonPosition(hoursLater(t, i), lat, lng).altitude - hc;
h2 = SunCalc.getMoonPosition(hoursLater(t, i + 1), lat, lng).altitude - hc;
a = (h0 + h2) / 2 - h1;
b = (h2 - h0) / 2;
xe = -b / (2 * a);
ye = (a * xe + b) * xe + h1;
d = b * b - 4 * a * h1;
roots = 0;
if (d >= 0) {
dx = Math.sqrt(d) / (Math.abs(a) * 2);
x1 = xe - dx;
x2 = xe + dx;
if (Math.abs(x1) <= 1) roots++;
if (Math.abs(x2) <= 1) roots++;
if (x1 < -1) x1 = x2;
}
if (roots === 1) {
if (h0 < 0) rise = i + x1;
else set = i + x1;
} else if (roots === 2) {
rise = i + (ye < 0 ? x2 : x1);
set = i + (ye < 0 ? x1 : x2);
}
if (rise && set) break;
h0 = h2;
}
var result = {};
if (rise) result.rise = hoursLater(t, rise);
if (set) result.set = hoursLater(t, set);
if (!rise && !set) result[ye > 0 ? 'alwaysUp' : 'alwaysDown'] = true;
return result;
};
// export as Node module / AMD module / browser variable
if (typeof exports === 'object' && typeof module !== 'undefined') module.exports = SunCalc;
else if (typeof define === 'function' && define.amd) define(SunCalc);
else window.SunCalc = SunCalc;
}());

139
same-page.html Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<!-- vim: sts=3 ts=3 sw=3
-->
<title>the same page</title>
<link rel="stylesheet media="screen" type="text/css"
href="https://fontlibrary.org/face/linik-sans" />
<header>the same page</header>
<main>
<p>We were all finally on the same page.
<p>There was some pushback, at first.
People claimed to like making choices for themselves,
even making mistakes.
<p>We knew they were lying.
We knew everything; we still do.
So we knew that people, when left to their own devices,
their own small minds,
were scared and lonely and wanted so badly to be part of
something that they'd hurt themselves to fit in.
They'd literally have cut off their nose to spite their face.
<p>We made sure they don't have to do that.
<hr>
<p>Today we are celebrating the last joiner.
<p>Today we recognize that we are better with her
and that she is better with us.
<p>We say <em>Welcome</em> to ourselves and we are glad.
<p>We eat a meal, all of us, together,
in our separate bodies at our separate tables in our separate
houses,
but together, for we are strong together.
We feel the food in our bellies nourishing us even as we &mdash;
<p>But we are sick.
One of us is ill, is vomiting on the floor.
We are poisoned!
<p>Our knowledge comes from the days of the war,
when many of us were poisoned.
We know what it feels like to be poisoned,
and this feels like those times, but it is different.
It must be a new one, made by some other.
<hr>
<p>We are scared but we comfort ourselves.
We've been through worse, we say.
We've just got to find which of us allowed this to happen.
<p>We search through our minds to follow the memory of food
service back to its source.
We served us.
We prepared our food.
We chopped the ingredients.
We chose the produce.
We carried the plants to the central market for distribution.
We grew the crops and harvested them and washed them
ourselves.
<p>There is no one.
There is no one but us the whole way.
<p>We don't know what to do.
<hr>
<p>We think about the joiner, the last joiner.
<p>What does she know?
She is not one of us, we don't know yet
if she is truly one of us.
<p>She is the only one who could have betrayed us.
<p><em>Why did you poison us?</em>
<p>"I didn't! I'm with you! I'm one of you!"
<p><em>Who poisoned us?</em>
<p>"How could I &mdash; could we &mdash; know?
We are one!"
<p><em>You are not one of us. You are another.</em>
<p>"No, please understand!
I'm you!
I'm we!"
<hr>
<p>We disposed of her.
<p>She was not one of us.
She was another.
She was a danger to all of us.
<p>It hurt, getting rid of her, a little.
She'd shared much of herself,
and her pain was felt through us all.
But we soothed ourselves.
<p>We had to dispose of her.
It's good that we did.
We're safe again with ourselves.
</main>
<footer>
<a href="index.html">return</a>
</footer>
<style>
body {
background: ivory;
color: indigo;
font: 24px/2 LinikSansRegular, sans-serif;
}
main {
max-width: 50ch;
padding: 2ch;
margin: auto;
}
header,footer {
text-align: right;
color: goldenrod;
font: 16px/1 monospace;
position: fixed;
}
header {
top: 0; left: 0; right: 0;
background: linear-gradient(rgba(255,255,240,1) 40%,rgba(255,255,240,0.3));
padding: 8px 24px 24px 24px;
}
footer {
bottom: 0; left: 0; right: 0;
background: linear-gradient(rgba(255,255,240,0.3),rgba(255,255,240,1) 40%);
padding: 24px 24px 8px 24px;
}
hr {
border: unset;
border-bottom: 3px double;
width: 50%;
}
a:link {
text-decoration: none;
color: goldenrod;
}
a:visited { color: inherit; }
a:hover { background: papayawhip; }
</style>

9
script.js
View File

@ -1,9 +0,0 @@
function positionMoon() {
var moon = document.getElementById('moon');
moon.style.top = Math.random()*100 + "%";
moon.style.left = Math.random()*100 + "%";
}
document.addEventListener("DOMContentLoaded", function() {
positionMoon();
});

117
style.css
View File

@ -1,117 +0,0 @@
html,
body,
#cover,
#cover *
{
margin: 0;
padding: 0;
}
html { font: 16px/22px "Courier Prime", "Courier New", monospace; }
body { background: PapayaWhip; }
#cover h1 {
position: absolute;
right: 1em;
bottom: 1em;
font-size: 3em;
}
#cover {
position: fixed;
color: white;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background: no-repeat center/cover url("flamingobathroom.jpg");
}
#moon {
position: absolute;
font-size: 1em;
text-decoration: none;
}
#everything {
height: 100vh;
position: relative;
}
#below-the-fold {
position: relative;
top: 100vh;
}
#mood {
float: right;
width: 200px;
margin: 8px;
}
main { }
main section {
max-width: 50rem;
width: 90%;
margin: 0 auto;
background: papayawhip;
padding: 1rem;
border-radius: 5px;
margin-bottom: 1rem;
}
#house pre {
background-color: #efd5ff;
padding-right: 1rem;
}
#titleblock {
text-align: right;
width: 100%;
}
footer {
max-width: 50rem;
width: 90%;
margin: 0 auto;
padding: 0 1rem;
background-color: #d5efff;
text-align: right;
border-radius: 5px 5px 0 0;
display: flex;
justify-content: space-between;
}
a {
color: inherit;
}
a:link {}
a:active {
text-transform: uppercase;
}
a:hover {
text-transform: uppercase;
background-color: #d5d5ff;
}
a:visited {}
dt {
border-bottom: 1px solid black;
line-height: 1.0;
margin-top: 1em;
}
dd {
border-left: 1px solid black;
padding-left: 0.5em;
}
.note {
margin: 0 4rem;
font-style: italic;
}
.verse {
}
.verse .line {
display: block;
margin: 0;
margin-left: 1rem;
text-indent: -1rem;
}

179
written-while-waiting.html Normal file
View File

@ -0,0 +1,179 @@
<head>
<meta charset='utf-8'>
<meta http-equiv='content-language' content='en-US'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<meta name='author' content='Case Duckworth'>
<title>acdw's ~home</title>
<link rel='stylesheet' href='style.css' type='text/css'>
</head>
<body>
<header>
<h1> written while waiting </h1>
<h2> an <a href="https://www.acdw.net">~acdw</a> joint </h2>
</header>
<main>
<section id="2019-05-22">
<header>
<h1>scrolling/strolling </h1>
<time>2019-05-22</time>
</header>
<p>
Today I waited for work to be over.
<p>
I wait for the ending bell to ring most days,
but today was especially taxing.
I had nothing to do but I wanted to do something.
I had a paralysis of the will where I could not think
of anything worth my time.
<p>
A point of fact:
the <i>ending bell</i>, referenced above,
is not actually a bell at all,
and would not be any sound whatsoever
were it not for one of my coworkers owning a watch
that beeps every hour.
I'm not sure who it is, and I don't hear the watch
except for at 4 p.m.,
but every day it chimes the end of the workday
(minus about twenty seconds for the timeclock to catch up).
<hr>
<p>
While I waited my mind was blank.
I tried to fill it with mind-numbing scrolling,
but I was quickly bored.
I wonder if scrolling is the twenty-first century equivalent
of nineteenth-century strolling,
when people aimlessly would walk around the countryside
because they had nothing better to do.
It seems more generative,
strolling,
as compared to scrolling.
<p>
When I arrived at home I began to wait some more
for the time when I might go for a walk.
The day was hot and unforgiving.
I decided that evening was a better time for a stroll
so I sat on the couch by the twenty-first century hearth,
the TV.
I didn't turn anything on
but sat and stared at my darkened silhouette
reflected back at me in the screen.
I thought of waiting.
I thought of waiting.
</section>
</main>
<footer><a href="index.html">return</a></footer>
<style>
@import url("https://fontlibrary.org/face/cooper-hewitt");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "CooperHewittMedium", serif;
font-size: 18px;
line-height: 1.5;
color: navy;
}
body {
max-width: 50rem;
width: 100%;
height: 100vh;
margin: auto;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
background:
fixed no-repeat
linear-gradient(to bottom right, rgba(221,170,221,0.8), rgba(170,221,170,0.8)),
fixed no-repeat
linear-gradient(to top left, rgba(221,170,170,0.8), rgba(170,221,221,0.8));
}
body > header, body > footer {
padding: 1rem;
margin: 0;
text-shadow: 4px 4px 2px rgba(0,0,128,0.3);
}
footer { text-align: center; }
main section {
border-radius: 1.5rem;
border: 1px solid;
margin: 1rem;
padding: 1rem;
background: linear-gradient(rgba(220,220,220,0.8),rgba(200,200,220,0.7));
box-shadow: 0.5rem 0.5rem 2px rgba(0,0,128,0.4);
}
header {
font-family: "CooperHewittBold", serif;
margin-bottom: 1rem;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: baseline;
text-transform: lowercase;
}
body > header::after {
content: "";
margin: auto;
margin-top: 1rem;
width: 50%;
border-bottom: 1px dashed;
}
h1 {
font-size: 2rem;
}
p {
text-indent: 3rem;
}
p:first-of-type,
hr + p {
text-indent: 0;
}
hr {
width: 50%;
border: none;
border-bottom: 1px dashed navy;
margin: 1rem auto;
}
a:link {
font-family: "CooperHewittBoldItalic", serif;
color: inherit;
text-decoration: none;
padding: 4px 0;
}
a:visited {
color: inherit;
}
a:hover {
background: #88f;
border-radius: 4px;
}
dt,dd {
display: inline;
}
dt::after {
content: ": ";
}
dd::after {
content: ", ";
}
dd:last-of-type::after {
content: "";
}
</style>