Initial public commit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user