From dfbadc62dbc77a6f367d521a7e057b6e6f498830 Mon Sep 17 00:00:00 2001
From: dsc <dsc@wikimedia.org>
Date: Thu, 17 May 2012 12:18:50 -0700
Subject: [PATCH] Adds mixins for CSS Animations.

---
 www/css/layout.styl |   34 +++++++++++++++++++++++++++++-----
 www/css/mixins.styl |   33 +++++++++++++++++++++++++++++++++
 www/layout.jade     |    5 ++---
 3 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 www/css/mixins.styl

diff --git a/www/css/layout.styl b/www/css/layout.styl
index 5b822ca..960974a 100644
--- a/www/css/layout.styl
+++ b/www/css/layout.styl
@@ -1,8 +1,8 @@
 @import 'nib'
 @import 'colors'
+@import 'mixins'
 @import 'text'
 
-
 .clearer
     clearfix()
 
@@ -22,6 +22,10 @@
     background transparent no-repeat 0 0
     border 0 !important
     
+    // Enable CSS Transitions
+    transition-duration 0.8s
+    transition-property opacity
+    
     &.wmf-logo
         width 45px
         height 45px
@@ -40,6 +44,12 @@
         &:hover
             opacity 0.25
 
+html, body
+    absolute top 0 left 0
+    width 100%
+
+html
+    min-height 100%
 
 body
     min-height 100%
@@ -207,16 +217,30 @@ footer
 
 .rilke
     absolute bottom 1em right 1em
-    width 210px
-    color darken($foot_text, 20%)
-    opacity 0.15
+    z-index 30
+    width 185px
+    
+    opacity 0.1
+    &:hover
+        opacity 1
+    
+    // Enable CSS Transitions
+    transition-duration 0.8s
+    transition-property opacity
+    
     &, & *
         font-size 10px
         line-height 1.3
         text-indent -1em
         border 0
+        color $foot_text
     small
+        margin-top 5px
         text-align right
-        color $foot_text
+        color $foot_header
+    blockquote
+        margin 0
+        padding 0
+
 
 
diff --git a/www/css/mixins.styl b/www/css/mixins.styl
new file mode 100644
index 0000000..25e5e3a
--- /dev/null
+++ b/www/css/mixins.styl
@@ -0,0 +1,33 @@
+@import 'nib'
+
+
+column-span()
+    -webkit-column-span arguments
+    -moz-column-span arguments
+    column-span arguments
+
+transition-property()
+    -webkit-transition-property arguments
+    -moz-transition-property arguments
+    transition-property arguments
+
+transition-duration()
+    -webkit-transition-duration arguments
+    -moz-transition-duration arguments
+    transition-duration arguments
+
+text-stroke($size, $color)
+    $neg = -($size)
+    text-shadow $neg $neg 0 $color, $size $neg 0 $color, $neg $size 0 $color, $size $size 0 $color
+
+break-something($what, $args)
+    -webkit-column-break-{$what} $args
+    -moz-column-break-{$what} $args
+    column-break-{$what} $args
+    -webkit-break-{$what} $args
+    -moz-break-{$what} $args
+    break-{$what} $args
+
+break-inside()
+    break-something inside, arguments
+
diff --git a/www/layout.jade b/www/layout.jade
index 96bad35..8b2aad8 100644
--- a/www/layout.jade
+++ b/www/layout.jade
@@ -136,9 +136,8 @@ html(lang="en", dir="ltr")
             
             block addenda
                 .rilke: blockquote
-                    p
-                        | What we fight with is so small, and when we win, it makes us small. 
-                        | What we want is to be defeated, decisively, by successively greater things.
+                    p What we fight with is so small, and when we win, it makes us small.
+                    p What we want is to be defeated, decisively, by successively greater things.
                     small Rainer Rilke
             
 
-- 
1.7.0.4