diff --git a/templates/_header.twig b/templates/_header.twig
index cd1c79193e1f45eae1851322e77646f7eb9908da..850121a2fc6cc2a3bfbac9f51fdf92d0b607464b 100644
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -11,11 +11,10 @@
<div class="right">
<a href="#menu" id="menuLink" class="menu-link hide-for-large">
<!-- Hamburger icon -->
- <span class="fa fa-language fa-3x" aria-hidden="true"></span>
+ <span class="fa fa-language fa-2x" aria-hidden="true"></span>
</a>
</div>
-
{% if not hideLanguageBar -%}
<div id="languagebar">
<div id="menu">
@@ -66,10 +65,8 @@
</div>
{% endif -%}
</form>
- </div><!--show-for-large-->
-
-
- </div>
+ </div> <!--language-bar-->
+ </div><!--show-for-large-->
</div> <!-- wrap -->
</div> <!-- header -->
diff --git a/templates/base.twig b/templates/base.twig
index c1244f398b9a5687f6c4df304f2727cfb5f72bff..21162c6dbf4b6f616e8c21fb0da9bc0702896cb0 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -21,18 +21,17 @@
<body id="{{ templateId }}">
<div id="layout">
{% block header %}{% include "_header.twig" %}{% endblock %}
+ <div id="content">
+ <div class="wrap">
+ {% block contentwrapper -%}
+ {% block content %}{% endblock -%}
+ {% endblock %}
+ </div>
+ </div><!-- content -->
+ <div id="push"></div>
+ </div><!-- layout -->
- <div id="content">
- <div class="wrap">
- {% block contentwrapper -%}
- {% block content %}{% endblock -%}
- {% endblock %}
- </div>
- </div><!-- content -->
- <div id="push"></div>
- </div><!-- container -->
-
- <div class="foot">
+ <div id="foot">
{% block footer %}{% include "_footer.twig" %}{% endblock %}
</div>
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index ff80a5372bd76eb935c7fdaccc7adba36ce9de63..4aa50f8f28f428fa1b61c1d8036442723bda2362 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -323,9 +323,6 @@ MEDIA QUERIES
#logo{
font-size: 1.8em;
}
- .fa-language{
- font-size: 2em;
- }
}
@media screen and (max-width: 0em), screen and (min-width: 40em) {
diff --git a/www/assets/css/src/side-menu.css b/www/assets/css/src/side-menu.css
index b07bbeeead629f095e48859b6b5c71266888695c..9795216ee5ccc839b0b362efe77b86f48f8601cf 100644
--- a/www/assets/css/src/side-menu.css
+++ b/www/assets/css/src/side-menu.css
@@ -3,6 +3,7 @@ Add transition to containers so they can push in and out.
*/
#layout,
#menu,
+#foot,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
@@ -109,7 +110,7 @@ how it works:
small screens.
*/
.menu-link {
- position: absolute;
+ position: relative;
display: block; /* show this only on small screens */
top: 0;
right: 0; /* "#menu width" */
@@ -136,26 +137,24 @@ small screens.
.menu-link span:before,
.menu-link span:after {
background-color: transparent;
- width: 100%;
-}
-.menu-link span:before,
-.menu-link span:after {
- position: absolute;
- margin-top: -0.6em;
}
-.menu-link span:after {
- margin-top: 0.6em;
-}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
-@media screen and (max-width: 0em), screen and (min-width: 40em) {
+@media screen and (max-width: 63.9375em) {
#layout.active {
position: relative;
right: 11em;
- /* moves to right as many ems as the one used by the fa-icon (4x) */
+ /* moves to right as many ems as the one used by the menu */
+ }
+ #menuLink.menu-link.active {
+ position: fixed;
+ right: 11em;
+ }
+ #foot.active {
+ margin-right: 11em;
}
}
diff --git a/www/assets/js/src/script.js b/www/assets/js/src/script.js
index 58facd5443783e58168dbbd3f186e99c1204be20..255b7d03153877c1e3094c8a8bfc9f329c753da5 100644
--- a/www/assets/js/src/script.js
+++ b/www/assets/js/src/script.js
@@ -83,6 +83,7 @@ $(document).ready(function() {
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'),
content = document.getElementById('content');
+ footer = document.getElementById('foot');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
@@ -110,6 +111,7 @@ $(document).ready(function() {
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
+ toggleClass(footer, active);
}
menuLink.onclick = function (e) {