add whatever and button and ages to index
This commit is contained in:
parent
28211399a9
commit
cfc63c9dd6
13
Attachments/index
Normal file
13
Attachments/index
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>attachments</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style></style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>do they exist?
|
||||||
|
<p>or are they manifestations of our body's weak connection to reality,
|
||||||
|
our scrabbling for a handhold in an uncaring world?
|
||||||
|
</body>
|
||||||
|
</html>
|
28
age.html
28
age.html
|
@ -2,28 +2,18 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>how old am I?</title>
|
<title>how old am I?</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body{min-height:100vh;margin:0;padding:0;display:flex;
|
||||||
min-height: 100vh;
|
flex:column nowrap;align-items:center;background:#455;}
|
||||||
margin: 0; padding: 0;
|
main{font:18px/1.23 monospace;max-width:70ch;padding:2ch;
|
||||||
display: flex;
|
margin:auto;border:1px solid;color:#455;background:#fee;}
|
||||||
flex: column nowrap;
|
.age{background:yellow;padding:4px;}
|
||||||
align-items: center;
|
aside{position:absolute;bottom:0;right:0;background:white;}
|
||||||
background: #455;
|
</style>
|
||||||
} main {
|
|
||||||
font: 18px/1.23 monospace;
|
|
||||||
max-width: 70ch;
|
|
||||||
padding: 2ch;
|
|
||||||
margin: auto;
|
|
||||||
border: 1px solid;
|
|
||||||
color: #455;
|
|
||||||
background: #fee;
|
|
||||||
} .age {
|
|
||||||
background: yellow;
|
|
||||||
padding: 4px;
|
|
||||||
}</style>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>how old am I?</h1>
|
<h1>how old am I?</h1>
|
||||||
|
<aside>cf. also <a href="age2.html">another accounting</a>,
|
||||||
|
or <a href="index.html">return</a>.</aside>
|
||||||
<p>well, I was born on July 25, 1990, so I am
|
<p>well, I was born on July 25, 1990, so I am
|
||||||
<span class=age id="days"></span>
|
<span class=age id="days"></span>
|
||||||
days old.</p>
|
days old.</p>
|
||||||
|
|
|
@ -9,8 +9,8 @@ body {
|
||||||
flex: column nowrap;
|
flex: column nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #455;
|
background: #455;
|
||||||
} main {
|
|
||||||
font: 18px/1.23 monospace;
|
font: 18px/1.23 monospace;
|
||||||
|
} main {
|
||||||
max-width: 70ch;
|
max-width: 70ch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 2ch;
|
padding: 2ch;
|
||||||
|
@ -27,8 +27,12 @@ body {
|
||||||
.cumulative .desc:nth-last-child(2)::after {
|
.cumulative .desc:nth-last-child(2)::after {
|
||||||
content: ", and" !important;
|
content: ", and" !important;
|
||||||
}
|
}
|
||||||
.countdown { background: lime; }</style>
|
.countdown { background: lime; }
|
||||||
|
aside{position:absolute;bottom:0;right:0;background:white;}
|
||||||
|
</style>
|
||||||
<body>
|
<body>
|
||||||
|
<aside>cf. also <a href="age.html">another accounting</a>,
|
||||||
|
or <a href="index.html">return</a>.</aside>
|
||||||
<main id="main">hmm....</main>
|
<main id="main">hmm....</main>
|
||||||
<script src="age.js"> </script>
|
<script src="age.js"> </script>
|
||||||
<script>
|
<script>
|
||||||
|
|
22
button.html
Normal file
22
button.html
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>button, button, who's got the button?</title>
|
||||||
|
|
||||||
|
<button id=button>
|
||||||
|
button!
|
||||||
|
</button>
|
||||||
|
<span id=text>
|
||||||
|
<span id=counter>
|
||||||
|
</span><a href="index.html">return</a></span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{min-height:100vh;margin:0;padding:0;overflow:hidden;}
|
||||||
|
#button{
|
||||||
|
position:absolute;
|
||||||
|
transition: top 2s, left 3s;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
#text{position:absolute;font:italic 40px/2 script;top:-80px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="button.js"> </script>
|
170
button.js
Normal file
170
button.js
Normal file
|
@ -0,0 +1,170 @@
|
||||||
|
// button, button, who's got the button?
|
||||||
|
// by Case Duckworth <acdw@acdw.net>
|
||||||
|
// vim:fdm=marker
|
||||||
|
// from stackoverflow
|
||||||
|
const Color = (function () { // {{{
|
||||||
|
function toHex(num, padding) { return num.toString(16).padStart(padding || 2); }
|
||||||
|
function parsePart(value) {
|
||||||
|
var perc = value.lastIndexOf('%');
|
||||||
|
return perc < 0 ? value : value.substr(0, perc);
|
||||||
|
}
|
||||||
|
function Color(data) {
|
||||||
|
if (arguments.length > 1) {
|
||||||
|
this[0] = arguments[0];
|
||||||
|
this[1] = arguments[1];
|
||||||
|
this[2] = arguments[2];
|
||||||
|
if (arguments.length > 3) { this[3] = arguments[3]; }
|
||||||
|
} else if (data instanceof Color || Array.isArray(data)) {
|
||||||
|
this[0] = data[0];
|
||||||
|
this[1] = data[1];
|
||||||
|
this[2] = data[2];
|
||||||
|
this[3] = data[3];
|
||||||
|
} else if (typeof data === 'string') {
|
||||||
|
data = data.trim();
|
||||||
|
if (data[0] === "#") {
|
||||||
|
switch (data.length) {
|
||||||
|
case 4:
|
||||||
|
this[0] = parseInt(data[1], 16); this[0] = (this[0] << 4) | this[0];
|
||||||
|
this[1] = parseInt(data[2], 16); this[1] = (this[1] << 4) | this[1];
|
||||||
|
this[2] = parseInt(data[3], 16); this[2] = (this[2] << 4) | this[2];
|
||||||
|
break;
|
||||||
|
case 9:
|
||||||
|
this[3] = parseInt(data.substr(7, 2), 16);
|
||||||
|
//Fall Through
|
||||||
|
case 7:
|
||||||
|
this[0] = parseInt(data.substr(1, 2), 16);
|
||||||
|
this[1] = parseInt(data.substr(3, 2), 16);
|
||||||
|
this[2] = parseInt(data.substr(5, 2), 16);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else if (data.startsWith("rgb")) {
|
||||||
|
var parts = data.substr(data[3] === "a" ? 5 : 4, data.length - (data[3] === "a" ? 6 : 5)).split(',');
|
||||||
|
this.r = parsePart(parts[0]);
|
||||||
|
this.g = parsePart(parts[1]);
|
||||||
|
this.b = parsePart(parts[2]);
|
||||||
|
if (parts.length > 3) { this.a = parsePart(parts[3]); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Color.prototype = {
|
||||||
|
constructor: Color,
|
||||||
|
0: 255,
|
||||||
|
1: 255,
|
||||||
|
2: 255,
|
||||||
|
3: 255,
|
||||||
|
get r() { return this[0]; },
|
||||||
|
set r(value) { this[0] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
|
||||||
|
get g() { return this[1]; },
|
||||||
|
set g(value) { this[1] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
|
||||||
|
get b() { return this[2]; },
|
||||||
|
set b(value) { this[2] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
|
||||||
|
get a() { return this[3] / 255; },
|
||||||
|
set a(value) { this[3] = value == null ? 255 : Math.max(Math.min(value > 1 ? value : parseFloat(value) * 255, 255), 0); },
|
||||||
|
get luma() { return .299 * this.r + .587 * this.g + .114 * this.b; },
|
||||||
|
get inverted() { return new Color(255 - this[0], 255 - this[1], 255 - this[2], this[3]); },
|
||||||
|
toString: function (option) {
|
||||||
|
if (option === 16) {
|
||||||
|
return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (this[3] === 255 ? '' : toHex(this[3]));
|
||||||
|
} else if (option === '%') {
|
||||||
|
if (this.a !== 1) {
|
||||||
|
return `rgba(${this.r / 255 * 100}%, ${this.g / 255 * 100}%, ${this.b / 255 * 100}%, ${this.a / 255})`;
|
||||||
|
} else {
|
||||||
|
return `rgb(${this.r / 255 * 100}%, ${this.g / 255 * 100}%, ${this.b / 255 * 100})%`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.a !== 1) {
|
||||||
|
return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
|
||||||
|
} else {
|
||||||
|
return `rgb(${this.r}, ${this.g}, ${this.b})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return Color;
|
||||||
|
}()); // }}}
|
||||||
|
|
||||||
|
const btn = document.getElementById("button");
|
||||||
|
const text = document.getElementById("text");
|
||||||
|
const counter = document.getElementById("counter");
|
||||||
|
var clicks = 0;
|
||||||
|
var moused;
|
||||||
|
|
||||||
|
function random(n) {
|
||||||
|
return Math.floor(Math.random() * (n+1));
|
||||||
|
}
|
||||||
|
function randomColor() {
|
||||||
|
// lifted straight from MDN, #noshame
|
||||||
|
return 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
|
||||||
|
}
|
||||||
|
function randomGradient() {
|
||||||
|
return 'linear-gradient('+random(360)+'deg, '+randomColor()+', '+randomColor()+')';
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjustColor(el) {
|
||||||
|
var style = window.getComputedStyle(el);
|
||||||
|
var background = new Color(style['background-color']);
|
||||||
|
var text = new Color(style['color']);
|
||||||
|
if (Math.abs(background.luma - text.luma) < 100) {
|
||||||
|
el.style.color = text.inverted.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjustShadow(el, clr) {
|
||||||
|
var size = Math.floor(Math.max(el.offsetHeight,el.offsetWidth)/10);
|
||||||
|
if (clr === undefined) {
|
||||||
|
var style = window.getComputedStyle(el);
|
||||||
|
var bg = new Color(style['background-color']);
|
||||||
|
var clr = new Color(bg.r - 50, bg.g - 50, bg.b - 50, (255*0.6));
|
||||||
|
}
|
||||||
|
var xsign = Math.random() > 0.5 ? '' : '-';
|
||||||
|
var ysign = Math.random() > 0.5 ? '' : '-';
|
||||||
|
el.style.boxShadow = xsign + size + "px " + ysign + size + "px " + clr;
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjustBorder(el) {
|
||||||
|
var style = window.getComputedStyle(el);
|
||||||
|
var background = new Color(style['background-color']);
|
||||||
|
var border = new Color(background.r + 40, background.g + 40, background.b + 40);
|
||||||
|
el.style.borderColor = border.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function reposition(el, center) {
|
||||||
|
let winH = window.innerHeight;
|
||||||
|
let winW = window.innerWidth;
|
||||||
|
let elH = el.offsetHeight;
|
||||||
|
let elW = el.offsetWidth;
|
||||||
|
if (center) {
|
||||||
|
el.style.top = ((winH / 2) - (elH / 2)) + "px";
|
||||||
|
el.style.left = ((winW / 2) - (elW / 2)) + "px";
|
||||||
|
} else {
|
||||||
|
el.style.top = random(winH - elH) + "px";
|
||||||
|
el.style.left = random(winW - elW) + "px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.addEventListener('mouseenter', ev => {
|
||||||
|
moused = window.setTimeout(reposition, random(9000), btn, false);
|
||||||
|
});
|
||||||
|
btn.addEventListener('click', ev => {
|
||||||
|
moused = window.setTimeout(reposition, random(1000), btn, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.addEventListener("click", ev => {
|
||||||
|
clicks++;
|
||||||
|
counter.innerHTML = clicks;
|
||||||
|
reposition(text);
|
||||||
|
});
|
||||||
|
|
||||||
|
btn.addEventListener('click', ev => {
|
||||||
|
document.body.style.backgroundImage = randomGradient();
|
||||||
|
btnColor = randomColor();
|
||||||
|
btn.style.backgroundColor = btnColor;
|
||||||
|
adjustColor(btn);
|
||||||
|
adjustBorder(btn);
|
||||||
|
btn.style.borderRadius = '2%';
|
||||||
|
btn.style.padding = random(Math.min(window.innerHeight,window.innerWidth)/5)+"px";
|
||||||
|
adjustShadow(btn);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = function() {reposition(btn, true);};
|
20
index.html
20
index.html
|
@ -53,17 +53,25 @@
|
||||||
<p>Hello, I'm <a href="https://www.acdw.net">acdw</a>
|
<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>.
|
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.
|
<p>I'm a library technician and writer of little things.
|
||||||
|
<p>I am <a id="agelink" href="age.html">today</a> years old.</p>
|
||||||
</section>
|
</section>
|
||||||
<section id="pages">
|
<section id="pages">
|
||||||
<h1>read</h1>
|
<h1>read</h1>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="feels"><strong>feelings</strong></a></li>
|
<li><a href="feels"><strong>feels</strong></a></li>
|
||||||
<li><a href="written-while-waiting.html">written while waiting</a></li>
|
<li><a href="written-while-waiting.html">written while waiting</a></li>
|
||||||
<li><a href="same-page.html">same page</a></li>
|
<li><a href="same-page.html">same page</a></li>
|
||||||
<li><a href="cornershop.html">corner shop</a></li>
|
<li><a href="cornershop.html">corner shop</a></li>
|
||||||
<li><a href="windy.html">windy</a></li>
|
<li><a href="windy.html">windy</a></li>
|
||||||
<li><a href="oregano.html">oregano</a></li>
|
<li><a href="oregano.html">oregano</a></li>
|
||||||
<li><a href="enough.html">enough</a></li>
|
<li><a href="enough.html">enough</a></li>
|
||||||
|
<li><a href="whatever.html">whatever</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section id="games">
|
||||||
|
<h1>play</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a href="button.html">button</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
@ -144,3 +152,13 @@ a:hover { text-transform: uppercase; background: yellow; }
|
||||||
text-shadow: 0 0 2em red;
|
text-shadow: 0 0 2em red;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
var agelink = document.getElementById("agelink");
|
||||||
|
window.onload = function() {
|
||||||
|
if (Math.random() < 0.5) {
|
||||||
|
agelink.href = "age.html";
|
||||||
|
} else {
|
||||||
|
agelink.href = "age2.html";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
100
whatever.html
Normal file
100
whatever.html
Normal file
|
@ -0,0 +1,100 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<title>whatever</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{display:flex;flex-flow:row wrap;}
|
||||||
|
section{max-width:68ch;margin:3ch;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
h1,p{display:inline;}
|
||||||
|
h1{font:italic 42px serif;}
|
||||||
|
h1::after{content: ":";}
|
||||||
|
p{font:24px/2 sans-serif;margin:5ch;border-bottom:24px solid pink;}
|
||||||
|
.disappear { color: transparent; border: transparent;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var sections=document.getElementsByTagName("section");
|
||||||
|
function randomizePlace() {
|
||||||
|
for(var i=0;i<=sections.length;i++){
|
||||||
|
var sec = sections[i];
|
||||||
|
if(sec) {
|
||||||
|
sec.style.order = Math.floor(Math.random() * sections.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.onload = randomizePlace;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>whatever</h1>
|
||||||
|
<p>
|
||||||
|
I'm having trouble caring about much today.
|
||||||
|
I don't know what to make of that, honestly.
|
||||||
|
I just want to go home and watch <abbr title="television">TV</abbr>
|
||||||
|
and think of nothing.
|
||||||
|
Especially not my computer, sitting there in the office,
|
||||||
|
quietly looming in my mind or whatever.
|
||||||
|
I need to reinstall something.
|
||||||
|
I need to spin my wheels some more.
|
||||||
|
<p>
|
||||||
|
I need to actually write something worthwhile
|
||||||
|
that I want to maybe publish sometime.
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>publish</h1>
|
||||||
|
<p>
|
||||||
|
So far I have self-published quite a lot of stuff.
|
||||||
|
I have this page, my blog for example, and sundry others
|
||||||
|
that might still be floating around somewhere.
|
||||||
|
I write and re-write colorschemes and themes and stuff
|
||||||
|
to match my mood,
|
||||||
|
but it's just spinning wheels I feel like.
|
||||||
|
<p>
|
||||||
|
I've only really published,
|
||||||
|
the kind of publishing where you have to actually get past someone else
|
||||||
|
and they have to think you're good as well,
|
||||||
|
a few times.
|
||||||
|
Fewer if you don't count the ones by friends.
|
||||||
|
Maybe even none at all.
|
||||||
|
<p>
|
||||||
|
Some of me wants to ignore aesthetic concerns,
|
||||||
|
just get something <em>done</em> no matter the cost or the venue,
|
||||||
|
but the bully part of me won't let it happen.
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>steinmart</h1>
|
||||||
|
<p>
|
||||||
|
There were these paintings at Steinmart that were apparently done
|
||||||
|
by real artists.
|
||||||
|
I know that all of the nameless paintings in the bargain stores
|
||||||
|
and motels and fast-food restaurants all over were, ultimately,
|
||||||
|
done by someone, but these were named someones, with glossy photos
|
||||||
|
of them in the corners of the paintings.
|
||||||
|
<p>
|
||||||
|
They were all by different people but they all looked the same.
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1>moving</h1>
|
||||||
|
<p>
|
||||||
|
There are things that move and there are things that stay still.
|
||||||
|
I'm not sure which is which sometimes.
|
||||||
|
It all depends on the way you look at it, right?
|
||||||
|
I'm publishing things, they are going out in the world;
|
||||||
|
or the world is moving past them, barely noticing;
|
||||||
|
or they're in a box I've made and that I set out on my stoop
|
||||||
|
but it's clearly <em>my</em> box, and no one else looks inside,
|
||||||
|
<em>it's a felony to look inside someone else's box,</em>
|
||||||
|
they think to themselves, maybe, walking past,
|
||||||
|
<em>like a mailbox</em>.
|
||||||
|
<p>
|
||||||
|
I want to pick up and move.
|
||||||
|
I want to go somewhere and be something more than what I am.
|
||||||
|
But the age-old problem:
|
||||||
|
you cannot move away from yourself.
|
||||||
|
</section>
|
Loading…
Reference in New Issue
Block a user