Browse Source

more cardlike

Brennen 4 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 @@
58 58
 
59 59
     <section>
60 60
 
61
-    <!-- <p><button id=hidebody>hide text</button></p> -->
61
+    <article>
62
+      <h2>Reverse Chronological Dated Entries Are Totally Fine But I Already Do That Elsewhere</h2>
63
+
64
+      <p>And, thinking that, I decided to make my home on squiggle.city a stack
65
+      of cards about... Well, about whatever.  Some of them will have dates.
66
+      Some of them will change arbitrarily.</p>
67
+
68
+      <p class=centerpiece><img src="hypercard.png" /></p>
69
+    </article>
62 70
 
63 71
     <article>
64 72
       <h2>Thursday, January 22, 2015</h2>
@@ -108,10 +116,10 @@
108 116
       important:</p>
109 117
 
110 118
       <ul>
111
-        <li><a href="http://wnax.com/">AM 570 WNAX Yankton</a>
119
+        <li><a href="http://wnax.com/">AM 570 WNAX Yankton</a></li>
112 120
         <li><a href="http://129.93.42.12:8000/listen">FM 90.3 KRNU Lincoln</a></li>
113
-        <li><a href="http://www.kzum.org/">FM 89.3 KZUM Lincoln</a>
114
-        <li><a href="http://stream.kgnu.net:8000/KGNU_live_high.mp3">FM 88.5 KGNU Boulder/Denver</a>
121
+        <li><a href="http://www.kzum.org/">FM 89.3 KZUM Lincoln</a></li>
122
+        <li><a href="http://stream.kgnu.net:8000/KGNU_live_high.mp3">FM 88.5 KGNU Boulder/Denver</a></li>
115 123
         <li><a href="http://www.radio1190.org/wp-content/themes/nextmagazine/listen_high_v3.html">AM 1190 KVCU Boulder/Denver</a></li>
116 124
       </ul>
117 125
 
