Internetstiftelsen Styleguide

Footer 

<div class="wrapper-fluid">
    <footer class="o-footer" id="siteFooter">
        <div class="row">
            <div class="grid-18 o-footer__info">
                <div class="row">
                    <div class="grid-18 grid-lg-9 o-footer__info__freetext">
                        <p class="o-footer__paragraph"><a href="https://internetstiftelsen.se">Internetstiftelsen</a> verkar för ett internet som bidrar positivt till människan och samhället. Vi är en oberoende organisation som säkerställer en stark och säker infrastruktur för internet i Sverige. Vårt mål är att alla ska våga och kunna använda internet. Vi finns i Sverige och ansvarar för den svenska toppdomänen .se och driften av toppdomänen .nu.</p>
                    </div>
                    <div class="grid-18 grid-lg-9 o-footer__info__contact">
                        <div class="row o-footer__info__contact__row-first">
                            <div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address1">
                                <ul class="u-list-clean o-footer__info__contact__address">
                                    <li class="o-footer__info__contact__address__li">Internetstiftelsen</li>
                                    <li class="o-footer__info__contact__address__li">Hammarby Kaj 10D</li>
                                    <li class="o-footer__info__contact__address__li">Box 92073</li>
                                    <li class="o-footer__info__contact__address__li">120 07 Stockholm</li>
                                </ul>
                            </div>
                            <div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address2">
                                <ul class="u-list-clean o-footer__info__contact__address">
                                    <li class="o-footer__info__contact__address__li">E-post: <a class="o-footer__link" href="mailto:info@internetstiftelsen.se">info@internetstiftelsen.se</a></li>
                                    <li class="o-footer__info__contact__address__li">Telefon: <a class="o-footer__link" href="tel:084523500">08-452 35 00</a></li>
                                    <li class="o-footer__info__contact__address__li">Organisationsnummer: 802405-0190</li>
                                </ul>
                            </div>
                        </div>
                        <div class="row o-footer__info__contact__row-second">
                            <div class="grid-19 grid-md-9 o-footer__info__ISO">
                                <a href="https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf" class="o-footer__link o-footer__external-link">
                                    <img src="https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
                                    <span>Certifierade enligt ISO/IEC<br>27001:2013</span>
                                </a>
                            </div>
                            <div class="grid-19 grid-md-9 o-footer__info__CC">
                                <a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
                                    <img class="o-footer__external-logo o-footer__external-logo--cc" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="Creative Commons licens&lt;br&gt;Erkännande 4.0 Internationell">
                                    <span>Creative Commons licens<br>Erkännande 4.0 Internationell</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="grid-18 o-footer__logotypes">
                <div class="row">
                    <div class="o-footer__logotypes__item">
                        <a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
                            <div class="o-footer__logotypes__item__inner">
                                <div class="o-footer__logotypes__item__front">
                                    <img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
                                </div>
                                <div class="o-footer__logotypes__item__back">
                                    <h2>Svenskarna och internet</h2>
                                    <span>En årlig studie av svenska folkets internetvanor</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="o-footer__logotypes__item">
                        <a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
                            <div class="o-footer__logotypes__item__inner">
                                <div class="o-footer__logotypes__item__front">
                                    <img class="o-footer__logotype" alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
                                </div>
                                <div class="o-footer__logotypes__item__back">
                                    <h2>Internetdagarna</h2>
                                    <span>Internetdagarna är en konferens som arrangeras av Internetstiftelsen</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="o-footer__logotypes__item">
                        <a href="https://goto10.se" class="o-footer__logotypes__item__link">
                            <div class="o-footer__logotypes__item__inner">
                                <div class="o-footer__logotypes__item__front">
                                    <img class="o-footer__logotype" alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
                                </div>
                                <div class="o-footer__logotypes__item__back">
                                    <h2>Goto 10</h2>
                                    <span>Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <!--<div class="o-footer__logotypes__item">
						<a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>Bredbandskollen</h2>
									<span>Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen</span>
								</div>
							</div>
						</a>
					</div>-->
                    <div class="o-footer__logotypes__item">
                        <a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
                            <div class="o-footer__logotypes__item__inner">
                                <div class="o-footer__logotypes__item__front">
                                    <img class="o-footer__logotype" alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
                                </div>
                                <div class="o-footer__logotypes__item__back">
                                    <h2>Internetmuseum</h2>
                                    <span>Ett digitalt museum som byggts, och kureras av Internetstiftelsen</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="o-footer__logotypes__item">
                        <a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
                            <div class="o-footer__logotypes__item__inner">
                                <div class="o-footer__logotypes__item__front">
                                    <img class="o-footer__logotype" alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
                                </div>
                                <div class="o-footer__logotypes__item__back">
                                    <h2>Digitala lektioner</h2>
                                    <span>Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="o-footer__logotypes__item">
                        <a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
                            <div class="o-footer__logotypes__item__inner">
                                <div class="o-footer__logotypes__item__front">
                                    <img class="o-footer__logotype" alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
                                </div>
                                <div class="o-footer__logotypes__item__back">
                                    <h2>Internetkunskap</h2>
                                    <span>Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <!--<div class="o-footer__logotypes__item">
						<a href="https://internetstiftelsen.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Internetstiftelsen" src="https://static.internetstiftelsen.se/images/logotypes/internetstiftelsen.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>Internetstiftelsen</h2>
									<span>Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället</span>
								</div>
							</div>
						</a>
					</div>-->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="u-p-y-1 o-footer__bottom-links">
                <nav>
                    <ul class="u-list-clean display-flex">
                        <li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
                        <li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
                        <li class="u-p-x-1"><button id="ot-sdk-btn" class="o-footer__link o-footer__about-link ot-sdk-show-settings">Anpassa kakor</button></li>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>
</div>
 
<div class="wrapper-fluid">
	<footer class="o-footer" id="siteFooter">
		<div class="row">
			<div class="grid-18 o-footer__info">
				<div class="row">
					<div class="grid-18 grid-lg-9 o-footer__info__freetext">
						{{{footer_text}}}
					</div>
					<div class="grid-18 grid-lg-9 o-footer__info__contact">
						<div class="row o-footer__info__contact__row-first">
							<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address1">
								{{{contact_1}}}
							</div>
							<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address2">
								{{{contact_2}}}
							</div>
						</div>
						<div class="row o-footer__info__contact__row-second">
							<div class="grid-19 grid-md-9 o-footer__info__ISO">
								<a href="{{ISO_link}}" class="o-footer__link o-footer__external-link">
									<img src="{{ISO_image}}" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
									<span>{{{ISO_text}}}</span>
								</a>
							</div>
							<div class="grid-19 grid-md-9 o-footer__info__CC">
								<a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
									<img class="o-footer__external-logo o-footer__external-logo--cc" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="{{CC_license}}">
									<span>{{{CC_license}}}</span>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="grid-18 o-footer__logotypes">
				<div class="row">
					<div class="o-footer__logotypes__item">
						<a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_1}}</h2>
									<span>{{site_description_1}}</span>
								</div>
							</div>
						</a>
					</div>
					<div class="o-footer__logotypes__item">
						<a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype" alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_2}}</h2>
									<span>{{site_description_2}}</span>
								</div>
							</div>
						</a>
					</div>
					<div class="o-footer__logotypes__item">
						<a href="https://goto10.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_3}}</h2>
									<span>{{site_description_3}}</span>
								</div>
							</div>
						</a>
					</div>
					<!--<div class="o-footer__logotypes__item">
						<a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_4}}</h2>
									<span>{{site_description_4}}</span>
								</div>
							</div>
						</a>
					</div>-->
					<div class="o-footer__logotypes__item">
						<a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_5}}</h2>
									<span>{{site_description_5}}</span>
								</div>
							</div>
						</a>
					</div>
					<div class="o-footer__logotypes__item">
						<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_6}}</h2>
									<span>{{site_description_6}}</span>
								</div>
							</div>
						</a>
					</div>
					<div class="o-footer__logotypes__item">
						<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_7}}</h2>
									<span>{{site_description_7}}</span>
								</div>
							</div>
						</a>
					</div>
					<!--<div class="o-footer__logotypes__item">
						<a href="https://internetstiftelsen.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Internetstiftelsen" src="https://static.internetstiftelsen.se/images/logotypes/internetstiftelsen.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>{{site_heading_8}}</h2>
									<span>{{site_description_8}}</span>
								</div>
							</div>
						</a>
					</div>-->
				</div>
			</div>
		</div>
		<div class="row">
			<div class="u-p-y-1 o-footer__bottom-links">
				<nav>
					<ul class="u-list-clean display-flex">
						<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
						<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
						<li class="u-p-x-1"><button id="ot-sdk-btn" class="o-footer__link o-footer__about-link ot-sdk-show-settings">Anpassa kakor</button></li>
					</ul>
				</nav>
			</div>
		</div>
	</footer>
</div>
 
{
  "id": "",
  "footer_text": "<p class=\"o-footer__paragraph\"><a href=\"https://internetstiftelsen.se\">Internetstiftelsen</a> verkar för ett internet som bidrar positivt till människan och samhället. Vi är en oberoende organisation som säkerställer en stark och säker infrastruktur för internet i Sverige. Vårt mål är att alla ska våga och kunna använda internet. Vi finns i Sverige och ansvarar för den svenska toppdomänen .se och driften av toppdomänen .nu.</p>",
  "contact_1": "<ul class=\"u-list-clean o-footer__info__contact__address\"><li class=\"o-footer__info__contact__address__li\">Internetstiftelsen</li><li class=\"o-footer__info__contact__address__li\">Hammarby Kaj 10D</li><li class=\"o-footer__info__contact__address__li\">Box 92073</li><li class=\"o-footer__info__contact__address__li\">120 07 Stockholm</li></ul>",
  "contact_2": "<ul class=\"u-list-clean o-footer__info__contact__address\"><li class=\"o-footer__info__contact__address__li\">E-post: <a class=\"o-footer__link\" href=\"mailto:info@internetstiftelsen.se\">info@internetstiftelsen.se</a></li><li class=\"o-footer__info__contact__address__li\">Telefon: <a class=\"o-footer__link\" href=\"tel:084523500\">08-452 35 00</a></li><li class=\"o-footer__info__contact__address__li\">Organisationsnummer: 802405-0190</li></ul>",
  "ISO_link": "https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf",
  "ISO_image": "https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg",
  "ISO_text": "Certifierade enligt ISO/IEC<br>27001:2013",
  "CC_license": "Creative Commons licens<br>Erkännande 4.0 Internationell",
  "site_heading_1": "Svenskarna och internet",
  "site_description_1": "En årlig studie av svenska folkets internetvanor",
  "site_heading_2": "Internetdagarna",
  "site_description_2": "Internetdagarna är en konferens som arrangeras av Internetstiftelsen",
  "site_heading_3": "Goto 10",
  "site_description_3": "Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen",
  "site_heading_4": "Bredbandskollen",
  "site_description_4": "Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen",
  "site_heading_5": "Internetmuseum",
  "site_description_5": "Ett digitalt museum som byggts, och kureras av Internetstiftelsen",
  "site_heading_6": "Digitala lektioner",
  "site_description_6": "Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan",
  "site_heading_7": "Internetkunskap",
  "site_description_7": "Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare",
  "site_heading_8": "Internetstiftelsen",
  "site_description_8": "Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället"
}
  • Content: 
    @charset "UTF-8";
@use "sass:math";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;

$footer-font-size: 18px; /* To ensure all footers on all sites have the same font size this component used pixel based values */

* { /* Because not all of the old sites have this */
	box-sizing: border-box;
}

