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

add whatever and button and ages to index

This commit is contained in:
Case Duckworth 2019-06-24 20:18:00 -05:00
parent 28211399a9
commit cfc63c9dd6
7 changed files with 339 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Attachments/index Normal file
View 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
View File

@ -2,28 +2,18 @@
<meta charset="utf-8">
<title>how old am I?</title>
<style>
body {
min-height: 100vh;
margin: 0; padding: 0;
display: flex;
flex: column nowrap;
align-items: center;
background: #455;
} 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>
body{min-height:100vh;margin:0;padding:0;display:flex;
flex:column nowrap;align-items:center;background:#455;}
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;}
aside{position:absolute;bottom:0;right:0;background:white;}
</style>
<main>
<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
<span class=age id="days"></span>
days old.</p>

8
age2.html
View File

@ -9,8 +9,8 @@ body {
flex: column nowrap;
align-items: center;
background: #455;
} main {
font: 18px/1.23 monospace;
} main {
max-width: 70ch;
width: 100%;
padding: 2ch;
@ -27,8 +27,12 @@ body {
.cumulative .desc:nth-last-child(2)::after {
content: ", and" !important;
}
.countdown { background: lime; }</style>
.countdown { background: lime; }
aside{position:absolute;bottom:0;right:0;background:white;}
</style>
<body>
<aside>cf. also <a href="age.html">another accounting</a>,
or <a href="index.html">return</a>.</aside>
<main id="main">hmm....</main>
<script src="age.js"> </script>
<script>

22
button.html Normal file
View 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
View 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
View File

@ -53,17 +53,25 @@
<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.
<p>I am <a id="agelink" href="age.html">today</a> years old.</p>
</section>
<section id="pages">
<h1>read</h1>
<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="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>
<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>
</section>
</div>
@ -144,3 +152,13 @@ a:hover { text-transform: uppercase; background: yellow; }
text-shadow: 0 0 2em red;
}
</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
View 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>