181 lines
3.8 KiB
HTML
181 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<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>
|