diff options
| -rw-r--r-- | _layouts/default.html | 18 | ||||
| -rw-r--r-- | assets/css/alaveteli-org.css | 58 | ||||
| -rw-r--r-- | assets/sass/alaveteli-org.scss | 81 | ||||
| -rw-r--r-- | index.md | 20 |
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%; } @@ -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> |