Refactor default theme
This commit is contained in:
Daniel Rudolf
parent
21bd18bcf0
commit
6a13915f15
13 changed files with 504 additions and 370 deletions
|
|
@ -27,6 +27,9 @@
|
|||
*/
|
||||
// $config['theme'] = 'default'; // Set the theme (defaults to "default")
|
||||
// $config['theme_url'] = ''; // Override the base URL of the themes folder (e.g. http://example.com/pico/themes/)
|
||||
// $config['theme_config'] = array( // Settings of the theme; depends on the theme used
|
||||
// 'widescreen' => false // Default theme: Allocate more horicontal space (i.e. make the site container wider)
|
||||
// );
|
||||
// $config['twig_config'] = array( // Twig settings
|
||||
// 'cache' => false, // To enable Twig caching change this to a path to a writable directory
|
||||
// 'autoescape' => false, // Auto-escape Twig vars
|
||||
|
|
|
|||
|
|
@ -20,3 +20,4 @@ Font license info
|
|||
License: SIL OFL 1.1 <http://scripts.sil.org/OFL>
|
||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
Icons: menu, github-circled ("octocat"), twitter ("birdy"), chat
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -8,9 +8,11 @@
|
|||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="chat" unicode="" d="M786 421q0-77-53-143t-143-104-197-38q-48 0-98 9-70-49-155-72-21-5-48-9h-2q-6 0-12 5t-6 12q-1 1-1 3t1 4 1 3l1 3t2 3 2 3 3 3 2 2q3 3 13 14t15 16 12 17 14 21 11 25q-69 40-108 98t-40 125q0 78 53 144t143 104 197 38 197-38 143-104 53-144z m214-142q0-67-40-126t-108-98q5-14 11-25t14-21 13-16 14-17 13-14q0 0 2-2t3-3 2-3 2-3l1-3t1-3 1-4-1-3q-2-8-7-13t-13-4q-27 4-48 9-85 23-155 72-50-9-98-9-151 0-263 74 32-3 49-3 90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85 72-39 114-99t42-128z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="twitter" unicode="" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 114 44-20-64-79-100 52 6 104 28z" horiz-adv-x="928.6" />
|
||||
<glyph glyph-name="birdy" unicode="" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 114 44-20-64-79-100 52 6 104 28z" horiz-adv-x="928.6" />
|
||||
|
||||
<glyph glyph-name="github" unicode="" d="M857 350q0-140-82-252t-211-155q-15-3-22 4t-7 17v118q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 68-44 115 21 51-5 114-15 5-45-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-48 7q-24-63-4-114-44-47-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-22-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l5-13q8-21 25-34t37-17 39-4 31 2l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
|
||||
<glyph glyph-name="octocat" unicode="" d="M857 350q0-140-82-252t-211-155q-15-3-22 4t-7 17v118q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 68-44 115 21 51-5 114-15 5-45-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-48 7q-24-63-4-114-44-47-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-22-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l5-13q8-21 25-34t37-17 39-4 31 2l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="menu" unicode="" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
5
themes/default/fontello.css
vendored
5
themes/default/fontello.css
vendored
|
|
@ -55,6 +55,7 @@
|
|||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-chat:before { content: '\e800'; } /* '' */
|
||||
.icon-birdy:before { content: '\f099'; } /* '' */
|
||||
.icon-menu:before { content: '\f0c9'; } /* '' */
|
||||
.icon-octocat:before { content: '\f09b'; } /* '' */
|
||||
.icon-birdy:before { content: '\f099'; } /* '' */
|
||||
.icon-chat:before { content: '\e800'; } /* '' */
|
||||
|
|
|
|||
|
|
@ -1,28 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
|
||||
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
|
||||
{% if meta.description %}
|
||||
<meta name="description" content="{{ meta.description|striptags }}">
|
||||
<meta name="description" content="{{ meta.description|striptags }}" />
|
||||
{% endif %}{% if meta.robots %}
|
||||
<meta name="robots" content="{{ meta.robots }}">
|
||||
<meta name="robots" content="{{ meta.robots }}" />
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono" type="text/css" />
|
||||
<link rel="stylesheet" href="{{ theme_url }}/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="{{ theme_url }}/fontello.css" type="text/css" />
|
||||
|
||||
<script src="{{ theme_url }}/scripts/modernizr-2.6.1.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
|
||||
|
||||
<header id="header">
|
||||
<div class="inner clearfix">
|
||||
<h1><a href="{{ "index"|link }}" id="logo">{{ site_title }}</a></h1>
|
||||
<nav>
|
||||
<a href="#" class="menu-icon"></a>
|
||||
<header>
|
||||
<div class="container">
|
||||
<a id="page-menu-toggle" title="Toggle Menu" role="button" aria-controls="page-menu" aria-expanded="false" tabindex="1">
|
||||
<span class="icon-menu" aria-hidden="true"></span>
|
||||
<span class="sr-only">Toggle Menu</span>
|
||||
</a>
|
||||
<h1>
|
||||
<a href="{{ "index"|link }}">{{ site_title }}</a>
|
||||
</h1>
|
||||
<nav id="page-menu" role="region" tabindex="-1">
|
||||
<ul>
|
||||
{% for page in pages if page.title %}
|
||||
<li{% if page.id == current_page.id %} class="active"{% endif %}>
|
||||
|
|
@ -34,24 +38,32 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section id="content">
|
||||
<div class="inner">
|
||||
<main>
|
||||
<div class="container">
|
||||
{{ content }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="social">
|
||||
{% for social in meta.social %}
|
||||
<a href="{{ social.url }}" title="{{ social.title }}"><span class="icon-{{ social.icon }}"></span></a>
|
||||
<a href="{{ social.url }}" title="{{ social.title }}" role="button">
|
||||
<span class="icon-{{ social.icon }}" aria-hidden="true"></span>
|
||||
<span class="sr-only">{{ social.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
|
||||
and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
|
||||
Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
|
||||
<p>
|
||||
<a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
|
||||
and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
|
||||
Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
|
||||
<script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
67
themes/default/js/pico.js
Normal file
67
themes/default/js/pico.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/**
|
||||
* Pico's Default Theme - JavaScript helper
|
||||
*
|
||||
* Pico is a stupidly simple, blazing fast, flat file CMS.
|
||||
*
|
||||
* @author Daniel Rudolf
|
||||
* @link http://picocms.org
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @version 1.1
|
||||
*/
|
||||
|
||||
function main() {
|
||||
// capability CSS classes
|
||||
document.documentElement.classList.remove('no-js');
|
||||
document.documentElement.classList.add('js');
|
||||
|
||||
// wrap tables
|
||||
utils.forEach(document.querySelectorAll('main table'), function (_, table) {
|
||||
if (!table.parentElement.classList.contains('table-responsive')) {
|
||||
var tableWrapper = document.createElement('div');
|
||||
tableWrapper.classList.add('table-responsive');
|
||||
|
||||
table.parentElement.insertBefore(tableWrapper, table);
|
||||
tableWrapper.appendChild(table);
|
||||
}
|
||||
});
|
||||
|
||||
// responsive menu
|
||||
var menu = document.getElementById('page-menu'),
|
||||
menuToggle = document.getElementById('page-menu-toggle'),
|
||||
toggleMenuEvent = function (event) {
|
||||
if (event.type === 'keydown') {
|
||||
if ((event.keyCode != 13) && (event.keyCode != 32)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (menuToggle.getAttribute('aria-expanded') === 'false') {
|
||||
menuToggle.setAttribute('aria-expanded', 'true');
|
||||
utils.slideDown(menu, null, function () {
|
||||
if (event.type === 'keydown') menu.focus();
|
||||
});
|
||||
} else {
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
utils.slideUp(menu);
|
||||
}
|
||||
},
|
||||
onResizeEvent = function () {
|
||||
if (utils.isElementVisible(menuToggle)) {
|
||||
menu.classList.add('hidden');
|
||||
menuToggle.addEventListener('click', toggleMenuEvent);
|
||||
menuToggle.addEventListener('keydown', toggleMenuEvent);
|
||||
} else {
|
||||
menuToggle.removeEventListener('keydown', toggleMenuEvent);
|
||||
menuToggle.removeEventListener('click', toggleMenuEvent);
|
||||
menu.classList.remove('hidden', 'slide', 'up');
|
||||
delete menu.dataset.slideId;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', onResizeEvent);
|
||||
onResizeEvent();
|
||||
}
|
||||
|
||||
main();
|
||||
161
themes/default/js/utils.js
Normal file
161
themes/default/js/utils.js
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
/**
|
||||
* Pico's Default Theme - JavaScript helper
|
||||
*
|
||||
* Pico is a stupidly simple, blazing fast, flat file CMS.
|
||||
*
|
||||
* @author Daniel Rudolf
|
||||
* @link http://picocms.org
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @version 1.1
|
||||
*/
|
||||
|
||||
utils = {};
|
||||
|
||||
/**
|
||||
* Iterates through an iterable object (e.g. plain objects, arrays, NodeList)
|
||||
*
|
||||
* @param object object the object to iterate through
|
||||
* @param function callback function to call on every item; the key is passed
|
||||
* as first, the value as second parameter
|
||||
* @return void
|
||||
*/
|
||||
utils.forEach = function (object, callback) {
|
||||
var i = 0,
|
||||
keys = Object.keys(object),
|
||||
length = keys.length;
|
||||
for (; i < length; i++) {
|
||||
if (callback(keys[i], object[keys[i]]) === false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Slides a element up (i.e. hide a element by changing its height to 0)
|
||||
*
|
||||
* @param HTMLElement element the element to slide up
|
||||
* @param function finishCallback function to call when the animation has
|
||||
* been finished (i.e. the element is hidden)
|
||||
* @param function startCallback function to call when the animation starts
|
||||
* @return void
|
||||
*/
|
||||
utils.slideUp = function (element, finishCallback, startCallback) {
|
||||
utils.slideOut(element, {
|
||||
cssRule: 'height',
|
||||
cssRuleRef: 'clientHeight',
|
||||
cssClass: 'up',
|
||||
startCallback: startCallback,
|
||||
finishCallback: finishCallback
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Slides a element down (i.e. show a hidden element)
|
||||
*
|
||||
* @param HTMLElement element the element to slide down
|
||||
* @param function finishCallback function to call when the animation has
|
||||
* been finished (i.e. the element is visible)
|
||||
* @param function startCallback function to call when the animation starts
|
||||
* @return void
|
||||
*/
|
||||
utils.slideDown = function (element, finishCallback, startCallback) {
|
||||
utils.slideIn(element, {
|
||||
cssRule: 'height',
|
||||
cssRuleRef: 'clientHeight',
|
||||
cssClass: 'up',
|
||||
startCallback: startCallback,
|
||||
finishCallback: finishCallback
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Slides a element out (i.e. hide the element)
|
||||
*
|
||||
* @param HTMLElement element the element to slide out
|
||||
* @param object options the settings of the sliding process
|
||||
* @return void
|
||||
*/
|
||||
utils.slideOut = function (element, options) {
|
||||
element.style[options.cssRule] = element[options.cssRuleRef] + 'px';
|
||||
|
||||
var slideId = parseInt(element.dataset.slideId) || 0;
|
||||
element.dataset.slideId = ++slideId;
|
||||
|
||||
window.requestAnimationFrame(function () {
|
||||
element.classList.add('slide');
|
||||
|
||||
window.requestAnimationFrame(function () {
|
||||
element.classList.add(options.cssClass);
|
||||
|
||||
if (options.startCallback) {
|
||||
options.startCallback();
|
||||
}
|
||||
|
||||
window.setTimeout(function () {
|
||||
if (parseInt(element.dataset.slideId) !== slideId) return;
|
||||
|
||||
element.classList.add('hidden');
|
||||
element.classList.remove('slide');
|
||||
element.classList.remove(options.cssClass);
|
||||
element.style[options.cssRule] = null;
|
||||
|
||||
if (options.finishCallback) {
|
||||
window.requestAnimationFrame(options.finishCallback);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Slides a element in (i.e. make the element visible)
|
||||
*
|
||||
* @param HTMLElement element the element to slide in
|
||||
* @param object options the settings of the sliding process
|
||||
* @return void
|
||||
*/
|
||||
utils.slideIn = function (element, options) {
|
||||
var cssRuleOriginalValue = element[options.cssRuleRef] + 'px',
|
||||
slideId = parseInt(element.dataset.slideId) || 0;
|
||||
|
||||
element.dataset.slideId = ++slideId;
|
||||
|
||||
element.style[options.cssRule] = null;
|
||||
element.classList.remove('hidden', 'slide', options.cssClass);
|
||||
var cssRuleValue = element[options.cssRuleRef] + 'px';
|
||||
|
||||
element.classList.add('slide');
|
||||
|
||||
window.requestAnimationFrame(function () {
|
||||
element.style[options.cssRule] = cssRuleOriginalValue;
|
||||
|
||||
window.requestAnimationFrame(function () {
|
||||
element.style[options.cssRule] = cssRuleValue;
|
||||
|
||||
if (options.startCallback) {
|
||||
options.startCallback();
|
||||
}
|
||||
|
||||
window.setTimeout(function () {
|
||||
if (parseInt(element.dataset.slideId) !== slideId) return;
|
||||
|
||||
element.classList.remove('slide');
|
||||
element.style[options.cssRule] = null;
|
||||
|
||||
if (options.finishCallback) {
|
||||
window.requestAnimationFrame(options.finishCallback);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Check whether a element is visible or not
|
||||
*
|
||||
* @param HTMLElement element the element to test
|
||||
* @return boolean TRUE when the element is visible, FALSE otherwise
|
||||
*/
|
||||
utils.isElementVisible = function (element) {
|
||||
return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,394 +1,285 @@
|
|||
/*=================================*/
|
||||
/* Pico Default Theme
|
||||
/* By: Gilbert Pellegrom
|
||||
/* http: //dev7studios.com
|
||||
/*=================================*/
|
||||
/**
|
||||
* Pico's Default Theme
|
||||
*
|
||||
* Pico's default theme is a bit bare - but that's intentional! The default
|
||||
* theme isn't meant for production use, it's actually a template for you to
|
||||
* design your own theme around.
|
||||
*
|
||||
* Pico is a stupidly simple, blazing fast, flat file CMS.
|
||||
*
|
||||
* @author Daniel Rudolf
|
||||
* @link http://picocms.org
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @version 1.1
|
||||
*/
|
||||
|
||||
/* Reset Styles
|
||||
/*---------------------------------------------*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
border: 0 none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: "" "";
|
||||
}
|
||||
|
||||
/* HTML5 tags */
|
||||
header, section, footer,
|
||||
aside, nav, article, figure {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* hand cursor on clickable input elements */
|
||||
label, input[type=button], input[type=submit], button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* make buttons play nice in IE:
|
||||
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
|
||||
button {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Sharper Thumbnails */
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
/* Input Styles
|
||||
/*---------------------------------------------*/
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
padding: 5px;
|
||||
font: 400 1em Verdana, Sans-serif;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border: 1px solid #999999;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
|
||||
/* Main Styles
|
||||
/*---------------------------------------------*/
|
||||
body {
|
||||
font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif;
|
||||
font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
background: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: #2EAE9B;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
-ms-transition: all 0.2s linear;
|
||||
-o-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #000;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
p, table, ol, ul, pre, blockquote, dl {
|
||||
p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 30px;
|
||||
.hidden { display: none !important; }
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
.slide {
|
||||
overflow-y: hidden !important;
|
||||
-webkit-transition: height .5s ease-in !important;
|
||||
transition: height .5s ease-in !important;
|
||||
}
|
||||
.slide.up { height: 0 !important; }
|
||||
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
/*** BASIC LAYOUT ***/
|
||||
|
||||
u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
cursor: help;
|
||||
border-bottom: 0.1em dotted;
|
||||
}
|
||||
|
||||
td, td img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: solid 1px #999;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Courier, "Courier New", Monaco, Tahoma;
|
||||
background: #eee;
|
||||
color: #333;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #eee;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin-left: 15px;
|
||||
padding-left: 10px;
|
||||
border-left: 5px solid #dddddd;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
/* Structure Styles
|
||||
/*---------------------------------------------*/
|
||||
html { height: 100%; }
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
body > * {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
margin: 5em 0 4em;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
.container {
|
||||
max-width: 47em;
|
||||
padding: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: #2EAE9B;
|
||||
padding: 60px 0;
|
||||
margin-bottom: 80px;
|
||||
color: #afe1da;
|
||||
.widescreen .container { max-width: 72em; }
|
||||
|
||||
main .container {
|
||||
/* very ugly, avoid this whenever possible! */
|
||||
overflow-x: auto;
|
||||
}
|
||||
#header a {
|
||||
color: #afe1da;
|
||||
}
|
||||
#header h1 a,
|
||||
#header a:hover,
|
||||
#header .active a {
|
||||
color: #fff;
|
||||
}
|
||||
#header h1 {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
|
||||
/*** BASIC LAYOUT: HEADER ***/
|
||||
|
||||
header { background: #2EAE9B; }
|
||||
|
||||
header h1 {
|
||||
float: left;
|
||||
font-size: 2rem;
|
||||
margin: 0 1em 1.5em 0;
|
||||
}
|
||||
#header .menu-icon {
|
||||
display: none;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #afe1da url(menu-icon.png) center;
|
||||
header h1 a, header h1 a:hover { color: #fff; }
|
||||
|
||||
header nav {
|
||||
text-align: right;
|
||||
margin: 3em 0;
|
||||
}
|
||||
#header nav {
|
||||
float: right;
|
||||
header nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#header nav a {
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#header a:hover#menu-icon {
|
||||
background-color: #444;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
#header ul {
|
||||
list-style: none;
|
||||
}
|
||||
#header li {
|
||||
header nav ul li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-left: 1em;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
#content {
|
||||
flex: 1 0 auto;
|
||||
|
||||
header nav a, #page-menu-toggle { color: #afe1da; }
|
||||
header nav .active a, header nav a:hover, #page-menu-toggle:hover { color: #fff; }
|
||||
|
||||
#page-menu-toggle {
|
||||
display: none;
|
||||
float: right;
|
||||
width: 2em;
|
||||
margin: 0 0 0.5em 1em;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#footer {
|
||||
#page-menu-toggle > * { vertical-align: middle; }
|
||||
|
||||
/*** BASIC LAYOUT: FOOTER ***/
|
||||
|
||||
footer {
|
||||
background: #707070;
|
||||
padding: 60px 0;
|
||||
margin-top: 80px;
|
||||
color: #C0C0C0;
|
||||
}
|
||||
#footer .social {
|
||||
|
||||
footer a { color: #ddd; }
|
||||
footer a:hover { color: #fff; }
|
||||
|
||||
footer p {
|
||||
margin: 3em 0;
|
||||
}
|
||||
|
||||
footer .social {
|
||||
float: right;
|
||||
margin: 0 0 0.5em 1em;
|
||||
font-size: 200%;
|
||||
}
|
||||
#footer a { color: #ddd; }
|
||||
#footer a:hover { color: #fff; }
|
||||
|
||||
/* Misc Styles
|
||||
/*---------------------------------------------*/
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* Media Queries
|
||||
/*---------------------------------------------*/
|
||||
/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
@media only screen and (max-width : 768px) {
|
||||
.inner {
|
||||
width: 85%;
|
||||
@media (max-width: 767px) {
|
||||
main { margin: 2em 0 1em; }
|
||||
|
||||
header h1 {
|
||||
float: none;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.inner img {
|
||||
width:100%;
|
||||
}
|
||||
#header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#header h1 a {
|
||||
font-size:1em;
|
||||
}
|
||||
#header .menu-icon {
|
||||
display:inline-block;
|
||||
}
|
||||
#header nav a { color: #000; }
|
||||
#header nav a:hover { color: #afe1da; }
|
||||
#header nav ul, nav:active ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 5px solid #444;
|
||||
right: 2.7em;
|
||||
top: 100px;
|
||||
width: 80%;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
z-index: 9999;
|
||||
}
|
||||
#header nav li {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
|
||||
header nav {
|
||||
clear: right;
|
||||
margin: 0;
|
||||
}
|
||||
#header nav:hover ul {
|
||||
display: block;
|
||||
header nav ul {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
header nav ul li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
header nav ul li a {
|
||||
display: block;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.js #page-menu-toggle { display: block; }
|
||||
|
||||
footer p { margin: 1em 0; }
|
||||
}
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
@media only screen and (max-width : 480px) {
|
||||
.inner {
|
||||
width: 85%;
|
||||
}
|
||||
.inner img {
|
||||
width:100%;
|
||||
}
|
||||
#header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#header h1 a {
|
||||
font-size:1em;
|
||||
}
|
||||
#header .menu-icon {
|
||||
display:inline-block;
|
||||
}
|
||||
#header nav a { color: #000; }
|
||||
#header nav a:hover { color: #afe1da; }
|
||||
#header nav ul, nav:active ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 5px solid #444;
|
||||
right: 0em;
|
||||
top: 100px;
|
||||
width: auto;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
}
|
||||
#header nav li {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
#header nav:hover ul {
|
||||
display: block;
|
||||
}
|
||||
/*** TEXT ***/
|
||||
|
||||
a {
|
||||
color: #2EAE9B;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .2s ease-in;
|
||||
transition: color .2s ease-in;
|
||||
}
|
||||
a:hover { color: #444; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0.6em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
h1 { font-size: 2rem; }
|
||||
h2 { font-size: 1.7rem; }
|
||||
h3 { font-size: 1.4rem; }
|
||||
h4 { font-size: 1.1rem; }
|
||||
h5 { font-size: 1rem; }
|
||||
h6 { font-size: 1rem; font-weight: normal; font-style: italic; }
|
||||
|
||||
img { max-width: 100%; }
|
||||
|
||||
p, td, th, li, dd {
|
||||
text-align: justify;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0.15em solid #f5f5f5;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
abbr { text-decoration: underline dotted; }
|
||||
|
||||
/*** TABLES ***/
|
||||
|
||||
table { border-spacing: 0; }
|
||||
|
||||
td, th {
|
||||
padding: 0.4em 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
td, th { border: solid 1px #ccc; }
|
||||
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; }
|
||||
thead tr:last-child th { border-bottom: 0 none; }
|
||||
td:not(:last-child), th:not(:last-child) { border-right: 0 none; }
|
||||
|
||||
tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-radius: 0.3em; }
|
||||
tr:first-child td:last-child, tr:first-child th:last-child { border-top-right-radius: 0.3em; }
|
||||
tbody tr:last-child td:first-child { border-bottom-left-radius: 0.3em; }
|
||||
tbody tr:last-child td:last-child { border-bottom-right-radius: 0.3em; }
|
||||
table thead + tbody tr:first-child td { border-radius: 0 !important; }
|
||||
|
||||
.table-responsive { overflow-x: auto; }
|
||||
|
||||
/*** LISTS ***/
|
||||
|
||||
ol, ul {
|
||||
list-style-position: outside;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
ol { padding-left: 2.5em; }
|
||||
li { padding-left: 0.5em; }
|
||||
|
||||
dt { font-weight: bold; }
|
||||
dd { margin-left: 2em; }
|
||||
|
||||
/*** CODE ***/
|
||||
|
||||
code {
|
||||
margin: 0 0.1em;
|
||||
padding: 0.1em 0.2em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.3em;
|
||||
background: #f5f5f5;
|
||||
font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0 0.9em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.3em;
|
||||
background: #f5f5f5;
|
||||
line-height: 1.4;
|
||||
}
|
||||
pre code {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/*** BLOCKQUOTE ***/
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin-left: 1em;
|
||||
padding-left: 1em;
|
||||
border-left: 0.5em solid #f5f5f5;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue