From cfc63c9dd68d75db70a0062b55f8147e86d862c2 Mon Sep 17 00:00:00 2001 From: Case Duckworth Date: Mon, 24 Jun 2019 20:18:00 -0500 Subject: [PATCH] add whatever and button and ages to index --- Attachments/index | 13 ++++ age.html | 28 +++----- age2.html | 8 ++- button.html | 22 ++++++ button.js | 170 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 20 +++++- whatever.html | 100 +++++++++++++++++++++++++++ 7 files changed, 339 insertions(+), 22 deletions(-) create mode 100644 Attachments/index create mode 100644 button.html create mode 100644 button.js create mode 100644 whatever.html diff --git a/Attachments/index b/Attachments/index new file mode 100644 index 0000000..b531ff5 --- /dev/null +++ b/Attachments/index @@ -0,0 +1,13 @@ + + + + attachments + + + + +

do they exist? +

or are they manifestations of our body's weak connection to reality, + our scrabbling for a handhold in an uncaring world? + + diff --git a/age.html b/age.html index 9435486..c1a4055 100644 --- a/age.html +++ b/age.html @@ -2,28 +2,18 @@ how old am I? +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;} +

how old am I?

+

well, I was born on July 25, 1990, so I am days old.

diff --git a/age2.html b/age2.html index 38d2aed..8e94b8d 100644 --- a/age2.html +++ b/age2.html @@ -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; } +.countdown { background: lime; } +aside{position:absolute;bottom:0;right:0;background:white;} + +
hmm....
diff --git a/button.js b/button.js new file mode 100644 index 0000000..e03c891 --- /dev/null +++ b/button.js @@ -0,0 +1,170 @@ +// button, button, who's got the button? +// by Case Duckworth +// 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);}; diff --git a/index.html b/index.html index 8bc3f54..de638a0 100644 --- a/index.html +++ b/index.html @@ -53,17 +53,25 @@

Hello, I'm acdw and this is my page in the ~town.

I'm a library technician and writer of little things. +

I am today years old.

read

+
+
+

play

+
@@ -144,3 +152,13 @@ a:hover { text-transform: uppercase; background: yellow; } text-shadow: 0 0 2em red; } + diff --git a/whatever.html b/whatever.html new file mode 100644 index 0000000..298068c --- /dev/null +++ b/whatever.html @@ -0,0 +1,100 @@ + + +whatever + + + + +
+

whatever

+

+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 TV +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. +

+I need to actually write something worthwhile +that I want to maybe publish sometime. +

+ +
+

publish

+

+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. +

+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. +

+Some of me wants to ignore aesthetic concerns, +just get something done no matter the cost or the venue, +but the bully part of me won't let it happen. +

+ +
+

steinmart

+

+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. +

+They were all by different people but they all looked the same. +

+ +
+

moving

+

+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 my box, and no one else looks inside, +it's a felony to look inside someone else's box, +they think to themselves, maybe, walking past, +like a mailbox. +

+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. +