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

fade-out.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Fade Out | After Dark in CSS</title>
+  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="stylesheet" href="base.css">
+  <style>
+    body {
+      background: url(img/macos-desktop.png) no-repeat center center fixed; 
+      -webkit-background-size: cover;
+      -moz-background-size: cover;
+      -o-background-size: cover;
+      background-size: cover;
+    }
+    .dim {
+      position: absolute;
+      background-color: black;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      opacity: 0;
+      -webkit-animation: fade 40s ease-out 1 forwards;
+      -moz-animation: fade 40s ease-out 1 forwards;
+      -o-animation: fade 40s ease-out 1 forwards;
+      animation: fade 40s ease-out 1 forwards;
+    }
+    
+    /* Fade out animation */
+    @-webkit-keyframes fade {
+     from { opacity: 0; }
+       to { opacity: 1; }
+    }
+    @-moz-keyframes fade {
+     from { opacity: 0; }
+       to { opacity: 1; }
+    }
+    @-o-keyframes fade {
+     from { opacity: 0; }
+       to { opacity: 1; }
+    }
+    @keyframes fade {
+     from { opacity: 0; }
+       to { opacity: 1; }
+    }
+    
+  </style>
+</head>
+<body>
+  <h1 class="visuallyhidden">Fade Out Screensaver - After Dark in CSS</h1>
+  <div class="dim"></div>
+</body>
+</html>