commit c5a7a5c97a83b3eb3e270b5cd14a08a1b12cd3ca Author: Bryan Braun Date: Mon Mar 10 23:34:30 2014 -0400 Lump commit to gh-pages. Comprises initial commit (c1c85b6) through 03db639 on master. diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..e5f995f --- /dev/null +++ b/README.markdown @@ -0,0 +1,20 @@ +# After Dark in CSS + +![After Dark Icon](img/after-dark-icon.png) + +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. + +### [See them here!](http://bryanbraun.github.io/after-dark-css/) + +#### Why? + +Just for fun. + +#### Thanks to: + +[Jonathon Sampson](https://twitter.com/jonathansampson), [Keith Clark](http://codepen.io/keithclark/), [Rob Glazebrook](http://www.cssnewbie.com/pure-css-bouncing-ball), [Ryan Justice](http://ned.highline.edu/~ryan-j/200/final/) and others for posting tutorials & demos on CSS animations. +[N. Landsteiner](http://www.masswerk.at/flyer/), [David Donarumo](http://www.youtube.com/watch?v=M1w1SQ3ezh8), and [Lazy Game Reviews](http://www.youtube.com/watch?v=ANnYbX54oU4) for online preservation of what the original screensavers looked like. +Robin Casady for the Public Domain [ChicagoFLF](http://christtrekker.users.sourceforge.net/fnt/chicago.shtml) font. +The original screensavers and artwork are © 1989 Berkeley Systems Inc. \ No newline at end of file diff --git a/base.css b/base.css new file mode 100644 index 0000000..066d5f7 --- /dev/null +++ b/base.css @@ -0,0 +1,43 @@ +/* apply a natural box layout model to all elements */ +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@font-face { + font-family: 'ChicagoFLF'; + src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */ +} + +html, +body { + background-color: #111; + margin: 0; + height: 100%; + font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif; +} + +/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */ +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} \ No newline at end of file diff --git a/bouncing-ball.html b/bouncing-ball.html new file mode 100644 index 0000000..c277ec5 --- /dev/null +++ b/bouncing-ball.html @@ -0,0 +1,62 @@ + + + + + Bouncing Ball | After Dark in CSS + + + + + +

Bouncing Ball Screensaver - After Dark in CSS

+ + + \ No newline at end of file diff --git a/example.html b/example.html new file mode 100644 index 0000000..c5bb4b8 --- /dev/null +++ b/example.html @@ -0,0 +1,15 @@ + + + + + Example | After Dark in CSS + + + + + +

Example Screensaver - After Dark in CSS

+ + \ No newline at end of file diff --git a/fade-out.html b/fade-out.html new file mode 100644 index 0000000..996fd75 --- /dev/null +++ b/fade-out.html @@ -0,0 +1,54 @@ + + + + + Fade Out | After Dark in CSS + + + + + +

Fade Out Screensaver - After Dark in CSS

+
+ + \ No newline at end of file diff --git a/fish.html b/fish.html new file mode 100644 index 0000000..35d4c8c --- /dev/null +++ b/fish.html @@ -0,0 +1,476 @@ + + + + + Fish | After Dark in CSS + + + + + +

Fish Screensaver - After Dark in CSS

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + Flying Toasters | After Dark in CSS + + + + + +

Flying Toasters - After Dark in CSS

+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + \ No newline at end of file diff --git a/fonts/ChicagoFLF.pdf b/fonts/ChicagoFLF.pdf new file mode 100644 index 0000000..8ab3f1f Binary files /dev/null and b/fonts/ChicagoFLF.pdf differ diff --git a/fonts/ChicagoFLF.ttf b/fonts/ChicagoFLF.ttf new file mode 100644 index 0000000..b77813c Binary files /dev/null and b/fonts/ChicagoFLF.ttf differ diff --git a/fonts/README.ChicagoFLF b/fonts/README.ChicagoFLF new file mode 100644 index 0000000..11a18e6 --- /dev/null +++ b/fonts/README.ChicagoFLF @@ -0,0 +1,23 @@ +PUBLIC DOMAIN (statement from original designer via email 2014/01/30) + +The FLF were created by various authors including myself and Mike Wright. When Casady & Greene, Inc. closed the rights went back to the authors. I created ChicagoFLF and CheckboxFLF. You are free to use them as you wish. I consider those two in the public domain. + +Regards, +Robin Casady + +VERSION HISTORY + +2.0 +No changes were made except the following: + +* Moved symbols to correct Unicode positions. +* Incorporated additional symbols from CheckboxFLF, which used identical + Basic Latin glyphs, and thus was essentially the "same" font with + different symbols. +* Very simple compositions from existing glyphs, and other homoglyphic + supplementation. +* Updates to some metadata. + +Because no outlines were added or modified, this is, in a very real sense, +the "same" font as Robin's, so I've kept the same name and incremented +the version. diff --git a/globe.html b/globe.html new file mode 100644 index 0000000..1649fc3 --- /dev/null +++ b/globe.html @@ -0,0 +1,86 @@ + + + + + Globe | After Dark in CSS + + + + + +

