From 51ad641561600a98b53ba44ccb0a469601384707 Mon Sep 17 00:00:00 2001 From: Nikolai Kristiansen Date: Fri, 10 May 2013 16:41:05 +0200 Subject: [PATCH] Hover bonanza --- README.md | 4 + wp-content/themes/studio13/404.php | 10 +- wp-content/themes/studio13/content-full.php | 4 +- wp-content/themes/studio13/content-sticky.php | 2 +- wp-content/themes/studio13/content.php | 2 +- wp-content/themes/studio13/css/app.css | 43 +++++-- wp-content/themes/studio13/js/main.js | 2 +- wp-content/themes/studio13/sass/app.scss | 107 +++++++++++++----- .../themes/studio13/template-artists.php | 2 +- 9 files changed, 131 insertions(+), 45 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..2f6d56d --- /dev/null +++ b/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 diff --git a/wp-content/themes/studio13/404.php b/wp-content/themes/studio13/404.php index 024cd5d..823c2ca 100644 --- a/wp-content/themes/studio13/404.php +++ b/wp-content/themes/studio13/404.php @@ -1,19 +1,19 @@
-
+
-

Trist 404-side

+

Fire Null Fire

-

ånei og ånei

+

Skuta er på halv 12, ring Jens.

-

Du kan søke litt istedet

+

-

+

diff --git a/wp-content/themes/studio13/content-full.php b/wp-content/themes/studio13/content-full.php index 0b5d025..028af27 100644 --- a/wp-content/themes/studio13/content-full.php +++ b/wp-content/themes/studio13/content-full.php @@ -1,8 +1,8 @@
- -

+ +

diff --git a/wp-content/themes/studio13/content-sticky.php b/wp-content/themes/studio13/content-sticky.php index f4e3121..25a66cd 100644 --- a/wp-content/themes/studio13/content-sticky.php +++ b/wp-content/themes/studio13/content-sticky.php @@ -2,7 +2,7 @@
- +

diff --git a/wp-content/themes/studio13/content.php b/wp-content/themes/studio13/content.php index 7342d60..4bec7d7 100644 --- a/wp-content/themes/studio13/content.php +++ b/wp-content/themes/studio13/content.php @@ -1,7 +1,7 @@
- +
diff --git a/wp-content/themes/studio13/css/app.css b/wp-content/themes/studio13/css/app.css index 1f7c8a3..06228ee 100644 --- a/wp-content/themes/studio13/css/app.css +++ b/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 */ -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; } diff --git a/wp-content/themes/studio13/js/main.js b/wp-content/themes/studio13/js/main.js index d64d704..0830a26 100644 --- a/wp-content/themes/studio13/js/main.js +++ b/wp-content/themes/studio13/js/main.js @@ -1,5 +1,5 @@ function format_image(img) { - return '
    • '; + return '
    • '; } jQuery(document).foundation(); diff --git a/wp-content/themes/studio13/sass/app.scss b/wp-content/themes/studio13/sass/app.scss index 5ce11e3..51b1863 100644 --- a/wp-content/themes/studio13/sass/app.scss +++ b/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 */ -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; + } + } + } } diff --git a/wp-content/themes/studio13/template-artists.php b/wp-content/themes/studio13/template-artists.php index 04c359e..64f7fb8 100644 --- a/wp-content/themes/studio13/template-artists.php +++ b/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(); ?>
    • the_post(); ?>