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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'text' => 'Learn more',
|
||||
'label' => false,
|
||||
'link' => url(),
|
||||
'modifiers' => [],
|
||||
'class' => false
|
||||
]
|
||||
];
|
||||
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
if(!is_array($modifiers)) $modifiers = [$modifiers];
|
||||
$modifiers = array_map(function($modifier) {
|
||||
return 'button--' . $modifier;
|
||||
}, $modifiers);
|
||||
$modifiers = implode(' ', $modifiers);
|
||||
|
||||
$classes = 'button' . r($modifiers, ' ' . $modifiers) . r($class, ' ' . $class);
|
||||
|
||||
?>
|
||||
<a href="<?= $link ?>" class="<?= $classes ?>"<?php if($label): ?> aria-label="<?= $label ?>"<?php endif ?>><?= $text ?></a>
|
||||
@@ -0,0 +1,45 @@
|
||||
.button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.3em 0.5em 0.2em;
|
||||
border: 1px solid $color--brand-primary;
|
||||
border-radius: -cdd-em(4);
|
||||
|
||||
& + & {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&, &:link, &:visited {
|
||||
color: $color--brand-primary;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:not(&--novisited):visited {
|
||||
border-color: $color--brand-primary-alternate;
|
||||
color: $color--brand-primary-alternate;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
&, &:link, &:visited {
|
||||
border-color: $color--brand-secondary;
|
||||
color: $color--brand-secondary;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &:not(.button--novisited):visited {
|
||||
border-color: $color--brand-secondary-alternate;
|
||||
color: $color--brand-secondary-alternate;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled, &--disabled {
|
||||
border-color: $color--passive-dark;
|
||||
color: $color--passive-dark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'text' => '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas repellendus modi ea praesentium totam, earum, accusamus pariatur cumque.</p>',
|
||||
'button' => 'Learn more',
|
||||
'link' => url()
|
||||
]
|
||||
];
|
||||
@@ -0,0 +1,4 @@
|
||||
<article class="cta">
|
||||
<div class="cta__text"><?= $text ?></div>
|
||||
<?php pattern('shared/2-blocks/button', ['text' => $button, 'link' => $link, 'modifiers' => 'novisited', 'class' => 'cta__button']) ?>
|
||||
</article>
|
||||
@@ -0,0 +1,26 @@
|
||||
.cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: -cdd-rem(20);
|
||||
}
|
||||
|
||||
.cta__text {
|
||||
flex: 1;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: 40em) {
|
||||
.cta {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cta__text {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
.cta__button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="form">
|
||||
<div class="field field--small">
|
||||
<label class="field__label" for="name">Name</label>
|
||||
<input class="input field__input" type="text" name="name" id="name" value="Lukas Bestle" placeholder=" " autocomplete="name" required/>
|
||||
</div>
|
||||
|
||||
<div class="field field--required field--small">
|
||||
<label class="field__label" for="email">Email address</label>
|
||||
<input class="input field__input" type="email" name="email" id="email" value="" placeholder=" " autocomplete="email" required/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="message">Message</label>
|
||||
<textarea class="input field__input" rows="7" name="message" id="message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
.field {
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
border: 2px solid $color--passive;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
width: 100%;
|
||||
@media (min-width: 35em) {
|
||||
&--small {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field__label {
|
||||
font-size: -cdd-rem(14);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
display: block;
|
||||
padding: 0.3rem 0.4rem;
|
||||
|
||||
.field--required &::after {
|
||||
padding-left: 0.1em;
|
||||
content: '*';
|
||||
color: $color--warn;
|
||||
}
|
||||
}
|
||||
|
||||
.field__input {
|
||||
font: inherit;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.3rem 0.4rem;
|
||||
padding-top: 1.7rem;
|
||||
}
|
||||
|
||||
// Prevent horizontal resizing
|
||||
.field textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'pSite' => 'patterns'
|
||||
]
|
||||
];
|
||||
@@ -0,0 +1,13 @@
|
||||
<footer class="footer">
|
||||
<a href="#top" class="footer__top">↑ <?= l::get('footer.top', 'Top') ?> ↑</a>
|
||||
<div>
|
||||
<?= $site->copyright() ?>
|
||||
</div>
|
||||
<nav class="footer__nav">
|
||||
<ul>
|
||||
<li><?= l::get('footer.madewith', 'Made with') ?> <a href="https://getkirby.com">Kirby</a></li><!--
|
||||
--><li><a href="https://git.codesignd.com/sites/<?= $pSite ?>"><?= l::get('footer.source', 'Source') ?></a></li><!--
|
||||
--><li><a href="<?= page('legal')->url() ?>"><?= page('legal')->title() ?></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
@@ -0,0 +1,48 @@
|
||||
.footer {
|
||||
@include container--full;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
font-size: -cdd-rem(14);
|
||||
|
||||
@media (max-width: 69em) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 35em) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media print {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__top {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 35em) {
|
||||
display: block;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__nav li {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '·';
|
||||
display: inline-block;
|
||||
padding: 0 0.25em;
|
||||
|
||||
color: $color--passive-dark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="form">
|
||||
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<div class="form__message">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
|
||||
|
||||
<button class="button form__submit" type="submit">Submit</button>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
.form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 1rem;
|
||||
background: $color--passive;
|
||||
border-radius: 0.3rem;
|
||||
|
||||
transition: visibility 0s linear 0.7s, transform 0.7s cubic-bezier(0.8, -0.1, 0.5, 0);
|
||||
|
||||
&--success {
|
||||
visibility: hidden;
|
||||
transform: translate(100vw);
|
||||
}
|
||||
}
|
||||
|
||||
.form__message {
|
||||
width: 100%;
|
||||
|
||||
&:not(:empty) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
color: $color--warn;
|
||||
}
|
||||
|
||||
.form__submit {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'pSite' => 'codesignd',
|
||||
'navData' => []
|
||||
]
|
||||
];
|
||||
@@ -0,0 +1,6 @@
|
||||
<header class="header">
|
||||
<div class="header__inner">
|
||||
<?php pattern($pSite . '/2-blocks/logo') ?>
|
||||
<?php pattern('shared/2-blocks/nav', $navData) ?>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,28 @@
|
||||
.header {
|
||||
background: url(/assets/img/baromator.svg);
|
||||
background-repeat: repeat-x;
|
||||
|
||||
padding-top: 55px;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
background: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header__inner {
|
||||
@include container--full;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'image' => 'https://placekitten.com/400/600',
|
||||
'alt' => 'Picture of a cat',
|
||||
'text' => '<h2>I\'m apparently a cat!</h2><p>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.</p>'
|
||||
]
|
||||
];
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="illustrated-text text">
|
||||
<aside class="illustrated-text__sidebar">
|
||||
<img src="<?= $image ?>" alt="<?= $alt ?>">
|
||||
</aside>
|
||||
|
||||
<article class="illustrated-text__main">
|
||||
<?= $text ?>
|
||||
</article>
|
||||
</div>
|
||||
@@ -0,0 +1,46 @@
|
||||
.illustrated-text {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&:not(&--decorative) {
|
||||
@media (max-width: 30em) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.illustrated-text__sidebar {
|
||||
width: 14em;
|
||||
margin-right: 2em;
|
||||
|
||||
@media (max-width: 60em) {
|
||||
width: 10em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 50em) {
|
||||
width: 5em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: 41em) {
|
||||
.illustrated-text--decorative & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 30em) {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.illustrated-text__main {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="form">
|
||||
<div class="field field--small">
|
||||
<label class="field__label" for="name">Name</label>
|
||||
<input class="input input--invalid field__input" type="text" name="name" id="name" value="Lukas Bestle" placeholder=" " autocomplete="name" required/>
|
||||
</div>
|
||||
|
||||
<div class="field field--required field--small">
|
||||
<label class="field__label" for="email">Email address</label>
|
||||
<input class="input field__input" type="email" name="email" id="email" value="" placeholder=" " autocomplete="email" required/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="message">Message</label>
|
||||
<textarea class="input field__input" rows="7" name="message" id="message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
.input {
|
||||
background: -cdd-img-url('warn.svg');
|
||||
background-size: 1.5rem;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-position: calc(100% + 1.5rem + 1px) center;
|
||||
transition: background-position 0.2s ease;
|
||||
|
||||
// Duplicated styles for browsers that don't support :placeholder-shown
|
||||
&:invalid:not(:focus):not(:placeholder-shown) {
|
||||
background-position: calc(100% - 0.7rem) center;
|
||||
}
|
||||
&--invalid {
|
||||
background-position: calc(100% - 0.7rem) center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 0C114.615 0 0 114.615 0 256s114.615 256 256 256 256-114.615 256-256S397.385 0 256 0zm32 416h-64v-64h64v64zm0-128h-64V96h64v192z" fill="#E63A16" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 273 B |
@@ -0,0 +1,11 @@
|
||||
.logo {
|
||||
width: 20em;
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.logo__image {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.main {
|
||||
@include container--full;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'wrapper' => true,
|
||||
'languages' => [],
|
||||
'items' => []
|
||||
],
|
||||
'preview' => function() {
|
||||
$site = site();
|
||||
|
||||
return [
|
||||
'languages' => $site->languages(),
|
||||
'items' => $site->pages()->visible()
|
||||
];
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,16 @@
|
||||
<?php if($wrapper): ?><section class="nav"><?php endif ?>
|
||||
<nav class="nav__section nav__section--languages" aria-label="<?= l::get('nav.lang.label', 'Language select') ?>">
|
||||
<ul>
|
||||
<?php foreach($languages as $language): ?>
|
||||
<li class="nav__item nav__item--compact<?php e($language === $site->language(), ' nav__item--active') ?>"><a href="<?= $page->url($language->code()) ?>" class="nav__link"><?= $language->name() ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav__section nav__section--pages" aria-label="<?= l::get('nav.main.label', 'Primary') ?>">
|
||||
<ul>
|
||||
<?php foreach($items as $item): ?>
|
||||
<li class="nav__item<?php e($item->isOpen(), ' nav__item--active') ?>"><a href="<?= $item->url() ?>" class="nav__link"><?= $item->title() ?></a></li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<?php if($wrapper): ?></section><?php endif ?>
|
||||
@@ -0,0 +1,54 @@
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.nav__section {
|
||||
text-align: right;
|
||||
|
||||
&--languages {
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--pages {
|
||||
line-height: 1.4;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
&--compact:not(:first-child) {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
&--active .nav__link {
|
||||
color: $color--brand-secondary;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 40em) {
|
||||
.nav {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav__section {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
//=require element-closest/closest.js
|
||||
//=require whatwg-fetch/fetch.js
|
||||
//=require flexismooth/flexismooth.js
|
||||
|
||||
(function(app) {
|
||||
'use strict';
|
||||
|
||||
// Cache for successful requests
|
||||
var cache = {};
|
||||
var hasOwnProperty = cache.hasOwnProperty;
|
||||
|
||||
/**
|
||||
* Navigates to another page using AJAX
|
||||
*
|
||||
* @param {Element/string} target Anchor element or URL string to navigate to
|
||||
* @param {string} mode Either 'normal' or 'popstate', defaults to 'normal'
|
||||
* @return {boolean} Whether the event will be handled by this function
|
||||
* May be used to prevent default browser behavior
|
||||
*/
|
||||
app.go = function(target, mode) {
|
||||
if(mode === undefined) mode = 'normal';
|
||||
|
||||
// Refuse to do anything if the History API is not supported
|
||||
if(!history.pushState) return false;
|
||||
|
||||
// Validate params
|
||||
if(typeof target !== 'string' && target.nodeType !== 1) {
|
||||
throw new TypeError('Invalid parameter target.');
|
||||
}
|
||||
if(mode !== 'normal' && mode !== 'popstate') {
|
||||
throw new TypeError('Invalid parameter mode.');
|
||||
}
|
||||
|
||||
// Convert to anchor element if param is a string
|
||||
if(typeof target === 'string') {
|
||||
var link = document.createElement('a');
|
||||
link.href = target;
|
||||
target = link;
|
||||
}
|
||||
|
||||
// Only do something if:
|
||||
// - The user clicked on a link
|
||||
// - The link is internal
|
||||
// - The link doesn't contain a file extension
|
||||
var targetOrigin, windowOrigin;
|
||||
if(target.origin) {
|
||||
targetOrigin = target.origin;
|
||||
windowOrigin = window.location.origin;
|
||||
} else {
|
||||
targetOrigin = target.protocol + '//' + target.hostname;
|
||||
windowOrigin = window.location.protocol + '//' + window.location.hostname;
|
||||
}
|
||||
if(target.nodeName !== 'A' ||
|
||||
targetOrigin !== windowOrigin ||
|
||||
target.pathname.indexOf('.') !== -1) return false;
|
||||
|
||||
// Just scroll to the top/element if the link points to the current page
|
||||
// In this case, we also don't want to reload, so we return true
|
||||
if(target.pathname === window.location.pathname) {
|
||||
var element;
|
||||
if(target.hash) {
|
||||
if(mode === 'normal' && target.hash !== '#top') {
|
||||
history.pushState({}, document.title, target.href);
|
||||
}
|
||||
element = document.getElementById(target.hash.substr(1));
|
||||
}
|
||||
|
||||
Flexismooth(element || 0, 500);
|
||||
return true;
|
||||
}
|
||||
|
||||
// Success, we will navigate using AJAX
|
||||
// Hide the content using CSS and trigger event
|
||||
document.body.classList.add('ajax-transition');
|
||||
app.emit('ajax.before', target);
|
||||
|
||||
// Scroll to the top of the page and ignore interruption
|
||||
var scrollPromise = Flexismooth(0, 500).catch(function() {});
|
||||
|
||||
// Check if the resource is in cache
|
||||
var dataPromise;
|
||||
if(hasOwnProperty.call(cache, target.href)) {
|
||||
console.info('Loading new page ' + target.href + ' (cache)');
|
||||
|
||||
dataPromise = Promise.resolve(cache[target.href]);
|
||||
} else {
|
||||
console.info('Loading new page ' + target.href + ' (ajax)');
|
||||
|
||||
var options = {
|
||||
credentials: 'same-origin',
|
||||
headers: {'Accept': 'application/json'}
|
||||
};
|
||||
dataPromise = fetch(target.href, options)
|
||||
.then(app.validateHttpStatus)
|
||||
.then(app.parseJsonResponse)
|
||||
.then(function(data) {
|
||||
// Cache data if the page explicitly agrees
|
||||
if(data.cachable === true) {
|
||||
cache[data.url] = data;
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
}
|
||||
|
||||
// Prefetch external resources
|
||||
dataPromise = dataPromise.then(function(data) {
|
||||
var container = document.createElement('div');
|
||||
container.innerHTML = data.main;
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// Wait until both data fetching and scrolling are done
|
||||
// Wait at least 600 ms for the page transition fading even if scrolling is interrupted
|
||||
Promise.all([dataPromise, scrollPromise, app.timerPromise(600)])
|
||||
.then(function(values) {
|
||||
// Get the result of the data promise
|
||||
var data = values[0];
|
||||
|
||||
// Set browser metadata
|
||||
if(mode === 'normal') history.pushState({}, data.title, data.url + target.hash);
|
||||
document.title = data.title;
|
||||
|
||||
// Update content blocks
|
||||
document.querySelector('.main').innerHTML = data.main;
|
||||
|
||||
// Trigger event
|
||||
app.emit('ajax.after', target, data);
|
||||
|
||||
// Display the content again
|
||||
document.body.classList.remove('ajax-transition');
|
||||
|
||||
// If a hash was given, scroll to that element
|
||||
if(target.hash) {
|
||||
var element = document.getElementById(target.hash.substr(1));
|
||||
if(element) Flexismooth(element, 500);
|
||||
}
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error(err);
|
||||
|
||||
// Fall back to normal browser behavior
|
||||
window.location.href = target.href;
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// Listen on click events on body (events from links will bubble up)
|
||||
document.body.addEventListener('click', function(e) {
|
||||
// Only continue if no modifier was used (open in new tab etc.)
|
||||
if(e.ctrlKey || e.shiftKey || e.metaKey || (e.button && e.button === 1)) return;
|
||||
|
||||
// Find closest link parent
|
||||
var link = e.target.closest('a');
|
||||
|
||||
// Only continue if the link was found
|
||||
if(!link) return;
|
||||
|
||||
// Prevent the browser from navigating if app.go() wants to be responsible for the event
|
||||
if(app.go(link)) e.preventDefault();
|
||||
});
|
||||
|
||||
// Listen on the popstate event on window
|
||||
window.addEventListener('popstate', function(e) {
|
||||
if(e.state !== null) app.go(window.location.href, 'popstate');
|
||||
});
|
||||
})(window.app = window.app || {});
|
||||
@@ -0,0 +1,11 @@
|
||||
.ajax-transition {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.main {
|
||||
transition: opacity 0.5s ease;
|
||||
|
||||
.ajax-transition & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// Import globals in correct order
|
||||
@import "1-globals/helpers/helpers";
|
||||
@import "1-globals/reset/reset";
|
||||
@import "1-globals/layout/layout";
|
||||
@import "1-globals/colors/colors";
|
||||
@import "1-globals/typo/typo";
|
||||
@import "1-globals/media/media";
|
||||
|
||||
// Import blocks in alphabetical order (they are strictly independent)
|
||||
@import "2-blocks/button/button";
|
||||
@import "2-blocks/cta/cta";
|
||||
@import "2-blocks/field/field";
|
||||
@import "2-blocks/footer/footer";
|
||||
@import "2-blocks/form/form";
|
||||
@import "2-blocks/header/header";
|
||||
@import "2-blocks/illustrated-text/illustrated-text";
|
||||
@import "2-blocks/input/input";
|
||||
@import "2-blocks/logo/logo";
|
||||
@import "2-blocks/main/main";
|
||||
@import "2-blocks/nav/nav";
|
||||
|
||||
// Import sugar in alphabetical order
|
||||
@import "3-sugar/ajax/ajax";
|
||||
Reference in New Issue
Block a user