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 (file)
index 0000000..858e6f4
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 (file)
index 0000000..133d16a
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 (file)
index 0000000..bc001b1
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 (file)
index 0000000..8bf61c1
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 (file)
index 0000000..a5c85a3
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 (file)
index 0000000..bf24cb0
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 ff7d4beb6f0580d6737511e5f52ec47c85a711a0..3a451c6a084e2b5611a6fdcb7a9cc5d55537ce24 100755 (executable)
--- 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 7459a7b253ae354df30626c4f0338cda6bb7edd4..51a4da38e9aefe9a8af00cc9d226fd955f3ec32c 100755 (executable)
--- 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 (file)
index 0000000..11cc0c3
--- /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 (file)
index 0000000..b50f226
--- /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 e8a1084d9b76248a7182f03d4163794d7b28292e..2de6af260352fa3f5c4fe2d29ac1c1664706c220 100644 (file)
--- 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 39407d8e67cc905f3965ec9fe4dcb269a07d90fd..3c69ecbc8ad7a8c24e30816492d9058bbf445ee4 100644 (file)
--- 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" %}