diff --git a/Gruntfile.js b/Gruntfile.js index 0276337..c5468e4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -36,7 +36,9 @@ module.exports = function (grunt) { files: [ 'Gruntfile.js', '<%= app.src %>/*.html', + '<%= app.src %>/**/{,*/}*.js', '<%= app.src %>/**/{,*/}*.less', + '<%= app.lib %>/**/{,*/}*.js', '<%= app.lib %>/**/{,*/}*.less' ], tasks: ['build'] @@ -69,6 +71,8 @@ module.exports = function (grunt) { plugins: { src: [ '<%= app.lib %>/jquery/jquery.js', + '<%= app.lib %>/jquery.animate-enhanced/jquery.animate-enhanced.min.js', + '<%= app.lib %>/jquery.superslides/dist/jquery.superslides.js', '<%= app.lib %>/bootstrap/js/transition.js', // '<%= app.lib %>/bootstrap/js/alert.js', '<%= app.lib %>/bootstrap/js/button.js', @@ -103,6 +107,7 @@ module.exports = function (grunt) { '<%= app.src %>/less', '<%= app.lib %>/flexslider-less', '<%= app.lib %>/font-awesome/less', + '<%= app.lib %>/jquery.superslides/dist/stylesheets', '<%= app.lib %>/bootstrap/less' ] }, diff --git a/bower.json b/bower.json index f5c48b8..1754edd 100644 --- a/bower.json +++ b/bower.json @@ -21,10 +21,12 @@ ], "devDependencies": { "bootstrap": "~3.0.2", + "superslides": "git@github.com:nicinabox/superslides.git", "modernizr": "~2.6.2", "font-awesome": "~3.0.2", "jquery": "~1.9.1", "raphael": "~2.1.0", - "scaleraphael": "*" + "scaleraphael": "*", + "jquery.animate-enhanced": "*" } } diff --git a/src/index.html b/src/index.html index eabf3c1..9e9992e 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,7 @@ Platsbyggd bokhylla - + @@ -30,6 +30,116 @@

Platsbyggd bokhylla av Jerker Inredning & Form + +
diff --git a/src/js/main.js b/src/js/main.js index e69de29..f19776e 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,8 @@ +$(function(){ + $('#slides').superslides({ + play: '5200', + animation: 'fade', + inherit_width_from: '#slides .slides-container', + inherit_height_from: '#slides .slides-container' + }); +}); diff --git a/src/less/main.less b/src/less/main.less index 22a97ad..41a32a3 100644 --- a/src/less/main.less +++ b/src/less/main.less @@ -1,35 +1,39 @@ -// Frameworks +// Imports // ------------------------- +// Bootstrap +// + @import "bootstrap"; // Variables -// ------------------------- +// @import "variables"; // Fonts -// ------------------------- +// @import "fonts"; // Components -// ------------------------- +// -@import (less) "flexslider.css"; +@import (less) "superslides.css"; // Partials -// ------------------------- +// @import "mixins"; @import "utils"; @import "planner"; + // Main styles // ------------------------- @@ -71,7 +75,7 @@ section.alternate { body > header h1 { font-family: @font-family-base; - font-size: @font-size-h3; + font-size: @font-size-h1; } // Header nav @@ -81,6 +85,46 @@ body > header nav { margin-top: @line-height-computed; } +// Gallery slideshow +// + +#slides { + border: 3px solid @gray-dark; + border-radius: @border-radius-large; + + li, + img { + border-radius: @border-radius-base; + } + + .slides-container { + height: 550px; + } + + figcaption { + background-color: @near-black; + background-color: fade(@near-black, 80); + color: @near-white; + border-top-right-radius: @border-radius-base; + + position: absolute; + bottom: 0; + left: 0; + padding: @padding-base-vertical @padding-base-horizontal; + + .model, + small { + display: block; + } + } + + .btn { + position: absolute; + bottom: @padding-base-vertical; + right: @padding-base-horizontal; + } +} + // Responsive tagline //