Daniel Rudolf
9 years ago
parent
21bd18bcf0
commit
6a13915f15
Binary file not shown.
|
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.
@ -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(); |
||||||
@ -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. |
||||||
/* Reset Styles |
* |
||||||
/*---------------------------------------------*/ |
* Pico is a stupidly simple, blazing fast, flat file CMS. |
||||||
html, body, div, span, applet, object, iframe, |
* |
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
* @author Daniel Rudolf |
||||||
a, abbr, acronym, address, big, cite, code, |
* @link http://picocms.org |
||||||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
* @license http://opensource.org/licenses/MIT The MIT License |
||||||
small, strike, strong, sub, sup, tt, var, |
* @version 1.1 |
||||||
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; |
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; |
||||||
|
color: #444; |
||||||
} |
} |
||||||
|
|
||||||
table { |
p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote { |
||||||
border-collapse: collapse; |
margin-bottom: 1em; |
||||||
border-spacing: 0; |
|
||||||
} |
} |
||||||
|
|
||||||
caption, th, td { |
.hidden { display: none !important; } |
||||||
text-align: left; |
.sr-only { |
||||||
font-weight: normal; |
position: absolute; |
||||||
|
width: 1px; |
||||||
|
height: 1px; |
||||||
|
padding: 0; |
||||||
|
margin: -1px; |
||||||
|
overflow: hidden; |
||||||
|
clip: rect(0, 0, 0, 0); |
||||||
|
border: 0 none; |
||||||
} |
} |
||||||
|
|
||||||
blockquote:before, blockquote:after, |
.slide { |
||||||
q:before, q:after { |
overflow-y: hidden !important; |
||||||
content: ""; |
-webkit-transition: height .5s ease-in !important; |
||||||
|
transition: height .5s ease-in !important; |
||||||
} |
} |
||||||
|
.slide.up { height: 0 !important; } |
||||||
|
|
||||||
blockquote, q { |
/*** BASIC LAYOUT ***/ |
||||||
quotes: "" ""; |
|
||||||
} |
|
||||||
|
|
||||||
/* HTML5 tags */ |
html { height: 100%; } |
||||||
header, section, footer, |
body { |
||||||
aside, nav, article, figure { |
display: flex; |
||||||
display: block; |
flex-direction: column; |
||||||
|
height: 100%; |
||||||
} |
} |
||||||
|
main { |
||||||
/* hand cursor on clickable input elements */ |
flex: 1 0 auto; |
||||||
label, input[type=button], input[type=submit], button { |
margin: 5em 0 4em; |
||||||
cursor: pointer; |
|
||||||
} |
} |
||||||
|
|
||||||
/* make buttons play nice in IE: |
.container { |
||||||
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ |
max-width: 47em; |
||||||
button { |
padding: 0 0.5em; |
||||||
width: auto; |
margin: 0 auto; |
||||||
overflow: visible; |
|
||||||
} |
} |
||||||
|
|
||||||
/* Sharper Thumbnails */ |
.widescreen .container { max-width: 72em; } |
||||||
img { |
|
||||||
-ms-interpolation-mode: bicubic; |
|
||||||
} |
|
||||||
|
|
||||||
/* Input Styles |
main .container { |
||||||
/*---------------------------------------------*/ |
/* very ugly, avoid this whenever possible! */ |
||||||
input, |
overflow-x: auto; |
||||||
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, |
/*** BASIC LAYOUT: HEADER ***/ |
||||||
textarea:focus, |
|
||||||
select:focus { |
|
||||||
color: #000; |
|
||||||
background: #fff; |
|
||||||
border: 1px solid #666666; |
|
||||||
} |
|
||||||
|
|
||||||
/* Main Styles |
header { background: #2EAE9B; } |
||||||
/*---------------------------------------------*/ |
|
||||||
body { |
|
||||||
font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif; |
|
||||||
color: #444; |
|
||||||
background: #fff; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
} |
|
||||||
|
|
||||||
a, a:visited { |
header h1 { |
||||||
color: #2EAE9B; |
float: left; |
||||||
text-decoration: none; |
font-size: 2rem; |
||||||
-webkit-transition: all 0.2s linear; |
margin: 0 1em 1.5em 0; |
||||||
-moz-transition: all 0.2s linear; |
|
||||||
-ms-transition: all 0.2s linear; |
|
||||||
-o-transition: all 0.2s linear; |
|
||||||
transition: all 0.2s linear; |
|
||||||
} |
} |
||||||
|
header h1 a, header h1 a:hover { color: #fff; } |
||||||
|
|
||||||
a:hover, a:active { |
header nav { |
||||||
color: #000; |
text-align: right; |
||||||
text-decoration: none; |
margin: 3em 0; |
||||||
|
} |
||||||
|
header nav ul { |
||||||
|
list-style: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
header nav ul li { |
||||||
|
display: inline-block; |
||||||
|
margin-left: 1em; |
||||||
|
padding: 0; |
||||||
|
font-weight: bold; |
||||||
} |
} |
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 { |
header nav a, #page-menu-toggle { color: #afe1da; } |
||||||
color: #000; |
header nav .active a, header nav a:hover, #page-menu-toggle:hover { color: #fff; } |
||||||
line-height: 1.2em; |
|
||||||
margin-bottom: 0.6em; |
#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; |
||||||
} |
} |
||||||
|
#page-menu-toggle > * { vertical-align: middle; } |
||||||
|
|
||||||
|
/*** BASIC LAYOUT: FOOTER ***/ |
||||||
|
|
||||||
h1 { |
footer { |
||||||
font-size: 2em; |
background: #707070; |
||||||
|
color: #C0C0C0; |
||||||
} |
} |
||||||
|
|
||||||
h2 { |
footer a { color: #ddd; } |
||||||
font-size: 1.7em; |
footer a:hover { color: #fff; } |
||||||
|
|
||||||
|
footer p { |
||||||
|
margin: 3em 0; |
||||||
} |
} |
||||||
|
|
||||||
h3 { |
footer .social { |
||||||
font-size: 1.5em; |
float: right; |
||||||
margin-top: 2em; |
margin: 0 0 0.5em 1em; |
||||||
|
font-size: 2rem; |
||||||
} |
} |
||||||
|
|
||||||
p, table, ol, ul, pre, blockquote, dl { |
/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/ |
||||||
margin-bottom: 1em; |
|
||||||
|
@media (max-width: 767px) { |
||||||
|
main { margin: 2em 0 1em; } |
||||||
|
|
||||||
|
header h1 { |
||||||
|
float: none; |
||||||
|
margin: 0.5em 0; |
||||||
|
} |
||||||
|
|
||||||
|
header nav { |
||||||
|
clear: right; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
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; } |
||||||
} |
} |
||||||
|
|
||||||
ol, ul { |
/*** TEXT ***/ |
||||||
padding-left: 30px; |
|
||||||
|
a { |
||||||
|
color: #2EAE9B; |
||||||
|
text-decoration: none; |
||||||
|
-webkit-transition: color .2s ease-in; |
||||||
|
transition: color .2s ease-in; |
||||||
} |
} |
||||||
|
a:hover { color: #444; } |
||||||
|
|
||||||
b, strong { |
h1, h2, h3, h4, h5, h6 { |
||||||
|
margin-bottom: 0.6em; |
||||||
font-weight: bold; |
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; } |
||||||
|
|
||||||
i, em { |
img { max-width: 100%; } |
||||||
font-style: italic; |
|
||||||
} |
|
||||||
|
|
||||||
u { |
p, td, th, li, dd { |
||||||
text-decoration: underline; |
text-align: justify; |
||||||
|
overflow-wrap: break-word; |
||||||
|
word-wrap: break-word; |
||||||
} |
} |
||||||
|
|
||||||
abbr, acronym { |
hr { |
||||||
cursor: help; |
border: 0.15em solid #f5f5f5; |
||||||
border-bottom: 0.1em dotted; |
border-radius: 0.3em; |
||||||
} |
} |
||||||
|
|
||||||
td, td img { |
abbr { text-decoration: underline dotted; } |
||||||
vertical-align: top; |
|
||||||
} |
/*** TABLES ***/ |
||||||
|
|
||||||
|
table { border-spacing: 0; } |
||||||
|
|
||||||
td, th { |
td, th { |
||||||
border: solid 1px #999; |
padding: 0.4em 1em; |
||||||
padding: 0.25em 0.5em; |
vertical-align: top; |
||||||
} |
} |
||||||
|
|
||||||
th { |
th { |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
text-align: center; |
text-align: center; |
||||||
background: #eee; |
background: #f5f5f5; |
||||||
|
color: #333; |
||||||
} |
} |
||||||
|
|
||||||
sub { |
td, th { border: solid 1px #ccc; } |
||||||
vertical-align: sub; |
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; } |
||||||
font-size: smaller; |
thead tr:last-child th { border-bottom: 0 none; } |
||||||
} |
td:not(:last-child), th:not(:last-child) { border-right: 0 none; } |
||||||
|
|
||||||
sup { |
tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-radius: 0.3em; } |
||||||
vertical-align: super; |
tr:first-child td:last-child, tr:first-child th:last-child { border-top-right-radius: 0.3em; } |
||||||
font-size: smaller; |
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; } |
||||||
|
|
||||||
code { |
.table-responsive { overflow-x: auto; } |
||||||
font-family: Courier, "Courier New", Monaco, Tahoma; |
|
||||||
background: #eee; |
|
||||||
color: #333; |
|
||||||
padding: 0px 2px; |
|
||||||
} |
|
||||||
|
|
||||||
pre { |
/*** LISTS ***/ |
||||||
background: #eee; |
|
||||||
padding: 20px; |
|
||||||
overflow: auto; |
|
||||||
} |
|
||||||
|
|
||||||
blockquote { |
ol, ul { |
||||||
font-style: italic; |
list-style-position: outside; |
||||||
margin-left: 15px; |
padding-left: 1.5em; |
||||||
padding-left: 10px; |
|
||||||
border-left: 5px solid #dddddd; |
|
||||||
} |
} |
||||||
|
ol { padding-left: 2.5em; } |
||||||
|
li { padding-left: 0.5em; } |
||||||
|
|
||||||
dd { |
dt { font-weight: bold; } |
||||||
margin-left: 2em; |
dd { margin-left: 2em; } |
||||||
} |
|
||||||
|
|
||||||
/* Structure Styles |
/*** CODE ***/ |
||||||
/*---------------------------------------------*/ |
|
||||||
body { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
min-height: 100vh; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
body > * { |
|
||||||
flex: none; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.inner { |
code { |
||||||
width: 100%; |
margin: 0 0.1em; |
||||||
max-width: 850px; |
padding: 0.1em 0.2em; |
||||||
margin: 0 auto; |
border: 1px solid #ccc; |
||||||
|
border-radius: 0.3em; |
||||||
|
background: #f5f5f5; |
||||||
|
font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace; |
||||||
|
font-size: 0.9em; |
||||||
} |
} |
||||||
|
|
||||||
#header { |
pre { |
||||||
background: #2EAE9B; |
padding: 0 0.9em; |
||||||
padding: 60px 0; |
border: 1px solid #ccc; |
||||||
margin-bottom: 80px; |
border-radius: 0.3em; |
||||||
color: #afe1da; |
background: #f5f5f5; |
||||||
} |
line-height: 1.4; |
||||||
#header a { |
|
||||||
color: #afe1da; |
|
||||||
} |
|
||||||
#header h1 a, |
|
||||||
#header a:hover, |
|
||||||
#header .active a { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
#header h1 { |
|
||||||
font-weight: bold; |
|
||||||
margin: 0; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
#header .menu-icon { |
|
||||||
display: none; |
|
||||||
width: 35px; |
|
||||||
height: 35px; |
|
||||||
background: #afe1da url(menu-icon.png) center; |
|
||||||
} |
} |
||||||
#header nav { |
pre code { |
||||||
float: right; |
display: block; |
||||||
list-style: none; |
|
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 1em 0; |
||||||
} |
border: 0 none; |
||||||
#header nav a { |
background: transparent; |
||||||
font-weight: bold; |
overflow-x: auto; |
||||||
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; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
#content { |
|
||||||
flex: 1 0 auto; |
|
||||||
} |
|
||||||
#footer { |
|
||||||
background: #707070; |
|
||||||
padding: 60px 0; |
|
||||||
margin-top: 80px; |
|
||||||
color: #C0C0C0; |
|
||||||
} |
|
||||||
#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; |
|
||||||
} |
|
||||||
|
|
||||||
/* Media Queries |
|
||||||
/*---------------------------------------------*/ |
|
||||||
|
|
||||||
/* Small Devices, Tablets */ |
/*** BLOCKQUOTE ***/ |
||||||
@media only screen and (max-width : 768px) { |
|
||||||
.inner { |
|
||||||
width: 85%; |
|
||||||
} |
|
||||||
.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; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
#header nav:hover ul { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Extra Small Devices, Phones */ |
blockquote { |
||||||
@media only screen and (max-width : 480px) { |
font-style: italic; |
||||||
.inner { |
margin-left: 1em; |
||||||
width: 85%; |
padding-left: 1em; |
||||||
} |
border-left: 0.5em solid #f5f5f5; |
||||||
.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; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue