Browse Source

more cardlike

master
Brennen 6 years ago
parent
commit
6625ec6943
2 changed files with 35 additions and 87 deletions
  1. +32
    -84
      index.html
  2. +3
    -3
      tildebrennen.css

+ 32
- 84
index.html View File

@ -58,7 +58,15 @@
<section>
<!-- <p><button id=hidebody>hide text</button></p> -->
<article>
<h2>Reverse Chronological Dated Entries Are Totally Fine But I Already Do That Elsewhere</h2>
<p>And, thinking that, I decided to make my home on squiggle.city a stack
of cards about... Well, about whatever. Some of them will have dates.
Some of them will change arbitrarily.</p>
<p class=centerpiece><img src="hypercard.png" /></p>
</article>
<article>
<h2>Thursday, January 22, 2015</h2>
@ -108,10 +116,10 @@
important:</p>
<ul>
<li><a href="http://wnax.com/">AM 570 WNAX Yankton</a>
<li><a href="http://wnax.com/">AM 570 WNAX Yankton</a></li>
<li><a href="http://129.93.42.12:8000/listen">FM 90.3 KRNU Lincoln</a></li>
<li><a href="http://www.kzum.org/">FM 89.3 KZUM Lincoln</a>
<li><a href="http://stream.kgnu.net:8000/KGNU_live_high.mp3">FM 88.5 KGNU Boulder/Denver</a>
<li><a href="http://www.kzum.org/">FM 89.3 KZUM Lincoln</a></li>
<li><a href="http://stream.kgnu.net:8000/KGNU_live_high.mp3">FM 88.5 KGNU Boulder/Denver</a></li>
<li><a href="http://www.radio1190.org/wp-content/themes/nextmagazine/listen_high_v3.html">AM 1190 KVCU Boulder/Denver</a></li>
</ul>
@ -955,6 +963,10 @@ sub slurp {
<p>This is good: <a href="http://monkey.org/~marius/unix-tools-hints.html">Hints for writing
Unix tools</a>.</p>
</article>
<article>
<h2>Sunday, October 19</h2>
<p>Now open for business, in a completely unprepared fashion:
@ -1158,12 +1170,7 @@ sub slurp {
</footer>
<script>
// This is a jQuery convention for calling this function when
// the document's ready, pretty much. Some things about jQuery
// still annoy me, but honestly it's just really nice to have
// around in general:
$(function () {
$(document).ready(function () {
// syntax highlighting - see http://shjs.sourceforge.net/
// I was going to use http://prismjs.com/, which seems neat,
// but that one doesn't come with Perl highlighting out of the
@ -1172,82 +1179,16 @@ sub slurp {
// nice job, really.
sh_highlightDocument();
// A really simple p5.js sketch - google p5.js:
var lights_sketch = function(sketch) {
var x = 0;
var y = 12;
var world;
var red = sketch.color(255, 0, 0);
var green = sketch.color(0, 255, 0);
var blue = sketch.color(0, 0, 255);
var yeller = sketch.color(255, 255, 0);
var colors = [red, green, blue, yeller];
var light_width = 9;
var light_height = 18;
var renderlight = function (x, y, color) {
sketch.push();
sketch.stroke(color);
sketch.fill(color);
sketch.ellipse(x, y, light_width, light_height);
sketch.pop();
};
sketch.setup = function () {
world = {
// size of the canvas
width: $(window).width(),
height: $(window).height(),
};
sketch.createCanvas(world.width, world.height);
sketch.background(0, 0, 0);
};
var waitfor = 1800;
var wait_til = sketch.millis() + waitfor;
sketch.draw = function () {
x = 0;
if (sketch.millis() < wait_til) {
return;
}
sketch.clear();
var previous_color;
var color;
while (x < world.width) {
while (color === previous_color) {
color = colors[ Math.floor(Math.random()*colors.length) ];
}
renderlight(x, y, color);
x += 50;
previous_color = color;
}
wait_til = sketch.millis() + waitfor;
};
};
var myp5;
// myp5 = new p5(lights_sketch, 'squiggleCanvas');
// STACK STARTS HERE
$(window).resize(function () {
// myp5.setup();
});
});
// STACK STARTS HERE
$(document).ready(function () {
// get all the "slides", hide them
// get all the "cards", hide them
$cards = $('article, footer');
$cards.hide();
var card_number = 0;
var $cur_card = $( $cards.get(card_number) );
$cur_card.toggle(); // show first slide
$cur_card.toggle();
var transit = function (jump) {
$('button').hide();
@ -1264,19 +1205,28 @@ sub slurp {
}
$cur_card = $( $cards.get(card_number) );
console.log(card_number);
console.log($cur_card.html());
$cur_card.toggle({
duration: 200,
done: function () { $('button').show(); }
});
};
var $fwd_button = $('<button class=clicker-button>next</button>');
var $bwd_button = $('<button class=clicker-button>prev</button>');
var $fwd_button = $('<button class=clicker-button>&rarr;</button>');
var $bwd_button = $('<button class=clicker-button>&larr;</button>');
var $all_button = $('<button class=clicker-button>all</button>');
var $button_group = $('<div class=buttons/>');
$fwd_button.click(function (e) {
e.preventDefault();
transit(1);
});
$all_button.click(function (e) {
e.preventDefault();
$cards.show();
$button_group.hide();
});
$bwd_button.click(function (e) {
e.preventDefault();
transit(-1);
@ -1301,9 +1251,7 @@ sub slurp {
e.preventDefault();
});
$button_group = $('<div class=buttons/>');
$button_group.append($bwd_button);
$button_group.append($fwd_button);
$button_group.append($bwd_button, $all_button, $fwd_button);
$('body').append($button_group);
var toggleFullScreen = function () {


+ 3
- 3
tildebrennen.css View File

@ -1,6 +1,6 @@
body {
color: white;
background-color: black;
color: black;
background-color: white;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
@ -29,7 +29,7 @@ header nav p {
}
header a, header a:visited {
color: white;
color: blue;
text-shadow: 2px 2px 2px gray;
}


Loading…
Cancel
Save