@internetstiftelsen/styleguide 2.22.0 → 2.22.1

package/src/brandbook/goto10/goto10.hbs

@@ -1,225 +0,0 @@
-<div class="site__main" id="siteMain">
-	<div class="site__main__content">
-		<div class="wrapper">
-			<div class="row justify-content-center">
-				<div class="grid-18">
-					<div class="section section--tight">
-						<div class="row">
-							<div class="grid-18 grid-lg-12">
-								<main role="main" class="article">
-									<h1 class="supersize">Goto 10</h1>
-
-									<div class="article__content">
-										<p class="preamble">Goto 10 är en mötesplats för att bygga nätverk, testa idéer, jobba med nya projekt, produkter, evenemang och utbildningar – allt som främjar internet i Sverige.</p>
-										<p>Mötesplatsen är öppen för alla och medlemskap är kostnadsfritt. Goto 10 finns i Hammarby Sjöstad och på goto10.se samt på sociala medier.</p>
-										<h2>Logotyp</h2>
-
-										<figure class="wp-block-image">
-											<img src="/assets/images/goto10_exempel1-1024x580.jpg" alt="Goto 10 logotyp">
-											<figcaption>Logotyp med gul text mot grå botten.</figcaption>
-										</figure>
-										<figure class="wp-block-image">
-											<img src="/assets/images/goto10_exempel2-1024x580.jpg" alt="Goto 10 logotyp stående">
-											<figcaption>En stående version av logotypen finns tillgänglig. Används i undantagsfall.</figcaption>
-										</figure>
-										<figure class="wp-block-image">
-											<img src="/assets/images/goto10_exempel3-1024x580.jpg" alt="Goto 10 logotyp, grå, vit och svartvit version">
-											<figcaption>Grå, vit och svart version av logotypen.</figcaption>
-										</figure>
-
-										<div class="m-download">
-											<div class="row align-items-center justify-content-center">
-												<div class="grid-auto">
-													<figure class="m-download__icon-file">
-														<svg class="icon">
-															<use xlink:href="#icon-file"></use>
-														</svg>
-													</figure>
-												</div>
-												<div class="grid u-position-static">
-													<div class="row flex-column">
-														<div class="grid-18 u-position-static">
-															<a href="/assets/zip/goto10-logo.zip" class="beta m-download__link" download>
-																Logotyp för nedladdning
-															</a>
-														</div>
-														<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
-															<p class="u-m-b-0">Ladda ner logotyp som EPS</p>
-															<div class="display-flex align-self-end flex-nowrap m-download__trigger">
-																<strong class="m-download__text">Ladda ner</strong>
-																<figure class="m-download__icon-download">
-																	<svg class="icon">
-																		<use xlink:href="#icon-download"></use>
-																	</svg>
-																</figure>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</div>
-
-										<h3>Logotypens anatomi</h3>
-										<figure class="wp-block-image">
-											<img src="/assets/images/goto10_grid-1024x580.jpg" alt="Logotypens anatomi vilandes på ett osynligt kvadratiskt rutsystem">
-											<figcaption>Logotypens bokstäver vilar på ett osynligt kvadratiskt rutsystem.</figcaption>
-										</figure>
-
-										<h3>Rutmönster</h3>
-										<figure class="wp-block-image">
-											<img src="/assets/images/goto10_monster-1024x580.jpg" alt="Logotypen i form av ett mönster">
-											<figcaption>Logotypen i form av ett mönster.</figcaption>
-										</figure>
-
-										<div class="m-download">
-											<div class="row align-items-center justify-content-center">
-												<div class="grid-auto">
-													<figure class="m-download__icon-file">
-														<svg class="icon">
-															<use xlink:href="#icon-file"></use>
-														</svg>
-													</figure>
-												</div>
-												<div class="grid u-position-static">
-													<div class="row flex-column">
-														<div class="grid-18 u-position-static">
-															<a href="/assets/zip/Goto_10_monster.zip" class="beta m-download__link" download>
-																Mönster för nedladdning
-															</a>
-														</div>
-														<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
-															<p class="u-m-b-0">Ladda ner mönster som EPS</p>
-															<div class="display-flex align-self-end flex-nowrap m-download__trigger">
-																<strong class="m-download__text">Ladda ner</strong>
-																<figure class="m-download__icon-download">
-																	<svg class="icon">
-																		<use xlink:href="#icon-download"></use>
-																	</svg>
-																</figure>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-								</main>
-							</div>
-							<div class="grid-18 grid-lg-6">
-								<aside class="sidebar u-position-sticky-top-4">
-									<div class="row">
-										<div class="grid-18 grid-md-9 grid-lg-18 u-m-b-2">
-											<section class="m-card m-card--padded">
-												<div class="m-card__content">
-													<h1 class="beta">Brandbook</h1>
-													<div class="textwidget">
-														<dl>
-															<dt>Internetstiftelsen</dt>
-															<dd class="u-m-l-0">
-																<ol class="u-list-clean u-p-l-2">
-																	<li><a href="/components/preview/identitet.html" class="u-link">Identitét</a></li>
-																	<li><a href="/components/preview/bildmaner.html" class="u-link">Bildmanér</a></li>
-																	<li><a href="/components/preview/tonalitet-och-sprakbruk.html" class="u-link">Tonalitet och språkbruk</a></li>
-																</ol>
-															</dd>
-															<dd class="u-m-l-0">
-																<ol class="u-list-clean">
-																	<li><a href="/components/preview/goto10.html" class="u-link"><strong>Goto 10</strong></a></li>
-																</ol>
-															</dd>
-														</dl>
-													</div>
-												</div>
-											</section>
-										</div>
-									</div>
-								</aside>
-							</div>
-							<div class="row">
-								<div class="grid-18">
-									<h2 class="alpha">Primära färger</h2>
-									<div class="colors">
-										{{#each colors}}
-										<div class="color">
-											<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
-											<p class="beta color-name">{{name}}</p>
-											<p><strong>{{../sass}}:</strong> {{title}}</p>
-											<p><strong>{{../hex}}:</strong> {{hex}}</p>
-											<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
-											<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
-											<p><strong>{{../pms}}:</strong> {{pms}}</p>
-										</div>
-										{{/each}}
-									</div>
-									<h2 class="alpha">Sekundära färger</h2>
-									<div class="colors">
-										{{#each secondaryColors}}
-										<div class="color">
-											<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
-											<p class="beta color-name">{{name}}</p>
-											<p><strong>{{../sass}}:</strong> {{title}}</p>
-											<p><strong>{{../hex}}:</strong> {{hex}}</p>
-											<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
-											<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
-											<p><strong>{{../pms}}:</strong> {{pms}}</p>
-										</div>
-										{{/each}}
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
-<style>
-	.colors {
-		display: flex;
-		flex-wrap: wrap;
-		margin-bottom: 2em;
-	}
-
-	.color {
-		flex: 100% 1 0;
-		max-width: 100vw;
-	}
-
-	@media (min-width: 768px) {
-		.color {
-			flex: 50% 1 0;
-		}
-		.color-33 {
-			flex: 33.333333% 1 0;
-		}
-	}
-
-	.color div {
-		width: 100%;
-		height: 80px;
-		margin-bottom: 10px;
-	}
-
-	.has_border {
-		border: 1px solid #d8d8d8;
-	}
-
-	.color p {
-		line-height: 1.25;
-		margin: 0 10px;
-	}
-
-	.color p:last-child {
-		margin-bottom: 40px;
-	}
-
-	.color p strong {
-		font-family: 'Roboto Mono Regular', monotype;
-	}
-
-	.color-name::first-letter {
-		text-transform: uppercase;
-	}
-</style>

package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-	status: 'ready',
-	label: 'Bildmanér',
-	title: 'Bildmanér'
-}

package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.hbs

@@ -1,74 +0,0 @@
-<div class="wrapper u-m-t-4">
-	<div class="row">
-		<div class="grid">
-			<figure class="o-hero o-hero--border-radius">
-				<img src="/assets/images/bildmaner.jpg" alt="hero" class="o-hero__image">
-			</figure>
-			<div class="site__main" id="siteMain">
-				<div class="site__main__content">
-					<div class="wrapper">
-						<div class="row justify-content-center">
-							<div class="grid-18">
-								<div class="section section--tight">
-									<div class="row">
-										<div class="grid-18 grid-lg-12">
-											<h1 class="supersize">Bildmanér</h1>
-
-											<div class="article__content">
-												<h2>Do</h2>
-												<ul>
-													<li><strong>Kort skärpedjup</strong> Där det går, jobba med organiskt skärpedjup och inte retuscherat skärpedjup&nbsp;</li>
-													<li><strong>Färgstarka foton</strong></li>
-													<li><strong>Autentiska bilder och motiv&nbsp;</strong>Motiv som speglar naturligt förekommande situationer kopplat till Internetstiftelsens verksamhet Modellerna bör ha vardaglig klädsel, dvs inte allt för fixade eller uppklätt.</li>
-													<li>Ett inkluderande förhållningssätt till personer och objekt i bilden; ålder, kön, etnicitet och funktionsvariation</li>
-												</ul>
-
-												<h2>Don't</h2>
-												<ul>
-													<li><strong>Bilderna får inte vara överexponerade</strong></li>
-													<li><strong>Vi ska inte jobba med duotonebilder</strong></li>
-													<li><strong>Modellerna ska inte klä upp sig</strong> för fotografitillfället, utan vi använder ett mer vardagligt uttryck</li>
-													<li><strong>Undvik stereotypa motiv</strong></li>
-												</ul>
-											</div>
-										</div>
-										<div class="grid-18 grid-lg-6">
-											<aside class="sidebar u-position-sticky-top-4">
-												<div class="row">
-													<div class="grid-18 grid-md-9 grid-lg-18 u-m-b-2">
-														<section class="m-card m-card--padded">
-															<div class="m-card__content">
-																<h1 class="beta">Brandbook</h1>
-																<div class="textwidget">
-																	<dl>
-																		<dt>Internetstiftelsen</dt>
-																		<dd class="u-m-l-0">
-																			<ol class="u-list-clean u-p-l-2">
-																				<li><a href="/components/preview/identitet.html" class="u-link">Identitet</a></li>
-																				<li><a href="/components/preview/bildmaner.html" class="u-link"><strong>Bildmanér</strong></a></li>
-																				<li><a href="/components/preview/tonalitet-och-sprakbruk.html" class="u-link">Tonalitet och språkbruk</a></li>
-																			</ol>
-																		</dd>
-																		<dd class="u-m-l-0">
-																			<ol class="u-list-clean">
-																				<li><a href="/components/preview/goto10.html" class="u-link">Goto 10</a></li>
-																			</ol>
-																		</dd>
-																	</dl>
-																</div>
-															</div>
-														</section>
-													</div>
-												</div>
-											</aside>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

package/src/brandbook/internetstiftelsen/identitet/identitet.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-	status: 'ready',
-	label: 'Identitet',
-	title: 'Identitet'
-}