Initial public commit
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
<div class="preview-canvas">
|
||||
<h1>Color previews</h1>
|
||||
|
||||
<ul class="palette">
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--pagebg"></div>
|
||||
<p class="palette__label">pagebg</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--pagepattern"></div>
|
||||
<p class="palette__label">pagepattern</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--text"></div>
|
||||
<p class="palette__label">text</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--warn"></div>
|
||||
<p class="palette__label">warn</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="palette">
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--passive-light"></div>
|
||||
<p class="palette__label">passive-light</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--passive"></div>
|
||||
<p class="palette__label">passive</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--passive-dark"></div>
|
||||
<p class="palette__label">passive-dark</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Brand colors are specific to each site, so please also see the site-specific color previews.</p>
|
||||
</div>
|
||||
@@ -0,0 +1,104 @@
|
||||
$color--pagebg: #f2f2f2 !default;
|
||||
$color--text: #000 !default;
|
||||
$color--warn: #e63a16 !default;
|
||||
|
||||
// Passive colors include some primary brand color
|
||||
$color--passive: mix($color--brand-primary, #ddd, 3%) !default;
|
||||
$color--passive-dark: darken($color--passive, 10%) !default;
|
||||
$color--passive-light: lighten($color--passive, 5%) !default;
|
||||
|
||||
// Mixin for the page pattern background
|
||||
@mixin background--pagepattern {
|
||||
background-color: $color--pagebg;
|
||||
background: -cdd-img-url('pagepattern.svg'), none;
|
||||
}
|
||||
|
||||
// Color helper classes
|
||||
.color--pagebg {
|
||||
color: $color--pagebg;
|
||||
}
|
||||
.background--pagebg {
|
||||
background: $color--pagebg;
|
||||
}
|
||||
|
||||
.background--pagepattern {
|
||||
@include background--pagepattern;
|
||||
}
|
||||
|
||||
.color--text {
|
||||
color: $color--text;
|
||||
}
|
||||
.background--text {
|
||||
background: $color--text;
|
||||
}
|
||||
|
||||
.color--warn {
|
||||
color: $color--warn;
|
||||
}
|
||||
.background--warn {
|
||||
background: $color--warn;
|
||||
}
|
||||
|
||||
.color--passive {
|
||||
color: $color--passive;
|
||||
}
|
||||
.background--passive {
|
||||
background: $color--passive;
|
||||
}
|
||||
|
||||
.color--passive-dark {
|
||||
color: $color--passive-dark;
|
||||
}
|
||||
.background--passive-dark {
|
||||
background: $color--passive-dark;
|
||||
}
|
||||
|
||||
.color--passive-light {
|
||||
color: $color--passive-light;
|
||||
}
|
||||
.background--passive-light {
|
||||
background: $color--passive-light;
|
||||
}
|
||||
|
||||
.color--brand-primary {
|
||||
color: $color--brand-primary;
|
||||
}
|
||||
.background--brand-primary {
|
||||
background: $color--brand-primary;
|
||||
}
|
||||
|
||||
.color--brand-primary-alternate {
|
||||
color: $color--brand-primary-alternate;
|
||||
}
|
||||
.background--brand-primary-alternate {
|
||||
background: $color--brand-primary-alternate;
|
||||
}
|
||||
|
||||
.color--brand-secondary {
|
||||
color: $color--brand-secondary;
|
||||
}
|
||||
.background--brand-secondary {
|
||||
background: $color--brand-secondary;
|
||||
}
|
||||
|
||||
.color--brand-secondary-alternate {
|
||||
color: $color--brand-secondary-alternate;
|
||||
}
|
||||
.background--brand-secondary-alternate {
|
||||
background: $color--brand-secondary-alternate;
|
||||
}
|
||||
|
||||
// Set the main colors on body
|
||||
body {
|
||||
color: $color--text;
|
||||
@include background--pagepattern;
|
||||
|
||||
@media print {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Selection background
|
||||
::selection {
|
||||
background: lighten($color--brand-primary, 30%);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
|
||||
<filter id="f" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.2" numOctaves="5" result="noise"/>
|
||||
<feDiffuseLighting in="noise" lighting-color="white" diffuseConstant="1" surfaceScale="0.3">
|
||||
<feDistantLight azimuth="90" elevation="50"/>
|
||||
</feDiffuseLighting>
|
||||
</filter>
|
||||
<rect width="500" height="500" filter="url(#f)" fill="#f2f2f2" opacity="0.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 471 B |
@@ -0,0 +1,89 @@
|
||||
(function(app) {
|
||||
'use strict';
|
||||
|
||||
// Store for the event handlers
|
||||
var handlers = {};
|
||||
var hasOwnProperty = handlers.hasOwnProperty;
|
||||
|
||||
/**
|
||||
* Registers an event handler for a specified event
|
||||
*
|
||||
* @param {string} event Event name
|
||||
* @param {Function} callback
|
||||
* @return {object} Object with a remove() method to unsubscribe from events
|
||||
*/
|
||||
app.on = function(event, callback) {
|
||||
// Create event array if not already existing
|
||||
if(!hasOwnProperty.call(handlers, event)) handlers[event] = [];
|
||||
|
||||
// Add the callback to the array
|
||||
var index = handlers[event].push(callback) - 1;
|
||||
|
||||
// Return function to delete handler again
|
||||
return {
|
||||
remove: function() {
|
||||
delete handlers[event][index];
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Triggers an event with a given event argument
|
||||
*
|
||||
* @param {string} event Event name
|
||||
* @param {mixed} ... Arbitrary arguments to pass to every callback
|
||||
*/
|
||||
app.emit = function(event) {
|
||||
if(!hasOwnProperty.call(handlers, event)) return;
|
||||
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
handlers[event].forEach(function(handler) {
|
||||
handler.apply(undefined, args);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a promise that resolves after the specified time
|
||||
*
|
||||
* @param {integer} time Time in milliseconds
|
||||
* @return {Promise}
|
||||
*/
|
||||
app.timerPromise = function(time) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
setTimeout(resolve, time);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates that a fetch() request has a HTTP status code in the 200 range
|
||||
*
|
||||
* @param {Response} response fetch() response
|
||||
* @return {Response} Same response object to allow for chaining
|
||||
*/
|
||||
app.validateHttpStatus = function(response) {
|
||||
if(response.status >= 200 && response.status < 300) {
|
||||
return response;
|
||||
} else {
|
||||
var error = new Error('HTTP response with status: ' + response.status + ' ' + response.statusText);
|
||||
error.response = response;
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a fetch() response to JSON
|
||||
*
|
||||
* @param {Response} response fetch() response
|
||||
* @return {Promise}
|
||||
*/
|
||||
app.parseJsonResponse = function(response) {
|
||||
// Validate that the response is JSON
|
||||
var contentType = response.headers.get('Content-Type');
|
||||
if(contentType.indexOf('application/json') !== 0) {
|
||||
throw new Error('Got content type "' + contentType + '", expected JSON.');
|
||||
}
|
||||
|
||||
// Convert response to JSON
|
||||
return response.json();
|
||||
};
|
||||
})(window.app = window.app || {});
|
||||
@@ -0,0 +1,50 @@
|
||||
///
|
||||
// Converts a pixel value to ems with a base font size of 18 px
|
||||
//
|
||||
// @param {int} $px Target pixel value
|
||||
// @return {value} Pixel value converted to ems
|
||||
///
|
||||
@function -cdd-em($px) {
|
||||
@return ($px / 18) * 1em;
|
||||
}
|
||||
|
||||
///
|
||||
// Converts a pixel value to rems with a base font size of 18 px
|
||||
//
|
||||
// @param {int} $px Target pixel value
|
||||
// @return {value} Pixel value converted to rems
|
||||
///
|
||||
@function -cdd-rem($px) {
|
||||
@return ($px / 18) * 1rem;
|
||||
}
|
||||
|
||||
///
|
||||
// Returns the correct url() to an image in assets/img
|
||||
//
|
||||
// @param {string} $name Filename of the image
|
||||
// @return {value}
|
||||
///
|
||||
@function -cdd-img-url($name) {
|
||||
@return url(-cdd-cachebuster('/assets/img/' + $name));
|
||||
}
|
||||
|
||||
///
|
||||
// Helper to embed @font-face declarations
|
||||
// Inspired by https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
|
||||
//
|
||||
// @param {string} $name Font name (human-readable)
|
||||
// @param {string} $file Name of the font file
|
||||
// @param {int} $weight font-weight value of the font file
|
||||
// @param {string} $style font-style value of the font file
|
||||
///
|
||||
@mixin -cdd-font-face($name, $file, $weight: normal, $style: normal) {
|
||||
@font-face {
|
||||
font-family: quote($name);
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
src: url(-cdd-cachebuster('/assets/fonts/' + $file + '.eot')); // IE < 9
|
||||
src: url(-cdd-cachebuster('/assets/fonts/' + $file + '.eot') + '?#') format('embedded-opentype'), // IE 9
|
||||
url(-cdd-cachebuster('/assets/fonts/' + $file + '.woff2')) format('woff2'),
|
||||
url(-cdd-cachebuster('/assets/fonts/' + $file + '.woff')) format('woff');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
body {
|
||||
// Make sure that the footer is always at the bottom of the page
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Hide horizontal overflow (required for animated contact forms)
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
|
||||
// Fallback as IE does not respect min-height flex containers
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
// Page padding for print
|
||||
@media print {
|
||||
@page {
|
||||
margin: 1.5cm;
|
||||
}
|
||||
}
|
||||
|
||||
// Visually hidden
|
||||
.vh {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
// Container mixins
|
||||
@mixin container {
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 30em) {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container--full {
|
||||
@include container;
|
||||
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
@mixin container--text {
|
||||
@include container;
|
||||
|
||||
max-width: 42rem;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
img, svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
html {
|
||||
// Use border-box box sizing
|
||||
box-sizing: border-box;
|
||||
|
||||
// Disable text size adjustment on device rotation
|
||||
text-size-adjust: 100%;
|
||||
|
||||
// Always display vertical scrollbar
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
// Reset all spacing
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Inherit box-sizing from html element
|
||||
box-sizing: inherit;
|
||||
|
||||
// Disable default styling for certain elements
|
||||
list-style: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Disable all vertical margins for first and last childs of a container
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Make old browsers understand HTML5 elements
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, main, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
@@ -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"}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user