Refactor default theme
This commit is contained in:
Daniel Rudolf
parent
21bd18bcf0
commit
6a13915f15
@ -27,6 +27,9 @@
|
|||||||
*/
|
*/
|
||||||
// $config['theme'] = 'default'; // Set the theme (defaults to "default")
|
// $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_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
|
// $config['twig_config'] = array( // Twig settings
|
||||||
// 'cache' => false, // To enable Twig caching change this to a path to a writable directory
|
// 'cache' => false, // To enable Twig caching change this to a path to a writable directory
|
||||||
// 'autoescape' => false, // Auto-escape Twig vars
|
// 'autoescape' => false, // Auto-escape Twig vars
|
||||||
|
|||||||
@ -20,3 +20,4 @@ Font license info
|
|||||||
License: SIL OFL 1.1 <http://scripts.sil.org/OFL>
|
License: SIL OFL 1.1 <http://scripts.sil.org/OFL>
|
||||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
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" />
|
<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="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>
|
</font>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 2.0 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); */
|
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-chat:before { content: '\e800'; } /* '' */
|
.icon-menu:before { content: '\f0c9'; } /* '' */
|
||||||
.icon-birdy:before { content: '\f099'; } /* '' */
|
|
||||||
.icon-octocat:before { content: '\f09b'; } /* '' */
|
.icon-octocat:before { content: '\f09b'; } /* '' */
|
||||||
|
.icon-birdy:before { content: '\f099'; } /* '' */
|
||||||
|
.icon-chat:before { content: '\e800'; } /* '' */
|
||||||
|
|||||||
@ -1,28 +1,32 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="no-js">
|
<html class="no-js">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<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>
|
<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
|
||||||
{% if meta.description %}
|
{% if meta.description %}
|
||||||
<meta name="description" content="{{ meta.description|striptags }}">
|
<meta name="description" content="{{ meta.description|striptags }}" />
|
||||||
{% endif %}{% if meta.robots %}
|
{% endif %}{% if meta.robots %}
|
||||||
<meta name="robots" content="{{ meta.robots }}">
|
<meta name="robots" content="{{ meta.robots }}" />
|
||||||
{% endif %}
|
{% 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 }}/style.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="{{ theme_url }}/fontello.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>
|
</head>
|
||||||
<body>
|
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
|
||||||
|
|
||||||
<header id="header">
|
<header>
|
||||||
<div class="inner clearfix">
|
<div class="container">
|
||||||
<h1><a href="{{ "index"|link }}" id="logo">{{ site_title }}</a></h1>
|
<a id="page-menu-toggle" title="Toggle Menu" role="button" aria-controls="page-menu" aria-expanded="false" tabindex="1">
|
||||||
<nav>
|
<span class="icon-menu" aria-hidden="true"></span>
|
||||||
<a href="#" class="menu-icon"></a>
|
<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>
|
<ul>
|
||||||
{% for page in pages if page.title %}
|
{% for page in pages if page.title %}
|
||||||
<li{% if page.id == current_page.id %} class="active"{% endif %}>
|
<li{% if page.id == current_page.id %} class="active"{% endif %}>
|
||||||
@ -34,24 +38,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section id="content">
|
<main>
|
||||||
<div class="inner">
|
<div class="container">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</main>
|
||||||
|
|
||||||
<footer id="footer">
|
<footer>
|
||||||
<div class="inner">
|
<div class="container">
|
||||||
<div class="social">
|
<div class="social">
|
||||||
{% for social in meta.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 %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
<p>
|
||||||
<a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
|
<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>.
|
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>.
|
Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
|
||||||
|
<script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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
|
* Pico's Default Theme
|
||||||
/* By: Gilbert Pellegrom
|
*
|
||||||
/* http: //dev7studios.com
|
* 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
|
* {
|
||||||
/*---------------------------------------------*/
|
box-sizing: border-box;
|
||||||
html, body, div, span, applet, object, iframe,
|
border: 0 none;
|
||||||
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 {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
font-weight: inherit;
|
|
||||||
font-style: inherit;
|
|
||||||
font-size: 100%;
|
|
||||||
font-family: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1;
|
font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
|
||||||
color: black;
|
font-size: 16px;
|
||||||
background: white;
|
line-height: 1.6;
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
color: #444;
|
color: #444;
|
||||||
background: #fff;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:visited {
|
p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote {
|
||||||
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 {
|
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol, ul {
|
.hidden { display: none !important; }
|
||||||
padding-left: 30px;
|
.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 {
|
.slide {
|
||||||
font-weight: bold;
|
overflow-y: hidden !important;
|
||||||
|
-webkit-transition: height .5s ease-in !important;
|
||||||
|
transition: height .5s ease-in !important;
|
||||||
}
|
}
|
||||||
|
.slide.up { height: 0 !important; }
|
||||||
|
|
||||||
i, em {
|
/*** BASIC LAYOUT ***/
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
u {
|
html { height: 100%; }
|
||||||
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
|
|
||||||
/*---------------------------------------------*/
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
body > * {
|
main {
|
||||||
flex: none;
|
flex: 1 0 auto;
|
||||||
width: 100%;
|
margin: 5em 0 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.container {
|
||||||
width: 100%;
|
max-width: 47em;
|
||||||
max-width: 850px;
|
padding: 0 0.5em;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
.widescreen .container { max-width: 72em; }
|
||||||
background: #2EAE9B;
|
|
||||||
padding: 60px 0;
|
main .container {
|
||||||
margin-bottom: 80px;
|
/* very ugly, avoid this whenever possible! */
|
||||||
color: #afe1da;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
#header a {
|
|
||||||
color: #afe1da;
|
/*** BASIC LAYOUT: HEADER ***/
|
||||||
}
|
|
||||||
#header h1 a,
|
header { background: #2EAE9B; }
|
||||||
#header a:hover,
|
|
||||||
#header .active a {
|
header h1 {
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
#header h1 {
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
float: left;
|
float: left;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0 1em 1.5em 0;
|
||||||
}
|
}
|
||||||
#header .menu-icon {
|
header h1 a, header h1 a:hover { color: #fff; }
|
||||||
display: none;
|
|
||||||
width: 35px;
|
header nav {
|
||||||
height: 35px;
|
text-align: right;
|
||||||
background: #afe1da url(menu-icon.png) center;
|
margin: 3em 0;
|
||||||
}
|
}
|
||||||
#header nav {
|
header nav ul {
|
||||||
float: right;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
#header nav a {
|
header nav ul li {
|
||||||
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 {
|
|
||||||
display: inline-block;
|
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;
|
background: #707070;
|
||||||
padding: 60px 0;
|
|
||||||
margin-top: 80px;
|
|
||||||
color: #C0C0C0;
|
color: #C0C0C0;
|
||||||
}
|
}
|
||||||
#footer .social {
|
|
||||||
|
footer a { color: #ddd; }
|
||||||
|
footer a:hover { color: #fff; }
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 3em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social {
|
||||||
float: right;
|
float: right;
|
||||||
margin: 0 0 0.5em 1em;
|
margin: 0 0 0.5em 1em;
|
||||||
font-size: 200%;
|
font-size: 2rem;
|
||||||
}
|
|
||||||
#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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Media Queries
|
/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/
|
||||||
/*---------------------------------------------*/
|
|
||||||
|
|
||||||
/* Small Devices, Tablets */
|
@media (max-width: 767px) {
|
||||||
@media only screen and (max-width : 768px) {
|
main { margin: 2em 0 1em; }
|
||||||
.inner {
|
|
||||||
width: 85%;
|
header h1 {
|
||||||
|
float: none;
|
||||||
|
margin: 0.5em 0;
|
||||||
}
|
}
|
||||||
.inner img {
|
|
||||||
width:100%;
|
header nav {
|
||||||
}
|
clear: right;
|
||||||
#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;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#header nav:hover ul {
|
header nav ul {
|
||||||
display: block;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Extra Small Devices, Phones */
|
.js #page-menu-toggle { display: block; }
|
||||||
@media only screen and (max-width : 480px) {
|
|
||||||
.inner {
|
footer p { margin: 1em 0; }
|
||||||
width: 85%;
|
|
||||||
}
|
}
|
||||||
.inner img {
|
|
||||||
width:100%;
|
/*** TEXT ***/
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #2EAE9B;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: color .2s ease-in;
|
||||||
|
transition: color .2s ease-in;
|
||||||
}
|
}
|
||||||
#header {
|
a:hover { color: #444; }
|
||||||
margin-bottom: 30px;
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-bottom: 0.6em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
#header h1 a {
|
h1 { font-size: 2rem; }
|
||||||
font-size:1em;
|
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;
|
||||||
}
|
}
|
||||||
#header .menu-icon {
|
|
||||||
display:inline-block;
|
hr {
|
||||||
|
border: 0.15em solid #f5f5f5;
|
||||||
|
border-radius: 0.3em;
|
||||||
}
|
}
|
||||||
#header nav a { color: #000; }
|
|
||||||
#header nav a:hover { color: #afe1da; }
|
abbr { text-decoration: underline dotted; }
|
||||||
#header nav ul, nav:active ul {
|
|
||||||
display: none;
|
/*** TABLES ***/
|
||||||
position: absolute;
|
|
||||||
padding: 20px;
|
table { border-spacing: 0; }
|
||||||
background: #fff;
|
|
||||||
border: 5px solid #444;
|
td, th {
|
||||||
right: 0em;
|
padding: 0.4em 1em;
|
||||||
top: 100px;
|
vertical-align: top;
|
||||||
width: auto;
|
|
||||||
border-radius: 4px 0 4px 4px;
|
|
||||||
}
|
}
|
||||||
#header nav li {
|
th {
|
||||||
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
background: #f5f5f5;
|
||||||
padding: 10px 0;
|
color: #333;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
#header nav:hover ul {
|
|
||||||
|
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;
|
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…
x
Reference in New Issue
Block a user