From 452509f2e836b26fa6f1ee735dca6a7f1045eace Mon Sep 17 00:00:00 2001
From: Philippe Barbosa <contact@philippebarbosa.com>
Date: Fri, 18 Mar 2016 18:56:29 +0100
Subject: [PATCH] event update, nav complementary

---
 app/festival/static/css/index.css             | 152 ++++++++++++------
 app/festival/static/scss/base/_forms.scss     |  15 --
 app/festival/static/scss/base/_layout.scss    |   7 +
 app/festival/static/scss/base/_lists.scss     |   3 +-
 .../static/scss/base/_typography.scss         |   9 +-
 .../static/scss/components/_headers.scss      |  58 +++++++
 .../static/scss/config/_variables.scss        |   4 +-
 app/festival/static/scss/index.scss           |   1 +
 app/festival/static/scss/modules/icons.scss   |  15 ++
 app/templates/agenda/event_detail.html        |   6 +-
 app/templates/agenda/event_list.html          |   6 +-
 app/templates/base.html                       |  33 +++-
 app/templates/pages/menus/dropdown.html       |  10 --
 13 files changed, 228 insertions(+), 91 deletions(-)
 create mode 100755 app/festival/static/scss/modules/icons.scss

diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css
index 2f0c154a..d55dad34 100755
--- a/app/festival/static/css/index.css
+++ b/app/festival/static/css/index.css
@@ -776,7 +776,12 @@ pre > p {
   text-transform: uppercase;
   color: #d7a433;
   margin: 0;
-  padding-right: 1rem;
+}
+
+/* line 212, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_typography.scss */
+.push-ical {
+  float: right;
+  margin: 1rem 0;
 }
 
 /* line 5, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */
@@ -811,6 +816,11 @@ pre > p {
   padding-top: 1rem;
 }
 
+/* line 54, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */
+.site__content__header__inner {
+  padding-right: 1rem;
+}
+
 /**
  * Reset default styles
  */
@@ -1189,28 +1199,11 @@ button:disabled {
 }
 
 /* line 282, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
-button.lang {
-  display: inline-block;
-  padding: 0.45rem 0.3rem;
-  margin: 0 auto;
-  color: #555;
-  font: 400 1rem "Triplex", Georgia, Times, "Times New Roman", serif;
-  text-transform: uppercase;
-  background: none;
-}
-
-/* line 290, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
-button.lang.is-active {
-  background: none;
-  color: #e8ca88;
-}
-
-/* line 297, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .help-block {
   font-size: .7rem;
 }
 
-/* line 301, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
+/* line 286, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
 .form-group {
   margin: 0 0 1rem;
 }
@@ -1470,9 +1463,10 @@ th {
 .banner {
   display: block;
   background-color: #fff;
+  position: relative;
 }
 
-/* line 14, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 15, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .banner.is-fixed {
   position: fixed;
   top: 0;
@@ -1480,28 +1474,28 @@ th {
   width: 100%;
 }
 
-/* line 21, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 22, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .banner .is-active {
   background-color: #e8ca88;
 }
 
-/* line 23, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 24, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .banner .is-active a {
   color: #fff;
 }
 
-/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 33, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header {
   background: #f7f7f7 url("../img/bg_manzoni--center.jpg") no-repeat top;
   padding: 0.9rem 0;
 }
 
-/* line 37, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 38, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header h1 {
   margin: 0;
 }
 
-/* line 41, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 42, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header__baseline {
   display: block;
   width: 100%;
@@ -1511,7 +1505,7 @@ th {
   font-size: 1rem;
 }
 
-/* line 54, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 55, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header__logo {
   display: block;
   float: left;
@@ -1519,40 +1513,40 @@ th {
   line-height: 1;
 }
 
-/* line 60, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 61, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header__logo--right {
   display: none;
 }
 
-/* line 68, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 69, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header__logo__img {
   max-height: 45px;
   width: auto;
 }
 
-/* line 76, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 77, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .header__logo__text {
   position: absolute;
   top: -200%;
 }
 
-/* line 88, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 89, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .navigation {
   display: none;
 }
 
-/* line 96, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 97, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .menu {
   text-align: center;
 }
 
-/* line 98, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 99, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .menu__item, .submenu__item {
   position: relative;
   overflow: visible;
 }
 
-/* line 108, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 109, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .menu__item__link, .submenu__item__link {
   display: inline-block;
   padding: 0.45rem 1rem;
@@ -1562,13 +1556,13 @@ th {
   text-transform: uppercase;
 }
 
-/* line 119, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 120, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .submenu {
   padding-left: 0;
   text-align: center;
 }
 
-/* line 137, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 138, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .submenu__item {
   background: #fff;
   display: inline-block;
@@ -1576,25 +1570,81 @@ th {
   *zoom: 1;
 }
 
-/* line 152, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 153, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .submenu__item__link {
   color: #696969;
   font-size: .75rem;
 }
 
-/* line 160, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 161, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .menu__item:hover .submenu, .submenu__item:hover .submenu {
   opacity: 1;
   visibility: visible;
 }
 
-/* line 165, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+/* line 166, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
 .menu__item:hover .submenu__item, .submenu__item:hover .submenu__item {
   opacity: 1;
   visibility: visible;
   margin: 0;
 }
 
+/* line 178, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary {
+  display: block;
+  list-style: none;
+  text-align: right;
+  position: absolute;
+  z-index: 200;
+  top: 100%;
+  left: 0;
+  width: 100%;
+}
+
+/* line 189, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item, .nav__complementary__item--facebook, .nav__complementary__item--twitter, .nav__complementary__item__lang {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  padding: 0.5rem .2rem;
+  width: 2rem;
+  background: #fff;
+  margin: 0 .1rem;
+  text-align: center;
+  border-radius: 0 0 3px 3px;
+}
+
+/* line 200, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item a, .nav__complementary__item--facebook a, .nav__complementary__item--twitter a, .nav__complementary__item__lang a {
+  color: white;
+}
+
+/* line 204, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item--facebook {
+  background: #3b5998;
+}
+
+/* line 209, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item--twitter {
+  background: #55acee;
+  margin-right: 1rem;
+}
+
+/* line 215, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item__lang {
+  opacity: .6;
+}
+
+/* line 218, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item__lang a {
+  color: #bdc3c7;
+}
+
+/* line 222, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+.nav__complementary__item__lang.is-active {
+  opacity: 1;
+}
+
 /**
  * Core
  */
