Restructured files. Improved README.

README.markdown

@@ -1,11 +1,13 @@
 # After Dark in CSS
 
-![After Dark Icon](img/after-dark-icon.png)
+![Flying Toasters in CSS](img/flying-toasters-css.jpg)
 
 Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?
 
 If so, then never fear --- CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.
 
+The animations were made with CSS alone. No animated gifs or javascript.
+
 ### [See them here!](http://bryanbraun.github.io/after-dark-css/)
 
 #### Browsers

all/base.css

@@ -9,7 +9,7 @@
 
 @font-face {
   font-family: 'ChicagoFLF';
-  src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
+  src: url('../fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
 }
 
 html,

all/bouncing-ball.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Bouncing Ball | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css" />
   <style>
   

all/example.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Example | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   

all/fade-out.html

@@ -3,11 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <title>Fade Out | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <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; 
+      background: url(../img/macos-desktop.png) no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;

all/fish.html

@@ -3,13 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <title>Fish | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   
     body {
       background-color: black;
-      background-image: url(img/seafloor.jpg);
+      background-image: url(../img/seafloor.jpg);
       background-position: bottom;
       background-repeat: repeat-x;
     }
@@ -21,7 +21,7 @@
       width: 50px;
       height: 56px;
       background-repeat: no-repeat;
-      background-image: url(img/bubbles_50.png);
+      background-image: url(../img/bubbles_50.png);
       -webkit-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
       -moz-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
       -o-animation: rise 13s linear infinite, reappear 39s steps(3) linear infinite, bubble-alt 0.2s steps(2) infinite;
@@ -40,31 +40,31 @@
       top: -50%;
     }
     .butterfly {
-      background-image: url(img/fish-butterfly.png);
+      background-image: url(../img/fish-butterfly.png);
     }
     .guppy {
-      background-image: url(img/fish-guppy.png);
+      background-image: url(../img/fish-guppy.png);
     }
     .seahorse {
-      background-image: url(img/fish-seahorse.png);
+      background-image: url(../img/fish-seahorse.png);
     }
     .jelly {
-      background-image: url(img/fish-jelly.png);
+      background-image: url(../img/fish-jelly.png);
     }
     .minnow {
-      background-image: url(img/fish-minnow.png);
+      background-image: url(../img/fish-minnow.png);
     }
     .red {
-      background-image: url(img/fish-red.png);
+      background-image: url(../img/fish-red.png);
     }
     .striped {
-      background-image: url(img/fish-striped.png);
+      background-image: url(../img/fish-striped.png);
     }
     .angel {
-      background-image: url(img/fish-angel.png);
+      background-image: url(../img/fish-angel.png);
     }
     .flounder {
-      background-image: url(img/fish-flounder.png);
+      background-image: url(../img/fish-flounder.png);
     }
     
     /**

all/flying-toasters.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Flying Toasters | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
  
@@ -11,13 +11,13 @@
       position: absolute;
       width: 64px;
       height: 64px;
-      background-image: url("img/toaster-sprite.gif");
+      background-image: url("../img/toaster-sprite.gif");
     }
     .toast {
       position: absolute;
       width: 64px;
       height: 64px;
-      background-image: url("img/toast1.gif");
+      background-image: url("../img/toast1.gif");
     }
      
     /**

all/globe.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Globe | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css" />
   <style>
   
@@ -18,7 +18,7 @@
       height: 240px;
       position: absolute;
       background-color: black;
-      background-image: url(img/globe_240.jpg);
+      background-image: url(../img/globe_240.jpg);
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;

all/hard-rain.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Hard Rain | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
     /* shared raindrop attributes */

all/logo.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Logo | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css" />
   <style>
   
@@ -54,6 +54,6 @@
 </head>
 <body>
   <h1 class="visuallyhidden">Logo Screensaver - After Dark in CSS</h1>
-  <img src="img/logo.png">
+  <img src="../img/logo.png">
 </body>
 </html>

