From: Jérémy Fabre <Jeremy@iMacdeJeremy2.fritz.box>
Date: Tue, 7 Feb 2017 14:40:37 +0000 (+0100)
Subject: Homepage hero integration
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=ad0eb805780457dc93ed153d8b99e963522fd2b0;p=mezzo.git

Homepage hero integration
---

diff --git a/app/static/src/assets/img/vertigo/hero-left-date.png b/app/static/src/assets/img/vertigo/hero-left-date.png
new file mode 100644
index 00000000..858e6f4b
Binary files /dev/null and b/app/static/src/assets/img/vertigo/hero-left-date.png differ
diff --git a/app/static/src/assets/img/vertigo/hero-left.png b/app/static/src/assets/img/vertigo/hero-left.png
new file mode 100644
index 00000000..133d16a4
Binary files /dev/null and b/app/static/src/assets/img/vertigo/hero-left.png differ
diff --git a/app/static/src/assets/img/vertigo/hero-logo.png b/app/static/src/assets/img/vertigo/hero-logo.png
new file mode 100644
index 00000000..bc001b1b
Binary files /dev/null and b/app/static/src/assets/img/vertigo/hero-logo.png differ
diff --git a/app/static/src/assets/img/vertigo/hero-right.png b/app/static/src/assets/img/vertigo/hero-right.png
new file mode 100644
index 00000000..8bf61c10
Binary files /dev/null and b/app/static/src/assets/img/vertigo/hero-right.png differ
diff --git a/app/static/src/assets/img/vertigo/hero-title.png b/app/static/src/assets/img/vertigo/hero-title.png
new file mode 100644
index 00000000..a5c85a31
Binary files /dev/null and b/app/static/src/assets/img/vertigo/hero-title.png differ
diff --git a/app/static/src/assets/img/vertigo/hero.jpg b/app/static/src/assets/img/vertigo/hero.jpg
new file mode 100644
index 00000000..bf24cb09
Binary files /dev/null and b/app/static/src/assets/img/vertigo/hero.jpg differ
diff --git a/app/static/src/sass/layout/_header.scss b/app/static/src/sass/layout/_header.scss
index ff7d4beb..3a451c6a 100755
--- a/app/static/src/sass/layout/_header.scss
+++ b/app/static/src/sass/layout/_header.scss
@@ -25,6 +25,9 @@ $module: ".header";
     z-index: 100;
     position: relative;
 
+    background: white;
+    box-shadow: 0 10px 50px rgba(79,227,194,0.5);
+
     @include mq($until: sm) {
         position: fixed;
         width: 100%;
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 7459a7b2..51a4da38 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -65,6 +65,7 @@
 @import 'map-legend';
 @import 'linked-organizations';
 @import 'newsletter';
+@import 'hero';
 
 // Typography modules
 @import 'dashed';
diff --git a/app/static/src/sass/modules/_hero.scss b/app/static/src/sass/modules/_hero.scss
new file mode 100644
index 00000000..11cc0c35
--- /dev/null
+++ b/app/static/src/sass/modules/_hero.scss
@@ -0,0 +1,120 @@
+$module: ".hero";
+
+#{$module} {
+
+    background-image: url(../img/vertigo/hero.jpg);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: cover;
+    height: 560px;
+    margin-bottom: 350px;
+    position: relative;
+
+    @include mq($until: xs) {
+        height: 346px;
+        margin-bottom: 140px;
+    }
+
+    &:after {
+
+        content: '';
+        height: 1px;
+        width: 30px;
+        background: #F2EDDC;
+        position: absolute;
+        top: 825px;
+        left: 50%;
+        margin-left: -15px;
+
+        @include mq($until: xs) {
+            top: 440px;
+        }
+
+    }
+
+    &__title {
+
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+
+        @include transform(translateY(80%));
+
+        @include mq($until: sm) {
+            img {
+                width: 70%;
+            }
+        }
+
+        @include mq($until: xs) {
+            img {
+                width: 231px;
+            }
+        }
+
+    }
+
+    &__logo {
+
+        @include margin-top(2);
+        text-align: center;
+        @include mq($until: xs) {
+            @include margin-top(0);
+            img {
+                width: 159px;
+            }
+        }
+
+    }
+
+    &__left {
+
+        @include margin-top(4);
+        text-align: left;
+
+        @include mq($until: xs) {
+            @include margin-top(1);
+            text-align: center;
+            img {
+                width: 190px;
+            }
+        }
+
+    }
+
+    &__right {
+
+        @include margin-top(4);
+        text-align: right;
+
+        @include mq($until: xs) {
+            @include margin-top(.5);
+            text-align: center;
+
+            img {
+                width: 50px;
+            }
+        }
+
+    }
+
+    &__date {
+
+        display: block;
+        @include margin-top(2);
+        @include margin-left(2);
+
+        @include mq($until: xs) {
+            display: block;
+            text-align: center;
+            width: 120px !important;
+            @include margin(0 auto);
+            @include transform(translateY(-20px) translateX(-14px));
+
+        }
+
+    }
+
+}
diff --git a/app/templates/home/inc/hero.html b/app/templates/home/inc/hero.html
new file mode 100644
index 00000000..b50f2265
--- /dev/null
+++ b/app/templates/home/inc/hero.html
@@ -0,0 +1,42 @@
+{% load i18n pages_tags mezzanine_tags staticfiles keyword_tags event_tags organization_tags %}
+
+<div class="hero">
+
+    <div class="container">
+
+        <div class="row">
+
+            <div class="col-xs-7 col-xs-push-1 hero__left">
+                <img src="{% static "img/vertigo/hero-left.png" %}" />
+                <img class="hero__date" src="{% static "img/vertigo/hero-left-date.png" %}" />
+            </div>
+
+            <div class="col-xs-7 col-xs-push-1 hero__right">
+                <img src="{% static "img/vertigo/hero-right.png" %}" />
+
+                <p>
+
+                </p>
+            </div>
+
+        </div>
+
+        <div class="row">
+
+            <div class="col-xs-16">
+
+                <div class="hero__logo">
+                    <img src="{% static "img/vertigo/hero-logo.png" %}" />
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="hero__title">
+            <img src="{% static "img/vertigo/hero-title.png" %}" />
+        </div>
+
+    </div>
+
+</div>
diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html
index e8a1084d..2de6af26 100644
--- a/app/templates/includes/footer.html
+++ b/app/templates/includes/footer.html
@@ -99,7 +99,7 @@
             Copyright
         {% endcomment %}
         <div class="row">
-            <div class="col-xxs-16 col-sm-12 col-sm-push-1 tac fcb mt2">
+            <div class="col-xxs-16 col-sm-14 col-sm-push-1 tac fcb mt2">
                 Copyright &copy; {% current_year %} {{ host_organization.name }}. {% trans "All rights reserved" %}.
             </div>
         </div>
diff --git a/app/templates/index.html b/app/templates/index.html
index 39407d8e..3c69ecbc 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -13,6 +13,8 @@
 
 {% block main %}
 
+    {% include "home/inc/hero.html" %}
+
     {% include "home/inc/slider.html" %}
 
     {% include "home/inc/body.html" %}