Globe Screensaver - After Dark in CSS

+ + + \ No newline at end of file diff --git a/hard-rain.html b/hard-rain.html new file mode 100644 index 0000000..bf0c75a --- /dev/null +++ b/hard-rain.html @@ -0,0 +1,458 @@ + + + + + Hard Rain | After Dark in CSS + + + + + +

Hard Rain Screensaver - After Dark in CSS

+ +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/after-dark-icon.png b/img/after-dark-icon.png new file mode 100644 index 0000000..bcd9379 Binary files /dev/null and b/img/after-dark-icon.png differ diff --git a/img/bubbles_50.png b/img/bubbles_50.png new file mode 100644 index 0000000..cbc4d86 Binary files /dev/null and b/img/bubbles_50.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..9773e3e Binary files /dev/null and b/img/favicon.png differ diff --git a/img/fish-angel.png b/img/fish-angel.png new file mode 100644 index 0000000..6d406e1 Binary files /dev/null and b/img/fish-angel.png differ diff --git a/img/fish-butterfly.png b/img/fish-butterfly.png new file mode 100644 index 0000000..a4c9943 Binary files /dev/null and b/img/fish-butterfly.png differ diff --git a/img/fish-flounder.png b/img/fish-flounder.png new file mode 100644 index 0000000..233fb3d Binary files /dev/null and b/img/fish-flounder.png differ diff --git a/img/fish-guppy.png b/img/fish-guppy.png new file mode 100644 index 0000000..548b13e Binary files /dev/null and b/img/fish-guppy.png differ diff --git a/img/fish-jelly.png b/img/fish-jelly.png new file mode 100644 index 0000000..4181567 Binary files /dev/null and b/img/fish-jelly.png differ diff --git a/img/fish-minnow.png b/img/fish-minnow.png new file mode 100644 index 0000000..1023f84 Binary files /dev/null and b/img/fish-minnow.png differ diff --git a/img/fish-red.png b/img/fish-red.png new file mode 100644 index 0000000..c52a21f Binary files /dev/null and b/img/fish-red.png differ diff --git a/img/fish-seahorse.png b/img/fish-seahorse.png new file mode 100644 index 0000000..fd6a999 Binary files /dev/null and b/img/fish-seahorse.png differ diff --git a/img/fish-sprite.png b/img/fish-sprite.png new file mode 100644 index 0000000..c7cc1ea Binary files /dev/null and b/img/fish-sprite.png differ diff --git a/img/fish-striped.png b/img/fish-striped.png new file mode 100644 index 0000000..576ea92 Binary files /dev/null and b/img/fish-striped.png differ diff --git a/img/globe_240.jpg b/img/globe_240.jpg new file mode 100644 index 0000000..11e1ed8 Binary files /dev/null and b/img/globe_240.jpg differ diff --git a/img/lines.png b/img/lines.png new file mode 100644 index 0000000..eb19d3b Binary files /dev/null and b/img/lines.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..00f07e1 Binary files /dev/null and b/img/logo.png differ diff --git a/img/macos-desktop.png b/img/macos-desktop.png new file mode 100644 index 0000000..ef0a0da Binary files /dev/null and b/img/macos-desktop.png differ diff --git a/img/rain-tile-distant.png b/img/rain-tile-distant.png new file mode 100644 index 0000000..cd8ee0b Binary files /dev/null and b/img/rain-tile-distant.png differ diff --git a/img/rain-tile-mid.png b/img/rain-tile-mid.png new file mode 100644 index 0000000..4ace4d8 Binary files /dev/null and b/img/rain-tile-mid.png differ diff --git a/img/rain-tile-near.png b/img/rain-tile-near.png new file mode 100644 index 0000000..788ed21 Binary files /dev/null and b/img/rain-tile-near.png differ diff --git a/img/seafloor.jpg b/img/seafloor.jpg new file mode 100644 index 0000000..432e341 Binary files /dev/null and b/img/seafloor.jpg differ diff --git a/img/spotlight_bg.png b/img/spotlight_bg.png new file mode 100644 index 0000000..1237212 Binary files /dev/null and b/img/spotlight_bg.png differ diff --git a/img/stars1.png b/img/stars1.png new file mode 100644 index 0000000..29abd6c Binary files /dev/null and b/img/stars1.png differ diff --git a/img/stars2.png b/img/stars2.png new file mode 100644 index 0000000..2c9b6dd Binary files /dev/null and b/img/stars2.png differ diff --git a/img/stars3.png b/img/stars3.png new file mode 100644 index 0000000..56a2c16 Binary files /dev/null and b/img/stars3.png differ diff --git a/img/stars4.png b/img/stars4.png new file mode 100644 index 0000000..4764303 Binary files /dev/null and b/img/stars4.png differ diff --git a/img/toast0.gif b/img/toast0.gif new file mode 100644 index 0000000..2391bdf Binary files /dev/null and b/img/toast0.gif differ diff --git a/img/toast1.gif b/img/toast1.gif new file mode 100644 index 0000000..ccdb6d0 Binary files /dev/null and b/img/toast1.gif differ diff --git a/img/toast2.gif b/img/toast2.gif new file mode 100644 index 0000000..4d8c39d Binary files /dev/null and b/img/toast2.gif differ diff --git a/img/toast3.gif b/img/toast3.gif new file mode 100644 index 0000000..847504a Binary files /dev/null and b/img/toast3.gif differ diff --git a/img/toaster-sprite.gif b/img/toaster-sprite.gif new file mode 100644 index 0000000..f484c00 Binary files /dev/null and b/img/toaster-sprite.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..88d2d14 --- /dev/null +++ b/index.html @@ -0,0 +1,229 @@ + + + + + After Dark in CSS + + + + + + + Fork me on GitHub +
+
Close
+
+

