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 |
||||
/* By: Gilbert Pellegrom |
||||
/* http: //dev7studios.com |
||||
/*=================================*/ |
||||
|
||||
/* 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 { |
||||
/** |
||||
* 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 |
||||
*/ |
||||
|
||||
* { |
||||
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; |
||||
font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif; |
||||
font-size: 16px; |
||||
line-height: 1.6; |
||||
color: #444; |
||||
} |
||||
|
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote { |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
caption, th, td { |
||||
text-align: left; |
||||
font-weight: normal; |
||||
.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; |
||||
} |
||||
|
||||
blockquote:before, blockquote:after, |
||||
q:before, q:after { |
||||
content: ""; |
||||
.slide { |
||||
overflow-y: hidden !important; |
||||
-webkit-transition: height .5s ease-in !important; |
||||
transition: height .5s ease-in !important; |
||||
} |
||||
.slide.up { height: 0 !important; } |
||||
|
||||
blockquote, q { |
||||
quotes: "" ""; |
||||
} |
||||
/*** BASIC LAYOUT ***/ |
||||
|
||||
/* HTML5 tags */ |
||||
header, section, footer, |
||||
aside, nav, article, figure { |
||||
display: block; |
||||
html { height: 100%; } |
||||
body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
} |
||||
|
||||
/* hand cursor on clickable input elements */ |
||||
label, input[type=button], input[type=submit], button { |
||||
cursor: pointer; |
||||
main { |
||||
flex: 1 0 auto; |
||||
margin: 5em 0 4em; |
||||
} |
||||
|
||||
/* make buttons play nice in IE: |
||||
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ |
||||
button { |
||||
width: auto; |
||||
overflow: visible; |
||||
.container { |
||||
max-width: 47em; |
||||
padding: 0 0.5em; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
/* Sharper Thumbnails */ |
||||
img { |
||||
-ms-interpolation-mode: bicubic; |
||||
} |
||||
.widescreen .container { max-width: 72em; } |
||||
|
||||
/* 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; |
||||
main .container { |
||||
/* very ugly, avoid this whenever possible! */ |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
input:focus, |
||||
textarea:focus, |
||||
select:focus { |
||||
color: #000; |
||||
background: #fff; |
||||
border: 1px solid #666666; |
||||
} |
||||
/*** BASIC LAYOUT: HEADER ***/ |
||||
|
||||
/* Main Styles |
||||
/*---------------------------------------------*/ |
||||
body { |
||||
font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif; |
||||
color: #444; |
||||
background: #fff; |
||||
-webkit-font-smoothing: antialiased; |
||||
} |
||||
header { background: #2EAE9B; } |
||||
|
||||
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; |
||||
header h1 { |
||||
float: left; |
||||
font-size: 2rem; |
||||
margin: 0 1em 1.5em 0; |
||||
} |
||||
header h1 a, header h1 a:hover { color: #fff; } |
||||
|
||||
a:hover, a:active { |
||||
color: #000; |
||||
text-decoration: none; |
||||
header nav { |
||||
text-align: right; |
||||
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 { |
||||
color: #000; |
||||
line-height: 1.2em; |
||||
margin-bottom: 0.6em; |
||||
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; |
||||
} |
||||
#page-menu-toggle > * { vertical-align: middle; } |
||||
|
||||
/*** BASIC LAYOUT: FOOTER ***/ |
||||
|
||||
h1 { |
||||
font-size: 2em; |
||||
footer { |
||||
background: #707070; |
||||
color: #C0C0C0; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 1.7em; |
||||
footer a { color: #ddd; } |
||||
footer a:hover { color: #fff; } |
||||
|
||||
footer p { |
||||
margin: 3em 0; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: 1.5em; |
||||
margin-top: 2em; |
||||
footer .social { |
||||
float: right; |
||||
margin: 0 0 0.5em 1em; |
||||
font-size: 2rem; |
||||
} |
||||
|
||||
p, table, ol, ul, pre, blockquote, dl { |
||||
margin-bottom: 1em; |
||||
/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/ |
||||
|
||||
@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 { |
||||
padding-left: 30px; |
||||
/*** TEXT ***/ |
||||
|
||||
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; |
||||
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 { |
||||
font-style: italic; |
||||
} |
||||
img { max-width: 100%; } |
||||
|
||||
u { |
||||
text-decoration: underline; |
||||
p, td, th, li, dd { |
||||
text-align: justify; |
||||
overflow-wrap: break-word; |
||||
word-wrap: break-word; |
||||
} |
||||
|
||||
abbr, acronym { |
||||
cursor: help; |
||||
border-bottom: 0.1em dotted; |
||||
hr { |
||||
border: 0.15em solid #f5f5f5; |
||||
border-radius: 0.3em; |
||||
} |
||||
|
||||
td, td img { |
||||
vertical-align: top; |
||||
} |
||||
abbr { text-decoration: underline dotted; } |
||||
|
||||
/*** TABLES ***/ |
||||
|
||||
table { border-spacing: 0; } |
||||
|
||||
td, th { |
||||
border: solid 1px #999; |
||||
padding: 0.25em 0.5em; |
||||
padding: 0.4em 1em; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
th { |
||||
font-weight: bold; |
||||
text-align: center; |
||||
background: #eee; |
||||
background: #f5f5f5; |
||||
color: #333; |
||||
} |
||||
|
||||
sub { |
||||
vertical-align: sub; |
||||
font-size: smaller; |
||||
} |
||||
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; } |
||||
|
||||
sup { |
||||
vertical-align: super; |
||||
font-size: smaller; |
||||
} |
||||
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; } |
||||
|
||||
code { |
||||
font-family: Courier, "Courier New", Monaco, Tahoma; |
||||
background: #eee; |
||||
color: #333; |
||||
padding: 0px 2px; |
||||
} |
||||
.table-responsive { overflow-x: auto; } |
||||
|
||||
pre { |
||||
background: #eee; |
||||
padding: 20px; |
||||
overflow: auto; |
||||
} |
||||
/*** LISTS ***/ |
||||
|
||||
blockquote { |
||||
font-style: italic; |
||||
margin-left: 15px; |
||||
padding-left: 10px; |
||||
border-left: 5px solid #dddddd; |
||||
ol, ul { |
||||
list-style-position: outside; |
||||
padding-left: 1.5em; |
||||
} |
||||
ol { padding-left: 2.5em; } |
||||
li { padding-left: 0.5em; } |
||||
|
||||
dd { |
||||
margin-left: 2em; |
||||
} |
||||
dt { font-weight: bold; } |
||||
dd { margin-left: 2em; } |
||||
|
||||
/* Structure Styles |
||||
/*---------------------------------------------*/ |
||||
body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 100vh; |
||||
height: 100%; |
||||
} |
||||
body > * { |
||||
flex: none; |
||||
width: 100%; |
||||
} |
||||
/*** CODE ***/ |
||||
|
||||
.inner { |
||||
width: 100%; |
||||
max-width: 850px; |
||||
margin: 0 auto; |
||||
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; |
||||
} |
||||
|
||||
#header { |
||||
background: #2EAE9B; |
||||
padding: 60px 0; |
||||
margin-bottom: 80px; |
||||
color: #afe1da; |
||||
} |
||||
#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; |
||||
pre { |
||||
padding: 0 0.9em; |
||||
border: 1px solid #ccc; |
||||
border-radius: 0.3em; |
||||
background: #f5f5f5; |
||||
line-height: 1.4; |
||||
} |
||||
#header nav { |
||||
float: right; |
||||
list-style: none; |
||||
pre code { |
||||
display: block; |
||||
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 { |
||||
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; |
||||
padding: 1em 0; |
||||
border: 0 none; |
||||
background: transparent; |
||||
overflow-x: auto; |
||||
} |
||||
.clearfix:after { |
||||
clear: both; |
||||
} |
||||
.clearfix { |
||||
*zoom: 1; |
||||
} |
||||
|
||||
/* Media Queries |
||||
/*---------------------------------------------*/ |
||||
|
||||
/* Small Devices, Tablets */ |
||||
@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; |
||||
} |
||||
} |
||||
/*** BLOCKQUOTE ***/ |
||||
|
||||
/* 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; |
||||
} |
||||
blockquote { |
||||
font-style: italic; |
||||
margin-left: 1em; |
||||
padding-left: 1em; |
||||
border-left: 0.5em solid #f5f5f5; |
||||
} |
||||
|
||||
Loading…
Reference in new issue