@import url('fonts.googleapis.com/css?family=Open+Sans'); body {
background-color: #111; color: #fff; font-family: 'Open Sans';
}
a {
color: #0074D9; text-decoration: none; transition: color 0.5s;
}
content {
width: 90%; max-width: 860px; margin: auto; margin-top: 60px;
}
header {
height: 50px; box-sizing: border-box; line-height: 50px; position: fixed; width: 100%; top: 0; left: 0; background-color: #111; z-index: 100; box-sizing: border-box; padding: 0 10px;
} site-title, main-nav {display: inline-block;} site-title {font-size: 1.5em; font-weight: bold; color: fff}
/* Navbar */ main-nav {float: right}
toggle-menu {
width: 24px; height: 24px; display: none; text-align: center; box-sizing: border-box; line-height: 24px; z-index: 200; position: relative;
}
/* Footer */
footer {
border-top: 1px solid; padding: 10px; text-align: center; font-size: 0.9em; margin-top: 20px;
}
social_links {
text-align: center;
}
social_links > a {
font-size: 1.5em;
}
img {max-width: 100%; height: auto}
/* Video iframe */
div.video {
position: relative; width: 100%; padding-bottom:56.25%;
}
div.video > iframe {
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}
table {width: 100%} table th {text-align: left}
a:hover {color: #7FDBFF !important;}
pre {
white-space: pre-wrap;
}
/* Entries list */
.entry {margin-bottom: 20px} .entry .entry-title {
font-size: 1.8em; display: block;
} .entry .entry-date {
color: #aaa; display: block; margin: 5px 0;
}
/* Pagination */
pagination {
text-align: center; font-size: 1.2em;
}
pagination a, pagination span {
width: 24px; display: inline-block; height: 24px; line-height: 24px;
}
pagination .actual-page {font-weight: bold;} pagination .inactive {color: aaa}
@media (max-width: 768px){
header { line-height: 1px; height: 44px; line-height: 34px; } #main-nav { position: fixed; float: none; display: block; left: -180px; top: 0; background-color: #111; line-height: initial; width: 180px; height: 100%; padding: 10px; padding-top: 40px; box-sizing: border-box; z-index: 100; transition: left 1s; } #main-nav > a { display: block; margin-bottom: 5px; } #toggle-menu { display: inline-block; } #toggle-menu::before { font-family: 'Fontello'; content: '\F0C9'; color: #fff; font-size: 18px; } #site-title {margin-left: 5px;} #main-nav.open {left: 0;} #toggle-menu.open {z-index: 200} #toggle-menu.open::before {content: '\E800'} /* tables */ table tbody, table thead, table tr, table th, table td {display: block} table thead { position: absolute; top: -9999px; } table tr { border-bottom: 1px solid; padding: 10px 0 } table td { position: relative; padding-left: 45%; } tbody td:before { content: attr(data-title); position: absolute; left: 0; display: block; font-weight: bold; width: 40%; white-space: nowrap; }
}