edb/studio-2013
Archived
9
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Hover bonanza

Browse Source
This commit is contained in:
nikolark committed 2013-05-10 16:41:05 +02:00
1 parent b1447755df
commit 51ad641561
9 files changed
+131 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+4
View File
@@ -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
+5 -5
View File
@@ -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
+2 -2
View File
@@ -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>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<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"><?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
+1 -1
View File
@@ -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 -1
View File
@@ -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
+36 -7
View File
@@ -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 */
a.filter { position: relative; float: left; cursor: pointer; background-color: white; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); }
a.filter:hover { -webkit-filter: none; -moz-filter: none; filter: none; background-color: white; }
/* more hover stuff */
a.colored { display: block; background-color: #ff005c; }
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 -1
View File
@@ -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
+80 -27
View File
@@ -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 */
a.filter {
position: relative;
float: left;
cursor: pointer;
background-color: white;
&:hover {
@include filter(none);
background-color: white;
/* more hover stuff */
a.colored {
display: block;
background-color: $secondary-color;
&.primary {
background-color: $primary-color;
}
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
+1 -1
View File
@@ -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 -->