<footer class="o-footer">
<section class="o-footer__main">
<div class="o-footer__link-list">
<section class="a-footer-link-list">
<h2 class="a-footer-link-list__title">Kantonalparteien</h2>
<ul class="a-footer-link-list__list">
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Aargau</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Appenzell innerhoden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Appenzell ausserhoden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Bern</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Basel-Landschaft</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Basel-Stadt</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Freibourg</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Genf</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Glarus</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Graubünden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Jura</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Luzern</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Neuenburg</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Nidwalden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Obwalden</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">St.Gallen</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Schaffhausen</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Solothurn</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Schwyz</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Thurgau</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Tessin</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Uri</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Waadt</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Wallis</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Zug</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Zürich</a>
</li>
<li class="a-footer-link-list__item">
<a href="#" class="a-footer-link-list__link">Junge Grüne</a>
</li>
</ul>
</section>
</div>
<div class="o-footer__cta">
<section class="m-footer-cta">
<h2 class="m-footer-cta__title">Engagiere dich</h2>
<div class="m-footer-cta__button">
<button type="button" class="a-button a-button--secondary a-button--full-width">Newsletter abonnieren</button>
</div>
<div class="m-footer-cta__button">
<button type="button" class="a-button a-button--outline a-button--secondary a-button--full-width">Mitglied werden</button>
</div>
<div class="m-footer-cta__button">
<button type="button" class="a-button a-button--outline a-button--secondary a-button--full-width">Spenden</button>
</div>
</section>
</div>
<div class="o-footer__contact">
<section class="m-footer-contact">
<h2 class="m-footer-contact__title">Kontakt</h2>
<div class="m-footer-contact__flex">
<div class="m-footer-contact__text">
<p><strong>Grüne Schweiz</strong><br><strong>Les Verts suisses</strong><br>Waisenhausplatz 21<br>3011 Bern</p>
<p>031 326 66 00<br>Postkonto 80-26747-3</p>
<p><a href='mailto:gruene@gruene.ch' class='a-button'>E-Mail senden</a></p>
</div>
<div class="m-footer-contact__social">
<a href="https://www.facebook.com/gruenelesverts/" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>facebook</title>
<use xlink:href="#facebook"></use>
</svg>
</figure>
</a>
<a href="https://twitter.com/GrueneCH" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>twitter</title>
<use xlink:href="#twitter"></use>
</svg>
</figure>
</a>
<a href="https://www.instagram.com/gruenelesverts/" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>instagram</title>
<use xlink:href="#instagram"></use>
</svg>
</figure>
</a>
</div>
</div>
</section>
</div>
</section>
<section class="o-footer__meta">
<div class="a-footer-meta">
<div class="a-footer-meta__wrapper">
<div class="a-footer-meta__copy">© 2018 Grüne Schweiz</div>
<nav class="a-footer-meta__menu">
<ul class="a-footer-meta__list" role="menu" aria-label="Footer Meta Navigation">
<li class="a-footer-meta__item">
<a href="#" class="a-footer-meta__link">Datenschutz</a>
</li>
<li class="a-footer-meta__item">
<a href="#" class="a-footer-meta__link">Impressum</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</footer>
<footer class="o-footer">
<section class="o-footer__main">
<div class="o-footer__link-list">
{{render '@a-footer-link-list'}}
</div>
<div class="o-footer__cta">
{{render '@m-footer-cta'}}
</div>
<div class="o-footer__contact">
{{render '@m-footer-contact'}}
</div>
</section>
<section class="o-footer__meta">
{{render '@a-footer-meta'}}
</section>
</footer>
.o-footer {
background: $color-grey-1;
width: 100%;
@media print {
display: none;
}
&__main {
max-width: $grid-max-width-max;
width: 100%;
margin-left: auto;
margin-right: auto;
@include fluid-grid-item-props(padding);
display: grid;
grid-gap: 80px;
@include media($size-small) {
grid-template-columns: repeat(2, 1fr);
}
@include media($_DESKTOP) {
grid-template-columns: minmax(33%, 40%) 1fr 1fr;
}
@include only_ie10_above {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
&__cta {
grid-row: 1 / 2;
@include media($_DESKTOP) {
justify-self: center;
grid-column: 2 / 3;
}
@include only_ie10_above {
width: 29%;
max-width: 300px;
}
}
&__contact {
grid-row: 2 / 3;
@include media($size-small) {
grid-row: 1 / 2;
}
@include media($_DESKTOP) {
grid-column: 3 / 4;
}
@include only_ie10_above {
width: 29%;
max-width: 300px;
}
}
&__link-list {
@include media($size-small) {
grid-column: 1 / 3;
}
@include media($_DESKTOP) {
grid-column: 1 / 2;
}
@include only_ie10_above {
width: 38%;
max-width: 450px;
}
}
.distracting_widget {
display: none;
}
}
import BaseView from 'base-view';
import distractionFree from '../../../js/service/distractionFree';
const DISTRACTING_WIDGET_CLASS = 'distracting_widget';
export default class OFooter extends BaseView {
initialize() {
this.distractionFree = distractionFree();
}
bind() {
super.bind();
if (!this.distractionFree) {
this.showWidgets();
}
}
showWidgets() {
const widgets = this.getScopedElements( '.' + DISTRACTING_WIDGET_CLASS );
for (const el of widgets) {
this.removeClass( el, DISTRACTING_WIDGET_CLASS );
}
}
}
/* No context defined. */
No notes defined.