After Dark in CSS

+
+ +
+ +
+
+

Made by Bryan

+
+ + \ No newline at end of file diff --git a/logo.html b/logo.html new file mode 100644 index 0000000..c1ae493 --- /dev/null +++ b/logo.html @@ -0,0 +1,59 @@ + + + + + Logo | After Dark in CSS + + + + + +

Logo Screensaver - After Dark in CSS

+ + + \ No newline at end of file diff --git a/messages.html b/messages.html new file mode 100644 index 0000000..193a3fb --- /dev/null +++ b/messages.html @@ -0,0 +1,68 @@ + + + + + Messages | After Dark in CSS + + + + + +

Messages Screensaver - After Dark in CSS

+

OUT TO LUNCH

+ + \ No newline at end of file diff --git a/messages2.html b/messages2.html new file mode 100644 index 0000000..d2ff281 --- /dev/null +++ b/messages2.html @@ -0,0 +1,57 @@ + + + + + Messages 2 | After Dark in CSS + + + + + +

Messages Screensaver 2 - After Dark in CSS

+

 Why are you staring at my Macintosh?

+ + \ No newline at end of file diff --git a/rainstorm.html b/rainstorm.html new file mode 100644 index 0000000..98c3c0e --- /dev/null +++ b/rainstorm.html @@ -0,0 +1,188 @@ + + + + + Rainstorm | After Dark in CSS + + + + + +

Rainstorm Screensaver - After Dark in CSS

+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/spotlight.html b/spotlight.html new file mode 100644 index 0000000..a5c9822 --- /dev/null +++ b/spotlight.html @@ -0,0 +1,66 @@ + + + + + Spotlight | After Dark in CSS + + + + + +

Spotlight Screensaver - After Dark in CSS

+ + + + \ No newline at end of file diff --git a/warp.html b/warp.html new file mode 100644 index 0000000..c554783 --- /dev/null +++ b/warp.html @@ -0,0 +1,260 @@ + + + + + Warp | After Dark in CSS + + + + + +

Warp Screensaver - After Dark in CSS

+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file