all/messages.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Messages | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   /**

all/messages2.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Messages 2 | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   

all/rainstorm.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Rainstorm | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
   
@@ -30,14 +30,14 @@
       -moz-animation: fall 2.2s infinite linear;
       -o-animation: fall 2.2s infinite linear;
       animation: fall 2.2s infinite linear;
-      background: url(img/rain-tile-near.png) repeat;     
+      background: url(../img/rain-tile-near.png) repeat;     
     }
     .r2 {
       -webkit-animation: fall 2.2s 1s infinite linear;
       -moz-animation: fall 2.2s 1s infinite linear;
       -o-animation: fall 2.2s 1s infinite linear;
       animation: fall 2.2s 1s infinite linear;
-      background: url(img/rain-tile-near.png) repeat;     
+      background: url(../img/rain-tile-near.png) repeat;     
     }
     
     /* Two waves of mid-distant rain */
@@ -46,14 +46,14 @@
       -moz-animation: fall 4s infinite linear;
       -o-animation: fall 4s infinite linear;
       animation: fall 4s infinite linear;
-      background: url(img/rain-tile-mid.png) repeat;  
+      background: url(../img/rain-tile-mid.png) repeat;  
     }
     .r4 {
       -webkit-animation: fall 4.5s 3.2s infinite linear;
       -moz-animation: fall 4.5s 3.2s infinite linear;
       -o-animation: fall 4.5s 3.2s infinite linear;
       animation: fall 4.5s 3.2s infinite linear;
-      background: url(img/rain-tile-mid.png) repeat;
+      background: url(../img/rain-tile-mid.png) repeat;
     } 
     
     /* Two waves of distant rain */
@@ -62,14 +62,14 @@
       -moz-animation: fall 6s infinite linear;
       -o-animation: fall 6s infinite linear;
       animation: fall 6s infinite linear;
