Initial public commit
commit
f9c5f3db5a
@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@ -0,0 +1,54 @@
|
||||
<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>
|
||||
<ul class="palette">
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--brand-primary"></div>
|
||||
<p class="palette__label">brand-primary</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--brand-primary-alternate"></div>
|
||||
<p class="palette__label">brand-primary-alternate</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--brand-secondary"></div>
|
||||
<p class="palette__label">brand-secondary</p>
|
||||
</li>
|
||||
<li class="palette__color">
|
||||
<div class="palette__swatch background--brand-secondary-alternate"></div>
|
||||
<p class="palette__label">brand-secondary-alternate</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
$color--brand-primary: #ed8f1b !default;
|
||||
$color--brand-primary-alternate: lighten($color--brand-primary, 15%) !default;
|
||||
$color--brand-secondary: #0bb888 !default;
|
||||
$color--brand-secondary-alternate: lighten($color--brand-secondary, 5%) !default;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
@ -0,0 +1,41 @@
|
||||
<div class="contact">
|
||||
<div class="contact__main">
|
||||
<form class="contact__form form" action="" method="post">
|
||||
<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>
|
||||
|
||||
<img class="contact__stamp" src="<?= url('assets/img/stamp.svg') ?>" alt="">
|
||||
</form>
|
||||
|
||||
<div class="contact__thank-you">
|
||||
Thank you for your message.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="contact__sidebar">
|
||||
<div class="contact__detail">
|
||||
<h2 class="contact__heading">Email</h2>
|
||||
<div class="contact__email"><?= str::email('lukas@example.com') ?> <a href="<?= url('legal') ?>#contact">?</a></div>
|
||||
<small><a href="<?= url('pgp.asc') ?>" rel="pgpkey">PGP: 2E2A DD32 FE50 61C1</a></small>
|
||||
</div>
|
||||
|
||||
<div class="contact__detail">
|
||||
<h2 class="contact__heading">Twitter</h2>
|
||||
<?= twitter('lukasbestle') ?>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Demonstration of the form animation
|
||||
setTimeout(function() {
|
||||
document.querySelector('.form').classList.add('form--sent');
|
||||
}, 2000);
|
||||
setTimeout(function() {
|
||||
document.querySelector('.form').classList.add('form--success');
|
||||
}, 2750);
|
||||
</script>
|
||||
@ -0,0 +1,100 @@
|
||||
.contact {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 50em) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contact__form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact__stamp {
|
||||
position: absolute;
|
||||
bottom: -1.5rem;
|
||||
right: 1rem;
|
||||
width: 6rem;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
filter: blur(2px);
|
||||
transform: scale(1.3);
|
||||
transition: visibility 0s linear 0.3s, opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
|
||||
|
||||
.form--sent & {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
transform: none;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__thank-you {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.contact__sidebar {
|
||||
max-width: 16rem;
|
||||
margin-left: 2rem;
|
||||
|
||||
@media (max-width: 50em) {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
margin-top: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__detail {
|
||||
@media (min-width: 50em), (max-width: 42em) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 50em) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 42em) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__heading {
|
||||
font-size: -cdd-rem(20);
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.contact__email {
|
||||
display: flex;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
> :nth-child(1) {
|
||||
margin-right: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
border-right: 1px solid $color--passive;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
align-self: center;
|
||||
|
||||
font-size: -cdd-rem(22);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.0 KiB |
@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'illustration' => false,
|
||||
'text' => '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas repellendus modi ea praesentium totam, earum, accusamus pariatur cumque.</p>'
|
||||
],
|
||||
'preview' => function() {
|
||||
// Use the home illustration if we have one
|
||||
$illustration = page('home')->image('illustration.svg')->url();
|
||||
|
||||
return compact('illustration');
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,21 @@
|
||||
<article class="home-banner">
|
||||
<?php if($illustration): ?>
|
||||
<img class="home-banner__illustration" src="<?= $illustration ?>" alt="">
|
||||
<?php endif ?>
|
||||
|
||||
<div class="home-banner__description">
|
||||
<div class="home-banner__text text"><?= $text ?></div>
|
||||
|
||||
<?php pattern('shared/2-blocks/button', [
|
||||
'text' => l::get('home-banner.learnmore', 'Learn more'),
|
||||
'label' => l::get('home-banner.learnmore.label', 'Learn more about my services'),
|
||||
'link' => url('services'),
|
||||
'modifiers' => 'novisited'
|
||||
]) ?>
|
||||
<?php pattern('shared/2-blocks/button', [
|
||||
'text' => l::get('home-banner.contact', 'Contact'),
|
||||
'link' => url('contact'),
|
||||
'modifiers' => ['novisited', 'secondary']
|
||||
]) ?>
|
||||
</div>
|
||||
</article>
|
||||
@ -0,0 +1,36 @@
|
||||
.home-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: 44em) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.home-banner__illustration {
|
||||
width: 25em;
|
||||
max-width: 100%;
|
||||
margin-right: 4em;
|
||||
|
||||
@media (max-width: 60em) {
|
||||
width: 45%;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
@media (max-width: 44em) {
|
||||
width: 20em;
|
||||
margin-right: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.home-banner__description {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home-banner__text {
|
||||
font-size: -cdd-rem(24);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<a href="<?= site()->homepage()->url() ?>" class="logo" title="Homepage">
|
||||
<?= f::read(__DIR__ . DS . 'logo.svg') ?>
|
||||
</a>
|
||||
@ -0,0 +1,50 @@
|
||||
.logo__gear {
|
||||
transition: transform 2s ease-in-out 2.3s;
|
||||
|
||||
.logo:hover &, .logo:focus & {
|
||||
transition-delay: 0.7s;
|
||||
}
|
||||
}
|
||||
.logo__gear--left {
|
||||
transform-origin: 261px 261px;
|
||||
|
||||
.logo:hover &, .logo:focus & {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.logo__gear--right {
|
||||
transform-origin: 1100px 340px;
|
||||
|
||||
.logo:hover &, .logo:focus & {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.logo__esignd, .logo__gears {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease-in-out 1.4s;
|
||||
|
||||
.logo:hover &, .logo:focus & {
|
||||
opacity: 0;
|
||||
transition-delay: 2.7s;
|
||||
}
|
||||
}
|
||||
|
||||
.logo__leftd {
|
||||
transition: transform 1s ease-in-out 0.7s;
|
||||
|
||||
.logo:hover &, .logo:focus & {
|
||||
transform: translateX(-470px);
|
||||
transition-delay: 3.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.logo__tilde {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
|
||||
.logo:hover &, .logo:focus & {
|
||||
opacity: 1;
|
||||
transition-delay: 4.3s;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'defaults' => [
|
||||
'illustration' => false,
|
||||
'title' => 'Lorem ipsum dolor',
|
||||
'coloredTitle' => true,
|
||||
'text' => '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas repellendus modi ea praesentium totam, earum, accusamus pariatur cumque.</p>'
|
||||
],
|
||||
'preview' => function() {
|
||||
// Use a random service illustration if we have one
|
||||
$page = page('services');
|
||||
$illustration = ($page)? $page->images()->shuffle()->first()->url() : false;
|
||||
|
||||
return compact('illustration');
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,10 @@
|
||||
<section class="service illustrated-text illustrated-text--decorative text">
|
||||
<?php if($illustration): ?>
|
||||
<img class="illustrated-text__sidebar" src="<?= $illustration ?>" alt="">
|
||||
<?php endif ?>
|
||||
|
||||
<div class="service__description illustrated-text__main">
|
||||
<h2 class="service__title<?php e($coloredTitle, ' service__title--colored') ?>"><?= html($title) ?></h2>
|
||||
<?= $text ?>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,24 @@
|
||||
.service {
|
||||
// Make the illustrations overlap
|
||||
&:not(:first-of-type) {
|
||||
margin-top: -0.5em;
|
||||
|
||||
@media (max-width: 50em) {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service__description {
|
||||
.service:not(:last-of-type) & {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.service__title--colored::first-letter {
|
||||
color: $color--brand-secondary;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
(function(app) {
|
||||
'use strict';
|
||||
|
||||
app.on('ajax.after', function(target, data) {
|
||||
document.querySelector('.nav').innerHTML = data.nav;
|
||||
});
|
||||
})(window.app = window.app || {});
|
||||
@ -0,0 +1,70 @@
|
||||
//=require element-closest/closest.js
|
||||
//=require whatwg-fetch/fetch.js
|
||||
|
||||
(function(app) {
|
||||
'use strict';
|
||||
|
||||
// Listen on submit events on body (events from forms will bubble up)
|
||||
document.body.addEventListener('submit', function(e) {
|
||||
// Find closest form parent
|
||||
var form = e.target.closest('.contact__form');
|
||||
|
||||
// Only continue if the form was found and if we have Promise support
|
||||
if(!form || !Promise) return;
|
||||
e.preventDefault();
|
||||
|
||||
// Disable the submit button and display the animated stamp
|
||||
console.info('Sending form data');
|
||||
form._submit.disabled = true;
|
||||
form.classList.add('form--sent');
|
||||
|
||||
// Get form data
|
||||
// Explicitly add value of submit button (browser bug in Chrome/FF?)
|
||||
var data = new FormData(form);
|
||||
data.append('_submit', form._submit.value);
|
||||
|
||||
// Send the form data via AJAX
|
||||
var options = {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
credentials: 'same-origin',
|
||||
headers: {'Accept': 'application/json'}
|
||||
};
|
||||
var dataPromise = fetch(form.action, options)
|
||||
.then(app.validateHttpStatus)
|
||||
.then(app.parseJsonResponse);
|
||||
|
||||
// Wait for the stamp animation
|
||||
Promise.all([dataPromise, app.timerPromise(750)])
|
||||
.then(function(values) {
|
||||
// Get the result of the data promise
|
||||
var data = values[0];
|
||||
|
||||
// Mark the (in)valid fields
|
||||
for(var field in data.fields) {
|
||||
// Add the class if value is true, otherwise remove it
|
||||
form[field].classList.toggle('input--invalid', data.fields[field]);
|
||||
}
|
||||
|
||||
// Check if the form submission was successful
|
||||
if(data.success) {
|
||||
form.querySelector('.form__message').innerText = '';
|
||||
document.querySelector('.contact__thank-you').innerText = data.message;
|
||||
form.classList.add('form--success');
|
||||
} else {
|
||||
// Throw message to catch it below, because apparently our code is a dog
|
||||
throw data.message;
|
||||
}
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error(err);
|
||||
|
||||
// Display the error to the user
|
||||
form.classList.remove('form--sent');
|
||||
form.querySelector('.form__message').innerText = err;
|
||||
|
||||
// Enable the submit button again
|
||||
form._submit.disabled = false;
|
||||
});
|
||||
});
|
||||
})(window.app = window.app || {});
|
||||
@ -0,0 +1,11 @@
|
||||
// Import site-specific color variables
|
||||
@import "1-globals/colors/colors";
|
||||
|
||||
// Import shared styles
|
||||
@import "../shared/shared";
|
||||
|
||||
// Import blocks in alphabetical order (they are strictly independent)
|
||||
@import "2-blocks/contact/contact";
|
||||
@import "2-blocks/home-banner/home-banner";
|
||||
@import "2-blocks/logo/logo";
|
||||
@import "2-blocks/service/service";
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,21 @@
|
||||
<div class="preview-canvas text">
|
||||
<h1>Code highlighting</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, <code>$page->text()->kt()</code> 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>
|
||||
|
||||
<pre><code class="language-js"><?= f::read(kirby()->roots()->index() . DS . 'gulpfile.js') ?></code></pre>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, <code>$page->text()->kt()</code> elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco <kbd>⌘ Cmd</kbd> + <kbd>⇧ Shift</kbd> + <kbd>3</kbd>
|
||||
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>
|
||||
|
||||
<pre><code class="language-markdown"><?= f::read(kirby()->roots()->index() . DS . 'readme.md') ?></code></pre>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
//=require prismjs/prism.js
|
||||
//=require prismjs/plugins/autoloader/prism-autoloader.js
|
||||
|
||||
(function(app) {
|
||||
'use strict';
|
||||
|
||||
// Set autoloading path of the language definitions
|
||||
Prism.plugins.autoloader.languages_path = '/assets/js/prism/';
|
||||
|
||||
// Re-run Prism.js on page change
|
||||
app.on('ajax.after', function(target, data) {
|
||||
console.info('Highlighting code blocks on new page');
|
||||
Prism.highlightAll();
|
||||
});
|
||||
})(window.app = window.app || {});
|
||||
@ -0,0 +1,120 @@
|
||||
// @font-face definitions
|
||||
@include -cdd-font-face('Input Mono Narrow', 'input-mono-narrow-light', 300, normal);
|
||||
|
||||
pre, code, kbd {
|
||||
font-family: "Input Mono Narrow", Consolas, Monaco, "Andale Mono", monospace;
|
||||
font-weight: 300;
|
||||
font-size: -cdd-rem(16);
|
||||
word-spacing: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
line-height: 1.5;
|
||||
|
||||
padding: 1.5em;
|
||||
border-radius: 0.3em;
|
||||
|
||||
overflow: auto;
|
||||
max-height: 30em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
:not(pre) > code, kbd {
|
||||
padding: 0.2em 0.3em 0.1em;
|
||||
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
kbd {
|
||||
padding: 0.4em 0.5em 0.15em;
|
||||
|
||||
background: $color--passive;
|
||||
box-shadow: 0 2px 0 $color--passive-dark;
|
||||
}
|
||||
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*
|
||||
* Stripped from layout styling and other font styles
|
||||
*/
|
||||
|
||||
code,
|
||||
pre {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:not(pre) > code,
|
||||
pre {
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
// Import shared styles
|
||||
@import "../shared/shared";
|
||||
|
||||
// Import globals in correct order
|
||||
@import "1-globals/typo-code/typo-code";
|
||||
@ -0,0 +1,3 @@
|
||||
# etc patterns
|
||||
|
||||
This directory contains patterns that have been prepared but are currently not being used for any site.
|
||||
@ -0,0 +1,23 @@
|
||||
# License for codesignd Patterns
|
||||
|
||||
## Webfonts
|
||||
|
||||
This repository contains webfont files of the [Input typeface](https://djr.com/input/). You may not use, copy, modify, merge, publish, distribute, sublicense and/or sell copies of these files if you don't have a valid font license (and even then you may only use the files that get provided to you directly).
|
||||
Please support the work of David Jonathan Ross and buy a license if you want to use Input for your projects. You can find the [Input license terms](https://djr.com/license/) on David's website.
|
||||
|
||||
## Design, CSS code and graphics
|
||||
|
||||
Copyright (c) 2016 Lukas Bestle
|
||||
|
||||
You may not use, copy, modify, merge, publish, distribute, sublicense and/or sell copies of the design, CSS code and graphics from this project without explicit permission by Lukas Bestle.
|
||||
|
||||
## PHP and JS code
|
||||
|
||||
**The MIT License (MIT)**
|
||||
Copyright (c) 2016 Lukas Bestle
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "codesignd-patterns",
|
||||
"description": "Pattern library for codesignd websites",
|
||||
"homepage": "https://git.codesignd.com/sites/patterns",
|
||||
"license": "SEE LICENSE IN license.md",
|
||||
"private": true,
|
||||
|
||||
"copyright": "2016 Lukas Bestle",
|
||||
"licenseCSS": "See https://git.codesignd.com/sites/patterns/blob/master/license.md",
|
||||
"licenseJS": "MIT"
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
# codesignd Patterns
|
||||
|
||||
Welcome to the pattern library that powers the codesignd websites!
|
||||
Feel free to check out the building blocks I use and the code behind them.
|
||||
|
||||
## Take a look at the full source code
|
||||
|
||||
The source code of my sites is [hosted on my GitLab server](https://git.codesignd.com/groups/sites). Feel free to check that out too!
|
||||
|
||||
## Contact me
|
||||
|
||||
If you have any questions or if you would like to know more about the patterns, my sites or anything else, please don't hesitate to contact me:
|
||||
|
||||
- [Email and contact form](https://codesignd.com/contact)
|
||||
- [Follow me on Twitter](https://twitter.com/lukasbestle)
|
||||
- Find me in the [Kirby Forum](https://forum.getkirby.com/users/lukasbestle)
|
||||
|
||||
## License
|
||||
|
||||
Design, CSS code and graphics: © 2016 Lukas Bestle
|
||||
PHP and JS code: MIT License
|
||||
|
||||
Full license terms in the [code repository](https://git.codesignd.com/sites/patterns/blob/master/license.md).
|
||||
@ -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";
|
||||
@ -0,0 +1,38 @@
|
||||
/* Wrapper for abstract patterns like colors and typography */
|
||||
.preview-canvas {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* Color palette to demonstrate colors */
|
||||
.palette {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.palette__color {
|
||||
width: 5.3rem;
|
||||
margin-right: 0.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
padding: 0.25rem;
|
||||
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.palette__swatch {
|
||||
width: 100%;
|
||||
padding-bottom: 100%; /* Make the element square */
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.palette__label {
|
||||
font-size: 0.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Reference in New Issue