WIP carousel work

4 files changed, 135 insertions, 42 deletions

diff --git a/_layouts/default.html b/_layouts/default.html
index 9bbf9bb62..61d78f270 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -122,5 +122,23 @@
         $('.reveal-all').trigger('click');
       });
     </script>
+    <script src="{{ site.baseurl }}assets/scripts/owl.carousel.min.js"></script>
+    <script>
+      $(document).ready(function() {
+        $("#owl-example").owlCarousel({
+           navigation : true, // Show next and prev buttons
+      slideSpeed : 300,
+      paginationSpeed : 400,
+      singleItem:true
+
+      // "singleItem:true" is a shortcut for:
+      // items : 1,
+      // itemsDesktop : false,
+      // itemsDesktopSmall : false,
+      // itemsTablet: false,
+      // itemsMobile : false
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 2b84f51bc..4d272bb88 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -274,37 +274,49 @@ h3 {
     .how-does-it-work {
       margin-top: 4em;
       margin-bottom: 2em; } }
-  @media (min-width: 40em) {
-    .how-does-it-work .container {
-      padding-bottom: 3.5em;
-      min-height: 320px; } }
 
 .how-does-it-work__screenshot-position {
   text-align: center;
-  overflow: hidden;
   line-height: 0; }
-  @media (min-width: 40em) {
+  @media (min-width: 56.88889em) {
     .how-does-it-work__screenshot-position {
       position: absolute;
+      bottom: -3px;
+      left: 0;
+      width: 100%; } }
+
+.alaveteli-demo-screenshot {
+  width: 100%; }
+  @media (min-width: 30em) {
+    .alaveteli-demo-screenshot {
+      width: 40%;
+      position: absolute;
+      left: 0;
       bottom: 0;
-      left: 60%;
-      width: 40%; } }
-  @media (min-width: 71.25em) {
-    .how-does-it-work__screenshot-position {
-      right: 43%;
-      left: auto;
-      width: 58.333333%; } }
-  @media (min-width: 40em) {
-    .how-does-it-work__screenshot-position img {
-      min-width: 660px; } }
+      width: 60%; } }
 
-@media (min-width: 40em) {
-  .how-does-it-work__content {
-    margin-right: 44%; } }
-@media (min-width: 71.25em) {
-  .how-does-it-work__content {
-    margin-left: 61.333333%;
-    margin-right: 0; } }
+.screenshot-annotation {
+  position: absolute;
+  top: 50%;
+  right: 0; }
+
+.owl-item {
+  min-height: 400px; }
+  @media (min-width: 56.88889em) {
+    .owl-item {
+      min-height: 500px; } }
+  .owl-item div {
+    bottom: 0; }
+
+.owl-controls {
+  width: 100%; }
+
+.owl-prev {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  background-color: black;
+  padding: 0.75em; }
 
 .owl-next {
   position: absolute;
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index a1e8adbbb..c2478dad1 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -313,36 +313,85 @@ h3 {
         margin-bottom: 2em;
     }
     .container {
-        @media(min-width: $mediumish-screen) {
-            padding-bottom: 3.5em;
-            min-height: 320px;
-        }
+
     }
 }
 
 .how-does-it-work__screenshot-position {
     text-align: center;
-    overflow: hidden;
     line-height: 0;
-    @media(min-width: $mediumish-screen) {
+    @media(min-width: $large-screen) {
         position: absolute;
-        bottom: 0;
-        left: 60%;
+        bottom: -3px; // TODO: recrop the images and make this 0
+        left: 0;
+        width: 100%;
+
+    }
+    @media(min-width: 71.25em) {
+
+    }
+}
+
+.alaveteli-demo-screenshot {
+    width: 100%;
+    @media(min-width: $medium-screen) {
         width: 40%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 60%;
+    }
+
+    @media(min-width: $large-screen) {
+
+
     }
     @media(min-width: 71.25em) {
-        right: 43%;
-        left: auto;
-        width: 58.333333%;
+
     }
-    img {
-        @media(min-width: $mediumish-screen) {
-            min-width: 660px;
-        }
+}
+
+.screenshot-annotation {
+    position: absolute;
+    top: 50%;
+    right: 0;
+}
+
+.owl-item {
+    min-height: 400px;
+    @media(min-width: $large-screen) {
+        min-height: 500px;
     }
+    div {
+        bottom: 0;
+    }
+}
+
+.owl-controls {
+        width: 100%;
+}
+.owl-buttons {
+
+}
+
+.owl-prev {
+    position: absolute;
+    top: 50%;
+    left: 0;
+        background-color: black;
+    padding: 0.75em;
+}
+
+.owl-next {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: auto;
+        background-color: black;
+    padding: 0.75em;
 }
 
-.how-does-it-work__content {
+/** .how-does-it-work__content {
     @media(min-width: $mediumish-screen) {
         margin-right: 44%;
     }
diff --git a/index.md b/index.md
index cc2cd5b73..84ef4fc78 100644
--- a/index.md
+++ b/index.md
@@ -45,7 +45,7 @@ title: Welcome
 </div>
 <div class="how-does-it-work">
     <div class="container">
-        <div class="how-does-it-work__content">
+        <!--<div class="how-does-it-work__content">
                 <h2>How does Alaveteli work?</h2>
                 <ul>
                     <li>A user makes a request for information from a public authority</li>
@@ -54,9 +54,23 @@ title: Welcome
                     <li>When the authority responds, the information is published too, so it’s accessible for everyone
 </li>
                 </ul>
-        </div>
+        </div>-->
         <div class="how-does-it-work__screenshot-position">
-            <img src="{{ site.baseurl }}assets/img/alaveteli-demo.svg" class="alaveteli-demo-screenshot"/>
+            <div id="owl-example" class="owl-carousel">
+              <div>
+                <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-find.svg" class="alaveteli-demo-screenshot"/>
+                <p class="screenshot-annotation">A user makes a request for information from a public authority</p>
+              </div>
+              <div>
+                <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-ask.svg" class="alaveteli-demo-screenshot"/>
+                <p class="screenshot-annotation">A user makes a request for information from a public authority</p>
+              </div>
+              <div>
+                <img src="{{ site.baseurl }}assets/img/alaveteli-demo-screen-view.svg" class="alaveteli-demo-screenshot"/>
+                <p class="screenshot-annotation">A user makes a request for information from a public authority</p>
+              </div>
+            </div>
+
         </div>
     </div>
 </div>