@@ -2902,6 +2952,12 @@ th {
   text-transform: uppercase;
 }
 
+/* line 5, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */
+.btn-icon, .btn-icon--facebook {
+  padding: 0.45rem 0.3rem;
+  margin: 0 auto;
+}
+
 /* line 5, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/hero-slider.scss */
 .hero__slider__item {
   display: block;
@@ -2963,9 +3019,6 @@ th {
 @media (min-width: 961px) {/* line 59, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_typography.scss */
   a:hover {
     color: #89671b;
-  }/* line 205, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_typography.scss */
-  .page__title {
-    max-width: 70%;
   }/* line 5, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */
   .container {
     max-width: 960px;
@@ -2978,6 +3031,9 @@ th {
   .aside {
     float: left;
     width: 30%;
+  }/* line 54, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */
+  .site__content__header__inner {
+    max-width: 70%;
   }/* line 146, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
   .sticked-form input {
     width: 80%;
@@ -2988,26 +3044,26 @@ th {
   }/* line 212, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
   .select.search__form__select {
     width: 20%;
-  }/* line 41, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 42, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .header__baseline {
     line-height: 85px;
     font-size: 1.5rem;
-  }/* line 60, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 61, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .header__logo--right {
     display: block;
     float: right;
-  }/* line 68, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 69, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .header__logo__img {
     max-height: 85px;
-  }/* line 88, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 89, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .navigation {
     display: block;
-  }/* line 98, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 99, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .menu__item, .submenu__item {
     display: inline-block;
     display: inline;
     zoom: 1;
-  }/* line 119, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 120, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .submenu {
     width: 140%;
     margin-left: -20%;
@@ -3018,7 +3074,7 @@ th {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
-  }/* line 137, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
+  }/* line 138, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_headers.scss */
   .submenu__item {
     opacity: 0;
     visibility: hidden;
diff --git a/app/festival/static/scss/base/_forms.scss b/app/festival/static/scss/base/_forms.scss
index 6b651b87..9804b177 100755
--- a/app/festival/static/scss/base/_forms.scss
+++ b/app/festival/static/scss/base/_forms.scss
@@ -278,21 +278,6 @@ button {
   }
 }
 
-// button as link for lang selector
-button.lang {
-    display: inline-block;
-    padding: $base_font_size/2 0.3rem;
-    margin: 0 auto;
-    color: $gray_darker;
-    font: $regular 1rem $header_font_family;
-    text-transform: uppercase;
-    background: none;
-    &.is-active {
-      background: none;
-      color: $main_color;
-    }
-}
-
 // Edit profile
 .help-block {
   font-size: .7rem;
diff --git a/app/festival/static/scss/base/_layout.scss b/app/festival/static/scss/base/_layout.scss
index c2d6680e..8aaa175b 100755
--- a/app/festival/static/scss/base/_layout.scss
+++ b/app/festival/static/scss/base/_layout.scss
@@ -49,4 +49,11 @@
 
 .site__content__header {
   padding-top: 1rem;
+}
+
+.site__content__header__inner {
+  padding-right: 1rem;
+  @media (min-width : $desktop ) {
+      max-width: 70%;
+  }
 }
\ No newline at end of file
diff --git a/app/festival/static/scss/base/_lists.scss b/app/festival/static/scss/base/_lists.scss
index 46b2be17..ca99ff36 100755
--- a/app/festival/static/scss/base/_lists.scss
+++ b/app/festival/static/scss/base/_lists.scss
@@ -63,4 +63,5 @@ dl {
         padding: 0 ($base_font_size / 2);
         margin-left: -0.33333em;
     }
-}
\ No newline at end of file
+}
+
diff --git a/app/festival/static/scss/base/_typography.scss b/app/festival/static/scss/base/_typography.scss
index 4590b387..767fb0b0 100755
--- a/app/festival/static/scss/base/_typography.scss
+++ b/app/festival/static/scss/base/_typography.scss
@@ -207,8 +207,9 @@ pre > p {
   text-transform: uppercase;
   color: $base_link_color;
   margin: 0;
-  padding-right: 1rem;
-  @media (min-width : $desktop ) {
-      max-width: 70%;
-  }
+}
+
+.push-ical {
+  float: right;
+  margin: 1rem 0;
 }
\ No newline at end of file
diff --git a/app/festival/static/scss/components/_headers.scss b/app/festival/static/scss/components/_headers.scss
index 1174bf7b..b0c250d4 100755
--- a/app/festival/static/scss/components/_headers.scss
+++ b/app/festival/static/scss/components/_headers.scss
@@ -9,6 +9,7 @@
   @extend .clearfix;
   display: block;
   background-color: $header_background_color;
+  position: relative;
   // margin-bottom: 3rem;
 
   &.is-fixed {
@@ -167,4 +168,61 @@
   visibility: visible;
   margin: 0;
   // transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
+}
+
+// ****************************************************************
+// _NavComplementary
+// ****************************************************************
+
+
+.nav__complementary {
+  display: block;
+  list-style: none;
+  text-align: right;
+  position: absolute;
+  z-index: $zi_2;
+  top: 100%;
+  left: 0;
+  width: 100%;
+}
+
+.nav__complementary__item {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    padding: 0.5rem .2rem;
+    width: 2rem;
+    background: #fff;
+    margin: 0 .1rem;
+    text-align: center;
+    border-radius: 0 0 3px 3px;
+
+    a {
+      color: white;
+    }
+
+    &--facebook {
+      @extend .nav__complementary__item;
+      background: $color-facebook;
+    }
+
+    &--twitter {
+      @extend .nav__complementary__item;
+      background: $color-twitter;
+      margin-right: 1rem;
+    }
+
+    &__lang {
+      @extend .nav__complementary__item;
+      opacity: .6;
+      a {
+        color: $gray;
+      }
+
+      &.is-active {
+        // background: none;
+        // color: $main_color;
+        opacity: 1;
+      }
+    }
 }
\ No newline at end of file
diff --git a/app/festival/static/scss/config/_variables.scss b/app/festival/static/scss/config/_variables.scss
index 7a2d2eee..6ede90b5 100755
--- a/app/festival/static/scss/config/_variables.scss
+++ b/app/festival/static/scss/config/_variables.scss
@@ -142,8 +142,8 @@ $zi_master : 9999;
 $zi_5      : 500; // .submemu
 $zi_4      : 400;
 $zi_1      : 300;
-$zi_2      : 200;
-$zi_3      : 100;
+$zi_2      : 200; // nav__complementary
+$zi_3      : 100; // lightslider
 $zi_0      : -1;
 
 
diff --git a/app/festival/static/scss/index.scss b/app/festival/static/scss/index.scss
index 3b0acff5..4241e03b 100755
--- a/app/festival/static/scss/index.scss
+++ b/app/festival/static/scss/index.scss
@@ -78,6 +78,7 @@
         'modules/event-card',
 
         'modules/pager',
+        'modules/icons',
 
         'modules/hero-slider',
 
diff --git a/app/festival/static/scss/modules/icons.scss b/app/festival/static/scss/modules/icons.scss
new file mode 100755
index 00000000..9fd4c851
--- /dev/null
+++ b/app/festival/static/scss/modules/icons.scss
@@ -0,0 +1,15 @@
+// ****************************************************************
+// _Icons
+// ****************************************************************
+
+.btn-icon {
+    padding: $base_font_size/2 0.3rem;
+    margin: 0 auto;
+
+    &--facebook {
+        @extend .btn-icon;
+    }
+    &--facebook {
+        @extend .btn-icon;
+    }
+}
\ No newline at end of file
diff --git a/app/templates/agenda/event_detail.html b/app/templates/agenda/event_detail.html
index c19f3043..b8967daf 100644
--- a/app/templates/agenda/event_detail.html
+++ b/app/templates/agenda/event_detail.html
@@ -16,10 +16,6 @@
     {% editable event.title %}{{ event.title }}{% endeditable %}
 {% endblock %}
 
-{% block event_calendar %}
-<a href='{% icalendar_url %}' target="_blank" class="">{% trans "Subscribe to all events in" %} Google Calendar/Outlook/iCal</a>
-{% endblock %}
-
 {% block breadcrumb_menu %}
 {{ block.super }}
 <li class="active">{{ event.title }}</li>
@@ -171,5 +167,5 @@
 {% block event_detail_comments %}
 {% if event.allow_comments %}{% comments_for event %}{% endif %}
 {% endblock %}
-
+<a href='{% icalendar_url %}' target="_blank" class="small push-ical">{% trans "Subscribe to all events in" %} Google Calendar/Outlook/iCal</a>
 {% endblock %}
diff --git a/app/templates/agenda/event_list.html b/app/templates/agenda/event_list.html
index 74e3f0eb..72b5ecd1 100644
--- a/app/templates/agenda/event_list.html
+++ b/app/templates/agenda/event_list.html
@@ -41,10 +41,6 @@
 {% endif %}
 {% endblock %}
 
-{% block event_calendar %}
-<a href='{% icalendar_url %}' target="_blank" class="">{% trans "Subscribe to all events in" %} Google Calendar/Outlook/iCal</a>
-{% endblock %}
-
 {% block main %}
 {% if tag or location or year or month or author %}
     {% block event_list_filterinfo %}
@@ -140,6 +136,8 @@
 </div>
 {% endfor %}
 
+<a href='{% icalendar_url %}' target="_blank" class="small  push-ical">{% trans "Subscribe to all events in" %} Google Calendar/Outlook/iCal</a>
+
 {% pagination_for events %}
 
 {% if settings.COMMENTS_DISQUS_SHORTNAME %}
diff --git a/app/templates/base.html b/app/templates/base.html
index a718eafb..3b7e0ef3 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="{{ LANGUAGE_CODE }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
 {% load pages_tags mezzanine_tags i18n staticfiles keyword_tags event_tags %}
+{% get_language_info_list for LANGUAGES as languages %}
 <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -57,8 +58,35 @@
         <div class="navigation" role="navigation">
             {% page_menu "pages/menus/dropdown.html" %}
         </div>
+
+        <div class="nav__complementary">
+            <div class="container">
+                <ul class="nav__complementary__list">
+                    <li class="nav__complementary__item--facebook">
+                        <a href="https://www.facebook.com/iIRCAM" class="btn-icon--facebook" target="_blank">
+                            FB
+                        </a>
+                    </li>
+                    <li class="nav__complementary__item--twitter">
+                        <a href="https://twitter.com/ircam" class="btn-icon--twitter" target="_blank">
+                            TW
+                        </a>
+                    </li>
+                    {% if settings.USE_MODELTRANSLATION and languages|length > 1 %}
+                        {% for language in languages %}
+                            <li class="nav__complementary__item__lang {% if language.code == LANGUAGE_CODE %}is-active{% endif %}">
+                                <a href="#" onclick="$('#language_selector_select').val('{{ language.code }}'); $('#language_selector_form').submit();">
+                                  {{ language.code|title }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
     </div>
 
+
     {% if on_home %}
     <div class="hero__slider">
         <ul id="lightSlider">
@@ -104,8 +132,9 @@
     <div class="site__content">
         <div class="container">
             <div class="site__content__header">
-                <h2 class="page__title">{% block title %}{% endblock %}</h2>
-                {% block event_calendar %}{% endblock %}
+                <div class="site__content__header__inner">
+                    <h2 class="page__title">{% block title %}{% endblock %}</h2>
+                </div>
             </div>
             <main class="main" role="main">
                 {% block main %}{% endblock %}
diff --git a/app/templates/pages/menus/dropdown.html b/app/templates/pages/menus/dropdown.html
index 36eb79be..3fed1183 100644
--- a/app/templates/pages/menus/dropdown.html
+++ b/app/templates/pages/menus/dropdown.html
@@ -30,17 +30,7 @@
     </li>
     {% endif %}
     {% endfor %}
-    {% if settings.USE_MODELTRANSLATION and languages|length > 1 %}
-    <li class="menu__item  menu__item--lang">
-      {% for language in languages %}
-        <button class="lang {% if language.code == LANGUAGE_CODE %}is-active{% endif %}" onclick="$('#language_selector_select').val('{{ language.code }}'); $('#language_selector_form').submit();">
-          {{ language.code|title }}
-        </button>
-      {% endfor %}
-    </li>
-    {% endif %}
 </ul>
-
 {% else %}
 <ul class="dropdown-menu">
     {% for page in page_branch %}
-- 
2.39.5