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

messages2.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Messages 2 | After Dark in CSS</title>
+  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="stylesheet" href="base.css">
+  <style>
+  
+  /* ball styling */
+  .message {
+    display: block;
+    width: 462px;
+    margin: 0;
+    color: white;
+    position: absolute;
+    font-size: 20px;
+    /* ball animation */
+    -webkit-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
+    -moz-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
+    -o-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
+    animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate ;
+  }
+  
+  /* animation keyframes */
+  @-webkit-keyframes moveX {
+    /* screen width - width of message */
+    from { left: 0; } to { left: calc(100% - 460px); }
+  }
+  @-moz-keyframes moveX {
+    from { left: 0; } to { left: calc(100% - 460px); }
+  }
+  @-o-keyframes moveX {
+    from { left: 0; } to { left: calc(100% - 460px); }
+  }
+  @keyframes moveX {
+    from { left: 0; } to { left: calc(100% - 460px); }
+  }
+  @-webkit-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 26px); }
+  }
+  @-moz-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 26px); }
+  }
+  @-o-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 26px); }
+  }
+  @keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 26px); }
+  }  
+  </style>
+</head>
+<body>
+  <h1 class="visuallyhidden">Messages Screensaver 2 - After Dark in CSS</h1>
+  <h2 class="message">&nbsp;Why are you staring at my Macintosh?</h2>
+</body>
+</html>