Hover bonanza

README.md

@@ -0,0 +1,4 @@
+# Requirements
+    sudo apt-get install ruby1.9.1-dev libffi-dev
+    sudo gem install --version '~> 0.9' rb-inotify
+    sudo gem install compass --pre

wp-content/themes/studio13/404.php

@@ -1,19 +1,19 @@
 <?php get_header(); ?>
 <div id="content">
     <div id="inner-content" class="row">
-        <div id="main" class="small-12 columns" role="main">
+        <div id="main" class="small-12 columns text-center" role="main">
             <article id="post-not-found" class="hentry">
                 <header class="article-header">
-                    <h1>Trist 404-side</h1>
+                    <h1 class="disco">Fire Null Fire</h1>
                 </header> <!-- end article header -->
                 <section class="entry-content">
-                    <p>ånei og ånei</p>
+                    <h2>Skuta er på halv 12, ring Jens.</h2>
                 </section> <!-- end article section -->
                 <section class="search">
-                        <p>Du kan søke litt istedet <?php get_search_form(); ?></p>
+                    <p><?php get_search_form(); ?></p>
                 </section> <!-- end search section -->
                 <footer class="article-footer">
-                        <p></p>
+                    <p></p>
                 </footer> <!-- end article footer -->
             </article> <!-- end article -->
         </div> <!-- end #main -->

wp-content/themes/studio13/content-full.php

@@ -1,8 +1,8 @@
 <article id="post-<?php the_ID(); ?>" role="article">
     <header class="article-header row">
         <div class="small-12 columns">
-            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('eight-columns'); ?></a>
+            <a href="<?php the_permalink() ?>" class="colored" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('eight-columns'); ?></a>
-            <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
+            <h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
             <!--<p class="byline vcard"><time class="updated" datetime="<?php echo get_the_time('Y-m-j'); ?>" pubdate><?php echo get_the_time(get_option('date_format'));?></time> av <span class="author"><?php the_author_posts_link(); ?></span></p>-->
         </div>
     </header> <!-- end article header -->

wp-content/themes/studio13/content-sticky.php

@@ -2,7 +2,7 @@
 <article id="post-<?php the_ID(); ?>" role="article" class="sticky">
     <header class="article-header row">
         <div class="small-12 columns">
-            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('eight-columns'); ?></a>
+            <a href="<?php the_permalink() ?>" class="colored primary" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('eight-columns'); ?></a>
             <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
             <!--<p class="byline vcard"><time class="updated" datetime="<?php echo get_the_time('Y-m-j'); ?>" pubdate><?php echo get_the_time(get_option('date_format'));?></time> av <span class="author"><?php the_author_posts_link(); ?></span></p>-->
         </div>

wp-content/themes/studio13/content.php

@@ -1,7 +1,7 @@
 <article id="post-<?php the_ID(); ?>" role="article">
     <div class="row">
         <div class="small-6 columns">
-            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('four-columns'); ?></a>
+            <a href="<?php the_permalink() ?>" class="colored" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('four-columns'); ?></a>
         </div>
         <div class="small-6 columns">
             <header class="article-header">

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

@@ -519,8 +519,10 @@ table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoo
 /* General styles */
 body h1, body h2, body h3, body h4 { text-transform: uppercase; }
 body h1 { margin-bottom: 0.3em; }
