Add editor config. Kill all tabs.
Closes https://gitlab.com/autonomic-cooperative/autonomic-cooperative.gitlab.io/issues/19.
This commit is contained in:
Luke Murphy
parent
6a12122b7e
commit
8cb8eb599a
|
|
@ -0,0 +1,8 @@
|
||||||
|
root=true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset=utf-8
|
||||||
|
indent_style=space
|
||||||
|
|
||||||
|
[Makefile]
|
||||||
|
indent_style=tab
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!-- Banner -->
|
<!-- Banner -->
|
||||||
<div class="particle">
|
<div class="particle">
|
||||||
<section id="banner">
|
<section id="banner">
|
||||||
<div class="inner content">
|
<div class="inner content">
|
||||||
<h2>/Auto|nomic\</h2>
|
<h2>/Auto|nomic\</h2>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<section id="cta" class="wrapper style4">
|
<section id="cta" class="wrapper style4">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<header>
|
<header>
|
||||||
<h2>Get in Touch</h2>
|
<h2>Get in Touch</h2>
|
||||||
<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p>
|
<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p>
|
||||||
</header>
|
</header>
|
||||||
<ul class="actions vertical">
|
<ul class="actions vertical">
|
||||||
<li><a href="#" class="button fit special">Lorem ipsum</a></li>
|
<li><a href="#" class="button fit special">Lorem ipsum</a></li>
|
||||||
<li><a href="#" class="button fit">Lorem ispum</a></li>
|
<li><a href="#" class="button fit">Lorem ispum</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer id="footer">
|
<footer id="footer">
|
||||||
<ul class="icons">
|
<ul class="icons">
|
||||||
{% if site.twitter_url %}
|
{% if site.twitter_url %}
|
||||||
<li><a href="{{ site.twitter_url }}" class="icon fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
|
<li><a href="{{ site.twitter_url }}" class="icon fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
|
||||||
{% endif %} {% if site.500px_url %}
|
{% endif %} {% if site.500px_url %}
|
||||||
<li><a href="{{ site.500px_url }}" class="icon fa-500px" target="_blank"><span class="label">500px</span></a></li>
|
<li><a href="{{ site.500px_url }}" class="icon fa-500px" target="_blank"><span class="label">500px</span></a></li>
|
||||||
{% endif %} {% if site.gitlab_url %}
|
{% endif %} {% if site.gitlab_url %}
|
||||||
<li><a href="{{ site.gitlab_url }}" class="icon fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
|
<li><a href="{{ site.gitlab_url }}" class="icon fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
|
||||||
{% endif %} {% if site.github_url %}
|
{% endif %} {% if site.github_url %}
|
||||||
<li><a href="{{ site.github_url }}" class="icon fa-github" target="_blank"><span class="label">GitHub</span></a></li>
|
<li><a href="{{ site.github_url }}" class="icon fa-github" target="_blank"><span class="label">GitHub</span></a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="copyright">
|
<ul class="copyright">
|
||||||
<li class="icon fa-creative-commons"> {{ site.title }}</li>
|
<li class="icon fa-creative-commons"> {{ site.title }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<head>
|
<head>
|
||||||
<title>{{ site.title }}</title>
|
<title>{{ site.title }}</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="shortcut icon" href="{{ "/assets/images/favicon.ico" | relative_url }}" />
|
<link rel="shortcut icon" href="{{ "/assets/images/favicon.ico" | relative_url }}" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/html5shiv.js" | relative_url }}"></script><![endif]-->
|
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/html5shiv.js" | relative_url }}"></script><![endif]-->
|
||||||
<link rel="stylesheet" href="{{ "/assets/styles/main.css" | relative_url }}" />
|
<link rel="stylesheet" href="{{ "/assets/styles/main.css" | relative_url }}" />
|
||||||
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "/assets/css/ie8.css" | relative_url }}" /><![endif]-->
|
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "/assets/css/ie8.css" | relative_url }}" /><![endif]-->
|
||||||
<!--[if lte IE 9]><link rel="stylesheet" href="{{ "/assets/css/ie9.css" | relative_url }}" /><![endif]-->
|
<!--[if lte IE 9]><link rel="stylesheet" href="{{ "/assets/css/ie9.css" | relative_url }}" /><![endif]-->
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
<!-- Page Wrapper -->
|
<!-- Page Wrapper -->
|
||||||
<div id="page-wrapper">
|
<div id="page-wrapper">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
|
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
|
||||||
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
|
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
|
||||||
<nav id="nav">
|
<nav id="nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="special">
|
<li class="special">
|
||||||
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
||||||
<div id="menu">
|
<div id="menu">
|
||||||
<ul>
|
<ul>
|
||||||
{% for page in site.pages %}
|
{% for page in site.pages %}
|
||||||
{% if page.layout == "default" %}
|
{% if page.layout == "default" %}
|
||||||
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
|
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% for page in site.pages %}
|
{% for page in site.pages %}
|
||||||
{% if page.layout == "page" or page.layout == "spotlight" %}
|
{% if page.layout == "page" or page.layout == "spotlight" %}
|
||||||
{% unless page.hidden %}
|
{% unless page.hidden %}
|
||||||
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
|
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
<!-- One -->
|
<!-- One -->
|
||||||
<section id="one" class="wrapper style5 special">
|
<section id="one" class="wrapper style5 special">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<header class="major">
|
<header class="major">
|
||||||
<h2>Autonomic is a co-operative<br />
|
<h2>Autonomic is a co-operative<br />
|
||||||
that is owned and run by its workers</h2>
|
that is owned and run by its workers</h2>
|
||||||
<p>We are committed to a set of core values to build progressive technologies<br /> and
|
<p>We are committed to a set of core values to build progressive technologies<br /> and
|
||||||
infrastructure that empower users to make a positive impact on the world</p>
|
infrastructure that empower users to make a positive impact on the world</p>
|
||||||
</header>
|
</header>
|
||||||
<ul class="icons major icons--flex">
|
<ul class="icons major icons--flex">
|
||||||
<li>
|
<li>
|
||||||
<span class="icon fa-leaf major style1"></span>
|
<span class="icon fa-leaf major style1"></span>
|
||||||
<span class="icons__title">Sustainability</span>
|
<span class="icons__title">Sustainability</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="icon fa-eye major style1"></span>
|
<span class="icon fa-eye major style1"></span>
|
||||||
<span class="icons__title">Transparency</span>
|
<span class="icons__title">Transparency</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="icon fa-lock major style1"></span>
|
<span class="icon fa-lock major style1"></span>
|
||||||
<span class="icons__title">Privacy</span>
|
<span class="icons__title">Privacy</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,37 @@
|
||||||
<!-- Three -->
|
<!-- Three -->
|
||||||
<section id="three" class="wrapper style6 special">
|
<section id="three" class="wrapper style6 special">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<header class="major">
|
<header class="major">
|
||||||
<h2>Services we offer</h2>
|
<h2>Services we offer</h2>
|
||||||
<p>We design intergrated infrastructure tailored to your needs utilising technologies from<br />the
|
<p>We design intergrated infrastructure tailored to your needs utilising technologies from<br />the
|
||||||
best free and open source software projects available. Your data under your control. <br />Here are some examples of the
|
best free and open source software projects available. Your data under your control. <br />Here are some examples of the
|
||||||
applications we have deployed for our clients (insert link to clients page).</p>
|
applications we have deployed for our clients (insert link to clients page).</p>
|
||||||
</header>
|
</header>
|
||||||
<ul class="features">
|
<ul class="features">
|
||||||
<li class="icon fa-paper-plane-o">
|
<li class="icon fa-paper-plane-o">
|
||||||
<h3>Encrypted Email Server</h3>
|
<h3>Encrypted Email Server</h3>
|
||||||
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
||||||
</li>
|
</li>
|
||||||
<li class="icon fa-laptop">
|
<li class="icon fa-laptop">
|
||||||
<h3>Rocket.Chat</h3>
|
<h3>Rocket.Chat</h3>
|
||||||
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
||||||
</li>
|
</li>
|
||||||
<li class="icon fa-code">
|
<li class="icon fa-code">
|
||||||
<h3>Visual Data</h3>
|
<h3>Visual Data</h3>
|
||||||
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
||||||
</li>
|
</li>
|
||||||
<li class="icon fa-headphones">
|
<li class="icon fa-headphones">
|
||||||
<h3>Mumble Voice Chat</h3>
|
<h3>Mumble Voice Chat</h3>
|
||||||
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
||||||
</li>
|
</li>
|
||||||
<li class="icon fa-heart-o">
|
<li class="icon fa-heart-o">
|
||||||
<h3>Discourse Forum</h3>
|
<h3>Discourse Forum</h3>
|
||||||
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
||||||
</li>
|
</li>
|
||||||
<li class="icon fa-flag-o">
|
<li class="icon fa-flag-o">
|
||||||
<h3>Interactive Mapping</h3>
|
<h3>Interactive Mapping</h3>
|
||||||
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<section id="two" class="wrapper alt style2">
|
<section id="two" class="wrapper alt style2">
|
||||||
|
|
||||||
{% for post in site.posts limit:site.tiles-count %}{% if site.tiles-source == 'posts' %}
|
{% for post in site.posts limit:site.tiles-count %}{% if site.tiles-source == 'posts' %}
|
||||||
|
|
||||||
<section class="spotlight">
|
<section class="spotlight">
|
||||||
<div class="image">{% if post.image %}<img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" />{% endif %}</div>
|
<div class="image">{% if post.image %}<img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" />{% endif %}</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
|
<h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
|
||||||
<p>{{ post.description }}</p>
|
<p>{{ post.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% endif %}{% endfor %}
|
{% endif %}{% endfor %}
|
||||||
{% for page in site.pages limit:site.tiles-count %}{% if site.tiles-source == 'pages' %}{% if page.layout == 'default' %}{% continue %}{% endif %}
|
{% for page in site.pages limit:site.tiles-count %}{% if site.tiles-source == 'pages' %}{% if page.layout == 'default' %}{% continue %}{% endif %}
|
||||||
|
|
||||||
<section class="spotlight">
|
<section class="spotlight">
|
||||||
<div class="image">{% if page.image %}<img src="{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}" alt="" />{% endif %}</div>
|
<div class="image">{% if page.image %}<img src="{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}" alt="" />{% endif %}</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h2><a href="{{ page.url | relative_url }}" class="link">{{ page.title }}</a></h2>
|
<h2><a href="{{ page.url | relative_url }}" class="link">{{ page.title }}</a></h2>
|
||||||
<p>{{ page.description }}</p>
|
<p>{{ page.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% endif %}{% endfor %}
|
{% endif %}{% endfor %}
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<!--
|
<!--
|
||||||
Spectral by HTML5 UP
|
Spectral by HTML5 UP
|
||||||
html5up.net | @ajlkn
|
html5up.net | @ajlkn
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
-->
|
-->
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<!--
|
<!--
|
||||||
Spectral by HTML5 UP
|
Spectral by HTML5 UP
|
||||||
html5up.net | @ajlkn
|
html5up.net | @ajlkn
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
-->
|
-->
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
|
|
@ -1,106 +1,106 @@
|
||||||
/*
|
/*
|
||||||
Spectral by HTML5 UP
|
Spectral by HTML5 UP
|
||||||
html5up.net | @ajlkn
|
html5up.net | @ajlkn
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
skel
|
skel
|
||||||
.breakpoints({
|
.breakpoints({
|
||||||
xlarge: '(max-width: 1680px)',
|
xlarge: '(max-width: 1680px)',
|
||||||
large: '(max-width: 1280px)',
|
large: '(max-width: 1280px)',
|
||||||
medium: '(max-width: 980px)',
|
medium: '(max-width: 980px)',
|
||||||
small: '(max-width: 736px)',
|
small: '(max-width: 736px)',
|
||||||
xsmall: '(max-width: 480px)'
|
xsmall: '(max-width: 480px)'
|
||||||
});
|
});
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
var $window = $(window),
|
var $window = $(window),
|
||||||
$body = $('body'),
|
$body = $('body'),
|
||||||
$wrapper = $('#page-wrapper'),
|
$wrapper = $('#page-wrapper'),
|
||||||
$banner = $('#banner'),
|
$banner = $('#banner'),
|
||||||
$header = $('#header');
|
$header = $('#header');
|
||||||
|
|
||||||
// Disable animations/transitions until the page has loaded.
|
// Disable animations/transitions until the page has loaded.
|
||||||
$body.addClass('is-loading');
|
$body.addClass('is-loading');
|
||||||
|
|
||||||
$window.on('load', function() {
|
$window.on('load', function() {
|
||||||
window.setTimeout(function() {
|
window.setTimeout(function() {
|
||||||
$body.removeClass('is-loading');
|
$body.removeClass('is-loading');
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mobile?
|
// Mobile?
|
||||||
if (skel.vars.mobile)
|
if (skel.vars.mobile)
|
||||||
$body.addClass('is-mobile');
|
$body.addClass('is-mobile');
|
||||||
else
|
else
|
||||||
skel
|
skel
|
||||||
.on('-medium !medium', function() {
|
.on('-medium !medium', function() {
|
||||||
$body.removeClass('is-mobile');
|
$body.removeClass('is-mobile');
|
||||||
})
|
})
|
||||||
.on('+medium', function() {
|
.on('+medium', function() {
|
||||||
$body.addClass('is-mobile');
|
$body.addClass('is-mobile');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fix: Placeholder polyfill.
|
// Fix: Placeholder polyfill.
|
||||||
$('form').placeholder();
|
$('form').placeholder();
|
||||||
|
|
||||||
// Prioritize "important" elements on medium.
|
// Prioritize "important" elements on medium.
|
||||||
skel.on('+medium -medium', function() {
|
skel.on('+medium -medium', function() {
|
||||||
$.prioritize(
|
$.prioritize(
|
||||||
'.important\\28 medium\\29',
|
'.important\\28 medium\\29',
|
||||||
skel.breakpoint('medium').active
|
skel.breakpoint('medium').active
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Scrolly.
|
// Scrolly.
|
||||||
$('.scrolly')
|
$('.scrolly')
|
||||||
.scrolly({
|
.scrolly({
|
||||||
speed: 1500,
|
speed: 1500,
|
||||||
offset: $header.outerHeight()
|
offset: $header.outerHeight()
|
||||||
});
|
});
|
||||||
|
|
||||||
// Menu.
|
// Menu.
|
||||||
$('#menu')
|
$('#menu')
|
||||||
.append('<a href="#menu" class="close"></a>')
|
.append('<a href="#menu" class="close"></a>')
|
||||||
.appendTo($body)
|
.appendTo($body)
|
||||||
.panel({
|
.panel({
|
||||||
delay: 500,
|
delay: 500,
|
||||||
hideOnClick: true,
|
hideOnClick: true,
|
||||||
hideOnSwipe: true,
|
hideOnSwipe: true,
|
||||||
resetScroll: true,
|
resetScroll: true,
|
||||||
resetForms: true,
|
resetForms: true,
|
||||||
side: 'right',
|
side: 'right',
|
||||||
target: $body,
|
target: $body,
|
||||||
visibleClass: 'is-menu-visible'
|
visibleClass: 'is-menu-visible'
|
||||||
});
|
});
|
||||||
|
|
||||||
// Header.
|
// Header.
|
||||||
if (skel.vars.IEVersion < 9)
|
if (skel.vars.IEVersion < 9)
|
||||||
$header.removeClass('alt');
|
$header.removeClass('alt');
|
||||||
|
|
||||||
if ($banner.length > 0 &&
|
if ($banner.length > 0 &&
|
||||||
$header.hasClass('alt')) {
|
$header.hasClass('alt')) {
|
||||||
|
|
||||||
$window.on('resize', function() {
|
$window.on('resize', function() {
|
||||||
$window.trigger('scroll');
|
$window.trigger('scroll');
|
||||||
});
|
});
|
||||||
|
|
||||||
$banner.scrollex({
|
$banner.scrollex({
|
||||||
bottom: $header.outerHeight() + 1,
|
bottom: $header.outerHeight() + 1,
|
||||||
terminate: function() {
|
terminate: function() {
|
||||||
$header.removeClass('alt');
|
$header.removeClass('alt');
|
||||||
},
|
},
|
||||||
enter: function() {
|
enter: function() {
|
||||||
$header.addClass('alt');
|
$header.addClass('alt');
|
||||||
},
|
},
|
||||||
leave: function() {
|
leave: function() {
|
||||||
$header.removeClass('alt');
|
$header.removeClass('alt');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
@ -1,587 +1,587 @@
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Generate an indented list of links from a nav. Meant for use with panel().
|
* Generate an indented list of links from a nav. Meant for use with panel().
|
||||||
* @return {jQuery} jQuery object.
|
* @return {jQuery} jQuery object.
|
||||||
*/
|
*/
|
||||||
$.fn.navList = function() {
|
$.fn.navList = function() {
|
||||||
|
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
$a = $this.find('a'),
|
$a = $this.find('a'),
|
||||||
b = [];
|
b = [];
|
||||||
|
|
||||||
$a.each(function() {
|
$a.each(function() {
|
||||||
|
|
||||||
var $this = $(this),
|
var $this = $(this),
|
||||||
indent = Math.max(0, $this.parents('li').length - 1),
|
indent = Math.max(0, $this.parents('li').length - 1),
|
||||||
href = $this.attr('href'),
|
href = $this.attr('href'),
|
||||||
target = $this.attr('target');
|
target = $this.attr('target');
|
||||||
|
|
||||||
b.push(
|
b.push(
|
||||||
'<a ' +
|
'<a ' +
|
||||||
'class="link depth-' + indent + '"' +
|
'class="link depth-' + indent + '"' +
|
||||||
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
|
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
|
||||||
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
|
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
|
||||||
'>' +
|
'>' +
|
||||||
'<span class="indent-' + indent + '"></span>' +
|
'<span class="indent-' + indent + '"></span>' +
|
||||||
$this.text() +
|
$this.text() +
|
||||||
'</a>'
|
'</a>'
|
||||||
);
|
);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return b.join('');
|
return b.join('');
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Panel-ify an element.
|
* Panel-ify an element.
|
||||||
* @param {object} userConfig User config.
|
* @param {object} userConfig User config.
|
||||||
* @return {jQuery} jQuery object.
|
* @return {jQuery} jQuery object.
|
||||||
*/
|
*/
|
||||||
$.fn.panel = function(userConfig) {
|
$.fn.panel = function(userConfig) {
|
||||||
|
|
||||||
// No elements?
|
// No elements?
|
||||||
if (this.length == 0)
|
if (this.length == 0)
|
||||||
return $this;
|
return $this;
|
||||||
|
|
||||||
// Multiple elements?
|
// Multiple elements?
|
||||||
if (this.length > 1) {
|
if (this.length > 1) {
|
||||||
|
|
||||||
for (var i=0; i < this.length; i++)
|
for (var i=0; i < this.length; i++)
|
||||||
$(this[i]).panel(userConfig);
|
$(this[i]).panel(userConfig);
|
||||||
|
|
||||||
return $this;
|
return $this;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vars.
|
// Vars.
|
||||||
var $this = $(this),
|
var $this = $(this),
|
||||||
$body = $('body'),
|
$body = $('body'),
|
||||||
$window = $(window),
|
$window = $(window),
|
||||||
id = $this.attr('id'),
|
id = $this.attr('id'),
|
||||||
config;
|
config;
|
||||||
|
|
||||||
// Config.
|
// Config.
|
||||||
config = $.extend({
|
config = $.extend({
|
||||||
|
|
||||||
// Delay.
|
// Delay.
|
||||||
delay: 0,
|
delay: 0,
|
||||||
|
|
||||||
// Hide panel on link click.
|
// Hide panel on link click.
|
||||||
hideOnClick: false,
|
hideOnClick: false,
|
||||||
|
|
||||||
// Hide panel on escape keypress.
|
// Hide panel on escape keypress.
|
||||||
hideOnEscape: false,
|
hideOnEscape: false,
|
||||||
|
|
||||||
// Hide panel on swipe.
|
// Hide panel on swipe.
|
||||||
hideOnSwipe: false,
|
hideOnSwipe: false,
|
||||||
|
|
||||||
// Reset scroll position on hide.
|
// Reset scroll position on hide.
|
||||||
resetScroll: false,
|
resetScroll: false,
|
||||||
|
|
||||||
// Reset forms on hide.
|
// Reset forms on hide.
|
||||||
resetForms: false,
|
resetForms: false,
|
||||||
|
|
||||||
// Side of viewport the panel will appear.
|
// Side of viewport the panel will appear.
|
||||||
side: null,
|
side: null,
|
||||||
|
|
||||||
// Target element for "class".
|
// Target element for "class".
|
||||||
target: $this,
|
target: $this,
|
||||||
|
|
||||||
// Class to toggle.
|
// Class to toggle.
|
||||||
visibleClass: 'visible'
|
visibleClass: 'visible'
|
||||||
|
|
||||||
}, userConfig);
|
}, userConfig);
|
||||||
|
|
||||||
// Expand "target" if it's not a jQuery object already.
|
// Expand "target" if it's not a jQuery object already.
|
||||||
if (typeof config.target != 'jQuery')
|
if (typeof config.target != 'jQuery')
|
||||||
config.target = $(config.target);
|
config.target = $(config.target);
|
||||||
|
|
||||||
// Panel.
|
// Panel.
|
||||||
|
|
||||||
// Methods.
|
// Methods.
|
||||||
$this._hide = function(event) {
|
$this._hide = function(event) {
|
||||||
|
|
||||||
// Already hidden? Bail.
|
// Already hidden? Bail.
|
||||||
if (!config.target.hasClass(config.visibleClass))
|
if (!config.target.hasClass(config.visibleClass))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// If an event was provided, cancel it.
|
// If an event was provided, cancel it.
|
||||||
if (event) {
|
if (event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide.
|
// Hide.
|
||||||
config.target.removeClass(config.visibleClass);
|
config.target.removeClass(config.visibleClass);
|
||||||
|
|
||||||
// Post-hide stuff.
|
// Post-hide stuff.
|
||||||
window.setTimeout(function() {
|
window.setTimeout(function() {
|
||||||
|
|
||||||
// Reset scroll position.
|
// Reset scroll position.
|
||||||
if (config.resetScroll)
|
if (config.resetScroll)
|
||||||
$this.scrollTop(0);
|
$this.scrollTop(0);
|
||||||
|
|
||||||
// Reset forms.
|
// Reset forms.
|
||||||
if (config.resetForms)
|
if (config.resetForms)
|
||||||
$this.find('form').each(function() {
|
$this.find('form').each(function() {
|
||||||
this.reset();
|
this.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
}, config.delay);
|
}, config.delay);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Vendor fixes.
|
// Vendor fixes.
|
||||||
$this
|
$this
|
||||||
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
|
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
|
||||||
.css('-webkit-overflow-scrolling', 'touch');
|
.css('-webkit-overflow-scrolling', 'touch');
|
||||||
|
|
||||||
// Hide on click.
|
// Hide on click.
|
||||||
if (config.hideOnClick) {
|
if (config.hideOnClick) {
|
||||||
|
|
||||||
$this.find('a')
|
$this.find('a')
|
||||||
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
|
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
|
||||||
|
|
||||||
$this
|
$this
|
||||||
.on('click', 'a', function(event) {
|
.on('click', 'a', function(event) {
|
||||||
|
|
||||||
var $a = $(this),
|
var $a = $(this),
|
||||||
href = $a.attr('href'),
|
href = $a.attr('href'),
|
||||||
target = $a.attr('target');
|
target = $a.attr('target');
|
||||||
|
|
||||||
if (!href || href == '#' || href == '' || href == '#' + id)
|
if (!href || href == '#' || href == '' || href == '#' + id)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// Cancel original event.
|
// Cancel original event.
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
// Hide panel.
|
// Hide panel.
|
||||||
$this._hide();
|
$this._hide();
|
||||||
|
|
||||||
// Redirect to href.
|
// Redirect to href.
|
||||||
window.setTimeout(function() {
|
window.setTimeout(function() {
|
||||||
|
|
||||||
if (target == '_blank')
|
if (target == '_blank')
|
||||||
window.open(href);
|
window.open(href);
|
||||||
else
|
else
|
||||||
window.location.href = href;
|
window.location.href = href;
|
||||||
|
|
||||||
}, config.delay + 10);
|
}, config.delay + 10);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event: Touch stuff.
|
// Event: Touch stuff.
|
||||||
$this.on('touchstart', function(event) {
|
$this.on('touchstart', function(event) {
|
||||||
|
|
||||||
$this.touchPosX = event.originalEvent.touches[0].pageX;
|
$this.touchPosX = event.originalEvent.touches[0].pageX;
|
||||||
$this.touchPosY = event.originalEvent.touches[0].pageY;
|
$this.touchPosY = event.originalEvent.touches[0].pageY;
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
$this.on('touchmove', function(event) {
|
$this.on('touchmove', function(event) {
|
||||||
|
|
||||||
if ($this.touchPosX === null
|
if ($this.touchPosX === null
|
||||||
|| $this.touchPosY === null)
|
|| $this.touchPosY === null)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
|
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
|
||||||
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
|
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
|
||||||
th = $this.outerHeight(),
|
th = $this.outerHeight(),
|
||||||
ts = ($this.get(0).scrollHeight - $this.scrollTop());
|
ts = ($this.get(0).scrollHeight - $this.scrollTop());
|
||||||
|
|
||||||
// Hide on swipe?
|
// Hide on swipe?
|
||||||
if (config.hideOnSwipe) {
|
if (config.hideOnSwipe) {
|
||||||
|
|
||||||
var result = false,
|
var result = false,
|
||||||
boundary = 20,
|
boundary = 20,
|
||||||
delta = 50;
|
delta = 50;
|
||||||
|
|
||||||
switch (config.side) {
|
switch (config.side) {
|
||||||
|
|
||||||
case 'left':
|
case 'left':
|
||||||
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
|
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'right':
|
case 'right':
|
||||||
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
|
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'top':
|
case 'top':
|
||||||
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
|
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
|
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (result) {
|
if (result) {
|
||||||
|
|
||||||
$this.touchPosX = null;
|
$this.touchPosX = null;
|
||||||
$this.touchPosY = null;
|
$this.touchPosY = null;
|
||||||
$this._hide();
|
$this._hide();
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent vertical scrolling past the top or bottom.
|
// Prevent vertical scrolling past the top or bottom.
|
||||||
if (($this.scrollTop() < 0 && diffY < 0)
|
if (($this.scrollTop() < 0 && diffY < 0)
|
||||||
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
|
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Event: Prevent certain events inside the panel from bubbling.
|
// Event: Prevent certain events inside the panel from bubbling.
|
||||||
$this.on('click touchend touchstart touchmove', function(event) {
|
$this.on('click touchend touchstart touchmove', function(event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
|
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
|
||||||
$this.on('click', 'a[href="#' + id + '"]', function(event) {
|
$this.on('click', 'a[href="#' + id + '"]', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
config.target.removeClass(config.visibleClass);
|
config.target.removeClass(config.visibleClass);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Body.
|
// Body.
|
||||||
|
|
||||||
// Event: Hide panel on body click/tap.
|
// Event: Hide panel on body click/tap.
|
||||||
$body.on('click touchend', function(event) {
|
$body.on('click touchend', function(event) {
|
||||||
$this._hide(event);
|
$this._hide(event);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Event: Toggle.
|
// Event: Toggle.
|
||||||
$body.on('click', 'a[href="#' + id + '"]', function(event) {
|
$body.on('click', 'a[href="#' + id + '"]', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
config.target.toggleClass(config.visibleClass);
|
config.target.toggleClass(config.visibleClass);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Window.
|
// Window.
|
||||||
|
|
||||||
// Event: Hide on ESC.
|
// Event: Hide on ESC.
|
||||||
if (config.hideOnEscape)
|
if (config.hideOnEscape)
|
||||||
$window.on('keydown', function(event) {
|
$window.on('keydown', function(event) {
|
||||||
|
|
||||||
if (event.keyCode == 27)
|
if (event.keyCode == 27)
|
||||||
$this._hide(event);
|
$this._hide(event);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return $this;
|
return $this;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Apply "placeholder" attribute polyfill to one or more forms.
|
* Apply "placeholder" attribute polyfill to one or more forms.
|
||||||
* @return {jQuery} jQuery object.
|
* @return {jQuery} jQuery object.
|
||||||
*/
|
*/
|
||||||
$.fn.placeholder = function() {
|
$.fn.placeholder = function() {
|
||||||
|
|
||||||
// Browser natively supports placeholders? Bail.
|
// Browser natively supports placeholders? Bail.
|
||||||
if (typeof (document.createElement('input')).placeholder != 'undefined')
|
if (typeof (document.createElement('input')).placeholder != 'undefined')
|
||||||
return $(this);
|
return $(this);
|
||||||
|
|
||||||
// No elements?
|
// No elements?
|
||||||
if (this.length == 0)
|
if (this.length == 0)
|
||||||
return $this;
|
return $this;
|
||||||
|
|
||||||
// Multiple elements?
|
// Multiple elements?
|
||||||
if (this.length > 1) {
|
if (this.length > 1) {
|
||||||
|
|
||||||
for (var i=0; i < this.length; i++)
|
for (var i=0; i < this.length; i++)
|
||||||
$(this[i]).placeholder();
|
$(this[i]).placeholder();
|
||||||
|
|
||||||
return $this;
|
return $this;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vars.
|
// Vars.
|
||||||
var $this = $(this);
|
var $this = $(this);
|
||||||
|
|
||||||
// Text, TextArea.
|
// Text, TextArea.
|
||||||
$this.find('input[type=text],textarea')
|
$this.find('input[type=text],textarea')
|
||||||
.each(function() {
|
.each(function() {
|
||||||
|
|
||||||
var i = $(this);
|
var i = $(this);
|
||||||
|
|
||||||
if (i.val() == ''
|
if (i.val() == ''
|
||||||
|| i.val() == i.attr('placeholder'))
|
|| i.val() == i.attr('placeholder'))
|
||||||
i
|
i
|
||||||
.addClass('polyfill-placeholder')
|
.addClass('polyfill-placeholder')
|
||||||
.val(i.attr('placeholder'));
|
.val(i.attr('placeholder'));
|
||||||
|
|
||||||
})
|
})
|
||||||
.on('blur', function() {
|
.on('blur', function() {
|
||||||
|
|
||||||
var i = $(this);
|
var i = $(this);
|
||||||
|
|
||||||
if (i.attr('name').match(/-polyfill-field$/))
|
if (i.attr('name').match(/-polyfill-field$/))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
if (i.val() == '')
|
if (i.val() == '')
|
||||||
i
|
i
|
||||||
.addClass('polyfill-placeholder')
|
.addClass('polyfill-placeholder')
|
||||||
.val(i.attr('placeholder'));
|
.val(i.attr('placeholder'));
|
||||||
|
|
||||||
})
|
})
|
||||||
.on('focus', function() {
|
.on('focus', function() {
|
||||||
|
|
||||||
var i = $(this);
|
var i = $(this);
|
||||||
|
|
||||||
if (i.attr('name').match(/-polyfill-field$/))
|
if (i.attr('name').match(/-polyfill-field$/))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
if (i.val() == i.attr('placeholder'))
|
if (i.val() == i.attr('placeholder'))
|
||||||
i
|
i
|
||||||
.removeClass('polyfill-placeholder')
|
.removeClass('polyfill-placeholder')
|
||||||
.val('');
|
.val('');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Password.
|
// Password.
|
||||||
$this.find('input[type=password]')
|
$this.find('input[type=password]')
|
||||||
.each(function() {
|
.each(function() {
|
||||||
|
|
||||||
var i = $(this);
|
var i = $(this);
|
||||||
var x = $(
|
var x = $(
|
||||||
$('<div>')
|
$('<div>')
|
||||||
.append(i.clone())
|
.append(i.clone())
|
||||||
.remove()
|
.remove()
|
||||||
.html()
|
.html()
|
||||||
.replace(/type="password"/i, 'type="text"')
|
.replace(/type="password"/i, 'type="text"')
|
||||||
.replace(/type=password/i, 'type=text')
|
.replace(/type=password/i, 'type=text')
|
||||||
);
|
);
|
||||||
|
|
||||||
if (i.attr('id') != '')
|
if (i.attr('id') != '')
|
||||||
x.attr('id', i.attr('id') + '-polyfill-field');
|
x.attr('id', i.attr('id') + '-polyfill-field');
|
||||||
|
|
||||||
if (i.attr('name') != '')
|
if (i.attr('name') != '')
|
||||||
x.attr('name', i.attr('name') + '-polyfill-field');
|
x.attr('name', i.attr('name') + '-polyfill-field');
|
||||||
|
|
||||||
x.addClass('polyfill-placeholder')
|
x.addClass('polyfill-placeholder')
|
||||||
.val(x.attr('placeholder')).insertAfter(i);
|
.val(x.attr('placeholder')).insertAfter(i);
|
||||||
|
|
||||||
if (i.val() == '')
|
if (i.val() == '')
|
||||||
i.hide();
|
i.hide();
|
||||||
else
|
else
|
||||||
x.hide();
|
x.hide();
|
||||||
|
|
||||||
i
|
i
|
||||||
.on('blur', function(event) {
|
.on('blur', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
||||||
|
|
||||||
if (i.val() == '') {
|
if (i.val() == '') {
|
||||||
|
|
||||||
i.hide();
|
i.hide();
|
||||||
x.show();
|
x.show();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
x
|
x
|
||||||
.on('focus', function(event) {
|
.on('focus', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
|
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
|
||||||
|
|
||||||
x.hide();
|
x.hide();
|
||||||
|
|
||||||
i
|
i
|
||||||
.show()
|
.show()
|
||||||
.focus();
|
.focus();
|
||||||
|
|
||||||
})
|
})
|
||||||
.on('keypress', function(event) {
|
.on('keypress', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
x.val('');
|
x.val('');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Events.
|
// Events.
|
||||||
$this
|
$this
|
||||||
.on('submit', function() {
|
.on('submit', function() {
|
||||||
|
|
||||||
$this.find('input[type=text],input[type=password],textarea')
|
$this.find('input[type=text],input[type=password],textarea')
|
||||||
.each(function(event) {
|
.each(function(event) {
|
||||||
|
|
||||||
var i = $(this);
|
var i = $(this);
|
||||||
|
|
||||||
if (i.attr('name').match(/-polyfill-field$/))
|
if (i.attr('name').match(/-polyfill-field$/))
|
||||||
i.attr('name', '');
|
i.attr('name', '');
|
||||||
|
|
||||||
if (i.val() == i.attr('placeholder')) {
|
if (i.val() == i.attr('placeholder')) {
|
||||||
|
|
||||||
i.removeClass('polyfill-placeholder');
|
i.removeClass('polyfill-placeholder');
|
||||||
i.val('');
|
i.val('');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
.on('reset', function(event) {
|
.on('reset', function(event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
$this.find('select')
|
$this.find('select')
|
||||||
.val($('option:first').val());
|
.val($('option:first').val());
|
||||||
|
|
||||||
$this.find('input,textarea')
|
$this.find('input,textarea')
|
||||||
.each(function() {
|
.each(function() {
|
||||||
|
|
||||||
var i = $(this),
|
var i = $(this),
|
||||||
x;
|
x;
|
||||||
|
|
||||||
i.removeClass('polyfill-placeholder');
|
i.removeClass('polyfill-placeholder');
|
||||||
|
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
|
|
||||||
case 'submit':
|
case 'submit':
|
||||||
case 'reset':
|
case 'reset':
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'password':
|
case 'password':
|
||||||
i.val(i.attr('defaultValue'));
|
i.val(i.attr('defaultValue'));
|
||||||
|
|
||||||
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
||||||
|
|
||||||
if (i.val() == '') {
|
if (i.val() == '') {
|
||||||
i.hide();
|
i.hide();
|
||||||
x.show();
|
x.show();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
i.show();
|
i.show();
|
||||||
x.hide();
|
x.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'checkbox':
|
case 'checkbox':
|
||||||
case 'radio':
|
case 'radio':
|
||||||
i.attr('checked', i.attr('defaultValue'));
|
i.attr('checked', i.attr('defaultValue'));
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'text':
|
case 'text':
|
||||||
case 'textarea':
|
case 'textarea':
|
||||||
i.val(i.attr('defaultValue'));
|
i.val(i.attr('defaultValue'));
|
||||||
|
|
||||||
if (i.val() == '') {
|
if (i.val() == '') {
|
||||||
i.addClass('polyfill-placeholder');
|
i.addClass('polyfill-placeholder');
|
||||||
i.val(i.attr('placeholder'));
|
i.val(i.attr('placeholder'));
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
i.val(i.attr('defaultValue'));
|
i.val(i.attr('defaultValue'));
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return $this;
|
return $this;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves elements to/from the first positions of their respective parents.
|
* Moves elements to/from the first positions of their respective parents.
|
||||||
* @param {jQuery} $elements Elements (or selector) to move.
|
* @param {jQuery} $elements Elements (or selector) to move.
|
||||||
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
|
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
|
||||||
*/
|
*/
|
||||||
$.prioritize = function($elements, condition) {
|
$.prioritize = function($elements, condition) {
|
||||||
|
|
||||||
var key = '__prioritize';
|
var key = '__prioritize';
|
||||||
|
|
||||||
// Expand $elements if it's not already a jQuery object.
|
// Expand $elements if it's not already a jQuery object.
|
||||||
if (typeof $elements != 'jQuery')
|
if (typeof $elements != 'jQuery')
|
||||||
$elements = $($elements);
|
$elements = $($elements);
|
||||||
|
|
||||||
// Step through elements.
|
// Step through elements.
|
||||||
$elements.each(function() {
|
$elements.each(function() {
|
||||||
|
|
||||||
var $e = $(this), $p,
|
var $e = $(this), $p,
|
||||||
$parent = $e.parent();
|
$parent = $e.parent();
|
||||||
|
|
||||||
// No parent? Bail.
|
// No parent? Bail.
|
||||||
if ($parent.length == 0)
|
if ($parent.length == 0)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// Not moved? Move it.
|
// Not moved? Move it.
|
||||||
if (!$e.data(key)) {
|
if (!$e.data(key)) {
|
||||||
|
|
||||||
// Condition is false? Bail.
|
// Condition is false? Bail.
|
||||||
if (!condition)
|
if (!condition)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
|
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
|
||||||
$p = $e.prev();
|
$p = $e.prev();
|
||||||
|
|
||||||
// Couldn't find anything? Means this element's already at the top, so bail.
|
// Couldn't find anything? Means this element's already at the top, so bail.
|
||||||
if ($p.length == 0)
|
if ($p.length == 0)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// Move element to top of parent.
|
// Move element to top of parent.
|
||||||
$e.prependTo($parent);
|
$e.prependTo($parent);
|
||||||
|
|
||||||
// Mark element as moved.
|
// Mark element as moved.
|
||||||
$e.data(key, $p);
|
$e.data(key, $p);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Moved already?
|
// Moved already?
|
||||||
else {
|
else {
|
||||||
|
|
||||||
// Condition is true? Bail.
|
// Condition is true? Bail.
|
||||||
if (condition)
|
if (condition)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
$p = $e.data(key);
|
$p = $e.data(key);
|
||||||
|
|
||||||
// Move element back to its original location (using our placeholder).
|
// Move element back to its original location (using our placeholder).
|
||||||
$e.insertAfter($p);
|
$e.insertAfter($p);
|
||||||
|
|
||||||
// Unmark element as moved.
|
// Unmark element as moved.
|
||||||
$e.removeData(key);
|
$e.removeData(key);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
@ -2,87 +2,87 @@
|
||||||
/* Banner */
|
/* Banner */
|
||||||
|
|
||||||
#banner {
|
#banner {
|
||||||
@include vendor('display', 'flex');
|
@include vendor('display', 'flex');
|
||||||
@include vendor('flex-direction', 'column');
|
@include vendor('flex-direction', 'column');
|
||||||
@include vendor('justify-content', 'center');
|
@include vendor('justify-content', 'center');
|
||||||
cursor: default;
|
cursor: default;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
min-height: 35em;
|
min-height: 35em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@include vendor('transform', 'scale(1)');
|
@include vendor('transform', 'scale(1)');
|
||||||
@include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
|
@include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1.75em;
|
font-size: 1.75em;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
padding: 0.35em 1em;
|
padding: 0.35em 1em;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
@include vendor('transition', 'width 1s ease');
|
@include vendor('transition', 'width 1s ease');
|
||||||
@include vendor('transition-delay', '0.25s');
|
@include vendor('transition-delay', '0.25s');
|
||||||
background: _palette(fg-bold);
|
background: _palette(fg-bold);
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@include vendor('transition', 'opacity 0.5s ease');
|
@include vendor('transition', 'opacity 0.5s ease');
|
||||||
@include vendor('transition-delay', '1s');
|
@include vendor('transition-delay', '1s');
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
@include padding(7em, 3em);
|
@include padding(7em, 3em);
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
br {
|
br {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body.is-loading {
|
body.is-loading {
|
||||||
#banner {
|
#banner {
|
||||||
h1 {
|
h1 {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@include vendor('transform', 'scale(0.95)');
|
@include vendor('transform', 'scale(0.95)');
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,234 +2,234 @@
|
||||||
/* Basic */
|
/* Basic */
|
||||||
|
|
||||||
@-ms-viewport {
|
@-ms-viewport {
|
||||||
width: device-width;
|
width: device-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: _palette(bg);
|
background: _palette(bg);
|
||||||
|
|
||||||
&.is-loading {
|
&.is-loading {
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
@include vendor('animation', 'none !important');
|
@include vendor('animation', 'none !important');
|
||||||
@include vendor('transition', 'none !important');
|
@include vendor('transition', 'none !important');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body, input, select, textarea {
|
body, input, select, textarea {
|
||||||
color: _palette(fg);
|
color: _palette(fg);
|
||||||
font-family: _font(family);
|
font-family: _font(family);
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
font-weight: _font(weight);
|
font-weight: _font(weight);
|
||||||
letter-spacing: _size(letter-spacing);
|
letter-spacing: _size(letter-spacing);
|
||||||
line-height: 1.65em;
|
line-height: 1.65em;
|
||||||
|
|
||||||
@include breakpoint(xlarge) {
|
@include breakpoint(xlarge) {
|
||||||
font-size: 13pt;
|
font-size: 13pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(large) {
|
@include breakpoint(large) {
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
letter-spacing: _size(letter-spacing) * 0.5;
|
letter-spacing: _size(letter-spacing) * 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
|
@include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
|
||||||
border-bottom: dotted 1px;
|
border-bottom: dotted 1px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom-color: transparent;
|
border-bottom-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
strong, b {
|
strong, b {
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
font-weight: _font(weight-bold);
|
font-weight: _font(weight-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
em, i {
|
em, i {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6,
|
.h1, .h2, .h3, .h4, .h5, .h6,
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
font-weight: _font(weight-extrabold);
|
font-weight: _font(weight-extrabold);
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2,
|
h2,
|
||||||
.h2 {
|
.h2 {
|
||||||
font-size: 1.35em;
|
font-size: 1.35em;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.h3,
|
.h3,
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.15em;
|
font-size: 1.15em;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4,
|
.h4,
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h5,
|
.h5,
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h6,
|
.h6,
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub {
|
sub {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0.5em;
|
top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: solid 2px _palette(border);
|
border-bottom: solid 2px _palette(border);
|
||||||
margin: (_size(element-margin) * 1.5) 0;
|
margin: (_size(element-margin) * 1.5) 0;
|
||||||
|
|
||||||
&.major {
|
&.major {
|
||||||
margin: (_size(element-margin) * 2.25) 0;
|
margin: (_size(element-margin) * 2.25) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: solid 4px _palette(border);
|
border-left: solid 4px _palette(border);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
padding: 0.5em 0 0.5em 2em;
|
padding: 0.5em 0 0.5em 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: _palette(border-bg);
|
background: _palette(border-bg);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: _font(family-fixed);
|
font-family: _font(family-fixed);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
margin: 0 0.25em;
|
margin: 0 0.25em;
|
||||||
padding: 0.25em 0.65em;
|
padding: 0.25em 0.65em;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
font-family: _font(family-fixed);
|
font-family: _font(family-fixed);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
|
|
||||||
code {
|
code {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.75em;
|
line-height: 1.75em;
|
||||||
padding: 1em 1.5em;
|
padding: 1em 1.5em;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-left {
|
.align-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-center {
|
.align-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-right {
|
.align-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
p {
|
p {
|
||||||
color: _palette(fg-light);
|
color: _palette(fg-light);
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.25em;
|
top: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 + p {
|
h2 + p {
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 + p {
|
h3 + p {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 + p,
|
h4 + p,
|
||||||
h5 + p,
|
h5 + p,
|
||||||
h6 + p {
|
h6 + p {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.major {
|
&.major {
|
||||||
margin: 0 0 (_size(element-margin) * 1.75) 0;
|
margin: 0 0 (_size(element-margin) * 1.75) 0;
|
||||||
|
|
||||||
h2, h3, h4, h5, h6 {
|
h2, h3, h4, h5, h6 {
|
||||||
border-bottom: solid 2px _palette(border);
|
border-bottom: solid 2px _palette(border);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: _palette(fg);
|
color: _palette(fg);
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
br {
|
br {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,70 +2,70 @@
|
||||||
/* Box */
|
/* Box */
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: solid 2px _palette(border);
|
border: solid 2px _palette(border);
|
||||||
margin-bottom: _size(element-margin);
|
margin-bottom: _size(element-margin);
|
||||||
padding: 1.5em;
|
padding: 1.5em;
|
||||||
|
|
||||||
> :last-child,
|
> :last-child,
|
||||||
> :last-child > :last-child,
|
> :last-child > :last-child,
|
||||||
> :last-child > :last-child > :last-child {
|
> :last-child > :last-child > :last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
&.alt {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icon */
|
/* Icon */
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
@include icon;
|
@include icon;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> .label {
|
> .label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.major {
|
&.major {
|
||||||
@include vendor('transform', 'rotate(-45deg)');
|
@include vendor('transform', 'rotate(-45deg)');
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: solid 2px _palette(border);
|
border: solid 2px _palette(border);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1.35em;
|
font-size: 1.35em;
|
||||||
height: calc(3em + 2px);
|
height: calc(3em + 2px);
|
||||||
line-height: 3em;
|
line-height: 3em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: calc(3em + 2px);
|
width: calc(3em + 2px);
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
@include vendor('transform', 'rotate(45deg)');
|
@include vendor('transform', 'rotate(45deg)');
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style1 {
|
&.style1 {
|
||||||
color: _palette(bg);
|
color: _palette(bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style2 {
|
&.style2 {
|
||||||
color: _palette(accent2, bg);
|
color: _palette(accent2, bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style3 {
|
&.style3 {
|
||||||
color: _palette(accent3, bg);
|
color: _palette(accent3, bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style4 {
|
&.style4 {
|
||||||
color: _palette(accent4, bg);
|
color: _palette(accent4, bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6,78 +6,78 @@ input[type="reset"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
button,
|
button,
|
||||||
.button {
|
.button {
|
||||||
@include vendor('appearance', 'none');
|
@include vendor('appearance', 'none');
|
||||||
@include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
|
@include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: inset 0 0 0 2px _palette(border);
|
box-shadow: inset 0 0 0 2px _palette(border);
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
font-weight: _font(weight-bold);
|
font-weight: _font(weight-bold);
|
||||||
height: 3.125em;
|
height: 3.125em;
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
line-height: 3.125em;
|
line-height: 3.125em;
|
||||||
padding: 0 2.75em;
|
padding: 0 2.75em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: _palette(border-bg);
|
background-color: _palette(border-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: _palette(border2-bg);
|
background-color: _palette(border2-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icon {
|
&.icon {
|
||||||
&:before {
|
&:before {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fit {
|
&.fit {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.big {
|
&.big {
|
||||||
font-size: 1.35em;
|
font-size: 1.35em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.special {
|
&.special {
|
||||||
background-color: _palette(accent3, bg);
|
background-color: _palette(accent3, bg);
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
color: _palette(accent3, fg-bold) !important;
|
color: _palette(accent3, fg-bold) !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten(_palette(accent3, bg), 5) !important;
|
background-color: lighten(_palette(accent3, bg), 5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: darken(_palette(accent3, bg), 5) !important;
|
background-color: darken(_palette(accent3, bg), 5) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@include vendor('pointer-events', 'none');
|
@include vendor('pointer-events', 'none');
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
height: 3.75em;
|
height: 3.75em;
|
||||||
line-height: 3.75em;
|
line-height: 3.75em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -5,46 +5,46 @@
|
||||||
/* CTA */
|
/* CTA */
|
||||||
|
|
||||||
#cta {
|
#cta {
|
||||||
.inner {
|
.inner {
|
||||||
@include vendor('display', 'flex');
|
@include vendor('display', 'flex');
|
||||||
max-width: 45em;
|
max-width: 45em;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@include vendor('order', '1');
|
@include vendor('order', '1');
|
||||||
padding-right: 3em;
|
padding-right: 3em;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
@include vendor('order', '2');
|
@include vendor('order', '2');
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
max-width: 20em;
|
max-width: 20em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
.actions {
|
.actions {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,74 +2,74 @@
|
||||||
/* Features */
|
/* Features */
|
||||||
|
|
||||||
.features {
|
.features {
|
||||||
@include vendor('display', 'flex');
|
@include vendor('display', 'flex');
|
||||||
@include vendor('flex-wrap', 'wrap');
|
@include vendor('flex-wrap', 'wrap');
|
||||||
@include vendor('justify-content', 'center');
|
@include vendor('justify-content', 'center');
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
@include padding(4em, 4em, (0,0,0,2em));
|
@include padding(4em, 4em, (0,0,0,2em));
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
@for $i from 1 through _misc(max-features) {
|
@for $i from 1 through _misc(max-features) {
|
||||||
$j: 0.035 * $i;
|
$j: 0.035 * $i;
|
||||||
|
|
||||||
&:nth-child(#{$i}) {
|
&:nth-child(#{$i}) {
|
||||||
background-color: rgba(0,0,0, $j);
|
background-color: rgba(0,0,0, $j);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: block;
|
display: block;
|
||||||
color: _palette(accent1, bg);
|
color: _palette(accent1, bg);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1.75em;
|
left: 1.75em;
|
||||||
top: 2.75em;
|
top: 2.75em;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-last-child(1) {
|
&:nth-last-child(1) {
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-last-child(2) {
|
&:nth-last-child(2) {
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
@include padding(3em, 2em);
|
@include padding(3em, 2em);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
left: 0;
|
left: 0;
|
||||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
@include padding(3em, 0);
|
@include padding(3em, 0);
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
border-top: solid 2px _palette(border);
|
border-top: solid 2px _palette(border);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,15 +2,15 @@
|
||||||
/* Form */
|
/* Form */
|
||||||
|
|
||||||
form {
|
form {
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
font-weight: _font(weight-bold);
|
font-weight: _font(weight-bold);
|
||||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
|
|
@ -18,149 +18,149 @@ input[type="password"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
@include vendor('appearance', 'none');
|
@include vendor('appearance', 'none');
|
||||||
background: _palette(border-bg);
|
background: _palette(border-bg);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: none;
|
border: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
display: block;
|
display: block;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:invalid {
|
&:invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 2px _palette(accent1, bg);
|
box-shadow: 0 0 0 2px _palette(accent1, bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-wrapper {
|
.select-wrapper {
|
||||||
@include icon;
|
@include icon;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
@include vendor('pointer-events', 'none');
|
@include vendor('pointer-events', 'none');
|
||||||
color: _palette(border);
|
color: _palette(border);
|
||||||
content: '\f078';
|
content: '\f078';
|
||||||
display: block;
|
display: block;
|
||||||
height: _size(element-height);
|
height: _size(element-height);
|
||||||
line-height: _size(element-height);
|
line-height: _size(element-height);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: _size(element-height);
|
width: _size(element-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
select::-ms-expand {
|
select::-ms-expand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="password"],
|
input[type="password"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
select {
|
select {
|
||||||
height: _size(element-height);
|
height: _size(element-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
padding: 0.75em 1em;
|
padding: 0.75em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"],
|
input[type="checkbox"],
|
||||||
input[type="radio"], {
|
input[type="radio"], {
|
||||||
@include vendor('appearance', 'none');
|
@include vendor('appearance', 'none');
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: -2em;
|
margin-right: -2em;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
|
||||||
& + label {
|
& + label {
|
||||||
@include icon;
|
@include icon;
|
||||||
color: _palette(fg);
|
color: _palette(fg);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: _font(weight);
|
font-weight: _font(weight);
|
||||||
padding-left: (_size(element-height) * 0.6) + 0.75em;
|
padding-left: (_size(element-height) * 0.6) + 0.75em;
|
||||||
padding-right: 0.75em;
|
padding-right: 0.75em;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: _palette(border-bg);
|
background: _palette(border-bg);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: (_size(element-height) * 0.6);
|
height: (_size(element-height) * 0.6);
|
||||||
left: 0;
|
left: 0;
|
||||||
line-height: (_size(element-height) * 0.575);
|
line-height: (_size(element-height) * 0.575);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: (_size(element-height) * 0.6);
|
width: (_size(element-height) * 0.6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked + label {
|
&:checked + label {
|
||||||
&:before {
|
&:before {
|
||||||
background: _palette(bg);
|
background: _palette(bg);
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
content: '\f00c';
|
content: '\f00c';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus + label {
|
&:focus + label {
|
||||||
&:before {
|
&:before {
|
||||||
box-shadow: 0 0 0 2px _palette(accent1, bg);
|
box-shadow: 0 0 0 2px _palette(accent1, bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
& + label {
|
& + label {
|
||||||
&:before {
|
&:before {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
& + label {
|
& + label {
|
||||||
&:before {
|
&:before {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: _palette(fg-light) !important;
|
color: _palette(fg-light) !important;
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-moz-placeholder {
|
:-moz-placeholder {
|
||||||
color: _palette(fg-light) !important;
|
color: _palette(fg-light) !important;
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-placeholder {
|
::-moz-placeholder {
|
||||||
color: _palette(fg-light) !important;
|
color: _palette(fg-light) !important;
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-ms-input-placeholder {
|
:-ms-input-placeholder {
|
||||||
color: _palette(fg-light) !important;
|
color: _palette(fg-light) !important;
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formerize-placeholder {
|
.formerize-placeholder {
|
||||||
color: _palette(fg-light) !important;
|
color: _palette(fg-light) !important;
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
@ -2,104 +2,104 @@
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
|
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
|
||||||
background: _palette(bg);
|
background: _palette(bg);
|
||||||
height: 3em;
|
height: 3em;
|
||||||
left: 0;
|
left: 0;
|
||||||
line-height: 3em;
|
line-height: 3em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: _misc(z-index-base);
|
z-index: _misc(z-index-base);
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
|
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
|
||||||
height: inherit;
|
height: inherit;
|
||||||
left: 1.25em;
|
left: 1.25em;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border: 0;
|
border: 0;
|
||||||
display: block;
|
display: block;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
height: inherit;
|
height: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
> ul {
|
> ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
border: 0;
|
border: 0;
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
padding: 0 1.5em;
|
padding: 0 1.5em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&.menuToggle {
|
&.menuToggle {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
background-image: url('images/bars.svg');
|
background-image: url('images/bars.svg');
|
||||||
background-position: right center;
|
background-position: right center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 3.75em;
|
height: 3.75em;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
padding: 0 1.5em;
|
padding: 0 1.5em;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
padding: 0 0 0 1.5em;
|
padding: 0 0 0 1.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
&.alt {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@include vendor('pointer-events', 'none');
|
@include vendor('pointer-events', 'none');
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,44 +2,44 @@
|
||||||
/* Image */
|
/* Image */
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 0;
|
border: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 0 2em 2em 0;
|
margin: 0 2em 2em 0;
|
||||||
top: 0.25em;
|
top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
float: right;
|
float: right;
|
||||||
margin: 0 0 2em 2em;
|
margin: 0 0 2em 2em;
|
||||||
top: 0.25em;
|
top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.left,
|
&.left,
|
||||||
&.right {
|
&.right {
|
||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fit {
|
&.fit {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,218 +2,218 @@
|
||||||
/* List */
|
/* List */
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
list-style: decimal;
|
list-style: decimal;
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
padding-left: 1.25em;
|
padding-left: 1.25em;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding-left: 0.25em;
|
padding-left: 0.25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: disc;
|
list-style: disc;
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
&.alt {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border-top: solid 1px _palette(border);
|
border-top: solid 1px _palette(border);
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icons {
|
&.icons {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 1em 0 0;
|
padding: 0 1em 0 0;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.major {
|
&.major {
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding-right: 3.5em;
|
padding-right: 3.5em;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&.icons--flex {
|
&.icons--flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
max-width: 980px;
|
max-width: 980px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
flex-basis: 33.333%;
|
flex-basis: 33.333%;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 40px 0;
|
margin: 40px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons__title {
|
.icons__title {
|
||||||
display: block;
|
display: block;
|
||||||
@extend .h3;
|
@extend .h3;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.actions {
|
&.actions {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 (_size(element-margin) * 0.75) 0 0;
|
padding: 0 (_size(element-margin) * 0.75) 0 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
li {
|
li {
|
||||||
padding: 0 (_size(element-margin) * 0.375) 0 0;
|
padding: 0 (_size(element-margin) * 0.375) 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.vertical {
|
&.vertical {
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
padding: (_size(element-margin) * 0.75) 0 0 0;
|
padding: (_size(element-margin) * 0.75) 0 0 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
li {
|
li {
|
||||||
padding: (_size(element-margin) * 0.375) 0 0 0;
|
padding: (_size(element-margin) * 0.375) 0 0 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fit {
|
&.fit {
|
||||||
display: table;
|
display: table;
|
||||||
margin-left: (_size(element-margin) * -0.75);
|
margin-left: (_size(element-margin) * -0.75);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: calc(100% + #{(_size(element-margin) * 0.75)});
|
width: calc(100% + #{(_size(element-margin) * 0.75)});
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding: 0 0 0 (_size(element-margin) * 0.75);
|
padding: 0 0 0 (_size(element-margin) * 0.75);
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
margin-left: (_size(element-margin) * -0.375);
|
margin-left: (_size(element-margin) * -0.375);
|
||||||
width: calc(100% + #{(_size(element-margin) * 0.375)});
|
width: calc(100% + #{(_size(element-margin) * 0.375)});
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: 0 0 0 (_size(element-margin) * 0.375);
|
padding: 0 0 0 (_size(element-margin) * 0.375);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
padding: (_size(element-margin) * 0.5) 0 0 0;
|
padding: (_size(element-margin) * 0.5) 0 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin: 0 auto !important;
|
margin: 0 auto !important;
|
||||||
max-width: 30em;
|
max-width: 30em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&.icon {
|
&.icon {
|
||||||
&:before {
|
&:before {
|
||||||
margin-left: -1em;
|
margin-left: -1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
li {
|
li {
|
||||||
padding: (_size(element-margin) * 0.25) 0 0 0;
|
padding: (_size(element-margin) * 0.25) 0 0 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,102 +2,102 @@
|
||||||
/* Page Wrapper + Menu */
|
/* Page Wrapper + Menu */
|
||||||
|
|
||||||
#page-wrapper {
|
#page-wrapper {
|
||||||
@include vendor('transition', 'opacity #{_duration(menu)} ease');
|
@include vendor('transition', 'opacity #{_duration(menu)} ease');
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
padding-top: 3em;
|
padding-top: 3em;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: rgba(0,0,0,0);
|
background: rgba(0,0,0,0);
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
display: none;
|
display: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: _misc(z-index-base) + 1;
|
z-index: _misc(z-index-base) + 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
@include vendor('transform', 'translateX(20em)');
|
@include vendor('transform', 'translateX(20em)');
|
||||||
@include vendor('transition', 'transform #{_duration(menu)} ease');
|
@include vendor('transition', 'transform #{_duration(menu)} ease');
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
background: _palette(accent1, bg);
|
background: _palette(accent1, bg);
|
||||||
color: _palette(accent1, fg-bold);
|
color: _palette(accent1, fg-bold);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 3em 2em;
|
padding: 3em 2em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 20em;
|
width: 20em;
|
||||||
z-index: _misc(z-index-base) + 2;
|
z-index: _misc(z-index-base) + 2;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
border-top: solid 1px _palette(accent1, border);
|
border-top: solid 1px _palette(accent1, border);
|
||||||
margin: 0.5em 0 0 0;
|
margin: 0.5em 0 0 0;
|
||||||
padding: 0.5em 0 0 0;
|
padding: 0.5em 0 0 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top: 0 !important;
|
border-top: 0 !important;
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
line-height: 3em;
|
line-height: 3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
background-image: url('images/close.svg');
|
background-image: url('images/close.svg');
|
||||||
background-position: 4.85em 1em;
|
background-position: 4.85em 1em;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 0;
|
border: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
height: 3em;
|
height: 3em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 7em;
|
width: 7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
padding: 3em 1.5em;
|
padding: 3em 1.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body.is-menu-visible {
|
body.is-menu-visible {
|
||||||
#page-wrapper {
|
#page-wrapper {
|
||||||
opacity: 0.35;
|
opacity: 0.35;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
@include vendor('transform', 'translateX(0)');
|
@include vendor('transform', 'translateX(0)');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/* Section/Article */
|
/* Section/Article */
|
||||||
|
|
||||||
section, article {
|
section, article {
|
||||||
&.special {
|
&.special {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,71 +2,71 @@
|
||||||
/* Spotlight */
|
/* Spotlight */
|
||||||
|
|
||||||
.spotlight {
|
.spotlight {
|
||||||
@include vendor('align-items', 'center');
|
@include vendor('align-items', 'center');
|
||||||
@include vendor('display', 'flex');
|
@include vendor('display', 'flex');
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
@include vendor('order', '1');
|
@include vendor('order', '1');
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@include padding(2em, 4em);
|
@include padding(2em, 4em);
|
||||||
@include vendor('order', '2');
|
@include vendor('order', '2');
|
||||||
max-width: 48em;
|
max-width: 48em;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2n) {
|
&:nth-child(2n) {
|
||||||
@include vendor('flex-direction', 'row-reverse');
|
@include vendor('flex-direction', 'row-reverse');
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 through _misc(max-spotlights) {
|
@for $i from 1 through _misc(max-spotlights) {
|
||||||
$j: 0.075 * $i;
|
$j: 0.075 * $i;
|
||||||
|
|
||||||
&:nth-child(#{$i}) {
|
&:nth-child(#{$i}) {
|
||||||
background-color: rgba(0,0,0, $j);
|
background-color: rgba(0,0,0, $j);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(large) {
|
@include breakpoint(large) {
|
||||||
.image {
|
.image {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 55%;
|
width: 55%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
br {
|
br {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@include padding(4em, 3em);
|
@include padding(4em, 3em);
|
||||||
max-width: none;
|
max-width: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
.content {
|
.content {
|
||||||
@include padding(3em, 2em);
|
@include padding(3em, 2em);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,75 +2,75 @@
|
||||||
/* Table */
|
/* Table */
|
||||||
|
|
||||||
.table-wrapper {
|
.table-wrapper {
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin: 0 0 _size(element-margin) 0;
|
margin: 0 0 _size(element-margin) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
tbody {
|
tbody {
|
||||||
tr {
|
tr {
|
||||||
border: solid 1px _palette(border);
|
border: solid 1px _palette(border);
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
|
||||||
&:nth-child(2n + 1) {
|
&:nth-child(2n + 1) {
|
||||||
background-color: _palette(border-bg);
|
background-color: _palette(border-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
padding: 0.75em 0.75em;
|
padding: 0.75em 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
color: _palette(fg-bold);
|
color: _palette(fg-bold);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
font-weight: _font(weight-bold);
|
font-weight: _font(weight-bold);
|
||||||
padding: 0 0.75em 0.75em 0.75em;
|
padding: 0 0.75em 0.75em 0.75em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
border-bottom: solid 2px _palette(border);
|
border-bottom: solid 2px _palette(border);
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tfoot {
|
||||||
border-top: solid 2px _palette(border);
|
border-top: solid 2px _palette(border);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
&.alt {
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
|
|
||||||
tbody {
|
tbody {
|
||||||
tr {
|
tr {
|
||||||
td {
|
td {
|
||||||
border: solid 1px _palette(border);
|
border: solid 1px _palette(border);
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-left-width: 1px;
|
border-left-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
td {
|
td {
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tfoot {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2,243 +2,243 @@
|
||||||
/* Wrapper */
|
/* Wrapper */
|
||||||
|
|
||||||
@mixin wrapper($p) {
|
@mixin wrapper($p) {
|
||||||
background-color: _palette($p, bg);
|
background-color: _palette($p, bg);
|
||||||
color: _palette($p, fg);
|
color: _palette($p, fg);
|
||||||
|
|
||||||
// Basic
|
// Basic
|
||||||
|
|
||||||
strong, b {
|
strong, b {
|
||||||
color: _palette($p, fg-bold);
|
color: _palette($p, fg-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.h2, .h3, .h4, .h5, .h6,
|
.h2, .h3, .h4, .h5, .h6,
|
||||||
h2, h3, h4, h5, h6 {
|
h2, h3, h4, h5, h6 {
|
||||||
color: _palette($p, fg-bold);
|
color: _palette($p, fg-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: _palette($p, border-bg);
|
background: _palette($p, border-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Section/Article
|
// Section/Article
|
||||||
|
|
||||||
header {
|
header {
|
||||||
p {
|
p {
|
||||||
color: _palette($p, fg-light);
|
color: _palette($p, fg-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.major {
|
&.major {
|
||||||
h2, h3, h4, h5, h6 {
|
h2, h3, h4, h5, h6 {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: _palette($p, fg);
|
color: _palette($p, fg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form
|
// Form
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: _palette($p, fg-bold);
|
color: _palette($p, fg-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="password"],
|
input[type="password"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
background: _palette($p, border-bg);
|
background: _palette($p, border-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-wrapper {
|
.select-wrapper {
|
||||||
&:before {
|
&:before {
|
||||||
color: _palette($p, border);
|
color: _palette($p, border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"],
|
input[type="checkbox"],
|
||||||
input[type="radio"], {
|
input[type="radio"], {
|
||||||
& + label {
|
& + label {
|
||||||
color: _palette($p, fg);
|
color: _palette($p, fg);
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: _palette($p, border-bg);
|
background: _palette($p, border-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked + label {
|
&:checked + label {
|
||||||
&:before {
|
&:before {
|
||||||
background: _palette($p, fg-bold);
|
background: _palette($p, fg-bold);
|
||||||
color: _palette($p, bg);
|
color: _palette($p, bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: _palette($p, fg-light) !important;
|
color: _palette($p, fg-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-moz-placeholder {
|
:-moz-placeholder {
|
||||||
color: _palette($p, fg-light) !important;
|
color: _palette($p, fg-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-placeholder {
|
::-moz-placeholder {
|
||||||
color: _palette($p, fg-light) !important;
|
color: _palette($p, fg-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-ms-input-placeholder {
|
:-ms-input-placeholder {
|
||||||
color: _palette($p, fg-light) !important;
|
color: _palette($p, fg-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formerize-placeholder {
|
.formerize-placeholder {
|
||||||
color: _palette($p, fg-light) !important;
|
color: _palette($p, fg-light) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
&.major {
|
&.major {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// List
|
// List
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
&.alt {
|
&.alt {
|
||||||
li {
|
li {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
|
|
||||||
table {
|
table {
|
||||||
tbody {
|
tbody {
|
||||||
tr {
|
tr {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
|
|
||||||
&:nth-child(2n + 1) {
|
&:nth-child(2n + 1) {
|
||||||
background-color: _palette($p, border-bg);
|
background-color: _palette($p, border-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
color: _palette($p, fg-bold);
|
color: _palette($p, fg-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tfoot {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
&.alt {
|
||||||
tbody {
|
tbody {
|
||||||
tr {
|
tr {
|
||||||
td {
|
td {
|
||||||
border-color: _palette($p, border);
|
border-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
|
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
button,
|
button,
|
||||||
.button {
|
.button {
|
||||||
box-shadow: inset 0 0 0 2px _palette($p, border);
|
box-shadow: inset 0 0 0 2px _palette($p, border);
|
||||||
color: _palette($p, fg-bold);
|
color: _palette($p, fg-bold);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: _palette($p, border-bg);
|
background-color: _palette($p, border-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: _palette($p, border2-bg);
|
background-color: _palette($p, border2-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Features
|
// Features
|
||||||
|
|
||||||
.features {
|
.features {
|
||||||
li {
|
li {
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
border-top-color: _palette($p, border);
|
border-top-color: _palette($p, border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
@include padding(6em, 0);
|
@include padding(6em, 0);
|
||||||
|
|
||||||
> .inner {
|
> .inner {
|
||||||
width: 60em;
|
width: 60em;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
@include breakpoint(large) {
|
@include breakpoint(large) {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alt {
|
&.alt {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style1 {
|
&.style1 {
|
||||||
@include wrapper(accent1);
|
@include wrapper(accent1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style2 {
|
&.style2 {
|
||||||
background-color: _palette(bg);
|
background-color: _palette(bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style3 {
|
&.style3 {
|
||||||
@include wrapper(accent3);
|
@include wrapper(accent3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style4 {
|
&.style4 {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style5 {
|
&.style5 {
|
||||||
@include wrapper(accent2);
|
@include wrapper(accent2);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.style6 {
|
&.style6 {
|
||||||
@include wrapper(accent4);
|
@include wrapper(accent4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
@include padding(4em, 3em);
|
@include padding(4em, 3em);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
@include padding(3em, 2em);
|
@include padding(3em, 2em);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6,112 +6,112 @@
|
||||||
@import 'libs/skel';
|
@import 'libs/skel';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Spectral by HTML5 UP
|
Spectral by HTML5 UP
|
||||||
html5up.net | @ajlkn
|
html5up.net | @ajlkn
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Icon */
|
/* Icon */
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
&.major {
|
&.major {
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Form */
|
/* Form */
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: _palette(accent2, fg-bold);
|
color: _palette(accent2, fg-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="password"],
|
input[type="password"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
border: solid 1px _palette(accent2, border);
|
border: solid 1px _palette(accent2, border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button */
|
/* Button */
|
||||||
|
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
button,
|
button,
|
||||||
.button {
|
.button {
|
||||||
border: solid 2px _palette(accent2, border);
|
border: solid 2px _palette(accent2, border);
|
||||||
|
|
||||||
&.special {
|
&.special {
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Page Wrapper + Menu */
|
/* Page Wrapper + Menu */
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.is-menu-visible {
|
body.is-menu-visible {
|
||||||
#menu {
|
#menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
nav {
|
nav {
|
||||||
> ul {
|
> ul {
|
||||||
> li {
|
> li {
|
||||||
> a {
|
> a {
|
||||||
&.menuToggle {
|
&.menuToggle {
|
||||||
&:after {
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Banner + Wrapper (style4) */
|
/* Banner + Wrapper (style4) */
|
||||||
|
|
||||||
#banner,
|
#banner,
|
||||||
.wrapper.style4 {
|
.wrapper.style4 {
|
||||||
-ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
|
-ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Banner */
|
/* Banner */
|
||||||
|
|
||||||
#banner {
|
#banner {
|
||||||
.more {
|
.more {
|
||||||
height: 4em;
|
height: 4em;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main */
|
/* Main */
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
> header {
|
> header {
|
||||||
-ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
|
-ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6,131 +6,131 @@
|
||||||
@import 'libs/skel';
|
@import 'libs/skel';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Spectral by HTML5 UP
|
Spectral by HTML5 UP
|
||||||
html5up.net | @ajlkn
|
html5up.net | @ajlkn
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Spotlight */
|
/* Spotlight */
|
||||||
|
|
||||||
.spotlight {
|
.spotlight {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@include padding(4em, 4em);
|
@include padding(4em, 4em);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
clear: both;
|
clear: both;
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Features */
|
/* Features */
|
||||||
|
|
||||||
.features {
|
.features {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Banner + Wrapper (style4) */
|
/* Banner + Wrapper (style4) */
|
||||||
|
|
||||||
#banner,
|
#banner,
|
||||||
.wrapper.style4 {
|
.wrapper.style4 {
|
||||||
background-image: url("../../assets/images/banner.jpg");
|
background-image: url("../../assets/images/banner.jpg");
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
content: '';
|
content: '';
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Banner */
|
/* Banner */
|
||||||
|
|
||||||
#banner {
|
#banner {
|
||||||
@include padding(14em, 0);
|
@include padding(14em, 0);
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CTA */
|
/* CTA */
|
||||||
|
|
||||||
#cta {
|
#cta {
|
||||||
.inner {
|
.inner {
|
||||||
header {
|
header {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
clear: both;
|
clear: both;
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main */
|
/* Main */
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
> header {
|
> header {
|
||||||
background-image: url("../../assets/images/banner.jpg");
|
background-image: url("../../assets/images/banner.jpg");
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
content: '';
|
content: '';
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 30" zoomAndPan="disable" preserveAspectRatio="none">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 30" zoomAndPan="disable" preserveAspectRatio="none">
|
||||||
<style type="text/css"><![CDATA[ line { stroke: #ffffff; stroke-width: 3; } ]]></style>
|
<style type="text/css"><![CDATA[ line { stroke: #ffffff; stroke-width: 3; } ]]></style>
|
||||||
<line x1="0" y1="15" x2="15" y2="30" />
|
<line x1="0" y1="15" x2="15" y2="30" />
|
||||||
<line x1="30" y1="15" x2="15" y2="30" />
|
<line x1="30" y1="15" x2="15" y2="30" />
|
||||||
<line x1="15" y1="30" x2="15" y2="0" />
|
<line x1="15" y1="30" x2="15" y2="0" />
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 406 B After Width: | Height: | Size: 409 B |
|
|
@ -1,6 +1,6 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" zoomAndPan="disable" preserveAspectRatio="none">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" zoomAndPan="disable" preserveAspectRatio="none">
|
||||||
<style type="text/css"><![CDATA[ line { stroke: #ffffff; stroke-width: 2; } ]]></style>
|
<style type="text/css"><![CDATA[ line { stroke: #ffffff; stroke-width: 2; } ]]></style>
|
||||||
<line x1="0" y1="1" x2="16" y2="1" />
|
<line x1="0" y1="1" x2="16" y2="1" />
|
||||||
<line x1="0" y1="7" x2="16" y2="7" />
|
<line x1="0" y1="7" x2="16" y2="7" />
|
||||||
<line x1="0" y1="13" x2="16" y2="13" />
|
<line x1="0" y1="13" x2="16" y2="13" />
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 401 B After Width: | Height: | Size: 404 B |
|
|
@ -1,5 +1,5 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" zoomAndPan="disable" preserveAspectRatio="none">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" zoomAndPan="disable" preserveAspectRatio="none">
|
||||||
<style type="text/css"><![CDATA[ line { stroke: #ffffff; stroke-width: 2; } ]]></style>
|
<style type="text/css"><![CDATA[ line { stroke: #ffffff; stroke-width: 2; } ]]></style>
|
||||||
<line x1="0" y1="0" x2="16" y2="16" />
|
<line x1="0" y1="0" x2="16" y2="16" />
|
||||||
<line x1="16" y1="0" x2="0" y2="16" />
|
<line x1="16" y1="0" x2="0" y2="16" />
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 363 B |
|
|
@ -2,33 +2,33 @@
|
||||||
/// @param {string} $keys Key(s).
|
/// @param {string} $keys Key(s).
|
||||||
/// @return {string} Value.
|
/// @return {string} Value.
|
||||||
@function _duration($keys...) {
|
@function _duration($keys...) {
|
||||||
@return val($duration, $keys...);
|
@return val($duration, $keys...);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Gets a font value.
|
/// Gets a font value.
|
||||||
/// @param {string} $keys Key(s).
|
/// @param {string} $keys Key(s).
|
||||||
/// @return {string} Value.
|
/// @return {string} Value.
|
||||||
@function _font($keys...) {
|
@function _font($keys...) {
|
||||||
@return val($font, $keys...);
|
@return val($font, $keys...);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Gets a misc value.
|
/// Gets a misc value.
|
||||||
/// @param {string} $keys Key(s).
|
/// @param {string} $keys Key(s).
|
||||||
/// @return {string} Value.
|
/// @return {string} Value.
|
||||||
@function _misc($keys...) {
|
@function _misc($keys...) {
|
||||||
@return val($misc, $keys...);
|
@return val($misc, $keys...);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Gets a palette value.
|
/// Gets a palette value.
|
||||||
/// @param {string} $keys Key(s).
|
/// @param {string} $keys Key(s).
|
||||||
/// @return {string} Value.
|
/// @return {string} Value.
|
||||||
@function _palette($keys...) {
|
@function _palette($keys...) {
|
||||||
@return val($palette, $keys...);
|
@return val($palette, $keys...);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Gets a size value.
|
/// Gets a size value.
|
||||||
/// @param {string} $keys Key(s).
|
/// @param {string} $keys Key(s).
|
||||||
/// @return {string} Value.
|
/// @return {string} Value.
|
||||||
@function _size($keys...) {
|
@function _size($keys...) {
|
||||||
@return val($size, $keys...);
|
@return val($size, $keys...);
|
||||||
}
|
}
|
||||||
|
|
@ -3,22 +3,22 @@
|
||||||
/// @param {string} $where Optional pseudoelement to target (before or after).
|
/// @param {string} $where Optional pseudoelement to target (before or after).
|
||||||
@mixin icon($content: false, $where: before) {
|
@mixin icon($content: false, $where: before) {
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:#{$where} {
|
&:#{$where} {
|
||||||
|
|
||||||
@if $content {
|
@if $content {
|
||||||
content: $content;
|
content: $content;
|
||||||
}
|
}
|
||||||
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
font-family: FontAwesome;
|
font-family: FontAwesome;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: none !important;
|
text-transform: none !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -29,11 +29,11 @@
|
||||||
/// @param {bool} $important If true, adds !important.
|
/// @param {bool} $important If true, adds !important.
|
||||||
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
|
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
|
||||||
|
|
||||||
@if $important {
|
@if $important {
|
||||||
$important: '!important';
|
$important: '!important';
|
||||||
}
|
}
|
||||||
|
|
||||||
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
|
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,15 +42,15 @@
|
||||||
/// @return {string} Encoded SVG data URL.
|
/// @return {string} Encoded SVG data URL.
|
||||||
@function svg-url($svg) {
|
@function svg-url($svg) {
|
||||||
|
|
||||||
$svg: str-replace($svg, '"', '\'');
|
$svg: str-replace($svg, '"', '\'');
|
||||||
$svg: str-replace($svg, '<', '%3C');
|
$svg: str-replace($svg, '<', '%3C');
|
||||||
$svg: str-replace($svg, '>', '%3E');
|
$svg: str-replace($svg, '>', '%3E');
|
||||||
$svg: str-replace($svg, '&', '%26');
|
$svg: str-replace($svg, '&', '%26');
|
||||||
$svg: str-replace($svg, '#', '%23');
|
$svg: str-replace($svg, '#', '%23');
|
||||||
$svg: str-replace($svg, '{', '%7B');
|
$svg: str-replace($svg, '{', '%7B');
|
||||||
$svg: str-replace($svg, '}', '%7D');
|
$svg: str-replace($svg, '}', '%7D');
|
||||||
$svg: str-replace($svg, ';', '%3B');
|
$svg: str-replace($svg, ';', '%3B');
|
||||||
|
|
||||||
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
|
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
|
||||||
|
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,86 +1,86 @@
|
||||||
// Misc.
|
// Misc.
|
||||||
$misc: (
|
$misc: (
|
||||||
max-spotlights: 10,
|
max-spotlights: 10,
|
||||||
max-features: 10,
|
max-features: 10,
|
||||||
z-index-base: 10000
|
z-index-base: 10000
|
||||||
);
|
);
|
||||||
|
|
||||||
// Duration.
|
// Duration.
|
||||||
$duration: (
|
$duration: (
|
||||||
transitions: 0.2s,
|
transitions: 0.2s,
|
||||||
menu: 0.5s,
|
menu: 0.5s,
|
||||||
fadein: 3s
|
fadein: 3s
|
||||||
);
|
);
|
||||||
|
|
||||||
// Size.
|
// Size.
|
||||||
$size: (
|
$size: (
|
||||||
element-height: 2.75em,
|
element-height: 2.75em,
|
||||||
element-margin: 2em,
|
element-margin: 2em,
|
||||||
letter-spacing: 0.075em,
|
letter-spacing: 0.075em,
|
||||||
letter-spacing-alt: 0.225em
|
letter-spacing-alt: 0.225em
|
||||||
);
|
);
|
||||||
|
|
||||||
// Font.
|
// Font.
|
||||||
$font: (
|
$font: (
|
||||||
family: ('Open Sans', Helvetica, sans-serif),
|
family: ('Open Sans', Helvetica, sans-serif),
|
||||||
family-fixed: ('Courier New', monospace),
|
family-fixed: ('Courier New', monospace),
|
||||||
weight: 400,
|
weight: 400,
|
||||||
weight-bold: 600,
|
weight-bold: 600,
|
||||||
weight-extrabold: 800
|
weight-extrabold: 800
|
||||||
);
|
);
|
||||||
|
|
||||||
// Palette.
|
// Palette.
|
||||||
$palette: (
|
$palette: (
|
||||||
bg: #29335C,
|
bg: #29335C,
|
||||||
fg: #fff,
|
fg: #fff,
|
||||||
fg-bold: #fff,
|
fg-bold: #fff,
|
||||||
fg-light: rgba(255,255,255,0.5),
|
fg-light: rgba(255,255,255,0.5),
|
||||||
border: #fff,
|
border: #fff,
|
||||||
border-bg: rgba(144,144,144,0.25),
|
border-bg: rgba(144,144,144,0.25),
|
||||||
border2: #fff,
|
border2: #fff,
|
||||||
border2-bg: rgba(144,144,144,0.5),
|
border2-bg: rgba(144,144,144,0.5),
|
||||||
|
|
||||||
accent1: (
|
accent1: (
|
||||||
bg: #F3A712,
|
bg: #F3A712,
|
||||||
fg-bold: #ffffff,
|
fg-bold: #ffffff,
|
||||||
fg: mix(#F3A712, #ffffff, 25%),
|
fg: mix(#F3A712, #ffffff, 25%),
|
||||||
fg-light: mix(#F3A712, #ffffff, 40%),
|
fg-light: mix(#F3A712, #ffffff, 40%),
|
||||||
border: rgba(0,0,0,0.125),
|
border: rgba(0,0,0,0.125),
|
||||||
border-bg: rgba(255,255,255,0.075),
|
border-bg: rgba(255,255,255,0.075),
|
||||||
border2: rgba(0,0,0,0.25),
|
border2: rgba(0,0,0,0.25),
|
||||||
border2-bg: rgba(255,255,255,0.2)
|
border2-bg: rgba(255,255,255,0.2)
|
||||||
),
|
),
|
||||||
|
|
||||||
accent2: (
|
accent2: (
|
||||||
bg: #ffffff,
|
bg: #ffffff,
|
||||||
fg-bold: #2E3842,
|
fg-bold: #2E3842,
|
||||||
fg: #4E4852,
|
fg: #4E4852,
|
||||||
fg-light: #8E8892,
|
fg-light: #8E8892,
|
||||||
border: #dfdfdf,
|
border: #dfdfdf,
|
||||||
border-bg: rgba(0,0,0,0.0375),
|
border-bg: rgba(0,0,0,0.0375),
|
||||||
border2: #bfbfbf,
|
border2: #bfbfbf,
|
||||||
border2-bg: rgba(0,0,0,0.1)
|
border2-bg: rgba(0,0,0,0.1)
|
||||||
),
|
),
|
||||||
|
|
||||||
accent3: (
|
accent3: (
|
||||||
bg: #ed4933,
|
bg: #ed4933,
|
||||||
fg-bold: #ffffff,
|
fg-bold: #ffffff,
|
||||||
fg: mix(#ed4933, #ffffff, 25%),
|
fg: mix(#ed4933, #ffffff, 25%),
|
||||||
fg-light: mix(#ed4933, #ffffff, 40%),
|
fg-light: mix(#ed4933, #ffffff, 40%),
|
||||||
border: rgba(0,0,0,0.125),
|
border: rgba(0,0,0,0.125),
|
||||||
border-bg: rgba(255,255,255,0.075),
|
border-bg: rgba(255,255,255,0.075),
|
||||||
border2: rgba(0,0,0,0.25),
|
border2: rgba(0,0,0,0.25),
|
||||||
border2-bg: rgba(255,255,255,0.2)
|
border2-bg: rgba(255,255,255,0.2)
|
||||||
),
|
),
|
||||||
|
|
||||||
accent4: (
|
accent4: (
|
||||||
bg: #25558C,
|
bg: #25558C,
|
||||||
fg-bold: #ffffff,
|
fg-bold: #ffffff,
|
||||||
fg: mix(#25558C, #ffffff, 25%),
|
fg: mix(#25558C, #ffffff, 25%),
|
||||||
fg-light: mix(#25558C, #ffffff, 40%),
|
fg-light: mix(#25558C, #ffffff, 40%),
|
||||||
border: rgba(0,0,0,0.125),
|
border: rgba(0,0,0,0.125),
|
||||||
border-bg: rgba(255,255,255,0.075),
|
border-bg: rgba(255,255,255,0.075),
|
||||||
border2: rgba(0,0,0,0.25),
|
border2: rgba(0,0,0,0.25),
|
||||||
border2-bg: rgba(255,255,255,0.2)
|
border2-bg: rgba(255,255,255,0.2)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -7,25 +7,25 @@
|
||||||
@import url("../fonts/opensans-google.css");
|
@import url("../fonts/opensans-google.css");
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Spectral by HTML5 UP
|
Spectral by HTML5 UP
|
||||||
html5up.net | @ajlkn
|
html5up.net | @ajlkn
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import 'libs/skel';
|
@import 'libs/skel';
|
||||||
|
|
||||||
@include skel-breakpoints((
|
@include skel-breakpoints((
|
||||||
xlarge: '(max-width: 1680px)',
|
xlarge: '(max-width: 1680px)',
|
||||||
large: '(max-width: 1280px)',
|
large: '(max-width: 1280px)',
|
||||||
medium: '(max-width: 980px)',
|
medium: '(max-width: 980px)',
|
||||||
small: '(max-width: 736px)',
|
small: '(max-width: 736px)',
|
||||||
xsmall: '(max-width: 480px)'
|
xsmall: '(max-width: 480px)'
|
||||||
));
|
));
|
||||||
|
|
||||||
@include skel-layout((
|
@include skel-layout((
|
||||||
reset: 'full',
|
reset: 'full',
|
||||||
boxModel: 'border',
|
boxModel: 'border',
|
||||||
grid: ( gutters: 1.5em )
|
grid: ( gutters: 1.5em )
|
||||||
));
|
));
|
||||||
|
|
||||||
@import 'components/basic';
|
@import 'components/basic';
|
||||||
|
|
@ -47,166 +47,166 @@
|
||||||
/* Main */
|
/* Main */
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
> header {
|
> header {
|
||||||
@include padding(12em, 0);
|
@include padding(12em, 0);
|
||||||
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
|
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.75em;
|
font-size: 1.75em;
|
||||||
margin: 0 0 (_size(element-margin) * 0.25) 0;
|
margin: 0 0 (_size(element-margin) * 0.25) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(xlarge) {
|
@include breakpoint(xlarge) {
|
||||||
@include padding(10em, 0);
|
@include padding(10em, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(large) {
|
@include breakpoint(large) {
|
||||||
@include padding(8em, 3em);
|
@include padding(8em, 3em);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
@include padding(10em, 3em);
|
@include padding(10em, 3em);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
@include padding(5em, 3em);
|
@include padding(5em, 3em);
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body.is-mobile {
|
body.is-mobile {
|
||||||
#main {
|
#main {
|
||||||
> header {
|
> header {
|
||||||
background-attachment: scroll;
|
background-attachment: scroll;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
@include padding(6em, 0);
|
@include padding(6em, 0);
|
||||||
background-color: darken(_palette(bg), 8);
|
background-color: darken(_palette(bg), 8);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.icons {
|
.icons {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: _palette(fg-light);
|
color: _palette(fg-light);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: _palette(fg);
|
color: _palette(fg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright {
|
.copyright {
|
||||||
color: _palette(fg-light);
|
color: _palette(fg-light);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
letter-spacing: _size(letter-spacing-alt);
|
letter-spacing: _size(letter-spacing-alt);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border-left: solid 1px _palette(fg-light);
|
border-left: solid 1px _palette(fg-light);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: _palette(fg);
|
color: _palette(fg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(xsmall) {
|
@include breakpoint(xsmall) {
|
||||||
border: 0;
|
border: 0;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.65em;
|
line-height: 1.65em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
@include padding(4em, 3em);
|
@include padding(4em, 3em);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
@include padding(3em, 2em);
|
@include padding(3em, 2em);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Landing */
|
/* Landing */
|
||||||
|
|
||||||
body.landing {
|
body.landing {
|
||||||
#page-wrapper {
|
#page-wrapper {
|
||||||
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
|
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page-wrapper {
|
#page-wrapper {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
background-color: darken(transparentize(_palette(bg), 0.1), 8);
|
background-color: darken(transparentize(_palette(bg), 0.1), 8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body.is-mobile {
|
body.is-mobile {
|
||||||
&.landing {
|
&.landing {
|
||||||
#page-wrapper {
|
#page-wrapper {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#banner,
|
#banner,
|
||||||
.wrapper.style4 {
|
.wrapper.style4 {
|
||||||
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
|
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
background-color: darken(_palette(bg), 8);
|
background-color: darken(_palette(bg), 8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,32 +6,32 @@ description: Just for reference
|
||||||
---
|
---
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Text</h4>
|
<h4>Text</h4>
|
||||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||||
<hr />
|
<hr />
|
||||||
<header>
|
<header>
|
||||||
<h4>Heading with a Subtitle</h4>
|
<h4>Heading with a Subtitle</h4>
|
||||||
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||||
</header>
|
</header>
|
||||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||||
<header>
|
<header>
|
||||||
<h5>Heading with a Subtitle</h5>
|
<h5>Heading with a Subtitle</h5>
|
||||||
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||||
</header>
|
</header>
|
||||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Heading Level 2</h2>
|
<h2>Heading Level 2</h2>
|
||||||
<h3>Heading Level 3</h3>
|
<h3>Heading Level 3</h3>
|
||||||
<h4>Heading Level 4</h4>
|
<h4>Heading Level 4</h4>
|
||||||
<h5>Heading Level 5</h5>
|
<h5>Heading Level 5</h5>
|
||||||
<h6>Heading Level 6</h6>
|
<h6>Heading Level 6</h6>
|
||||||
<hr />
|
<hr />
|
||||||
<h5>Blockquote</h5>
|
<h5>Blockquote</h5>
|
||||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||||
<h5>Preformatted</h5>
|
<h5>Preformatted</h5>
|
||||||
<pre><code>i = 0;
|
<pre><code>i = 0;
|
||||||
|
|
||||||
while (!deck.isInOrder()) {
|
while (!deck.isInOrder()) {
|
||||||
print 'Iteration ' + i;
|
print 'Iteration ' + i;
|
||||||
|
|
@ -43,272 +43,272 @@ print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Lists</h4>
|
<h4>Lists</h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="6u 12u$(medium)">
|
<div class="6u 12u$(medium)">
|
||||||
<h5>Unordered</h5>
|
<h5>Unordered</h5>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Dolor pulvinar etiam.</li>
|
<li>Dolor pulvinar etiam.</li>
|
||||||
<li>Sagittis adipiscing.</li>
|
<li>Sagittis adipiscing.</li>
|
||||||
<li>Felis enim feugiat.</li>
|
<li>Felis enim feugiat.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h5>Alternate</h5>
|
<h5>Alternate</h5>
|
||||||
<ul class="alt">
|
<ul class="alt">
|
||||||
<li>Dolor pulvinar etiam.</li>
|
<li>Dolor pulvinar etiam.</li>
|
||||||
<li>Sagittis adipiscing.</li>
|
<li>Sagittis adipiscing.</li>
|
||||||
<li>Felis enim feugiat.</li>
|
<li>Felis enim feugiat.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="6u$ 12u$(medium)">
|
<div class="6u$ 12u$(medium)">
|
||||||
<h5>Ordered</h5>
|
<h5>Ordered</h5>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Dolor pulvinar etiam.</li>
|
<li>Dolor pulvinar etiam.</li>
|
||||||
<li>Etiam vel felis viverra.</li>
|
<li>Etiam vel felis viverra.</li>
|
||||||
<li>Felis enim feugiat.</li>
|
<li>Felis enim feugiat.</li>
|
||||||
<li>Dolor pulvinar etiam.</li>
|
<li>Dolor pulvinar etiam.</li>
|
||||||
<li>Etiam vel felis lorem.</li>
|
<li>Etiam vel felis lorem.</li>
|
||||||
<li>Felis enim et feugiat.</li>
|
<li>Felis enim et feugiat.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<h5>Icons</h5>
|
<h5>Icons</h5>
|
||||||
<ul class="icons">
|
<ul class="icons">
|
||||||
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
|
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
|
||||||
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
|
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
|
||||||
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
|
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
|
||||||
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
|
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h5>Actions</h5>
|
<h5>Actions</h5>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="6u 12u$(medium)">
|
<div class="6u 12u$(medium)">
|
||||||
<ul class="actions">
|
<ul class="actions">
|
||||||
<li><a href="#" class="button special">Default</a></li>
|
<li><a href="#" class="button special">Default</a></li>
|
||||||
<li><a href="#" class="button">Default</a></li>
|
<li><a href="#" class="button">Default</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions small">
|
<ul class="actions small">
|
||||||
<li><a href="#" class="button special small">Small</a></li>
|
<li><a href="#" class="button special small">Small</a></li>
|
||||||
<li><a href="#" class="button small">Small</a></li>
|
<li><a href="#" class="button small">Small</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions vertical">
|
<ul class="actions vertical">
|
||||||
<li><a href="#" class="button special">Default</a></li>
|
<li><a href="#" class="button special">Default</a></li>
|
||||||
<li><a href="#" class="button">Default</a></li>
|
<li><a href="#" class="button">Default</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions vertical small">
|
<ul class="actions vertical small">
|
||||||
<li><a href="#" class="button special small">Small</a></li>
|
<li><a href="#" class="button special small">Small</a></li>
|
||||||
<li><a href="#" class="button small">Small</a></li>
|
<li><a href="#" class="button small">Small</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="6u 12u$(medium)">
|
<div class="6u 12u$(medium)">
|
||||||
<ul class="actions vertical">
|
<ul class="actions vertical">
|
||||||
<li><a href="#" class="button special fit">Default</a></li>
|
<li><a href="#" class="button special fit">Default</a></li>
|
||||||
<li><a href="#" class="button fit">Default</a></li>
|
<li><a href="#" class="button fit">Default</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions vertical small">
|
<ul class="actions vertical small">
|
||||||
<li><a href="#" class="button special small fit">Small</a></li>
|
<li><a href="#" class="button special small fit">Small</a></li>
|
||||||
<li><a href="#" class="button small fit">Small</a></li>
|
<li><a href="#" class="button small fit">Small</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Table</h4>
|
<h4>Table</h4>
|
||||||
<h5>Default</h5>
|
<h5>Default</h5>
|
||||||
<div class="table-wrapper">
|
<div class="table-wrapper">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
<th>Price</th>
|
<th>Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item One</td>
|
<td>Item One</td>
|
||||||
<td>Ante turpis integer aliquet porttitor.</td>
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
<td>29.99</td>
|
<td>29.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Two</td>
|
<td>Item Two</td>
|
||||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||||
<td>19.99</td>
|
<td>19.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Three</td>
|
<td>Item Three</td>
|
||||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||||
<td>29.99</td>
|
<td>29.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Four</td>
|
<td>Item Four</td>
|
||||||
<td>Vitae integer tempus condimentum.</td>
|
<td>Vitae integer tempus condimentum.</td>
|
||||||
<td>19.99</td>
|
<td>19.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Five</td>
|
<td>Item Five</td>
|
||||||
<td>Ante turpis integer aliquet porttitor.</td>
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
<td>29.99</td>
|
<td>29.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="2"></td>
|
<td colspan="2"></td>
|
||||||
<td>100.00</td>
|
<td>100.00</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Alternate</h5>
|
<h5>Alternate</h5>
|
||||||
<div class="table-wrapper">
|
<div class="table-wrapper">
|
||||||
<table class="alt">
|
<table class="alt">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
<th>Price</th>
|
<th>Price</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item One</td>
|
<td>Item One</td>
|
||||||
<td>Ante turpis integer aliquet porttitor.</td>
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
<td>29.99</td>
|
<td>29.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Two</td>
|
<td>Item Two</td>
|
||||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||||
<td>19.99</td>
|
<td>19.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Three</td>
|
<td>Item Three</td>
|
||||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||||
<td>29.99</td>
|
<td>29.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Four</td>
|
<td>Item Four</td>
|
||||||
<td>Vitae integer tempus condimentum.</td>
|
<td>Vitae integer tempus condimentum.</td>
|
||||||
<td>19.99</td>
|
<td>19.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Item Five</td>
|
<td>Item Five</td>
|
||||||
<td>Ante turpis integer aliquet porttitor.</td>
|
<td>Ante turpis integer aliquet porttitor.</td>
|
||||||
<td>29.99</td>
|
<td>29.99</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="2"></td>
|
<td colspan="2"></td>
|
||||||
<td>100.00</td>
|
<td>100.00</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Buttons</h4>
|
<h4>Buttons</h4>
|
||||||
<ul class="actions">
|
<ul class="actions">
|
||||||
<li><a href="#" class="button special">Special</a></li>
|
<li><a href="#" class="button special">Special</a></li>
|
||||||
<li><a href="#" class="button">Default</a></li>
|
<li><a href="#" class="button">Default</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions">
|
<ul class="actions">
|
||||||
<li><a href="#" class="button big">Big</a></li>
|
<li><a href="#" class="button big">Big</a></li>
|
||||||
<li><a href="#" class="button">Default</a></li>
|
<li><a href="#" class="button">Default</a></li>
|
||||||
<li><a href="#" class="button small">Small</a></li>
|
<li><a href="#" class="button small">Small</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions fit">
|
<ul class="actions fit">
|
||||||
<li><a href="#" class="button fit">Fit</a></li>
|
<li><a href="#" class="button fit">Fit</a></li>
|
||||||
<li><a href="#" class="button special fit">Fit</a></li>
|
<li><a href="#" class="button special fit">Fit</a></li>
|
||||||
<li><a href="#" class="button fit">Fit</a></li>
|
<li><a href="#" class="button fit">Fit</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions fit small">
|
<ul class="actions fit small">
|
||||||
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
||||||
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||||
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions">
|
<ul class="actions">
|
||||||
<li><a href="#" class="button special icon fa-download">Icon</a></li>
|
<li><a href="#" class="button special icon fa-download">Icon</a></li>
|
||||||
<li><a href="#" class="button icon fa-download">Icon</a></li>
|
<li><a href="#" class="button icon fa-download">Icon</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="actions">
|
<ul class="actions">
|
||||||
<li><span class="button special disabled">Disabled</span></li>
|
<li><span class="button special disabled">Disabled</span></li>
|
||||||
<li><span class="button disabled">Disabled</span></li>
|
<li><span class="button disabled">Disabled</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Form</h4>
|
<h4>Form</h4>
|
||||||
<form method="post" action="#">
|
<form method="post" action="#">
|
||||||
<div class="row uniform">
|
<div class="row uniform">
|
||||||
<div class="6u 12u$(xsmall)">
|
<div class="6u 12u$(xsmall)">
|
||||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
|
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
|
||||||
</div>
|
</div>
|
||||||
<div class="6u$ 12u$(xsmall)">
|
<div class="6u$ 12u$(xsmall)">
|
||||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
|
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
|
||||||
</div>
|
</div>
|
||||||
<div class="12u$">
|
<div class="12u$">
|
||||||
<div class="select-wrapper">
|
<div class="select-wrapper">
|
||||||
<select name="demo-category" id="demo-category">
|
<select name="demo-category" id="demo-category">
|
||||||
<option value="">- Category -</option>
|
<option value="">- Category -</option>
|
||||||
<option value="1">Manufacturing</option>
|
<option value="1">Manufacturing</option>
|
||||||
<option value="1">Shipping</option>
|
<option value="1">Shipping</option>
|
||||||
<option value="1">Administration</option>
|
<option value="1">Administration</option>
|
||||||
<option value="1">Human Resources</option>
|
<option value="1">Human Resources</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="4u 12u$(small)">
|
<div class="4u 12u$(small)">
|
||||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||||
<label for="demo-priority-low">Low</label>
|
<label for="demo-priority-low">Low</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="4u 12u$(small)">
|
<div class="4u 12u$(small)">
|
||||||
<input type="radio" id="demo-priority-normal" name="demo-priority">
|
<input type="radio" id="demo-priority-normal" name="demo-priority">
|
||||||
<label for="demo-priority-normal">Normal</label>
|
<label for="demo-priority-normal">Normal</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="4u$ 12u$(small)">
|
<div class="4u$ 12u$(small)">
|
||||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||||
<label for="demo-priority-high">High</label>
|
<label for="demo-priority-high">High</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="6u 12u$(small)">
|
<div class="6u 12u$(small)">
|
||||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||||
<label for="demo-copy">Email me a copy</label>
|
<label for="demo-copy">Email me a copy</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="6u$ 12u$(small)">
|
<div class="6u$ 12u$(small)">
|
||||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||||
<label for="demo-human">Not a robot</label>
|
<label for="demo-human">Not a robot</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="12u$">
|
<div class="12u$">
|
||||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="12u$">
|
<div class="12u$">
|
||||||
<ul class="actions">
|
<ul class="actions">
|
||||||
<li><input type="submit" value="Send Message" class="special" /></li>
|
<li><input type="submit" value="Send Message" class="special" /></li>
|
||||||
<li><input type="reset" value="Reset" /></li>
|
<li><input type="reset" value="Reset" /></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h4>Image</h4>
|
<h4>Image</h4>
|
||||||
<h5>Fit</h5>
|
<h5>Fit</h5>
|
||||||
<div class="box alt">
|
<div class="box alt">
|
||||||
<div class="row uniform 50%">
|
<div class="row uniform 50%">
|
||||||
<div class="12u"><span class="image fit"><img src="assets/images/banner.jpg" alt="" /></span></div>
|
<div class="12u"><span class="image fit"><img src="assets/images/banner.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
||||||
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h5>Left & Right</h5>
|
<h5>Left & Right</h5>
|
||||||
<p><span class="image left"><img src="assets/images/pic04.jpg" alt="" /></span>Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.</p>
|
<p><span class="image left"><img src="assets/images/pic04.jpg" alt="" /></span>Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.</p>
|
||||||
<p><span class="image right"><img src="assets/images/pic05.jpg" alt="" /></span>Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.</p>
|
<p><span class="image right"><img src="assets/images/pic05.jpg" alt="" /></span>Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Reference in New Issue