Helge Jordal - Her Må Du Bli

wp-content/themes/studio13/css/app.css

@@ -624,10 +624,11 @@ article .article-footer { text-align: right; }
 .sidebar .lineup ul.artists.headliners li:nth-child(even) a { color: #ff005c; }
 .sidebar .lineup ul.artists.headliners li:nth-child(even) a:hover { color: white; background-color: #007aff; }
 
-.footer { min-width: 100%; text-align: center; height: 400px; background-color: #007aff; }
-.footer #inner-footer img { margin-top: 100px; }
+.flying-megawhale { width: 719px; height: 582px; background-image: url("../images/megawhale_wink.gif"); background-size: 100% 100%; background-repeat: no-repeat; margin: auto; margin-top: 4em; position: relative; top: 50px; z-index: -1; }
+.flying-megawhale img { position: absolute; right: -20px; top: 0px; width: 190px; }
 
-.flying-megawhale { width: 719px; height: 582px; background-image: url("../images/megawhale.png"); background-size: 100% 100%; background-repeat: no-repeat; margin: auto; margin-top: 4em; position: relative; top: 50px; z-index: -1; }
+.footer { position: relative; z-index: 2; min-width: 100%; text-align: center; height: 400px; background-color: #007aff; }
+.footer #inner-footer img { margin-top: 100px; }
 
 .wave { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background-color: #007aff; }
 
@@ -650,3 +651,7 @@ article .article-footer { text-align: right; }
 .search input[type=text] { margin-bottom: 1em; }
 .search input[type=submit] { text-transform: uppercase; font-weight: bold; padding: 0.5em 0.4em; background-color: #ff005c; color: white; border: 0; }
 .search input[type=submit]:hover { background-color: #007aff; }
+
+/* Samuel E. Wright - Under the sea */
+.anda-da-zee { position: relative; width: 100%; height: 1200px; background-image: -webkit-linear-gradient(#007aff, #00005e); background-image: -moz-linear-gradient(#007aff, #00005e); background-image: -o-linear-gradient(#007aff, #00005e); background-image: linear-gradient(#007aff, #00005e); border-bottom: solid 65px #000043; }
+.anda-da-zee .punsjebollen { position: absolute; bottom: -40px; left: 25%; z-index: 1; width: 512px; height: 340px; background-image: url("../images/punsjebolle.png"); background-repeat: no-repeat; }

wp-content/themes/studio13/footer.php

@@ -1,5 +1,5 @@
         <div class="wave"><div class="wavetop"></div></div>
-        <div class="flying-megawhale"></div>
+        <div class="flying-megawhale"><img src="<?php echo get_template_directory_uri(); ?>/images/thinking.gif" /></div>
         <footer class="footer" role="contentinfo">
             <div class="wavetop"></div>
             <div id="inner-footer">

wp-content/themes/studio13/js/main.js

@@ -26,4 +26,35 @@ jQuery(function($) {
         }
     });
     feed.run();
+
+    /* konami code */
+    var showing = false;
+    var anda_da_zee = '<div class="anda-da-zee"><div class="punsjebollen"></div></div>';
+    function showKonami() {
+        if (showing) { return; }
+        $("#inner-footer").html(anda_da_zee);
+        showing = true;
+    }
+
+    var kkeys = [];
+    var konamiString = "38,38,40,40,37,39,37,39,66,65";
+    // up, up, down, down, left, right, left, right, B, A
+
+    if (window.addEventListener) {
+        window.addEventListener('keydown', function(e) {
+            kkeys.push(e.keyCode );
+            if (kkeys.toString().indexOf(konamiString) >= 0 )
+            showKonami();
+        }, true)
+    }
+    /* IE */
+    else if(document.body.attachEvent) {
+        document.body.attachEvent('onkeydown', function(e){
+            kkeys.push(e.keyCode);
+            if (kkeys.toString().indexOf(konamiString) >= 0)		
+            showKonami();
+        }, true)
+    }
+    
 });
+

wp-content/themes/studio13/sass/app.scss

@@ -43,8 +43,9 @@
 @import "compass/css3/box-shadow";
 @import "compass/css3/filter";
 @import "compass/css3/animation"; // requires compass v0.13, see README.md
+@import "compass/css3/images";
 
-$multiplied: #00005c; // FIXME:  use this instead of transparent water?
+$multiplied: #00005e; // FIXME:  use this instead of transparent water?
 
 /* General styles */
 body {
@@ -413,7 +414,27 @@ article {
     }
 
 }
+.flying-megawhale {
+    width: 719px;
+    height: 582px;
+    background-image: url("../images/megawhale_wink.gif");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin: auto;
+    margin-top: 4em;
+    position: relative;
+    top: 50px;
+    z-index: -1;
+    img {
+        position: absolute;
+        right: -20px;
+        top: 0px;
+        width: 190px;
+    }
+}
 .footer {
+    position: relative;
+    z-index: 2;
     min-width: 100%;
     text-align: center;
     height: 400px;
@@ -424,18 +445,6 @@ article {
         }
     }
 }
-.flying-megawhale {
-    width: 719px;
-    height: 582px;
-    background-image: url("../images/megawhale.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    margin: auto;
-    margin-top: 4em;
-    position: relative;
-    top: 50px;
-    z-index: -1;
-}
 .wave {
     position:fixed;
     left:0px;
@@ -520,3 +529,21 @@ article {
         }
     }
 }
+/* Samuel E. Wright - Under the sea */
+.anda-da-zee {
+    position: relative;
+    width: 100%;
+    height: 1200px;
+    @include background-image(linear-gradient($primary-color, $multiplied));
+    border-bottom: solid 65px #000043;
+    .punsjebollen {
+        position: absolute;
+        bottom: -40px;
+        left: 25%;
+        z-index: 1;
+        width: 512px;
+        height: 340px;
+        @include background-image( url('../images/punsjebolle.png'));
+        background-repeat: no-repeat;
+    }
+}