-      background: url(img/rain-tile-distant.png) repeat;  
+      background: url(../img/rain-tile-distant.png) repeat;  
     }
     .r6 {
       -webkit-animation: fall 6s 4s infinite linear;
       -moz-animation: fall 6s 4s infinite linear;
       -o-animation: fall 6s 4s infinite linear;
       animation: fall 6s 4s infinite linear;
-      background: url(img/rain-tile-distant.png) repeat;
+      background: url(../img/rain-tile-distant.png) repeat;
     }
     
     /**

all/spotlight.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Spotlight | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
     /**
@@ -13,7 +13,7 @@
      * me know!
      */
     body {
-      background: url(img/macos-desktop.png) no-repeat center center fixed; 
+      background: url(../img/macos-desktop.png) no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
@@ -61,6 +61,6 @@
 <body>
   <h1 class="visuallyhidden">Spotlight Screensaver - After Dark in CSS</h1>
   <!-- <b id="spotlight"></b> -->
-  <img class="spotlight" src="img/spotlight_bg.png" />
+  <img class="spotlight" src="../img/spotlight_bg.png" />
 </body>
 </html>

all/warp.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Warp | After Dark in CSS</title>
-  <link rel="shortcut icon" href="img/favicon.png" />
+  <link rel="shortcut icon" href="../img/favicon.png" />
   <link rel="stylesheet" href="base.css">
   <style>
 
@@ -29,63 +29,63 @@
     }
 
     .stars:nth-child(1) {
-      background: url(img/stars1.png) no-repeat center center fixed;
+      background: url(../img/stars1.png) no-repeat center center fixed;
       -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
       -o-animation-delay: 0s;
       animation-delay: 0s;
     }
     .stars:nth-child(2) {
-      background: url(img/stars2.png) no-repeat center center fixed;
+      background: url(../img/stars2.png) no-repeat center center fixed;
       -webkit-animation-delay: 500ms;
       -moz-animation-delay: 500ms;
       -o-animation-delay: 500ms;
       animation-delay: 500ms;
     }
     .stars:nth-child(3) {
-      background: url(img/stars3.png) no-repeat center center fixed;
+      background: url(../img/stars3.png) no-repeat center center fixed;
       -webkit-animation-delay: 1s;
       -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
       animation-delay: 1s;
     }
     .stars:nth-child(4) {
-      background: url(img/stars4.png) no-repeat center center fixed;
+      background: url(../img/stars4.png) no-repeat center center fixed;
       -webkit-animation-delay: 1500ms;
       -moz-animation-delay: 1500ms;
       -o-animation-delay: 1500ms;
       animation-delay: 1500ms;
     }
     .stars:nth-child(5) {
-      background: url(img/stars1.png) no-repeat center center fixed;
+      background: url(../img/stars1.png) no-repeat center center fixed;
       -webkit-animation-delay: 2s;
       -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
       animation-delay: 2s;
     }
     .stars:nth-child(6) {
-      background: url(img/stars2.png) no-repeat center center fixed;
+      background: url(../img/stars2.png) no-repeat center center fixed;
       -webkit-animation-delay: 2500ms;
       -moz-animation-delay: 2500ms;
       -o-animation-delay: 2500ms;
       animation-delay: 2500ms;
     }
     .stars:nth-child(7) {
-      background: url(img/stars3.png) no-repeat center center fixed;
+      background: url(../img/stars3.png) no-repeat center center fixed;
       -webkit-animation-delay: 3s;
       -moz-animation-delay: 3s;
       -o-animation-delay: 3s;
       animation-delay: 3s;
     }
     .stars:nth-child(8) {
-      background: url(img/stars4.png) no-repeat center center fixed;
+      background: url(../img/stars4.png) no-repeat center center fixed;
       -webkit-animation-delay: 3500ms;
       -moz-animation-delay: 3500ms;
       -o-animation-delay: 3500ms;
       animation-delay: 3500ms;
     }
     .stars:nth-child(9) {
-      background: url(img/stars1.png) no-repeat center center fixed;
+      background: url(../img/stars1.png) no-repeat center center fixed;
       -webkit-animation-delay: 4s;
       -moz-animation-delay: 4s;
       -o-animation-delay: 4s;

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>After Dark in CSS</title>
   <link rel="shortcut icon" href="img/favicon.png" />
-  <link rel="stylesheet" href="base.css">
+  <link rel="stylesheet" href="all/base.css">
   <style>
     html,
     body {
@@ -201,23 +201,23 @@
     <h1 class="title">After Dark in CSS</h1>
     <div class="ad"><img src="img/after-dark-icon.png" /></div>
     <ul>
-      <li><a class="s" href="flying-toasters.html">Flying Toasters</a></li>
+      <li><a class="s" href="all/flying-toasters.html">Flying Toasters</a></li>
-      <li><a class="s" href="fish.html">Fish</a></li>
+      <li><a class="s" href="all/fish.html">Fish</a></li>
-      <li><a class="s" href="globe.html">Globe</a></li>
+      <li><a class="s" href="all/globe.html">Globe</a></li>
-      <li><a href="hard-rain.html">Hard Rain</a></li>
+      <li><a href="all/hard-rain.html">Hard Rain</a></li>
-      <li><a class="s" href="bouncing-ball.html">Bouncing Ball</a></li>
+      <li><a class="s" href="all/bouncing-ball.html">Bouncing Ball</a></li>
-      <li><a class="s" href="warp.html">Warp</a></li>
+      <li><a class="s" href="all/warp.html">Warp</a></li>
-      <li><a class="s" href="messages.html">Messages</a></li>
+      <li><a class="s" href="all/messages.html">Messages</a></li>
-      <li><a class="s" href="messages2.html">Messages 2</a></li>
+      <li><a class="s" href="all/messages2.html">Messages 2</a></li>
-      <li><a href="fade-out.html" class="s">Fade Out</a></li>
+      <li><a href="all/fade-out.html" class="s">Fade Out</a></li>
-      <li><a class="s" href="logo.html">Logo</a></li>
+      <li><a class="s" href="all/logo.html">Logo</a></li>
-      <li><a class="s" href="rainstorm.html">Rainstorm</a></li>
+      <li><a class="s" href="all/rainstorm.html">Rainstorm</a></li>
-      <li><a class="s" href="spotlight.html">Spotlight</a></li>
+      <li><a class="s" href="all/spotlight.html">Spotlight</a></li>
       <li><a id="randomizer" href="#">Randomizer</a></li>
     </ul>
   </div>
   <footer class="footer">
-    <a href="https://twitter.com/share" class="twitter-share-button" data-text="&quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
+    <a href="https://twitter.com/share" class="twitter-share-button" data-text="Classic &quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
   
   </footer>