Lump commit to gh-pages. Comprises initial commit (c1c85b6) through 03db639 on master.

bouncing-ball.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Bouncing Ball | After Dark in CSS</title>
+  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="stylesheet" href="base.css" />
+  <style>
+  
+  /**
+   * Thanks to Rob Glazebrook, and his article here:
+   * http://www.cssnewbie.com/pure-css-bouncing-ball
+   */
+  
+  /* ball styling */
+  b {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: white;
+    position: absolute;
+    /* ball animation */
+    -webkit-animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate;
+    -moz-animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate;
+    -o-animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate;
+    animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate ;
+  }
+  
+  /* animation keyframes */
+  @-webkit-keyframes moveX {
+    /* screen width - width of ball */
+    from { left: calc(100% - 40px); } to { left: 0; }
+  }
+  @-moz-keyframes moveX {
+    from { left: calc(100% - 40px); } to { left: 0; }
+  }
+  @-o-keyframes moveX {
+    from { left: calc(100% - 40px); } to { left: 0; }
+  }
+  @keyframes moveX {
+    from { left: calc(100% - 40px); } to { left: 0; }
+  }
+  @-webkit-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  @-moz-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  @-o-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  @keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  </style>
+</head>
+<body>
+  <h1 class="visuallyhidden">Bouncing Ball Screensaver - After Dark in CSS</h1>
+  <b></b>
+</body>
+</html>