responsive header

src/index.html

@@ -19,7 +19,7 @@
   <header>
     <div class="container">
       <div class="row">
-        <div class="col-xs-12 col-sm-8 col-md-9">
+        <div class="col-xs-12 col-sm-8 col-md-9 col-lg-7 col-lg-offset-1">
           <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form</small></h1>
         </div>
         <nav class="hidden-xs col-sm-4 col-md-3">

src/js/main.js

@@ -1,8 +1,28 @@
+
 $(function(){
-  $('#slides').superslides({
-    play:                 '5200',
-    animation:            'fade',
-    inherit_width_from:   '#slides .slides-container',
-    inherit_height_from:  '#slides .slides-container'
-  });
+  console.log('$()');
+  app.init();
 });
+
+var app = {
+  el: {
+    slides:                 $('#slides'),
+    slidesContainer:        $('.slides-container', this.slides)
+  },
+
+  init: function() {
+    this.superslidesInit();
+  },
+
+  superslidesInit: function () {
+    console.log('superslidesInit()');
+    this.el.slides.superslides({
+      play:                 '5200',
+      animation:            'slide',
+      animation_easing:     'easeInOutCubic',
+      inherit_width_from:   this.el.slidesContainer,
+      inherit_height_from:  this.el.slidesContainer
+    });
+  },
+};
+

src/less/main.less

@@ -113,7 +113,11 @@ body > header nav {
     max-height: 550px;
     max-width: 100%;
     width: 100%;
-    height: 280px;
+
+    // Fixed height on small screens
+    @media (max-width: @grid-float-breakpoint) {
+      height: 280px;
+    }
   }
 
   // No borders or margin on small screens