aboutsummaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/alaveteli-org.css209
-rw-r--r--assets/sass/alaveteli-org.scss88
-rw-r--r--assets/scripts/how-it-works-slides.js32
3 files changed, 277 insertions, 52 deletions
diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index bbcf26435..26c178507 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -138,7 +138,7 @@ h3 {
pointer-events: none !important; }
.nav-toggle {
- -webkit-tap-highlight-color: transparent;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
@@ -265,71 +265,151 @@ h3 {
.how-does-it-work {
background-color: #974495;
- position: relative;
- padding-bottom: 0;
- overflow: -x hidden; }
+ overflow: hidden; }
@media (min-width: 40em) {
.how-does-it-work {
- margin-top: 2em; } }
+ padding-top: 0;
+ padding-bottom: 0; }
+ .how-does-it-work .how-does-it-work__slide {
+ border-top: 4em solid #fff;
+ padding-top: 3.5em; }
+ .how-does-it-work h2, .how-does-it-work p {
+ width: 50%; }
+ .how-does-it-work img {
+ float: right;
+ width: 30em;
+ margin-right: -15em;
+ margin-top: -13em; } }
@media (min-width: 56.88889em) {
- .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 h2, .how-does-it-work p, .how-does-it-work .how-does-it-work__slide__nav {
+ width: 50%;
+ margin-left: 50%; }
+ .how-does-it-work img {
+ float: left;
+ width: 45%;
+ margin-right: 1em;
+ margin-left: 1em;
+ margin-top: -12em; } }
+
+.how-does-it-work__slide {
+ /**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */ }
+ .how-does-it-work__slide:before, .how-does-it-work__slide:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */ }
+ .how-does-it-work__slide:after {
+ clear: both; }
+ .how-does-it-work__slide {
+ *zoom: 1; }
+
+.how-does-it-work__slide__nav {
+ margin-top: 0.5em; }
+
+.how-does-it-work__slide__skip {
+ display: inline-block;
+ padding: 0.3em;
+ cursor: pointer; }
+ .how-does-it-work__slide__skip span {
+ display: block;
+ border-radius: 1em;
+ width: 1em;
+ height: 1em;
+ background-color: rgba(0, 0, 0, 0.5); }
+ .how-does-it-work__slide__skip.active span {
+ background-color: transparent;
+ border: 0.2em solid rgba(0, 0, 0, 0.5); }
+ .how-does-it-work__slide__skip:hover span, .how-does-it-work__slide__skip:focus span {
+ background-color: rgba(0, 0, 0, 0.3); }
+ .how-does-it-work__slide__skip:hover.active span, .how-does-it-work__slide__skip:focus.active span {
+ background-color: transparent;
+ border-color: rgba(0, 0, 0, 0.3); }
+
+/* .how-does-it-work {
+ @extend %full-width-section;
+ @extend %dark-section;
+ background-color: darken($colour_brand, 5%);
+ position: relative;
+ padding-bottom: 0;
+ overflow:-x hidden;
+ @media(min-width: $mediumish-screen) {
+ margin-top: 2em;
+ }
+ @media(min-width: $large-screen) {
+ margin-top: 4em;
+ 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: 56.88889em) {
- .how-does-it-work__screenshot-position {
- position: absolute;
- bottom: -3px;
- right: -40%;
- width: 100%; }
- .how-does-it-work__screenshot-position img {
- width: 55%;
- min-width: 665px;
+ text-align: center;
+ overflow: hidden;
+ line-height: 0;
+ @media(min-width: $large-screen) {
+ position: absolute;
+ bottom: -3px; // TODO: recrop the images and make this 0
+ right: -40%;
+ width: 100%;
+ img {
+ width: 55%;
+ min-width: 665px;
+ left: 0;
+ bottom: 0;
+ position: absolute;
+ }
+ }
+ @media(min-width: 71.25em) {
+ right: auto;
left: 0;
- bottom: 0;
- position: absolute; } }
- @media (min-width: 71.25em) {
- .how-does-it-work__screenshot-position {
- right: auto;
- left: 0;
- width: 100%; } }
+ width: 100%;
+ }
+}
.screenshot-annotation {
- position: absolute;
- top: 50%;
- right: 0; }
+ position: absolute;
+ top: 50%;
+ right: 0;
+}
.owl-item {
- min-height: 500px; }
- .owl-item div {
- bottom: 0; }
+ min-height: 500px;
+ div {
+ bottom: 0;
+ }
+}
.owl-controls {
- width: 100%; }
+ width: 100%;
+}
+.owl-buttons {
+
+}
.owl-prev {
- position: absolute;
- top: 50%;
- left: 0;
- background-color: black;
- padding: 0.75em; }
+ 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; }
-
+ position: absolute;
+ top: 50%;
+ right: 0;
+ left: auto;
+ background-color: black;
+ padding: 0.75em;
+} */
/** .how-does-it-work__content {
@media(min-width: $mediumish-screen) {
margin-right: 44%;
@@ -380,7 +460,7 @@ h3 {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- -webkit-tap-highlight-color: transparent; }
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* mouse grab icon */
.grabbing {
@@ -459,48 +539,57 @@ h3 {
@-webkit-keyframes empty {
0% {
opacity: 1; } }
+
@-moz-keyframes empty {
0% {
opacity: 1; } }
+
@keyframes empty {
0% {
opacity: 1; } }
+
@-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
+
@-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
+
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
+
@-webkit-keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
+
@-moz-keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
+
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
+
@-webkit-keyframes backSlideOut {
25% {
opacity: .5;
@@ -513,6 +602,7 @@ h3 {
100% {
opacity: .5;
-webkit-transform: translateZ(-500px) translateX(-200%); } }
+
@-moz-keyframes backSlideOut {
25% {
opacity: .5;
@@ -525,6 +615,7 @@ h3 {
100% {
opacity: .5;
-moz-transform: translateZ(-500px) translateX(-200%); } }
+
@keyframes backSlideOut {
25% {
opacity: .5;
@@ -537,6 +628,7 @@ h3 {
100% {
opacity: .5;
transform: translateZ(-500px) translateX(-200%); } }
+
@-webkit-keyframes backSlideIn {
0%, 25% {
opacity: .5;
@@ -549,6 +641,7 @@ h3 {
100% {
opacity: 1;
-webkit-transform: translateZ(0) translateX(0); } }
+
@-moz-keyframes backSlideIn {
0%, 25% {
opacity: .5;
@@ -561,6 +654,7 @@ h3 {
100% {
opacity: 1;
-moz-transform: translateZ(0) translateX(0); } }
+
@keyframes backSlideIn {
0%, 25% {
opacity: .5;
@@ -573,51 +667,64 @@ h3 {
100% {
opacity: 1;
transform: translateZ(0) translateX(0); } }
+
@-webkit-keyframes scaleToFade {
to {
opacity: 0;
-webkit-transform: scale(0.8); } }
+
@-moz-keyframes scaleToFade {
to {
opacity: 0;
-moz-transform: scale(0.8); } }
+
@keyframes scaleToFade {
to {
opacity: 0;
transform: scale(0.8); } }
+
@-webkit-keyframes goDown {
from {
-webkit-transform: translateY(-100%); } }
+
@-moz-keyframes goDown {
from {
-moz-transform: translateY(-100%); } }
+
@keyframes goDown {
from {
transform: translateY(-100%); } }
+
@-webkit-keyframes scaleUpFrom {
from {
opacity: 0;
-webkit-transform: scale(1.5); } }
+
@-moz-keyframes scaleUpFrom {
from {
opacity: 0;
-moz-transform: scale(1.5); } }
+
@keyframes scaleUpFrom {
from {
opacity: 0;
transform: scale(1.5); } }
+
@-webkit-keyframes scaleUpTo {
to {
opacity: 0;
-webkit-transform: scale(1.5); } }
+
@-moz-keyframes scaleUpTo {
to {
opacity: 0;
-moz-transform: scale(1.5); } }
+
@keyframes scaleUpTo {
to {
opacity: 0;
transform: scale(1.5); } }
+
@media (min-width: 40em) {
.features__grid-unit {
width: 48.5%; }
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index 285d5be93..363153a73 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -300,6 +300,92 @@ h3 {
}
.how-does-it-work {
+
+ @extend %full-width-section;
+ @extend %dark-section;
+ background-color: darken($colour_brand, 5%);
+
+ overflow: hidden;
+
+ @media(min-width: $mediumish-screen) {
+ padding-top: 0;
+ padding-bottom: 0;
+
+ .how-does-it-work__slide {
+ border-top: 4em solid #fff;
+ padding-top: 3.5em;
+ }
+
+ h2, p {
+ width: 50%;
+ }
+
+ img {
+ float: right;
+ width: 30em;
+ margin-right: -15em;
+ margin-top: -13em;
+ }
+ }
+
+ @media (min-width: $large-screen) {
+ h2, p, .how-does-it-work__slide__nav {
+ width: 50%;
+ margin-left: 50%;
+ }
+
+ img {
+ float: left;
+ width: 45%;
+ margin-right: 1em;
+ margin-left: 1em;
+ margin-top: -12em;
+ }
+ }
+
+}
+
+.how-does-it-work__slide {
+ @include clearfix();
+}
+
+.how-does-it-work__slide__nav {
+ margin-top: 0.5em;
+}
+
+.how-does-it-work__slide__skip {
+ display: inline-block;
+ padding: 0.3em;
+ cursor: pointer;
+
+ span {
+ display: block;
+ border-radius: 1em; // :TODO: cross-browser?
+ width: 1em;
+ height: 1em;
+ background-color: rgba(0,0,0,0.5);
+ }
+
+ &.active {
+ span {
+ background-color: transparent;
+ border: 0.2em solid rgba(0,0,0,0.5);
+ }
+ }
+
+ &:hover,
+ &:focus {
+ span {
+ background-color: rgba(0,0,0,0.3);
+ }
+ &.active span {
+ background-color: transparent;
+ border-color: rgba(0,0,0,0.3);
+ }
+ }
+}
+
+/* .how-does-it-work {
@extend %full-width-section;
@extend %dark-section;
background-color: darken($colour_brand, 5%);
@@ -380,7 +466,7 @@ h3 {
left: auto;
background-color: black;
padding: 0.75em;
-}
+} */
/** .how-does-it-work__content {
@media(min-width: $mediumish-screen) {
diff --git a/assets/scripts/how-it-works-slides.js b/assets/scripts/how-it-works-slides.js
new file mode 100644
index 000000000..4145cf33e
--- /dev/null
+++ b/assets/scripts/how-it-works-slides.js
@@ -0,0 +1,32 @@
+$(function(){
+ var $container = $('div.how-does-it-work')
+
+ if(!$container.length){
+ return false; // bail out early if no slider on this page
+ }
+
+ var showSlide = function(index){
+ $('.how-does-it-work__slide:nth-child(' + (index+1) + ')', $container)
+ .show().siblings('.how-does-it-work__slide').hide()
+
+ $('.how-does-it-work__slide__skip:nth-child(' + (index+1) + ')', $container)
+ .addClass('active').siblings('.how-does-it-work__slide__skip').removeClass('active')
+ }
+
+ var makeSlideNavs = function(){
+ var $slides = $('.how-does-it-work__slide', $container)
+ var $nav = $('<div class="how-does-it-work__slide__nav">')
+ for(var i=0; i<$slides.length; i++){
+ $('<span class="how-does-it-work__slide__skip">').append('<span>')
+ .appendTo($nav)
+ }
+ $('.container', $slides).append($nav)
+ }
+
+ makeSlideNavs()
+ showSlide(0)
+
+ $container.on('click', '.how-does-it-work__slide__skip', function(){
+ showSlide( $(this).prevAll().length )
+ })
+});
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-10 23:49:37 +0000