banner style

8 years ago · 536a3c8afd
parent 4cc56e9476
commit 536a3c8afd
4 changed files with 34 additions and 4 deletions
--- a/project/templates/blocks/baner.html
+++ b/project/templates/blocks/baner.html
@ -1,6 +1,6 @@
 {% if baner %}
-<div class="baner" style="background-image: url({{ baner.image.url }});">
-  <span class="baner__text">{{ baner.text }}</span>
-  <a href="{{ baner.url }}" class="baner__link">{{ baner.button_text }}</a>
+<div class="banner" style="background-image: url({{ baner.image.url }});">
+  <span class="banner__text">{{ baner.text }}</span>
+  <a href="{{ baner.url }}" class="banner__link">{{ baner.button_text }}</a>
 </div>
 {% endif %}
--- a/project/templates/lilcity/index.html
+++ b/project/templates/lilcity/index.html
@ -54,8 +54,8 @@
    {% include "templates/blocks/mixpanel.html" %}
  </head>
  <body>
+    {% include "templates/blocks/baner.html" %}
    <div class="outer js-outer">
-      {% include "templates/blocks/baner.html" %}
      {% include "templates/blocks/header.html" %}
      <div id="lilcity-vue-app" class="container">
        {% block content %}{% endblock content %}
--- a/web/src/js/modules/common.js
+++ b/web/src/js/modules/common.js
@ -38,4 +38,14 @@ function updateHeader() {
    } else {
        headerElement.removeClass('header--shadow');
    }
+
+    if(scrollOffset > 0) {
+        if(scrollOffset <= 140) {
+            headerElement.css('top', (140-scrollOffset)+'px');
+        } else {
+            headerElement.css('top', '0px');
+        }
+    } else {
+        headerElement.css('top', '');
+    }
 }
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@ -3989,3 +3989,23 @@ a
  &.pic
    position: relative
    width: 100%
+
+.banner
+  height: 140px
+  text-align: center
+  color: #fff
+  padding-top: 50px
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  &__text
+    //mix-blend-mode: difference
+    font-size: 30px
+    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
+  &__link
+    //mix-blend-mode: difference
+    display: block
+    color: #fff
+    font-size: 20px
+    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
+    margin-top: 20px