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 3c4ea13f9f1075cdc5e175faf93fb74b06eb28e0..de8c425977fb03b7bc11b413109a40dee05a29f6 100644 (file)
--- 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 5470e3f59758d3791eb2d6fb96991f38900ed76c..aa9534041e1508895766176650b0e2b97948b62f 100644 (file)
--- 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 e095a4e356145d274167757a9db79b427cb7b688..78bf037736ed5a95ac0f9f3d3a77c988f209823c 100644 (file)
--- a/app/templates/home/inc/services.html
+++ b/app/templates/home/inc/services.html
@@ -6,14 +6,14 @@
 
         <div class="col-sm-6">
 
-            <a class="banner fcl" href="#" style="background-image:url({% static 'img/services/tours.jpg' %});">
+            <a class="banner banner--light" href="#" style="background-image:url({% static 'img/services/tours.jpg' %});">
 
                 <div class="banner__content">
 
-                    <div class="banner__title">
+                    <div class="banner__title fsxxxl">
                         Tournées 16.17
                     </div>
-                    <div class="banner__desc">
+                    <div class="banner__desc fss">
                         Campo Santo, Songes et Métamorphoses, Providences, UM souverain moteur de toutes choses...
                     </div>
 
@@ -25,14 +25,14 @@
 
         <div class="col-sm-6">
 
-            <a class="banner fcl" href="http://ulysses-network.eu/web/home/" target="_blank" style="background-image:url({% static 'img/services/applications.jpg' %});">
+            <a class="banner banner--light" href="http://ulysses-network.eu/web/home/" target="_blank" style="background-image:url({% static 'img/services/applications.jpg' %});">
 
                 <div class="banner__content">
 
-                    <div class="banner__title">
+                    <div class="banner__title fsxxl">
                         Appel à candidatures 2017
                     </div>
-                    <div class="banner__desc">
+                    <div class="banner__desc fss">
                         Cursus de composition et d'informatique musicale, Résidence en recherche artistique, ManiFeste-2017 l'académie
                     </div>
 
@@ -48,14 +48,14 @@
 
         <div class="col-sm-6">
 
-            <a class="banner banner--colored banner--orange fcb" href="http://medias.ircam.fr/" target="_blank" style="background-image:url({% static 'img/services/resources.jpg' %});">
+            <a class="banner banner--colored banner--orange banner--dark" href="http://medias.ircam.fr/" target="_blank" style="background-image:url({% static 'img/services/resources.jpg' %});">
 
                 <div class="banner__content">
 
-                    <div class="banner__title">
+                    <div class="banner__title fsxxxl">
                         Les ressources Ircam
                     </div>
-                    <div class="banner__desc">
+                    <div class="banner__desc fss">
                         Archives audiovisuelles et sonores, base de documentation sur la musique contemporaine (base BRAHMS), catalogue d'œuvres...
                     </div>
 
@@ -67,14 +67,14 @@
 
         <div class="col-sm-3">
 
-            <a class="banner banner--colored banner--blue fcl" href="http://forumnet.ircam.fr/fr/" target="_blank" style="background-image:url({% static 'img/services/forumnet.jpg' %});">
+            <a class="banner banner--colored banner--blue banner--light" href="http://forumnet.ircam.fr/fr/" target="_blank" style="background-image:url({% static 'img/services/forumnet.jpg' %});">
 
                 <div class="banner__content">
 
-                    <div class="banner__title">
+                    <div class="banner__title fsxxl">
                         Forumnet
                     </div>
-                    <div class="banner__desc">
+                    <div class="banner__desc fss">
                         Communauté d'utilisateurs des logiciels Ircam
                     </div>
 
@@ -86,14 +86,14 @@
 
         <div class="col-sm-3">
 
-            <a class="banner banner--colored banner--green fcl" href="http://community.ulysses-network.eu/" target="_blank" style="background-image:url({% static 'img/services/ulysses.jpg' %});">
+            <a class="banner banner--colored banner--green banner--light" href="http://community.ulysses-network.eu/" target="_blank" style="background-image:url({% static 'img/services/ulysses.jpg' %});">
 
                 <div class="banner__content">
 
-                    <div class="banner__title">
+                    <div class="banner__title fsxxl">
                         Ulysses Community
                     </div>
-                    <div class="banner__desc">
+                    <div class="banner__desc fss">
                         Réseau européen pour la promotion et le soutien de la jeune création musicale contemporaine
                     </div>