Initial public commit

2016-08-15 18:21:55 +02:00
commit f9c5f3db5a
86 changed files with 2024 additions and 0 deletions
@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"expert","formats":["woff","woff2","eotz"],"tt_instructor":"keep","fix_gasp":"xy","fix_vertical_metrics":"N","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","webonly":"Y","options_subset":"advanced","subset_range":["macroman","typographics","math","english","german"],"subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"","spacing_adjustment":"0","rememberme":"Y"}
@@ -0,0 +1,65 @@
+<?php $randomLink = str::random(5); ?>
+<div class="preview-canvas text">
+	<h1>Typography preview</h1>
+	<h2>Lorem Ipsum</h2>
+	<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Voluptas repellendus modi ea <a href="https://example.com/<?= $randomLink ?>">praesentium</a> totam, earum, accusamus <em>pariatur</em> cumque. Ä, quia, dolore! Reiciendis, <a href="https://example.com">odio</a> iure accusamus consequatur eveniet voluptates quibusdam <strong>consequuntur</strong>!</p>
+	
+	<h2>Dolor sit amet</h2>
+	<p>Lorem ipsum dolor sit amet.</p>
+	<ul>
+		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
+		<li>Üt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
+		<li>Duis aute irure dolor in reprehenderit!</li>
+	</ul>
+	<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	<ol>
+		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
+		<li>Üt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
+		<li>Duis aute irure dolor in reprehenderit!</li>
+	</ol>
+	<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	
+	<h3>Consectetur adipisicing elit</h3>
+	<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Voluptas repellendus modi ea <a href="https://example.com/<?= $randomLink ?>">praesentium</a> totam, earum, accusamus <em>pariatur</em> cumque. Ä, quia, dolore! Reiciendis, <a href="https://example.com">odio</a> iure accusamus consequatur eveniet voluptates quibusdam <strong>consequuntur</strong>!</p>
+	<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>
+	
+	<h2>Voluptas repellendus modi</h2>
+	<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Voluptas repellendus modi ea <a href="https://example.com/<?= $randomLink ?>">praesentium</a> totam, earum, accusamus <em>pariatur</em> cumque. Ä, quia, dolore! Reiciendis, <a href="https://example.com">odio</a> iure accusamus consequatur eveniet voluptates quibusdam <strong>consequuntur</strong>!</p>
+	
+	<hr>
+	
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+	<h1>Heading 1</h1>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+	<h2>Heading 2</h2>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+	<h3>Heading 3</h3>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+	<h4>Heading 4</h4>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+	<h5>Heading 5</h5>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+	<h6>Heading 6</h6>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua.
+	</p>
+</div>
@@ -0,0 +1,119 @@
+// @font-face definitions
+@include -cdd-font-face('Input Sans Narrow',  'input-sans-narrow-regular', normal, normal);
+@include -cdd-font-face('Input Sans Narrow',  'input-sans-narrow-italic',  normal, italic);
+@include -cdd-font-face('Input Sans Narrow',  'input-sans-narrow-bold',    bold,   normal);
+@include -cdd-font-face('Input Serif Narrow', 'input-serif-narrow-bold',   bold,   normal);
+
+:root {
+	font-size: 112.5%;
+	line-height: 1.7;
+	font-family: "Input Sans Narrow", Tahoma, Helvetica, sans-serif;
+	word-spacing: -0.1em;
+	
+	// Make everything slightly smaller on small screens
+	@media (max-width: 30em) {
+		font-size: 100%;
+	}
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: "Input Serif Narrow", "Hoefler Text", Palatino, serif;
+	line-height: 1.35;
+	text-rendering: optimizeLegibility;
+	
+	margin-top: 1.3em;
+	margin-bottom: 0.9em;
+	
+	@media print {
+		page-break-after: avoid;
+	}
+}
+h1 {
+	font-size: -cdd-rem(36);
+}
+h2 {
+	font-size: -cdd-rem(27);
+}
+h3 {
+	font-size: -cdd-rem(20);
+	
+	margin-bottom: 0.6em;
+}
+h4 {
+	font-size: -cdd-rem(18);
+}
+h5 {
+	font-size: -cdd-rem(18);
+	font-variant: small-caps;
+}
+h6 {
+	font-size: -cdd-rem(14);
+	text-transform: uppercase;
+	
+	margin-top: 1.6em;
+}
+
+a {
+	transition: color 0.2s ease;
+	
+	&:link, &:visited {
+		text-decoration: none;
+		color: $color--brand-primary;
+	}
+	&:hover, &:focus, &:active {
+		color: $color--brand-primary-alternate;
+	}
+}
+
+hr {
+	height: 0;
+	margin-top: 2em;
+	margin-bottom: 2em;
+	
+	border-top: -cdd-rem(2) solid $color--passive;
+	
+	@media print {
+		page-break-after: avoid;
+	}
+}
+
+small {
+	font-size: -cdd-rem(14);
+}
+
+// Content within Kirbytext
+.text {
+	&-container {
+		@include container--text;
+	}
+	
+	p:not(:last-child), ul:not(:last-child),
+	ol:not(:last-child), blockquote:not(:last-child) {
+		margin-bottom: 1em;
+	}
+	
+	ul, ol {
+		padding-left: 40px;
+	}
+	ul li {
+		list-style: disc;
+	}
+	ol li {
+		list-style: decimal;
+	}
+	li:not(:last-child) {
+		margin-bottom: 0.1em;
+	}
+	
+	a:visited {
+		color: $color--brand-primary-alternate;
+	}
+	
+	blockquote {
+		padding: 0.5em 1em;
+		
+		background: $color--passive-light;
+		border-left: 0.7em solid $color--passive;
+		border-radius: 0 0.3em 0.3em 0;
+	}
+}