navigation frame

private/js/modules/navigation.js

@@ -12,7 +12,8 @@ $(function() {
   $body.on('click', 'a', function(event) {
     var href = $(this).attr('href');
     var target = $(this).attr('target');
-    if (href.indexOf('/') === 0 && !target && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
+    var is_event = $(this).hasClass('event');
+    if (href.indexOf('/') === 0 && !target && !is_event && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
       event.preventDefault();
       $body.addClass('unload loading');
       window.setTimeout(function() {
@@ -22,13 +23,21 @@ $(function() {
   });
 
   $body.on('click', '.header__button--navigation', function(event) {
-    event.preventDefault();
-    open_navigation();
-  });
-
-  $body.on('click', '.navigation__close', function(event) {
-    event.preventDefault();
-    close_navigation();
+    if ($body.hasClass('search_open')) {
+      if (!$body.hasClass('_search') && !$body.hasClass('search_results')) {
+        event.preventDefault();
+        window.close_search();
+      } else {
+        $(this).removeClass('event');
+        $(this).click();
+      }
+    } else if ($body.hasClass('navigation_open')) {
+      event.preventDefault();
+      close_navigation();
+    } else {
+      event.preventDefault();
+      open_navigation();
+    }
   });
 
   var scroll_top = 0;

private/js/modules/plugins/timetable.js

@@ -16,19 +16,22 @@ $(function() {
   var activated = false;
 
   function test_scroll() {
-    if (activated) {
-      if ($(window).scrollTop() < $(window).height() * 0.05 && window.timetable_can_scroll) {
-        window.prevent_scroll_calc = true;
-        $timetable.attr('data-active', 0);
-        $timetable.removeClass('active');
-        activated = false;
-      }
-    } else {
-      if ($(window).scrollTop() > $(window).height() * 0.05 && window.timetable_can_scroll) {
-        init_timetable_items();
+    if (!window.navigation_is_open) {
+      if (activated) {
+        if ($(window).scrollTop() < $(window).height() * 0.05 && window.timetable_can_scroll) {
+          window.prevent_scroll_calc = true;
+          $timetable.attr('data-active', 0);
+          $timetable.removeClass('active');
+          activated = false;
+        }
+      } else {
+        if ($(window).scrollTop() > $(window).height() * 0.05 && window.timetable_can_scroll) {
+          init_timetable_items();
+        }
       }
     }
     window.requestAnimationFrame(test_scroll);
+
   }
 
   function init_timetable_items() {

private/js/modules/search.js

@@ -7,13 +7,6 @@ $(function() {
     open_search();
   });
 
-  $body.on('click', '.search__close', function(event) {
-    if (!$body.hasClass('_search') && !$body.hasClass('search_results')) {
-      event.preventDefault();
-      close_search();
-    }
-  });
-
   var scroll_top = 0;
   var search_input_timeout;
 
@@ -47,6 +40,7 @@ $(function() {
       window.timetable_can_scroll = true;
     });
   }
+  window.close_search = close_search;
 
   $body.on('submit', '.search__form', function(event) {
     event.preventDefault();
@@ -59,9 +53,8 @@ $(function() {
     history.pushState({}, 'search', form_url + '?' + serialized_form);
 
     if (serialized_form !== 'q=') {
-      if ($body.hasClass('search_results')) {
-        $body.find('.search__results').addClass('loading');
-      }
+      var $search_content_main = $body.find('.search__content__main');
+      $search_content_main.addClass('loading');
 
       $.ajax({
         type: $form.attr('method'),
@@ -70,6 +63,7 @@ $(function() {
         success: function(data) {
           $body.find('#canvas').remove();
           $body.addClass('_search');
+          $search_content_main.removeClass('loading');
           $body.find('.search__results').replaceWith($(data).find('.search__results'));
           window.requestAnimationFrame(function() {
             $body.addClass('search_results');

private/scss/_config.scss

@@ -29,7 +29,7 @@ $huge_breakpoint: 1700px;
 $large_breakpoint: 1200px;
 $medium_breakpoint: 840px;
 $small_breakpoint: 600px;
-$tiny_breakpoint: 350px;
+$tiny_breakpoint: 370px;
 
 $reveal_duration: 1.5s;
 $reveal_timing_function: $easeOutQuart;

private/scss/main.scss

@@ -5,6 +5,7 @@
 @import "_typography.scss";
 @import "_layout.scss";
 @import "modules/_header.scss";
+@import "modules/_footer.scss";
 @import "modules/_search.scss";
 @import "modules/_navigation.scss";
 @import "modules/_pages.scss";

private/scss/modules/_footer.scss

@@ -0,0 +1,61 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: em(51px);
+  border-top: em(1px) solid $light_gray;
+  background: $white;
+  text-align: right;
+  font-size: 0;
+  z-index: 912;
+  transform: translateY(em(60px));
+  transition: transform 0.5s $easeOutQuad, opacity 0s 0.5s;
+  opacity: 0;
+  .navigation_open & {
+    transition: transform 0.5s $easeOutQuad, opacity 0s;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.footer__content {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  .header__button {
+    position: relative;
+    top: 100%;
+  }
+  .social_media {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    top: 100%;
+    width: auto;
+    padding: em(8px) em(15px);
+    border-left: em(1px) solid $light_gray;
+    transition: transform 0.5s 0.5s;
+    .navigation_open & {
+      transform: translateY(-100%);
+    }
+  }
+}
+
+.footer__login {
+  position: absolute;
+  z-index: 5;
+  bottom: -100%;
+  background: $green;
+  color: $white !important;
+  height: em(60px);
+  line-height: em(60px);
+  border: none;
+  padding: 0 em(30px) !important;
+  .header__button__icon {
+    width: em(16px);
+    height: em(16px);
+    top: em(-1px);
+    margin-right: em(10px);
+  }
+}

private/scss/modules/_header.scss

@@ -9,11 +9,12 @@
   text-align: right;
   font-size: 0;
   z-index: 506;
-  box-shadow: 0 -1px 0 0 $light_gray, 0 em(-50px) 0 0 $white;
-  transition: top 1s $easeInOutQuart;
+  overflow: hidden;
+  transition: z-index 0s 1s;
   will-change: transform, top;
-  .search_open & {
-    top: 100%;
+  .search_open &, .navigation_open & {
+    z-index: 909;
+    transition: z-index 0s;
   }
   &.reveal {
     transform: translateY(-100%);
@@ -23,6 +24,16 @@
   }
 }
 
+.header__navigation {
+  position: absolute;
+  top: 100%;
+  right: em(62px);
+  z-index: 2;
+  .search_open & {
+    display: none;
+  }
+}
+
 .header__logo {
   position: fixed;
   top: 0;
@@ -37,7 +48,7 @@
     height: em(100px);
     display: block;
   }
-  .search_open & {
+  .search_open &, .navigation_open & {
     z-index: 910;
     transition: z-index 0s;
   }
@@ -55,6 +66,20 @@
       display: block;
     }
   }
+  @media screen and (max-width: $small_breakpoint) {
+    padding: em(8px) em(10px) em(10px) em(10px);
+    img {
+      width: em(70px);
+      height: em(70px);
+    }
+  }
+  @media screen and (max-width: $tiny_breakpoint) {
+    padding: em(4px) em(5px) em(8px) em(5px);
+    img {
+      width: em(60px);
+      height: em(60px);
+    }
+  }
 }
 
 .header__slogan {
@@ -72,7 +97,7 @@
   }
 }
 
-.header__logo, .header__slogan {
+.header__logo, .header__slogan, .footer__login {
   left: 15%;
   .timetable_body & {
     left: em(100px);
@@ -83,14 +108,78 @@
   @media screen and (max-width: $large_breakpoint) {
     left: em(30px) !important;
   }
+  @media screen and (max-width: $small_breakpoint) {
+    left: em(15px) !important;
+  }
+  @media screen and (max-width: $tiny_breakpoint) {
+    left: 0 !important;
+  }
+}
+
+.header__languages {
+  vertical-align: top;
+  display: inline-block;
+  height: 100%;
+  padding: 0 em(15px);
+  transition: transform 0.5s 0.1s;
+  transform: none;
+  li {
+    display: inline-block;
+    height: em(50px);
+    &:first-child {
+      a:before {
+        display: none;
+      }
+    }
+    a {
+      color: $dark_gray;
+      text-decoration: none;
+      font-size: em(14px);
+      line-height: em(50px);
+      width: em(40px);
+      text-transform: uppercase;
+      display: block;
+      font-weight: 800;
+      text-align: center;
+      opacity: 0.5;
+      transition: opacity 0.2s $easeOutQuad;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: em(15px);
+        bottom: em(15px);
+        width: em(1px);
+        background: $medium_light_gray;
+      }
+      &:hover {
+        opacity: 1;
+      }
+    }
+    &.active {
+      font-weight: bold;
+      a {
+        opacity: 1;
+      }
+    }
+  }
+  .search_open &, .navigation_open & {
+    transform: translateY(-100%);
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    padding: 0 em(5px);
+  }
+  @media screen and (max-width: $tiny_breakpoint) {
+    padding: 0;
+  }
 }
 
 .header__button {
   height: em(50px);
+  vertical-align: top;
   line-height: em(48px);
   display: inline-block;
   border-left: em(1px) solid $light_gray;
-  border-bottom: em(1px) solid $light_gray;
   font-size: em(18px);
   font-weight: 800;
   color: $green;
@@ -98,14 +187,60 @@
   padding: 0 em(64px) 0 em(18px);
   position: relative;
   background: $white;
-  transition: background 0.3s ease-in-out;
-  vertical-align: middle;
+  transition: transform 0.5s, border 0.3s, color 0.3s;
+  transform: none;
+  @for $i from 0 through 5 {
+    &.data_id_#{$i} {
+      transition-delay: $i * 0.1s, 0s, 0s;
+      .header__button__icon {
+        transition: transform 0.5s $i * 0.1s;
+      }
+    }
+  }
+  &.header__button--reverse {
+    padding: 0 em(18px) 0 em(64px);
+  }
+  &.header__button--light {
+    padding: 0 em(15px);
+  }
+  &.header__button--light {
+    font-size: em(14px);
+    font-weight: 400;
+    color: $dark_gray;
+  }
+  &:last-child {
+    border-right: em(1px) solid $light_gray;
+  }
+  .search_open &, .navigation_open & {
+    transform: translateY(em(-50px));
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    padding: 0 em(54px) 0 em(12px);
+    &.header__button--reverse {
+      padding: 0 em(12px) 0 em(54px);
+    }
+  }
+}
+
+.header__button--light {
+  line-height: em(50px);
+  .header__button__icon {
+    transition: transform 0.2s 0s !important;
+  }
   &:hover {
-    background: darken($white, 1);
+    color: darken($dark_gray, 20);
+    .header__button__icon {
+      transform: scale(1.1);
+    }
+  }
+  .search_open & {
+    transform: none;
   }
 }
 
 .header__button--navigation {
+  height: em(100px);
+  padding-bottom: em(50px);
   rect {
     transform: none;
     transform-origin: 100% 50%;
@@ -125,6 +260,32 @@
       transform: scaleX(1);
     }
   }
+  .search_open &, .navigation_open & {
+    border-color: transparent;
+    .header__button__icon {
+      transform: translateY(em(50px));
+    }
+    rect {
+      transform-origin: 50% 50%;
+    }
+    .line-top {
+      transform: rotate(-45deg) translateY(10px);
+    }
+    .line-bottom {
+      transform: rotate(45deg) translateY(-10px);
+    }
+    .line-middle {
+      transform: scaleX(0);
+    }
+    &:hover {
+      .line-top {
+        transform: rotate(-45deg) scaleX(0.8) translateY(10px);
+      }
+      .line-bottom {
+        transform: rotate(45deg) scaleX(0.8) translateY(-10px);
+      }
+    }
+  }
 }
 
 .header__button--close {
@@ -176,5 +337,28 @@
     width: 100%;
     height: 100%;
     fill: $green;
+    .header__button--light & {
+      fill: currentColor;
+    }
+  }
+  .header__button--reverse & {
+    right: auto;
+    left: em(16px);
+  }
+  .header__button--light & {
+    position: relative;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    right: em(12px);
+    .header__button--reverse & {
+      right: auto;
+      left: em(12px);
+    }
   }
 }

private/scss/modules/_navigation.scss

@@ -1,58 +1,15 @@
-.navigation__close {
-  font-size: 0;
-  display: block;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 0;
-  width: 100%;
-  background: rgba($green, 0.9);
-  opacity: 0;
-  transition: height 0s 1s, opacity 1s;
-  overflow: hidden;
-  z-index: 940;
-  .header__button {
-    transform: translateX(100%);
-    transition: transform 1s $easeInOutQuart;
-    color: $white;
-    svg {
-      fill: $white;
-    }
-    @media screen and (max-width: $medium_breakpoint) {
-      font-size: 0;
-      padding-left: 0;
-      right: auto;
-      left: 0;
-      transform: translateX(em(640px));
-    }
-  }
-  body.navigation_open & {
-    opacity: 1;
-    height: 100vh;
-    transition: height 0s, opacity 1s;
-    .header__button {
-      transform: translateX(em(-640px));
-      @media screen and (max-width: $medium_breakpoint) {
-        transform: none;
-      }
-    }
-  }
-}
-
 #navigation {
   position: fixed;
-  z-index: 950;
+  z-index: 905;
   top: 0;
-  left: 100%;
-  width: em(640px);
-  height: 100%;
-  transform: none;
+  left: 0;
+  width: 100%;
+  height: auto;
+  padding: em(50px) 0;
+  transform: translateY(-100%);
   transition: transform 1s $easeInOutQuart;
   body.navigation_open & {
-    transform: translateX(-100%);
-  }
-  @media screen and (max-width: $medium_breakpoint) {
-    width: calc(100% - #{em(64px)});
+    transform: none;
   }
 }
 
@@ -164,38 +121,4 @@
 
 .navigation__list__meta--bottom {
   bottom: 0;
-}
-
-.navigation__languages {
-  vertical-align: top;
-  display: inline-block;
-  margin-right: em(30px);
-  margin-bottom: em(20px);
-  li {
-    display: inline-block;
-    height: em(34px);
-    margin-left: em(9px);
-    padding: em(6px) 0;
-    &:first-child {
-      margin-left: 0;
-      padding-left: 0;
-      a {
-        border-left: none;
-        padding-left: 0;
-      }
-    }
-    a {
-      color: $dark_gray;
-      text-decoration: none;
-      font-size: em(15px);
-      text-transform: uppercase;
-      display: block;
-      border-left: 1px solid $light_gray;
-      padding-left: em(10px);
-      line-height: em(20px);
-    }
-    &.active {
-      font-weight: bold;
-    }
-  }
 }

private/scss/modules/_search.scss

@@ -128,11 +128,5 @@
   .search_results & {
     opacity: 1;
     transform: none;
-    &.loading {
-      opacity: 0.2;
-      &:before {
-        top: em(180px);
-      }
-    }
   }
 }

src/project/templates/main.html

@@ -1,4 +1,4 @@
-{% load static i18n cms_tags sekizai_tags fontawesome %}<!DOCTYPE html>
+{% load static i18n cms_tags sekizai_tags fontawesome menu_tags %}<!DOCTYPE html>
 <html class="r" lang="{{ LANGUAGE_CODE }}">
 <head>
     <meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -27,56 +27,113 @@
     {{ ALDRYN_SNAKE.render_head }}
 </head>
 <body class="{% block body_class %}{% endblock %}">
-{% cms_toolbar %}
-
-<a href="/{{ LANGUAGE_CODE }}/" class="header__logo reveal reveal_animation">
-    <img src="{% static 'img/tagesschule-elementa.svg' %}" width="100" height="100">
-</a>
-
-<a href="#" class="navigation__close">
-    <span class="header__button header__button--close">
-        <span class="header__button__icon">
-            {% include 'project/assets/close.svg' %}
-        </span>
-        {% trans 'Schliessen' %}
-    </span>
-</a>
-<div id="navigation">
-    {% include 'project/includes/navigation.html' %}
-</div>
-
-<div id="search">
-    {% include 'project/includes/search_form.html' %}
-</div>
-
-<div id="canvas">
+    {% cms_toolbar %}
+
+    <a href="/{{ LANGUAGE_CODE }}/" class="header__logo reveal reveal_animation">
+        <img src="{% static 'img/tagesschule-elementa.svg' %}" width="100" height="100">
+    </a>
+
+    <div id="navigation">
+        {% include 'project/includes/navigation.html' %}
+    </div>
+
+    <div id="search">
+        {% include 'project/includes/search_form.html' %}
+    </div>
+
+
+    {% url 'search' as search_url %}
+
     <div class="header reveal reveal_animation data_delay_2">
         <span class="header__slogan">{% trans 'Stärken stärken. Lernen lernen.' %}</span>
-        <a href="#" class="header__button header__button--search">
+        <ul class="header__languages">
+            {% for lang in LANGUAGES %}
+                <li class="{% if lang.0 == LANGUAGE_CODE %}active{% endif %}">
+                    <a href="{% page_language_url lang.0 %}">{{ lang.0 }}</a>
+                </li>
+            {% endfor %}
+        </ul>
+        <a href="#" class="header__button header__button--search data_id_2">
             {% trans 'Suche' %}
             <span class="header__button__icon">
                 {% include 'project/assets/search.svg' %}
             </span>
         </a>
-        <a href="#" class="header__button header__button--navigation">
-            {% trans 'Menü' %}
+        {% url 'search' as search_url %}
+        {% with request.get_full_path as current_url %}
+            <a href="{% if search_url in current_url %}/{{ LANGUAGE_CODE }}/{% else %}{{ current_url }}{% endif %}"
+               class="event header__button header__button--navigation data_id_3">
+                {% trans 'Menü' %}
+                <span class="header__button__icon">
+                    {% include 'project/assets/menu.svg' %}
+                </span>
+            </a>
+        {% endwith %}
+
+        <div class="header__navigation">
+            <a href="#" class="header__button header__button--reverse header__button--light data_id_0">
+                <span class="header__button__icon">
+                    {% include 'project/assets/oneday.svg' %}
+                </span>
+                {% trans 'One Day' %}
+            </a>
+            <a href="#" class="header__button header__button--reverse header__button--light data_id_1">
+                <span class="header__button__icon">
+                    {% include 'project/assets/news.svg' %}
+                </span>
+                {% trans 'News' %}
+            </a>
+            <a href="#" class="header__button header__button--reverse header__button--light data_id_2">
+                <span class="header__button__icon">
+                    {% include 'project/assets/calendar.svg' %}
+                </span>
+                {% trans 'Kalender' %}
+            </a>
+            <a href="#" class="header__button header__button--reverse header__button--light data_id_3">
+                <span class="header__button__icon">
+                    {% include 'project/assets/contact.svg' %}
+                </span>
+                {% trans 'Standort & Kontakt' %}
+            </a>
+        </div>
+    </div>
+
+    <div id="canvas">
+        {% block content %}
+            {% placeholder 'content' %}
+        {% endblock %}
+    </div>
+
+    <div class="footer">
+        <a href="#" class="footer__login header__button header__button--light data_id_1">
             <span class="header__button__icon">
-                {% include 'project/assets/menu.svg' %}
+                {% include 'project/assets/arrow-right-long.svg' %}
             </span>
+            {% trans 'Login' %}
         </a>
+        <div class="footer__content">
+            <a href="#" class="header__button header__button--light data_id_1">
+                {% trans 'Medien' %}
+            </a>
+            <a href="#" class="header__button header__button--light data_id_2">
+                {% trans 'Jobs' %}
+            </a>
+            <a href="#" class="header__button header__button--light data_id_3">
+                {% trans 'Partner' %}
+            </a>
+            <a href="#" class="header__button header__button--light data_id_4">
+                {% trans 'Impressum' %}
+            </a>
+            {% static_placeholder 'social_media' %}
+        </div>
     </div>
 
-    {% block content %}
-        {% placeholder 'content' %}
-    {% endblock %}
-</div>
-
-<script type="text/javascript" src="{% static 'js/lib.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/lib.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
 
-{% block extra_body %}{% endblock %}
+    {% block extra_body %}{% endblock %}
 
-{% render_block "js" %}
-{{ ALDRYN_SNAKE.render_tail }}
+    {% render_block "js" %}
+    {{ ALDRYN_SNAKE.render_tail }}
 </body>
 </html>

src/project/templates/project/assets/calendar.svg

@@ -0,0 +1,4 @@
+<svg width="32px" height="36px" viewBox="0 0 32 36" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M7.2433,9.16505789 L24.7567,9.16505789 L24.7567,24.8349421 L7.2433,24.8349421 L7.2433,9.16505789 Z M8.39473684,13.9839577 L8.39473684,23.7105263 L23.6052632,23.7105263 L23.6052632,13.9839577 L8.39473684,13.9839577 Z M8.39473684,10.2894737 L8.39473684,12.9144892 L23.6052632,12.9144892 L23.6052632,10.2894737 L8.39473684,10.2894737 Z M10.1842105,15.6578947 L12.8684211,15.6578947 L12.8684211,17 L10.1842105,17 L10.1842105,15.6578947 Z M10.1842105,18.3421053 L12.8684211,18.3421053 L12.8684211,19.6842105 L10.1842105,19.6842105 L10.1842105,18.3421053 Z M14.6578947,17.4473684 L17.3421053,17.4473684 L17.3421053,18.7894737 L14.6578947,18.7894737 L14.6578947,17.4473684 Z M19.1315789,20.1315789 L21.8157895,20.1315789 L21.8157895,21.4736842 L19.1315789,21.4736842 L19.1315789,20.1315789 Z M19.1315789,17.4473684 L21.8157895,17.4473684 L21.8157895,18.7894737 L19.1315789,18.7894737 L19.1315789,17.4473684 Z"></path>
+</svg>

src/project/templates/project/assets/contact.svg

@@ -0,0 +1,4 @@
+<svg width="25px" height="36px" viewBox="0 0 25 36" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M7,14.1811722 C7,11.0694114 9.45847621,8.5398872 12.5,8.5398872 C15.5415238,8.5398872 18,11.0694114 18,14.1811722 C18,15.139218 17.7664243,16.0641077 17.3393855,16.8627282 C16.6777152,18.2481615 15.2380055,20.816635 13.0132107,24.5830647 L12.4951466,25.4601128 L11.9651583,24.5902185 C9.31430391,20.2392487 7.78335661,17.4494109 7.34571384,16.1536369 C7.11800658,15.5278627 7,14.8623757 7,14.1811722 Z M16.2488376,16.3115631 C16.5940965,15.6648293 16.7777778,14.9375068 16.7777778,14.1811722 C16.7777778,11.7367563 14.8585938,9.76210942 12.5,9.76210942 C10.1414062,9.76210942 8.22222222,11.7367563 8.22222222,14.1811722 C8.22222222,14.7215654 8.31589677,15.247678 8.49641274,15.741606 C8.86760946,16.8458702 10.2006689,19.3054184 12.4793732,23.0811221 C14.3928189,19.8225078 15.6479336,17.5684532 16.2488376,16.3115631 Z M12.5,15.5065539 C11.6899824,15.5065539 11.0333333,14.8499048 11.0333333,14.0398872 C11.0333333,13.2298696 11.6899824,12.5732205 12.5,12.5732205 C13.3100176,12.5732205 13.9666667,13.2298696 13.9666667,14.0398872 C13.9666667,14.8499048 13.3100176,15.5065539 12.5,15.5065539 Z"></path>
+</svg>

src/project/templates/project/assets/menu.svg

@@ -1,6 +1,6 @@
 <svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
-    <rect class="line-top" x="4" y="6" width="28" height="3" rx="1.5"></rect>
-    <rect class="line-middle" x="4" y="16" width="28" height="3" rx="1.5"></rect>
-    <rect class="line-bottom" x="4" y="26" width="28" height="3" rx="1.5"></rect>
+    <rect class="line-top" x="3" y="6" width="29" height="3" rx="1.5"></rect>
+    <rect class="line-middle" x="3" y="16" width="29" height="3" rx="1.5"></rect>
+    <rect class="line-bottom" x="3" y="26" width="29" height="3" rx="1.5"></rect>
 </svg>

src/project/templates/project/assets/news.svg

@@ -0,0 +1,4 @@
+<svg width="32px" height="36px" viewBox="0 0 32 36" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M25,26.7948404 L18.646758,22 L7,22 L7,10 L25,10 L25,26.7948404 Z M23.8,11.2 L8.2,11.2 L8.2,20.8 L19.0487631,20.8 L23.8,24.3857949 L23.8,11.2 Z M20.2,17.2 C19.5372583,17.2 19,16.6627417 19,16 C19,15.3372583 19.5372583,14.8 20.2,14.8 C20.8627417,14.8 21.4,15.3372583 21.4,16 C21.4,16.6627417 20.8627417,17.2 20.2,17.2 Z M16,17.2 C15.3372583,17.2 14.8,16.6627417 14.8,16 C14.8,15.3372583 15.3372583,14.8 16,14.8 C16.6627417,14.8 17.2,15.3372583 17.2,16 C17.2,16.6627417 16.6627417,17.2 16,17.2 Z M11.8,17.2 C11.1372583,17.2 10.6,16.6627417 10.6,16 C10.6,15.3372583 11.1372583,14.8 11.8,14.8 C12.4627417,14.8 13,15.3372583 13,16 C13,16.6627417 12.4627417,17.2 11.8,17.2 Z"></path>
+</svg>

src/project/templates/project/assets/oneday.svg

@@ -0,0 +1,4 @@
+<svg width="38px" height="36px" viewBox="0 0 38 36" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M23.0312985,9.83450053 L23.1661943,9.84335396 L31.1479737,13.8187706 L31.2449427,13.9774359 L31.1474907,22.4225321 L31.0060783,22.5922617 L22.8651124,24.1727574 L6.75505731,21.5685352 L6.85681996,13.8499366 L6.95918254,13.6930236 L10.67674,12.0147436 L16.6595647,12.0242441 L23.0312985,9.83450053 Z M29.3728595,17.9055198 L29.5021885,18.0744551 L29.5021885,21.8388919 L30.318225,21.6661765 L30.3880086,14.588377 L23.4696803,11.1417671 L23.4696803,16.309618 L29.3728595,17.9055198 Z M9.80588662,15.4615072 L9.80588662,13.5253765 L7.89678482,14.396202 L7.8143573,20.7013521 L18.0150539,22.3515618 L18.0150539,17.6257372 L18.1446488,17.4567302 L22.4235949,16.3071559 L22.4235949,11.1266675 L9.80588662,15.4615072 Z M10.85174,14.0198904 L13.7105183,13.0375962 L10.85174,13.0375962 L10.85174,14.0198904 Z M23.4696803,23.0224035 L28.4563351,22.0473466 L28.4563351,18.7200838 L23.4696803,17.3678763 L23.4696803,23.0224035 Z M19.0609073,22.5206129 L22.4235949,23.0652113 L22.4235949,17.3694902 L19.0609073,18.2717353 L19.0609073,22.5206129 Z"></path>
+</svg>

src/project/templates/project/includes/navigation.html

@@ -12,14 +12,4 @@
             {% show_menu_below_id 'footer' 0 0 0 0 %}
         </ul>
     </div>
-
-    <ul class="navigation__languages">
-        {% for lang in LANGUAGES %}
-            <li class="{% if lang.0 == LANGUAGE_CODE %}active{% endif %}">
-                <a href="{% page_language_url lang.0 %}">{{ lang.0 }}</a>
-            </li>
-        {% endfor %}
-    </ul>
-
-    {% static_placeholder 'social_media' %}
 </div>

src/project/templates/project/includes/search_form.html

@@ -1,16 +1,6 @@
 {% load i18n cms_tags %}
 
 <div class="content__frame">
-    {% url 'search' as search_url %}
-    {% with request.get_full_path as current_url %}
-        <a href="{% if search_url in current_url %}/{{ LANGUAGE_CODE }}/{% else %}{{ current_url }}{% endif %}"
-           class="search__close header__button header__button--close">
-            <span class="header__button__icon">
-                {% include 'project/assets/close.svg' %}
-            </span>
-            {% trans 'Schliessen' %}
-        </a>
-    {% endwith %}
     <div class="content__container">
         <div class="content__main">
             <div class="search__content">