Commit b84088e6 authored by alexpott's avatar alexpott

Issue #2470233 by wadmiraal, emma.maria, sxnc, idebr, googletorp, LewisNyman:...

Issue #2470233 by wadmiraal, emma.maria, sxnc, idebr, googletorp, LewisNyman: Fix the visual bugs in the Bartik footer
parent 06c77e79
......@@ -120,7 +120,7 @@ h1.site-name {
overflow: hidden;
height: 1px;
}
.region-header .block .content {
.header .block .content {
margin: 0;
padding: 0;
}
......
......@@ -5,11 +5,10 @@
.site-footer {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 35px 15px 30px;
padding: 35px 0 30px;
}
.site-footer .region {
box-sizing: border-box;
padding: 0 10px;
.site-footer .layout-container {
padding: 0 15px;
}
@media all and (min-width: 560px) {
.site-footer__top .region {
......@@ -20,16 +19,47 @@
[dir="rtl"] .site-footer__top .region {
float: right;
}
}
@media all and (min-width: 560px) and (max-width: 850px) {
.site-footer .region {
box-sizing: border-box;
}
.site-footer__top .region:nth-child(2n+1) {
padding-right: 10px; /* LTR */
}
[dir="rtl"] .site-footer__top .region:nth-child(2n+1) {
padding-left: 10px;
padding-right: 0;
}
.site-footer__top .region:nth-child(2n) {
padding-left: 10px; /* LTR */
}
[dir="rtl"] .site-footer__top .region:nth-child(2n) {
padding-left: 0;
padding-right: 10px;
}
.region-footer-third {
clear: both;
}
}
@media all and (min-width: 851px) {
.site-footer__top .region {
width: 25%;
width: 24%;
padding: 0 0.65%;
}
.region-footer-third {
clear: none;
.site-footer__top .region:first-child {
padding-left: 0; /* LTR */
}
[dir="rtl"] .site-footer__top .region:first-child {
padding-left: 10px;
padding-right: 0;
}
.site-footer__top .region:last-child {
padding-right: 0; /* LTR */
}
[dir="rtl"] .site-footer__top .region:last-child {
padding-left: 0;
padding-right: 10px;
}
}
.site-footer h2 {
......@@ -156,7 +186,9 @@
.site-footer__bottom .block {
clear: both;
}
.site-footer__bottom .menu {
/* We need to be specific to overwrite [dir="rtl"] .block ul in block.css. */
.site-footer__bottom .block .menu {
padding: 0;
}
.site-footer__bottom .menu-item a {
......@@ -187,3 +219,11 @@
padding-right: 12px;
border-left: none;
}
/**
* When the item is both first and last, :last-child overrides the right padding
* when using [dir="rtl"]. We need this rule to remove the right padding.
*/
[dir="rtl"] .site-footer__bottom .menu-item:first-child:last-child a {
padding-right: 0;
}
......@@ -10,6 +10,7 @@
max-width: 860px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
@media all and (min-width: 851px) {
.layout-container {
......
......@@ -10,15 +10,12 @@
{% set show_anchor = "show-" ~ attributes.id|clean_id %}
{% set hide_anchor = "hide-" ~ attributes.id|clean_id %}
{% block content %}
{# If a label is displayed, wrap it in <div class="content">. #}
{% if configuration.label_display %}
<div{{ content_attributes.addClass('content') }}>{{ content }}</div>
{% else %}
<div{{ content_attributes.addClass('content') }}>
{# When rendering a menu without label, render a menu toggle. #}
<div class="menu-toggle-target menu-toggle-target-show" id="{{ show_anchor }}"></div>
<div class="menu-toggle-target" id="{{ hide_anchor }}"></div>
<a class="menu-toggle" href="#{{ show_anchor }}">{{ 'Menu'|t }}</a>
<a class="menu-toggle menu-toggle--hide" href="#{{ hide_anchor }}">{{ 'Menu'|t }}</a>
{{ content }}
{% endif %}
</div>
{% endblock %}
......@@ -174,19 +174,21 @@
</div>
{% endif %}
<footer class="site-footer">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
<div class="site-footer__top layout-container clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
</div>
{% endif %}
{% if page.footer_fifth %}
<div class="site-footer__bottom layout-container" role="contentinfo">
{{ page.footer_fifth }}
</div>
{% endif %}
<div class="layout-container">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
<div class="site-footer__top clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
</div>
{% endif %}
{% if page.footer_fifth %}
<div class="site-footer__bottom">
{{ page.footer_fifth }}
</div>
{% endif %}
</div>
</footer>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment