Footer

<div class="wrapper-fluid">
    <div 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>
    </div>
</div>
<div class="wrapper-fluid">
	<div 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>
	</div>
</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";
    
    $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 organism(footer) {
    	position: relative;
    	z-index: z_index(middleground);
    	transform: translateY(0);
    	border-top: 1px solid $color-ash;
    	font-size: $footer-font-size;
    
    	&.is-animated {
    		z-index: z_index(foreground);
    	}
    
    	@include e(logotype) {
    		width: 100%;
    		max-width: 250px;
    		height: 100%;
    
    		@include bp-up(xl) {
    			max-width: 300px;
    		}
    	}
    
    	@include e(link) {
    		@extend %normalize-links;
    
    		background-color: transparent;
    		color: $color-jade;
    		text-decoration: none;
    
    		&:hover,
    		&:focus {
    			background-color: transparent;
    			color: $color-jade;
    			text-decoration: underline;
    		}
    	}
    
    	@include e(info) {
    		background-color: $color-cyberspace;
    		color: $color-snow;
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    
    		@include e(freetext) {
    			padding: rhythm(3) rhythm(3) rhythm(4) rhythm(3);
    			border-bottom: 1px solid $color-black;
    
    			@include bp-up(xl) {
    				padding: rhythm(4) rhythm(6);
    				border-bottom: 0;
    			}
    
    			p {
    				max-width: none;
    				margin-bottom: 27px;
    				font-size: $footer-font-size;
    
    				@include bp-up(xxl) {
    					@include make-col(14);
    					max-width: rem(612px);
    				}
    			}
    
    			a {
    				@extend %normalize-links;
    
    				color: $color-jade;
    				text-decoration: none;
    
    				&:hover,
    				&:focus {
    					color: $color-jade;
    					text-decoration: underline;
    				}
    
    				svg {
    					display: none;
    				}
    			}
    		}
    
    		@include e(contact) {
    			font-size: 80%;
    
    			@include bp-up(lg) {
    				border-left: 1px solid $color-black;
    			}
    
    			@include e(address) {
    				font-size: inherit;
    
    				@include e(li) {
    					font-size: #{($footer-font-size) - 3px};
    					line-height: 1.3;
    				}
    			}
    
    			@include bp-up(xxl) {
    				padding-right: rhythm(1);
    
    				& + & {
    					padding-right: 0;
    					padding-left: rhythm(1);
    				}
    			}
    
    			@include e(row-first) {
    				border-bottom: 1px solid $color-black;
    				overflow: hidden;
    
    				@include bp-up(lg) {
    					height: 70%;
    				}
    
    				@include bp-up(xl) {
    					height: 50%;
    				}
    			}
    
    			@include e(row-second) {
    				@include bp-up(lg) {
    					height: 30%;
    				}
    
    				@include bp-up(xl) {
    					height: 50%;
    				}
    			}
    		}
    
    		@include e(address1) {
    			padding: rhythm(3);
    			border-bottom: 1px solid $color-black;
    
    			@include bp-only(md) {
    				border-bottom: 0;
    			}
    
    			@include bp-up(xl) {
    				border-bottom: 0;
    				padding: rhythm(4) rhythm(3) rhythm(3) rhythm(6);
    			}
    		}
    
    		@include e(address2) {
    			padding: rhythm(3);
    
    			@include bp-only(md) {
    				border-left: 1px solid $color-black;
    			}
    
    			@include bp-up(xl) {
    				border-left: 1px solid $color-black;
    				padding-left: rhythm(6);
    				padding-top: rhythm(4);
    			}
    		}
    
    		@include e(ISO) {
    			border-bottom: 1px solid $color-black;
    			padding: rhythm(3);
    			display: flex;
    			align-items: center;
    
    			@include bp-up(md) {
    				border-bottom: 0;
    			}
    
    			@include bp-up(xl) {
    				padding: rhythm(3) rhythm(3) rhythm(4) rhythm(6);
    			}
    		}
    
    		@include e(CC) {
    			padding: rhythm(3);
    			display: flex;
    			align-items: center;
    
    			@include bp-up(md) {
    				border-left: 1px solid $color-black;
    			}
    
    			@include bp-up(xl) {
    				padding-left: rhythm(6);
    				padding-bottom: rhythm(4);
    			}
    		}
    	}
    
    	@include e(logotypes) {
    		max-width: 100%;
    		height: auto;
    		background-color: $color-snow;
    
    		@include e(item) {
    			display: flex;
    			flex-basis: 100%;
    			flex-grow: 1;
    			flex-shrink: 1;
    			justify-content: center;
    			min-height: 130px;
    			padding: 0 rhythm(6);
    			overflow: hidden;
    			border-bottom: 1px solid $color-ash;
    			border-left: 1px solid $color-ash;
    
    			@include bp-up(sm) {
    				flex-basis: 50%;
    				padding: 0;
    				min-height: 200px;
    			}
    
    			@include bp-only(sm) {
    				padding: 0 rhythm(2);
    			}
    
    			@include bp-up(md) {
    				flex-basis: 50%;
    			}
    
    			@include bp-up(lg) {
    				flex-basis: 33.333333%;
    			}
    
    			@include bp-up(xl) {
    				flex-basis: 16.666666%;
    			}
    
    			@include e(link) {
    				display: block;
    				width: 100%;
    				height: 100%;
    				padding: 0;
    				overflow: hidden;
    				perspective: 1000px;
    
    				@include bp-up(sm) {
    					&:hover,
    					&:focus {
    						[class*='inner'] {
    							transform: rotateY(180deg);
    						}
    					}
    				}
    
    				@include bp-up(sm) {
    					padding: 0;
    				}
    
    				@include bp-up(md) {
    					padding: 0 rhythm(4);
    				}
    
    				@include bp-up(xl) {
    					padding: 0 rhythm(3);
    				}
    			}
    
    			@include e(inner) {
    				position: relative;
    				width: 100%;
    				height: 100%;
    				transform-style: preserve-3d;
    				transition: transform 0.5s;
    				color: $color-cyberspace;
    				text-align: center;
    			}
    
    			@include e(front) {
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				backface-visibility: hidden;
    				background-color: $color-snow;
    			}
    
    			@include 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: $color-snow;
    
    				span {
    					display: inline-block;
    					max-width: 300px;
    
    					@include plumber(
    						$font-size: 1.7,
    						$line-height: 2
    					);
    				}
    
    				@include bp-only(xl) {
    					h2 {
    						font-size: rem(18px);
    						line-height: 1.3rem;
    					}
    				}
    			}
    		}
    	}
    
    	@include e(logo-link) {
    		display: flex;
    		justify-content: center;
    		background-color: transparent;
    		text-decoration: none;
    
    		&:hover,
    		&:focus {
    			background-color: transparent;
    			text-decoration: none;
    		}
    	}
    
    	@include 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 e(external-logo) {
    		width: rhythm(6);
    		max-width: 100%;
    		height: auto;
    		margin-right: rhythm(2);
    
    		@include m(cc) {
    			width: auto;
    		}
    	}
    
    	@include e(bottom-links) {
    		display: flex;
    		flex-wrap: wrap-reverse;
    		justify-content: center;
    		width: 100%;
    		background-color: $color-black;
    	}
    
    	@include e(about-link) {
    		font-size: #{($footer-font-size) - 4px};
    		-webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
    	}
    }
    
    @include b(o-footer-grid) {
    	position: relative;
    	flex-basis: 100%;
    	flex-grow: 1;
    	width: 100%;
    	max-width: 100%;
    	min-height: 1px;
    	padding-right: math.div($grid-gutter-width, 2);
    	padding-left: math.div($grid-gutter-width, 2);
    	-ms-flex-preferred-size: 0;
    	-webkit-box-flex: 1;
    	-ms-flex-positive: 1;
    
    	& + & {
    		margin-top: rhythm(2);
    	}
    
    	@include bp-up(sm) {
    		flex-basis: 0;
    
    		& + & {
    			margin-top: 0;
    		}
    	}
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/organisms/footer/_footer.scss
  • Size: 6.7 KB

No notes defined.