@include mixin.organism(footer) {
	position: relative;
	z-index: func.z_index(middleground);
	transform: translateY(0);
	border-top: 1px solid colors.$color-ash;
	font-size: $footer-font-size;

	&.is-animated {
		z-index: func.z_index(foreground);
	}

	@include bem.e(logotype) {
		width: 100%;
		max-width: 250px;
		height: 100%;

		@include breakpoint.bp-up(xl) {
			max-width: 300px;
		}
	}

	@include bem.e(link) {
		@extend %normalize-links;

		background-color: transparent;
		color: colors.$color-jade;
		text-decoration: none;

		&:hover,
		&:focus {
			background-color: transparent;
			color: colors.$color-jade;
			text-decoration: underline;
		}
	}

	@include bem.e(info) {
		background-color: colors.$color-cyberspace;
		color: colors.$color-snow;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		@include bem.e(freetext) {
			padding: func.rhythm(3) func.rhythm(3) func.rhythm(4) func.rhythm(3);
			border-bottom: 1px solid colors.$color-black;

			@include breakpoint.bp-up(xl) {
				padding: func.rhythm(4) func.rhythm(6);
				border-bottom: 0;
			}

			p {
				max-width: none;
				margin-bottom: 27px;
				font-size: $footer-font-size;

				@include breakpoint.bp-up(xxl) {
					@include grid.make-col(14);
					max-width: func.to_rem(612px);
				}
			}

			a {
				@extend %normalize-links;

				color: colors.$color-jade;
				text-decoration: none;

				&:hover,
				&:focus {
					color: colors.$color-jade;
					text-decoration: underline;
				}

				svg {
					display: none;
				}
			}
		}

		@include bem.e(contact) {
			font-size: 80%;

			@include breakpoint.bp-up(lg) {
				border-left: 1px solid colors.$color-black;
			}

			@include bem.e(address) {
				font-size: inherit;

				@include bem.e(li) {
					font-size: #{($footer-font-size) - 3px};
					line-height: 1.3;
				}
			}

			@include breakpoint.bp-up(xxl) {
				padding-right: func.rhythm(1);

				& + & {
					padding-right: 0;
					padding-left: func.rhythm(1);
				}
			}

			@include bem.e(row-first) {
				border-bottom: 1px solid colors.$color-black;
				overflow: hidden;

				@include breakpoint.bp-up(lg) {
					height: 70%;
				}

				@include breakpoint.bp-up(xl) {
					height: 50%;
				}
			}

			@include bem.e(row-second) {
				@include breakpoint.bp-up(lg) {
					height: 30%;
				}

				@include breakpoint.bp-up(xl) {
					height: 50%;
				}
			}
		}

		@include bem.e(address1) {
			padding: func.rhythm(3);
			border-bottom: 1px solid colors.$color-black;

			@include breakpoint.bp-only(md) {
				border-bottom: 0;
			}

			@include breakpoint.bp-up(xl) {
				border-bottom: 0;
				padding: func.rhythm(4) func.rhythm(3) func.rhythm(3) func.rhythm(6);
			}
		}

		@include bem.e(address2) {
			padding: func.rhythm(3);

			@include breakpoint.bp-only(md) {
				border-left: 1px solid colors.$color-black;
			}

			@include breakpoint.bp-up(xl) {
				border-left: 1px solid colors.$color-black;
				padding-left: func.rhythm(6);
				padding-top: func.rhythm(4);
			}
		}

		@include bem.e(ISO) {
			border-bottom: 1px solid colors.$color-black;
			padding: func.rhythm(3);
			display: flex;
			align-items: center;

			@include breakpoint.bp-up(md) {
				border-bottom: 0;
			}

			@include breakpoint.bp-up(xl) {
				padding: func.rhythm(3) func.rhythm(3) func.rhythm(4) func.rhythm(6);
			}
		}

		@include bem.e(CC) {
			padding: func.rhythm(3);
			display: flex;
			align-items: center;

			@include breakpoint.bp-up(md) {
				border-left: 1px solid colors.$color-black;
			}

			@include breakpoint.bp-up(xl) {
				padding-left: func.rhythm(6);
				padding-bottom: func.rhythm(4);
			}
		}
	}

	@include bem.e(logotypes) {
		max-width: 100%;
		height: auto;
		background-color: colors.$color-snow;

		@include bem.e(item) {
			display: flex;
			flex-basis: 100%;
			flex-grow: 1;
			flex-shrink: 1;
			justify-content: center;
			min-height: 130px;
			padding: 0 func.rhythm(6);
			overflow: hidden;
			border-bottom: 1px solid colors.$color-ash;
			border-left: 1px solid colors.$color-ash;

			@include breakpoint.bp-up(sm) {
				flex-basis: 50%;
				padding: 0;
				min-height: 200px;
			}

			@include breakpoint.bp-only(sm) {
				padding: 0 func.rhythm(2);
			}

			@include breakpoint.bp-up(md) {
				flex-basis: 50%;
			}

			@include breakpoint.bp-up(lg) {
				flex-basis: 33.333333%;
			}

			@include breakpoint.bp-up(xl) {
				flex-basis: 16.666666%;
			}

			@include bem.e(link) {
				display: block;
				width: 100%;
				height: 100%;
				padding: 0;
				overflow: hidden;
				perspective: 1000px;

				@include breakpoint.bp-up(sm) {
					&:hover,
					&:focus {
						[class*='inner'] {
							transform: rotateY(180deg);
						}
					}
				}

				@include breakpoint.bp-up(sm) {
					padding: 0;
				}

				@include breakpoint.bp-up(md) {
					padding: 0 func.rhythm(4);
				}

				@include breakpoint.bp-up(xl) {
					padding: 0 func.rhythm(3);
				}
			}

			@include bem.e(inner) {
				position: relative;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				transition: transform 0.5s;
				color: colors.$color-cyberspace;
				text-align: center;
			}

			@include bem.e(front) {
				position: absolute;
				width: 100%;
				height: 100%;
				backface-visibility: hidden;
				background-color: colors.$color-snow;
			}

			@include bem.e(back) {
				display: flex;
				position: absolute;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				transform: rotateY(180deg);
				backface-visibility: hidden;
				background-color: colors.$color-snow;

				span {
					display: inline-block;
					max-width: 300px;

					@include plumber.plumber(
						var.$font-size: 1.7,
						$line-height: 2
					);
				}

				@include breakpoint.bp-only(xl) {
					h2 {
						font-size: func.to_rem(18px);
						line-height: 1.3rem;
					}
				}
			}
		}
	}

	@include bem.e(logo-link) {
		display: flex;
		justify-content: center;
		background-color: transparent;
		text-decoration: none;

		&:hover,
		&:focus {
			background-color: transparent;
			text-decoration: none;
		}
	}

	@include bem.e(external-link) {
		display: flex;
		align-items: center;
		font-size: 12px;
		font-size: #{($footer-font-size) - 5px};
		line-height: 1.4;
		text-decoration: none;
	}

	@include bem.e(external-logo) {
		width: func.rhythm(6);
		max-width: 100%;
		height: auto;
		margin-right: func.rhythm(2);

		@include bem.m(cc) {
			width: auto;
		}
	}

	@include bem.e(bottom-links) {
		display: flex;
		flex-wrap: wrap-reverse;
		justify-content: center;
		width: 100%;
		background-color: colors.$color-black;
	}

	@include bem.e(about-link) {
		font-size: #{($footer-font-size) - 4px};
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@include bem.b(o-footer-grid) {
	position: relative;
	flex-basis: 100%;
	flex-grow: 1;
	width: 100%;
	max-width: 100%;
	min-height: 1px;
	padding-right: math.div(var.$grid-gutter-width, 2);
	padding-left: math.div(var.$grid-gutter-width, 2);
	-ms-flex-preferred-size: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;

	& + & {
		margin-top: func.rhythm(2);
	}

	@include breakpoint.bp-up(sm) {
		flex-basis: 0;

		& + & {
			margin-top: 0;
		}
	}
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/organisms/footer/_footer.scss
  • Size: 8 KB

No notes defined.