From: Jérémy Fabre Date: Thu, 15 Sep 2016 08:42:22 +0000 (+0200) Subject: Fix the service banners (add rollover, add padding, add margin) X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=a51e7e567d9d0502e57acdb8c8a6aa0de6fc59c6;p=mezzo.git Fix the service banners (add rollover, add padding, add margin) --- diff --git a/app/static/src/sass/modules/_banner.scss b/app/static/src/sass/modules/_banner.scss index 3c4ea13f..de8c4259 100644 --- a/app/static/src/sass/modules/_banner.scss +++ b/app/static/src/sass/modules/_banner.scss @@ -10,7 +10,7 @@ $module: ".banner"; height: 350px; position: relative; - @include margin-bottom(1); + @include margin-bottom(2); @include mq($until: lg) { @@ -18,6 +18,17 @@ $module: ".banner"; } + &:hover { + + #{$module}__title:after { + + opacity: 1; + @include transform(scaleX(1)); + + } + + } + &--colored { &:after { @@ -70,6 +81,18 @@ $module: ".banner"; } + &--light { + + color: white; + + } + + &--dark { + + color: $color-black; + + } + &__content { position: absolute; @@ -79,30 +102,62 @@ $module: ".banner"; height: 100%; z-index: 2; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + @include padding(1); + padding-top: 120px; text-align: center; - @include padding(1); + @include mq($until: lg) { + padding-top: 50px; + } + + @include mq($until: md) { + padding-top: 25px; + } + + @include mq($until: sm) { + padding-top: 75px; + } } &__title { - @include font-size(xxl); @include line-height(1.2); @include typeface(sans-serif); font-weight: weight(bold); + display: inline-block; + position: relative; @include margin(0 0 1 0); + &:after { + + content: ""; + display: block; + position: absolute; + top: 50%; + height: 10px; + left: -10px; + right: -10px; + background: white; + z-index: -1; + opacity: 0; + @include transform(scaleX(0)); + @include transition(all 0.25s ease-in-out); + + #{$module}--light & { + background: $color-black; + } + #{$module}--dark & { + background: white; + } + + } + } &__desc { - @include font-size(s); @include line-height(1); @include typeface(serif); font-weight: weight(bold); diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss index 5470e3f5..aa953404 100644 --- a/app/static/src/sass/pages/_home.scss +++ b/app/static/src/sass/pages/_home.scss @@ -46,14 +46,25 @@ $module: ".home"; background: white; z-index: 100; - @include padding(1 0); + @include padding(1 8); @include transform(scaleY(0)); - @include transition(transform 0.5s ease-in-out); + @include transition(transform 0.35s ease-in-out); + transition-delay: 0.15s; + transform-origin: 0 100%; -webkit-transform-origin: 0 100%; &.active { @include transform(scaleY(1)); + transition-delay: 0s; + + #{$module}__shutter-content { + + opacity: 1; + transition-delay: 0.35s; + + } + } } @@ -61,6 +72,9 @@ $module: ".home"; &__shutter-content { @include padding(0 9); + @include transition(opacity 0.15s ease-in-out); + opacity: 0; + transition-delay: 0s; @include mq($until: lg) { @include padding(0 3); @@ -74,6 +88,7 @@ $module: ".home"; display: block; @include margin-top(1); + @include margin-bottom(1); >h2 { @include font-size(l); diff --git a/app/templates/home/inc/services.html b/app/templates/home/inc/services.html index e095a4e3..78bf0377 100644 --- a/app/templates/home/inc/services.html +++ b/app/templates/home/inc/services.html @@ -6,14 +6,14 @@
-