<div class="m-skip-link">
<a href="#main-content" class="a-link-button a-link-button--white">
Zum Inhalt springen
</a>
</div>
<a id="main-content" aria-hidden="true" tabindex="-1" class="m-skip-link__target"></a>
<div class="page">
<header class="o-header">
<div class="o-header__display">
<div class="o-header__branding">
<section class="m-branding" role="banner" style="display: none">
<div class="m-branding__wrapper">
<div class="m-branding__row">
<h1 class="m-branding__title">
<span class="m-branding__unbreakeable">Ökologisch konsequent.</span>
<span class="m-branding__unbreakeable">Sozial engagiert.</span>
<span class="m-branding__unbreakeable">Global solidarisch.</span>
</h1>
<a href="/" class="m-branding__logo"><img class="a-logo" alt="" src="/img/logo-defr--white.svg"></a>
</div>
</div>
</section>
<script>
var branding = parseInt(window.sessionStorage.getItem('branding') || 0);
if (branding < 2) {
document.querySelectorAll('.m-branding').forEach(el => el.style.display = 'block');
window.sessionStorage.setItem('branding', (branding + 1).toString());
}
</script>
</div>
<div class="o-header__menu">
<div class="m-menu ">
<a class="m-menu__logo" href="/" title="">
<img class="a-logo" alt="Logo Grüne Schweiz" src="/img/logo-defr--green.svg"> </a>
<nav class="m-menu__nav">
<div class="m-menu__hamburger">
<button class="a-hamburger" aria-label="Navigation anzeigen / verbergen" accesskey="1" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="menu">
<span class="a-hamburger__box">
<span class="a-hamburger__inner"></span>
</span>
</button>
</div>
<ul class="m-menu__nav-list" role="menubar" id="menu" aria-label="Hauptnavigation">
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook m-menu__nav-link--active" href="#" role="menuitem" tabindex="0" accesskey="1" aria-haspopup="menu" aria-expanded="false">Aktuelles</a>
<ul class="m-menu__submenu " role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Kampagnen und Events</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Petition «Nein zur Lex Beznau»</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Referendum gegen Versicherungsspione</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Events</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Abstimmungen</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Gegenvorschlag Veloinitiative</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Ernährungssouveränität</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Fair-Food</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Medienmitteilungen</a>
<ul class="a-submenu__list">
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Fair-Food-Initiative</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Fair-Food-Initiative</h3>
</a>
<p class="a-submenu--featured__text">Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.</p>
<button type="button" class="a-button ">Kampagne anzeigen</button>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Positionen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Grüne Schweiz</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Publikationen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Kontakt</a>
</li>
<li class="m-menu__nav-item" role="none">
<div class="a-search a-search--covering">
<form role="search" method="get" id="searchform" class="a-search__form" action="" autocomplete="off">
<div>
<label class="screen-reader-text" for="s">Suche</label>
<input class="a-search__field" type="text" value="" name="s" id="s" placeholder="Suche">
<label class="a-search__submit-label">
<input class="a-search__submit" type="submit" id="searchsubmit" value="Suchen">
<svg class="a-search__icon" aria-hidden="true">
<title>Suchen</title>
<use xlink:href="#glass"></use>
</svg>
</label>
</div>
</form>
</div>
</li>
</ul>
</nav>
<div class="m-menu__right">
<div class="m-menu__cta">
<div class="m-menu__nav-item">
<button type="button" class="a-button a-button--secondary a-button--outline m-menu__nav-link--js-hook">Mitmachen</button>
<ul class="m-menu__submenu m-menu__submenu--cta" role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Mitmachen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Mitglied werden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Unterstützen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Spenden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class="m-menu__language-nav">
<ul class="m-menu__language-nav-list" role="menubar" aria-label="Sprachmenü">
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link m-menu__language-nav-link--active" href="#">de</a>
</li>
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link " href="#">fr</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="o-header__shadow" aria-hidden="true">
<section class="m-branding" role="banner" style="display: none">
<div class="m-branding__wrapper">
<div class="m-branding__row">
<h1 class="m-branding__title">
<span class="m-branding__unbreakeable">Ökologisch konsequent.</span>
<span class="m-branding__unbreakeable">Sozial engagiert.</span>
<span class="m-branding__unbreakeable">Global solidarisch.</span>
</h1>
<a href="/" class="m-branding__logo"><img class="a-logo" alt="" src="/img/logo-defr--white.svg"></a>
</div>
</div>
</section>
<script>
var branding = parseInt(window.sessionStorage.getItem('branding') || 0);
if (branding < 2) {
document.querySelectorAll('.m-branding').forEach(el => el.style.display = 'block');
window.sessionStorage.setItem('branding', (branding + 1).toString());
}
</script>
<div class="m-menu ">
<a class="m-menu__logo" href="/" title="">
<img class="a-logo" alt="Logo Grüne Schweiz" src="/img/logo-defr--green.svg"> </a>
<nav class="m-menu__nav">
<div class="m-menu__hamburger">
<button class="a-hamburger" aria-label="Navigation anzeigen / verbergen" accesskey="1" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="menu">
<span class="a-hamburger__box">
<span class="a-hamburger__inner"></span>
</span>
</button>
</div>
<ul class="m-menu__nav-list" role="menubar" id="menu" aria-label="Hauptnavigation">
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook m-menu__nav-link--active" href="#" role="menuitem" tabindex="0" accesskey="1" aria-haspopup="menu" aria-expanded="false">Aktuelles</a>
<ul class="m-menu__submenu " role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Kampagnen und Events</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Petition «Nein zur Lex Beznau»</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Referendum gegen Versicherungsspione</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Events</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Abstimmungen</a>
<ul class="a-submenu__list">
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Gegenvorschlag Veloinitiative</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Ernährungssouveränität</a>
</li>
<li class="a-submenu__item">
<a class="a-submenu__link" href="">Fair-Food</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu ">
<a class="a-submenu__title" href="">Medienmitteilungen</a>
<ul class="a-submenu__list">
</ul>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Fair-Food-Initiative</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Fair-Food-Initiative</h3>
</a>
<p class="a-submenu--featured__text">Umweltfreundlich und fair hergestellte Lebensmittel – dies wollen die Grünen mit der Fair-Food-Initiative erreichen.</p>
<button type="button" class="a-button ">Kampagne anzeigen</button>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Positionen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Grüne Schweiz</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Publikationen</a>
</li>
<li class="m-menu__nav-item" role="none">
<a class="m-menu__nav-link m-menu__nav-link--js-hook" href="#" role="menuitem" aria-haspopup="menu" aria-expanded="false">Kontakt</a>
</li>
<li class="m-menu__nav-item" role="none">
<div class="a-search a-search--covering">
<form role="search" method="get" id="searchform" class="a-search__form" action="" autocomplete="off">
<div>
<label class="screen-reader-text" for="s">Suche</label>
<input class="a-search__field" type="text" value="" name="s" id="s" placeholder="Suche">
<label class="a-search__submit-label">
<input class="a-search__submit" type="submit" id="searchsubmit" value="Suchen">
<svg class="a-search__icon" aria-hidden="true">
<title>Suchen</title>
<use xlink:href="#glass"></use>
</svg>
</label>
</div>
</form>
</div>
</li>
</ul>
</nav>
<div class="m-menu__right">
<div class="m-menu__cta">
<div class="m-menu__nav-item">
<button type="button" class="a-button a-button--secondary a-button--outline m-menu__nav-link--js-hook">Mitmachen</button>
<ul class="m-menu__submenu m-menu__submenu--cta" role="menu" aria-label="">
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Mitmachen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Mitglied werden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__section" role="none">
<div class="a-submenu a-submenu--featured">
<div class="a-submenu--featured__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Unterstützen</span>
</h2>
</div>
<div class="a-submenu--featured__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Symbolbild Fair-Food" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
</figcaption>
</figure>
</div>
<a class="a-submenu--featured__link" href="">
<h3 class="a-submenu--featured__link__title">Spenden</h3>
</a>
</div>
</li>
<li class="m-menu__submenu__close-wrapper" role="none">
<button class="m-menu__submenu__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
<div class="m-menu__language-nav">
<ul class="m-menu__language-nav-list" role="menubar" aria-label="Sprachmenü">
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link m-menu__language-nav-link--active" href="#">de</a>
</li>
<li class="m-menu__language-nav-item">
<a class="m-menu__language-nav-link " href="#">fr</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="page__main">
<article class="page__grid">
<div class="page__full page__header-image">
<figure class="a-image a-image--cover">
<img src="/img/Olympia_vors_Volk_d.jpg" alt="Die olympischen Ringe als Fünffränkler" title="Olympia vors Volk" class="a-image__image a-image__image--fp a-image__image--fp-">
<figcaption>
</figcaption>
</figure>
</div>
<div class="page__content">
<header class="page__header-wrapper">
<div class="page__header">
<div class="page__breadcrumbs">
<div class="a-breadcrumbs">
<div>
<span>
<a href="http://localhost/">Front Page</a>
<span><a class="breadcrumb_second_last" href="http://localhost/lirum-larum-test-ich-mal/">Lirum larum test ich mal</a>
<span class="breadcrumb_last">Another page with a very long title that must be cut for breadcrumbs</span>
</span>
</span>
</div>
</div>
</div>
<h1 id="main-content">1’000’000 CHF für die olympischen Spiele ohne Einverständnis der Bevölkerung?</h1>
</div>
</header>
<div class="page__box">
<div class="m-in-short">
<h2 class="m-in-short__title">In Kürze</h2>
<ul class="m-in-short__list">
<li class="m-in-short__item">Der Bund will die olympischen Spiele mit einer Steuermilliarde subventionieren.</li>
<li class="m-in-short__item">Vergangene Olympiaden haben gezeigt: Meist kommt es viel teurer als geplant und das Gastland muss nachbezahlen.</li>
<li class="m-in-short__item">Schon drei mal hat die schweizer Bevölkerung die olympischen Spiele abgelehnt. Nun will der Bundesrat nicht darüber abstimmen lassen.</li>
</ul>
<form class="m-in-short__grid">
<div class="m-in-short__postal-code">
<div class="a-input">
<label for="plz" class="a-input__label a-input__label--required">
PLZ
</label>
<input id="plz" class="a-input__field a-input--invers is-required" type="text" pattern="(\w{0,3}(?<=\w)-)?\d{4,6}" name="plz" value="" required>
</div>
</div>
<div class="m-in-short__email">
<div class="a-input">
<label for="email" class="a-input__label a-input__label--required">
E-Mail
</label>
<input id="email" class="a-input__field a-input--invers is-required" type="email" name="email" value="" required>
</div>
</div>
<div class="m-in-short__consent">
<div class="a-checkoption">
<input type="hidden" name="datenschutz" value="0">
<input id="datenschutz" class="a-checkoption__field" type="checkbox" name="datenschutz" required>
<label for="datenschutz" class="a-checkoption__label a-checkoption--legal">
Ich akzeptiere die Datenschutzbestimmungen.
</label>
</div>
</div>
<div class="m-in-short__button"> <button type="button" class="a-button a-button--secondary">Mitmachen</button>
</div>
</form>
</div>
</div>
<div class="page__quote">
<div class="m-quote">
<div class="m-quote__image-outer">
<div class="m-quote__image-inner">
<figure class="a-image a-image--cover">
<img src="/img/glaettli.jpg" alt="Balthasar Glättli" title="Balthasar Glättli" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
</div>
<div class="m-quote__caption">
<div class="m-quote__quote">Schafft es Aussenminister Cassis, in einer Woche nicht nur die Akzeptanz der Bilateralen zu gefährden, sondern auch mit Waffenexporten in Bürgerkriegsländer die guten Dienste der neutralen Schweiz zu torpedieren? Das darf der Gesamtbundesrat nicht zulassen.</div>
<div class="m-quote__author">Balthasar Glättli, Nationalrat</div>
</div>
</div>
</div>
<p>Diese Kosten und Risiken belasten die Staatskasse. Es stellt sich die Frage, ob der Öffentlichkeit mit
einer
anderen Verwendung dieser knappen Mittel – etwa für Bildung, die Förderung des Breitensports oder die Umwelt
–
nicht mehr gedient wäre. Es stellt sich auch die Frage, ob die Bevölkerung bereit ist, die Risiken eines
solchen internationalen Grossanlasses zu tragen.</p>
<div class="page__image">
<figure class="a-image a-image--cover">
<a class="a-image__link" href="#" tabindex="-1">
<img src="/img/wheat_ratio.jpg" alt="Some many things on this image" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">
</a>
<figcaption>
<span class="a-image__caption">This is the image caption</span>
<small class="a-image__copy a-image__copy--caption">© Photographer xy</small>
</figcaption>
</figure>
</div>
<p>Diese Kosten und Risiken belasten die Staatskasse. Es stellt sich die Frage, ob der Öffentlichkeit mit
einer
anderen Verwendung dieser knappen Mittel – etwa für Bildung, die Förderung des Breitensports oder die Umwelt
–
nicht mehr gedient wäre. Es stellt sich auch die Frage, ob die Bevölkerung bereit ist, die Risiken eines
solchen internationalen Grossanlasses zu tragen.</p>
<div class="page__share-block">
<div class="m-share-block">
<div class="m-share-block__icon">
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
<title>twitter--no-outline</title>
<use xlink:href="#twitter--no-outline"></use>
</svg>
<figcaption class="a-social-icon__caption">Twitter</figcaption>
</figure>
</a>
</div>
<div class="m-share-block__icon">
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcss-tricks.com%2F" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
<title>facebook--no-outline</title>
<use xlink:href="#facebook--no-outline"></use>
</svg>
<figcaption class="a-social-icon__caption">Facebook</figcaption>
</figure>
</a>
</div>
<div class="m-share-block__icon">
<a href="whatsapp://send?abid=BROADCAST_ID&text=" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
<title>whatsapp--no-outline</title>
<use xlink:href="#whatsapp--no-outline"></use>
</svg>
<figcaption class="a-social-icon__caption">WhatsApp</figcaption>
</figure>
</a>
</div>
<div class="m-share-block__icon">
<a href="telegram://send?abid=BROADCAST_ID&text=" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
<title>telegram</title>
<use xlink:href="#telegram"></use>
</svg>
<figcaption class="a-social-icon__caption">Telegram</figcaption>
</figure>
</a>
</div>
<div class="m-share-block__icon">
<a href="mailto:?subject=Sitetitle&body=Some%20content" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
<title>mail--no-outline</title>
<use xlink:href="#mail--no-outline"></use>
</svg>
<figcaption class="a-social-icon__caption">E-Mail</figcaption>
</figure>
</a>
</div>
<div class="m-share-block__icon">
<button data-link="https://example.com" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
<title>link</title>
<use xlink:href="#link"></use>
</svg>
<figcaption class="a-social-icon__caption">Copy Link</figcaption>
</figure>
<div class="a-social-icon__copied">Copied!</div>
</button>
</div>
</div>
</div>
<p>Diese Kosten und Risiken belasten die Staatskasse. Es stellt sich die Frage, ob der Öffentlichkeit mit
einer
anderen Verwendung dieser knappen Mittel – etwa für Bildung, die Förderung des Breitensports oder die Umwelt
–
nicht mehr gedient wäre. Es stellt sich auch die Frage, ob die Bevölkerung bereit ist, die Risiken eines
solchen internationalen Grossanlasses zu tragen.</p>
</div>
<div class="page__post-meta-wrapper page__row--2">
<aside class="page__post-meta">
<div class="a-post-meta">
<time class="a-post-meta__date" datetime="2018-10-03T00:00:00.000Z">03.10.2018</time>
<a href="#" class="a-post-meta__author">Hansrudolf Hugentobler</a>
<div class="a-post-meta__tags">
<a href="" class="a-post-meta__category">Medienmitteilungen</a>
<a href="" class="a-post-meta__category">Energie</a>
<a href="" class="a-post-meta__category">Verkehr</a>
<a href="" class="a-post-meta__tag">Fabi</a>
<a href="" class="a-post-meta__tag">Bahninfrastruktur</a>
<a href="" class="a-post-meta__tag">Bahn</a>
<a href="" class="a-post-meta__tag">SBB</a>
</div>
</div>
</aside>
<div class="page__shareable">
<aside class="page__share">
<div class="m-share">
<button class="m-share__mobile" aria-label="">
<svg role="img">
<title>partager</title>
<use xlink:href="#mobile"></use>
</svg>
</button>
<button class="m-share__close" aria-label="">
<svg role="img">
<title>partager</title>
<use xlink:href="#close"></use>
</svg>
</button>
<div class="m-share__buttons">
<div class="m-share__icon">
<button data-link="https://example.com" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>link</title>
<use xlink:href="#link"></use>
</svg>
</figure>
<div class="a-social-icon__copied">Copied!</div>
</button>
</div>
<div class="m-share__icon">
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcss-tricks.com%2F" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>facebook--no-outline</title>
<use xlink:href="#facebook--no-outline"></use>
</svg>
</figure>
</a>
</div>
<div class="m-share__icon">
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>twitter--no-outline</title>
<use xlink:href="#twitter--no-outline"></use>
</svg>
</figure>
</a>
</div>
<div class="m-share__icon">
<a href="mailto:?subject=Sitetitle&body=Some%20content" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>mail--no-outline</title>
<use xlink:href="#mail--no-outline"></use>
</svg>
</figure>
</a>
</div>
<div class="m-share__icon">
<a href="whatsapp://send?abid=BROADCAST_ID&text=" class="a-social-icon" aria-label="">
<figure class="a-social-icon__figure">
<svg role="img" class="a-social-icon__svg">
<title>whatsapp--no-outline</title>
<use xlink:href="#whatsapp--no-outline"></use>
</svg>
</figure>
</a>
</div>
</div>
<div class="m-share__desc">partager</div>
</div>
</aside>
</div>
</div>
<aside class="page__wide page__linked-content">
<div class="o-linked-content">
<h2 class="o-linked-content__title">Das könnte dich auch noch interessieren</h2>
<div class="o-linked-content__wrapper">
<div class="o-linked-content__block">
<div class="m-link-list ">
<div class="m-link-list__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Weitere Ressourcen</span>
</h2>
</div>
<ul class="m-link-list__list">
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
<footer class="a-post-link__meta a-post-link__meta--footer">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
<div class="a-post-link__meta-item">Resolutionen,Sport</div>
</footer>
</a>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
<footer class="a-post-link__meta a-post-link__meta--footer">
</footer>
</a>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
<footer class="a-post-link__meta a-post-link__meta--footer">
<div class="a-post-link__meta-item">Resolutionen,Sport</div>
</footer>
</a>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#" target="_blank">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="o-linked-content__block">
<div class="m-link-list ">
<div class="m-link-list__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Weitere Ressourcen</span>
</h2>
</div>
<ul class="m-link-list__list">
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
<footer class="a-post-link__meta a-post-link__meta--footer">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
<div class="a-post-link__meta-item">Resolutionen,Sport</div>
</footer>
</a>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
<footer class="a-post-link__meta a-post-link__meta--footer">
</footer>
</a>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
<footer class="a-post-link__meta a-post-link__meta--footer">
<div class="a-post-link__meta-item">Resolutionen,Sport</div>
</footer>
</a>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<a class="a-post-link a-post-link--link" href="#" target="_blank">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="o-linked-content__block o-linked-content__block--full-width">
<div class="m-link-list m-link-list--full-width">
<div class="m-link-list__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Weitere Ressourcen</span>
</h2>
</div>
<ul class="m-link-list__list">
<li class="m-link-list__item">
<div class="m-link-list__inner">
<article class="a-post-link">
<header class="a-post-link__meta a-post-link__meta--header">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
</header>
<a href="#" class="a-post-link__title-link">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
<p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
<a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
Weiterlesen
</a>
</article>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<article class="a-post-link">
<header class="a-post-link__meta a-post-link__meta--header">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
</header>
<a href="#" class="a-post-link__title-link">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
<p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
<a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
Weiterlesen
</a>
</article>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<article class="a-post-link">
<header class="a-post-link__meta a-post-link__meta--header">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
</header>
<a href="#" class="a-post-link__title-link">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
<p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
<a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
Weiterlesen
</a>
</article>
</div>
</li>
<li class="m-link-list__item">
<div class="m-link-list__inner">
<article class="a-post-link">
<header class="a-post-link__meta a-post-link__meta--header">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
</header>
<a href="#" class="a-post-link__title-link">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
<p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
<a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
Weiterlesen
</a>
</article>
</div>
</li>
</ul>
<div class="m-link-list__more">
<a href="#" class="a-link-button ">
17 weitere Ressourcen
</a>
</div>
</div>
</div>
</div>
</div>
</aside>
</article>
</main>
<div class="page__footer">
<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>
</div>
</div>
{{render '@m-skip-link'}}
<div class="page">
{{render '@o-header'}}
<main class="page__main">
<article class="page__grid{{#unless shareable}} page__grid--no-sidebar{{/unless}}">
{{#if header-image}}
<div class="page__full page__header-image">
{{> @a-image image-src='/img/Olympia_vors_Volk_d.jpg' alt="Die olympischen Ringe als Fünffränkler" title="Olympia vors Volk"}}
</div>
{{/if}}
<div class="page__content">
<header class="page__header-wrapper">
<div class="page__header">
<div class="page__breadcrumbs">
{{render '@a-breadcrumbs'}}
</div>
<h1 id="main-content">1’000’000 CHF für die olympischen Spiele ohne Einverständnis der Bevölkerung?</h1>
</div>
</header>
<div class="page__box">
{{render '@m-in-short'}}
</div>
<div class="page__quote">
{{render '@m-quote' }}
</div>
<p>Diese Kosten und Risiken belasten die Staatskasse. Es stellt sich die Frage, ob der Öffentlichkeit mit
einer
anderen Verwendung dieser knappen Mittel – etwa für Bildung, die Förderung des Breitensports oder die Umwelt
–
nicht mehr gedient wäre. Es stellt sich auch die Frage, ob die Bevölkerung bereit ist, die Risiken eines
solchen internationalen Grossanlasses zu tragen.</p>
<div class="page__image">
{{render '@a-image' }}
</div>
<p>Diese Kosten und Risiken belasten die Staatskasse. Es stellt sich die Frage, ob der Öffentlichkeit mit
einer
anderen Verwendung dieser knappen Mittel – etwa für Bildung, die Förderung des Breitensports oder die Umwelt
–
nicht mehr gedient wäre. Es stellt sich auch die Frage, ob die Bevölkerung bereit ist, die Risiken eines
solchen internationalen Grossanlasses zu tragen.</p>
<div class="page__share-block">
{{render '@m-share-block'}}
</div>
<p>Diese Kosten und Risiken belasten die Staatskasse. Es stellt sich die Frage, ob der Öffentlichkeit mit
einer
anderen Verwendung dieser knappen Mittel – etwa für Bildung, die Förderung des Breitensports oder die Umwelt
–
nicht mehr gedient wäre. Es stellt sich auch die Frage, ob die Bevölkerung bereit ist, die Risiken eines
solchen internationalen Grossanlasses zu tragen.</p>
</div>
<div class="page__post-meta-wrapper {{#if header-image}}page__row--2{{else}}page__row--1{{/if}}">
<aside class="page__post-meta">
{{render '@a-post-meta'}}
</aside>
<div class="page__shareable">
<aside class="page__share">
{{render '@m-share' }}
</aside>
</div>
</div>
<aside class="page__wide page__linked-content{{# if single}} page__content{{/if}}">
{{# if single}}
{{render '@o-linked-content--single-block'}}
{{else}}
{{render '@o-linked-content'}}
{{/if}}
</aside>
</article>
</main>
<div class="page__footer">
{{render '@o-footer'}}
</div>
</div>
import BaseView from 'base-view';
import distractionFree from '../../../js/service/distractionFree';
const DISTRACTING_BREADCRUMBS_CLASS = 'page__breadcrumbs--distracting';
const DISTRACTING_POST_META_CLASS = 'page__post-meta--distracting';
export default class Page extends BaseView {
initialize() {
this.distractionFree = distractionFree();
}
bind() {
super.bind();
if (!this.distractionFree) {
this.showBreadcrumbs();
this.showPostMeta();
}
}
showBreadcrumbs() {
this.removeDistractingClass( DISTRACTING_BREADCRUMBS_CLASS );
}
showPostMeta() {
this.removeDistractingClass( DISTRACTING_POST_META_CLASS );
}
removeDistractingClass( domClass ) {
const el = this.getScopedElement( '.' + domClass );
if (el) {
this.removeClass( el, domClass );
}
}
}
.page {
/**
* ======
* Layout
* ======
*/
$page-grid-desktop: #{$page-grid-content-max-width + $page-grid-side-width + 2 * $page-grid-padder-min-width};
$page-grid-wide: #{$page-grid-content-max-width + 2 * ($page-grid-side-width + $page-grid-padder-regular-width + $page-grid-wide-side-max-width)};
&__grid {
display: grid;
grid-template-columns: [full-start] 1fr [wide-start] 0 [side-left-start] 0 [side-left-end content-start] $page-grid-content-min-width [content-end side-right-start] 0 [side-right-end] 0 [wide-end] 1fr [full-end];
@include media(#{$page-grid-content-min-width + 2 * $page-grid-padder-regular-width}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] 0 [side-left-end content-start] 1fr [content-end side-right-start] 0 [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
}
@include media(#{$page-grid-content-max-width + 2 * $page-grid-padder-regular-width}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 1fr [side-left-start] 0 [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 0 [side-right-end] 1fr [wide-end] $page-grid-padder-regular-width [full-end];
}
@include media(#{$page-grid-content-max-width + $page-grid-side-width + 2 * $page-grid-padder-min-width}) {
grid-template-columns: [full-start] 1fr [wide-start] 0 [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 0 [side-right-end] 0 [wide-end] 1fr [full-end];
&--no-sidebar {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] 1fr [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 1fr [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
}
}
@include media(#{$page-grid-content-max-width + $page-grid-side-width + 2 * $page-grid-padder-regular-width}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 1fr [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
&--no-sidebar {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 0 [side-left-start] 1fr [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] 1fr [side-right-end] 0 [wide-end] $page-grid-padder-regular-width [full-end];
}
}
@include media(#{$page-grid-content-max-width + 2 * ($page-grid-side-width + $page-grid-padder-regular-width)}) {
grid-template-columns: [full-start] $page-grid-padder-regular-width [wide-start] 1fr [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] $page-grid-side-width [side-right-end] 1fr [wide-end] $page-grid-padder-regular-width [full-end];
}
@include media($page-grid-wide) {
grid-template-columns: [full-start] 1fr [wide-start] $page-grid-wide-side-max-width [side-left-start] $page-grid-side-width [side-left-end content-start] $page-grid-content-max-width [content-end side-right-start] $page-grid-side-width [side-right-end] $page-grid-wide-side-max-width [wide-end] 1fr [full-end];
}
@media print {
display: block;
}
}
&__full {
grid-column-start: full-start;
grid-column-end: full-end;
}
&__wide {
grid-column-start: wide-start;
grid-column-end: wide-end;
&--content-width {
max-width: $page-grid-content-max-width;
}
@include only_ie10_above() {
max-width: $page-grid-content-max-width;
margin: auto;
}
}
&__side {
grid-column-start: side-left-start;
grid-column-end: side-right-end;
&--full {
grid-column-start: full-start;
grid-column-end: full-end;
}
@include media($page-grid-desktop) {
&--left {
grid-column-start: side-left-start;
grid-column-end: side-left-end;
}
&--right {
grid-column-start: side-right-start;
grid-column-end: side-right-end;
}
}
}
&__row {
@include media($page-grid-desktop) {
&--1 {
grid-row: 1 / 2;
}
&--2 {
grid-row: 2 / 3;
}
}
}
&__content {
grid-column-start: content-start;
grid-column-end: content-end;
@include only_ie10_above() {
max-width: $page-grid-content-max-width;
margin: auto;
}
}
&__footer {
@include fluid-props(padding-top, $size-medium, $grid-max-width-max, 60px, 90px);
background-color: $color-white;
}
/**
* ==========
* Components
* ==========
*/
&__header-image {
width: 100%;
height: 50vh;
max-height: 600px;
@media only screen and (min-height: 900px) {
height: calc(100vh - 400px);
max-height: calc(100vh - 400px);
}
}
&__header-wrapper {
padding-top: 40px;
@include media($_DESKTOP) {
// keep this discrete, else the post meta position cant be set correctly
padding-top: 60px;
}
&--highlighted {
background: $color-grey-1;
@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 40px, 60px);
}
}
&__header-text,
&__header-text p {
font-size: 1.25rem;
@include media($size-small) {
font-size: 1.46875rem;
}
}
&__header-text--bold {
font-weight: $font-weight-semi;
}
&__breadcrumbs--distracting {
display: none;
}
&__post-meta-wrapper {
@extend .page__side;
@extend .page__side--left;
@extend .page__side--full;
@extend .page__grid;
@include media($page-grid-desktop) {
display: flex;
flex-direction: column;
padding-right: 40px;
height: 100%;
}
@include only_ie10_above() {
display: none; // sorry folks!
}
}
&__post-meta {
@extend .page__content;
background-color: $color-grey-1;
border-top: 2px solid $color-primary;
padding: 0 15px;
@include high-contrast {
border-color: $color-primary-dark;
}
@include media($page-grid-desktop) {
background-color: transparent;
margin-top: 72px;
border-top: none;
padding: 0;
}
&--distracting {
display: none;
}
}
&__shareable {
@include media($page-grid-desktop) {
flex-grow: 1;
}
&--margin-top {
@include media($page-grid-desktop) {
margin-top: 124px;
}
}
}
//noinspection CssOverwrittenProperties
&__share {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
@include media($_DESKTOP) {
position: static; // IE: just keep it fixed
position: sticky;
top: 235px;
z-index: 0;
height: 300px;
}
}
&:not(&--list) &__content {
@include media($size-small){
p, li {
font-size: 1.25rem;
}
li {
letter-spacing: 0.015625em;
line-height: 1.75em;
}
}
}
&__box {
background-color: $color-grey-1;
@include fluid-props(margin-top margin-bottom, $size-tiny, $size-medium, 25px, 35px);
@include fluid-props(padding, $size-tiny, $size-medium, 12px, 40px);
@include media($_DESKTOP) {
margin-top: 50px;
margin-bottom: 50px;
padding: 60px;
}
}
&__preview-articles {
display: grid;
grid-template-columns: 1fr;
@include fluid-props(grid-column-gap, 1490px, $fluid-max, 40px, 100px); // 1490px = $page-grid-wide, but for some reason sass can't work with the variable
@include fluid-props(grid-row-gap, $fluid-min, $fluid-max, 40px, 80px);
@include fluid-props(margin-top margin-bottom, $fluid-min, $fluid-max, 50px, 100px);
@include media($size-small) {
grid-template-columns: 1fr 1fr;
}
}
&__preview-article {
border-bottom: solid 1px $color-grey-2;
}
&__list-header {
@include fluid-props(margin-top, $fluid-min, $fluid-max, 40px, 60px);
}
&__list-articles {
@include fluid-props(margin-top, $fluid-min, $fluid-max, 40px, 60px);
@include clean-ul;
}
&__list-article {
@include clean-li;
border-bottom: solid 1px $color-grey-2;
&--hover-link {
position: relative;
margin-left: -15px;
padding-left: 15px;
margin-right: -15px;
padding-right: 15px;
border-bottom: none;
&::after {
content: ' ';
position: absolute;
bottom: 0;
left: 15px;
background: $color-grey-2;
width: calc(100% - 30px);
height: 1px;
}
@include hover {
background: $color-grey-1;
}
}
}
&__list-footer {
width: 100%;
@include fluid-props(margin-top margin-bottom padding-bottom, $fluid-min, $fluid-max, 30px, 50px);
}
&__list-pagination {
display: flex;
justify-content: center;
}
&__list-events-nav {
margin-top: 15px;
display: flex;
justify-content: center;
}
}
{
"shareable": true,
"header-image": true
}
No notes defined.