-body a { -webkit-transition: background-color 0.15s ease, color 0.15s ease; -moz-transition: background-color 0.15s ease, color 0.15s ease; -o-transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease; }
+body a { -webkit-transition: background-color 0.15s ease, background-image 0.15s ease, color 0.15s ease; -moz-transition: background-color 0.15s ease, background-image 0.15s ease, color 0.15s ease; -o-transition: background-color 0.15s ease, background-image 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, background-image 0.15s ease, color 0.15s ease; }
 body a:hover { color: #ff005c; }
+body span, body input[type=submit] { -webkit-transition: background-color 0.15s ease, color 0.15s ease; -moz-transition: background-color 0.15s ease, color 0.15s ease; -o-transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease; }
+body img { -webkit-transition: opacity 0.15s ease; -moz-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; transition: opacity 0.15s ease; }
 
 .hide-text, .highlight a.highlight-image, .tweets-image, .blog-image, .instagram-image, .artists-image { text-indent: 100%; white-space: nowrap; overflow: hidden; }
 
@@ -540,9 +542,27 @@ body .secondary:hover, body .button:hover { color: white; background-color: #007
 /* Images */
 .attachment-eight-columns, .attachment-four-columns { width: 100%; }
 
-/* hover filters */
+/* more hover stuff */
-a.filter { position: relative; float: left; cursor: pointer; background-color: white; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); }
+a.colored { display: block; background-color: #ff005c; }
-a.filter:hover { -webkit-filter: none; -moz-filter: none; filter: none; background-color: white; }
+a.colored.primary { background-color: #007aff; }
+a.colored img { display: block; width: 100%; }
+a.colored:hover img { opacity: .4; }
+
+/* Disco */
+@-moz-keyframes disco { from { background-color: #007aff; }
+  to { background-color: #ff005c; } }
+
+@-webkit-keyframes disco { from { background-color: #007aff; }
+  to { background-color: #ff005c; } }
+
+@-o-keyframes disco { from { background-color: #007aff; }
+  to { background-color: #ff005c; } }
+
+@keyframes disco { from { background-color: #007aff; }
+  to { background-color: #ff005c; } }
+
+.disco { color: white; background-color: #007aff; -webkit-animation: disco 0.5s infinite alternate; -moz-animation: disco 0.5s infinite alternate; -o-animation: disco 0.5s infinite alternate; animation: disco 0.5s infinite alternate; }
+.disco.reversed { -webkit-animation: disco 0.5s 0.5s infinite alternate; -moz-animation: disco 0.5s 0.5s infinite alternate; -o-animation: disco 0.5s 0.5s infinite alternate; animation: disco 0.5s 0.5s infinite alternate; }
 
 header.header { margin-top: 2em; margin-bottom: 2em; }
 header.header .date { color: #007aff; font-size: 3.45em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; display: inline-block; }
@@ -566,9 +586,9 @@ header.header .nav-menu a:hover { z-index: 2; background-color: #ff005c; }
 
 article { margin-bottom: 1em; }
 article p { margin-bottom: 0.6em; }
-article .article-header h1 a { color: inherit; }
+article .article-header h1 a { color: #ff005c; background-color: white; }
 article .article-header h1 a:hover { color: #007aff; }
-article .article-header h4 a { color: #ff005c; }
+article .article-header h4 a { color: #ff005c; background-color: white; }
 article .article-header h4 a:hover { color: #007aff; }
 article .entry-content { font-size: 0.9em; }
 article .article-footer { text-align: right; margin-bottom: 2em; }
@@ -619,5 +639,14 @@ article .article-footer { text-align: right; margin-bottom: 2em; }
 .template-artists img { display: block; }
 .template-artists .artists { font-size: 1.5em; text-transform: uppercase; text-align: center; font-weight: bold; }
 .template-artists .artists .artist-box a { color: #007aff; }
+.template-artists .artists .artist-box a span { display: block; color: #007aff; background-color: white; }
 .template-artists .artists .artist-box a:hover { color: white; }
-.template-artists .artists .artist-box a:hover span { display: block; background-color: #ff005c; }
+.template-artists .artists .artist-box a:hover span { color: white; background-color: #ff005c; }
+
+/* 404 */
+.search .screen-reader-text { display: none; }
+.search label, .search input { margin-bottom: 10px; }
+.search input { width: 300px; margin: 0 auto; }
+.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; }

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

@@ -1,5 +1,5 @@
 function format_image(img) {
-    return '<li><a href="'+ img.link +'" class="filter primary"><img src="'+ img.images.low_resolution.url +'" /></a></li>';
+    return '<li><a href="'+ img.link +'" class="colored primary"><img src="'+ img.images.low_resolution.url +'" /></a></li>';
 }
 jQuery(document).foundation();
 

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

@@ -42,6 +42,7 @@
 @import "compass/css3/transition";
 @import "compass/css3/box-shadow";
 @import "compass/css3/filter";
+@import "compass/css3/animation"; // requires compass v0.13, see README.md
 
 $multiplied: #00005c; // FIXME:  use this instead of transparent water?
 
@@ -56,12 +57,22 @@ body {
     a {
         @include transition(
             background-color .15s ease,
+            background-image .15s ease,
             color .15s ease);
 
         &:hover {
             color: $secondary-color;
         }
     }
+    span,
+    input[type=submit] {
+        @include transition(
+            background-color .15s ease,
+            color .15s ease);
+    }
+    img {
+        @include transition(opacity .15s ease);
+    }
     
 }
 .hide-text {
@@ -119,32 +130,38 @@ body {
 .attachment-four-columns {
     width: 100%;
 }
-/* hover filters */
+/* more hover stuff */
-a.filter {
+a.colored {
-	position: relative;
+    display: block;
-	float: left;
+    background-color: $secondary-color;
-	cursor: pointer;
+
-    background-color: white;
+    &.primary {
-    &:hover {
+        background-color: $primary-color;
-        @include filter(none);
+    }
-        background-color: white;
+
+    img {
+        display: block;
+        width: 100%;
+    }
+
+    &:hover img {
+        opacity: .4;
+    }
+}
+/* Disco */
+@include keyframes(disco) {
+    from { background-color: $primary-color; }
+    to { background-color: $secondary-color; }
+
+}
+.disco {
+    color: white;
+    background-color: $primary-color;
+    @include animation(disco .5s infinite alternate);
+
+    &.reversed {
+        @include animation(disco .5s .5s infinite alternate);
     }
-    @include filter(grayscale(100%));
-    //&:before {
-    //    content: "";
-    //    display: block;
-    //    position: absolute;
-    //    top: 0;
-    //    bottom: 0;
-    //    left: 0;
-    //    right: 0;
-    //    background-color: transparent;
-    //}
-    //&:hover:before {
-    //    background-color: $primary-color;
-    //    opacity: .8;
-    //    @include transition( any .15s ease);
-    //}
 }
 
 header.header {
@@ -253,7 +270,8 @@ article {
 
     .article-header {
         h1 a {
-            color: inherit;
+            color: $secondary-color;
+            background-color: white;
 
             &:hover {
                 color: $primary-color;
@@ -261,6 +279,7 @@ article {
         }
         h4 a {
             color: $secondary-color;
+            background-color: white;
             &:hover { color: $primary-color; }
         }
     }
@@ -453,10 +472,16 @@ article {
         .artist-box {
             a {
                 color: $primary-color;
+                span {
+                    display: block;
+                    color: $primary-color;
+                    background-color: white;
+                }
+
                 &:hover {
                     color: white;
                     span {
-                        display: block;
+                        color: white;
                         background-color: $secondary-color;
                     }
                 }
@@ -465,5 +490,33 @@ article {
         }
 
     }
+}
+/* 404 */
+.search {
+    .screen-reader-text {
+        display: none;
+    }
+    label,
+    input {
+        margin-bottom: 10px;
+    }
+    input {
+        width: 300px;
+        margin: 0 auto;
+        &[type=text]{
+            margin-bottom: 1em;
+        }
+        &[type=submit] {
+            text-transform: uppercase;
+            font-weight: bold;
+            padding: 0.5em 0.4em;
+            background-color: $secondary-color;
+            color: white;
+            border: 0;
 
+            &:hover {
+                background-color: $primary-color;
+            }
+        }
+    }
 }

wp-content/themes/studio13/template-artists.php

@@ -21,7 +21,7 @@ Template Name: Artists page
                             /* Print our custom post type */
 $query = new WP_Query( array ( 'post_type' => 'artist', 'orderby' => 'title', 'order' => 'asc') );
                             while ( $query->have_posts() ):
-                                $query->the_post(); ?><li class="artist-box"><a href="<?php the_permalink();?>"><?php the_post_thumbnail('artist-thumb');?><span><?php the_title(); ?></span></a></li><?php endwhile;
+                                $query->the_post(); ?><li class="artist-box"><a href="<?php the_permalink();?>" class="colored primary"><?php the_post_thumbnail('artist-thumb');?><span><?php the_title(); ?></span></a></li><?php endwhile;
                             wp_reset_postdata();?>
                         </ul>
                 </section> <!-- end article section -->