@@ -955,6 +963,10 @@ sub slurp {
955 963
       <p>This is good: <a href="http://monkey.org/~marius/unix-tools-hints.html">Hints for writing
956 964
       Unix tools</a>.</p>
957 965
 
966
+    </article>
967
+
968
+    <article>
969
+
958 970
       <h2>Sunday, October 19</h2>
959 971
 
960 972
       <p>Now open for business, in a completely unprepared fashion:
@@ -1158,12 +1170,7 @@ sub slurp {
1158 1170
      </footer>
1159 1171
 
1160 1172
      <script>
1161
-       // This is a jQuery convention for calling this function when
1162
-       // the document's ready, pretty much.  Some things about jQuery
1163
-       // still annoy me, but honestly it's just really nice to have
1164
-       // around in general:
1165
-
1166
-       $(function () {
1173
+       $(document).ready(function () {
1167 1174
          // syntax highlighting - see http://shjs.sourceforge.net/
1168 1175
          // I was going to use http://prismjs.com/, which seems neat,
1169 1176
          // but that one doesn't come with Perl highlighting out of the
@@ -1172,82 +1179,16 @@ sub slurp {
1172 1179
          // nice job, really.
1173 1180
          sh_highlightDocument();
1174 1181
 
1175
-         // A really simple p5.js sketch - google p5.js:
1176
-         var lights_sketch = function(sketch) {
1177
-
1178
-           var x = 0;
1179
-           var y = 12;
1180
-           var world;
1181
-           var red = sketch.color(255, 0, 0);
1182
-           var green = sketch.color(0, 255, 0);
1183
-           var blue = sketch.color(0, 0, 255);
1184
-           var yeller = sketch.color(255, 255, 0);
1185
-           var colors = [red, green, blue, yeller];
1186
-
1187
-           var light_width = 9;
1188
-           var light_height = 18;
1189
-
1190
-           var renderlight = function (x, y, color) {
1191
-             sketch.push();
1192
-               sketch.stroke(color);
1193
-               sketch.fill(color);
1194
-               sketch.ellipse(x, y, light_width, light_height);
1195
-             sketch.pop();
1196
-           };
1197
-
1198
-           sketch.setup = function () {
1199
-             world = {
1200
-               // size of the canvas
1201
-               width: $(window).width(),
1202
-               height: $(window).height(),
1203
-             };
1204
-             sketch.createCanvas(world.width, world.height);
1205
-             sketch.background(0, 0, 0);
1206
-           };
1207
-
1208
-           var waitfor = 1800;
1209
-           var wait_til = sketch.millis() + waitfor;
1210
-           sketch.draw = function () {
1211
-             x = 0;
1212
-
1213
-             if (sketch.millis() < wait_til) {
1214
-               return;
1215
-             }
1216
-
1217
-             sketch.clear();
1218
-
1219
-             var previous_color;
1220
-             var color;
1221
-             while (x < world.width) {
1222
-               while (color === previous_color) {
1223
-                 color = colors[ Math.floor(Math.random()*colors.length) ];
1224
-               }
1225
-               renderlight(x, y, color);
1226
-               x += 50;
1227
-               previous_color = color;
1228
-             }
1229 1182
 
1230
-             wait_til = sketch.millis() + waitfor;
1231
-           };
1232
-         };
1233
-
1234
-         var myp5;
1235
-         // myp5 = new p5(lights_sketch, 'squiggleCanvas');
1183
+         // STACK STARTS HERE
1236 1184
 
1237
-         $(window).resize(function () {
1238
-           // myp5.setup();
1239
-         });
1240
-       });
1241
-
1242
-       // STACK STARTS HERE
1243
-       $(document).ready(function () {
1244
-         // get all the "slides", hide them
1185
+         // get all the "cards", hide them
1245 1186
          $cards = $('article, footer');
1246 1187
          $cards.hide();
1247 1188
 
1248 1189
          var card_number = 0;
1249 1190
          var $cur_card = $( $cards.get(card_number) );
1250
-         $cur_card.toggle(); // show first slide
1191
+         $cur_card.toggle();
1251 1192
 
1252 1193
          var transit = function (jump) {
1253 1194
            $('button').hide();
@@ -1264,19 +1205,28 @@ sub slurp {
1264 1205
            }
1265 1206
 
1266 1207
            $cur_card = $( $cards.get(card_number) );
1208
+           console.log(card_number);
1209
+           console.log($cur_card.html());
1267 1210
            $cur_card.toggle({
1268 1211
              duration: 200,
1269 1212
              done: function () { $('button').show(); }
1270 1213
            });
1271 1214
          };
1272 1215
 
1273
-         var $fwd_button = $('<button class=clicker-button>next</button>');
1274
-         var $bwd_button = $('<button class=clicker-button>prev</button>');
1216
+         var $fwd_button = $('<button class=clicker-button>&rarr;</button>');
1217
+         var $bwd_button = $('<button class=clicker-button>&larr;</button>');
1218
+         var $all_button = $('<button class=clicker-button>all</button>');
1219
+         var $button_group = $('<div class=buttons/>');
1275 1220
 
1276 1221
          $fwd_button.click(function (e) {
1277 1222
            e.preventDefault();
1278 1223
            transit(1);
1279 1224
          });
1225
+         $all_button.click(function (e) {
1226
+           e.preventDefault();
1227
+           $cards.show();
1228
+           $button_group.hide();
1229
+         });
1280 1230
          $bwd_button.click(function (e) {
1281 1231
            e.preventDefault();
1282 1232
            transit(-1);
@@ -1301,9 +1251,7 @@ sub slurp {
1301 1251
            e.preventDefault();
1302 1252
          });
1303 1253
 
1304
-         $button_group = $('<div class=buttons/>');
1305
-         $button_group.append($bwd_button);
1306
-         $button_group.append($fwd_button);
1254
+         $button_group.append($bwd_button, $all_button, $fwd_button);
1307 1255
          $('body').append($button_group);
1308 1256
 
1309 1257
          var toggleFullScreen = function () {

+ 3
- 3
tildebrennen.css View File

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