@import url('fonts.googleapis.com/css?family=Exo');
html, body {font-family: Exo;} body {
background-image: url('bg.jpg'); background-size: cover; background-position: center; color: #fff; background-attachment: fixed; background-color: #111;
}
body.disable_scroll { overflow-y: hidden; }
/* header and menu */
header {
padding: 10px; line-height: 40px; height: 60px; box-sizing: border-box; width: 100%; margin: auto; position: fixed; top: 0; z-index: 20
} header, footer, search-input {background-color: rgba(0,0,0,0.5);}
header::after {
content:""; display:block; clear:both;
} header nav {background: transparent;} .navbar > div {display: inline-block;} logo {line-height: 40px;} logo > img {border-radius: 50%; width: 40px; margin-right: 5px; float: left} logo, nav_social_links, search-navbar-btn { font-size: 1.5rem} header a {color: fff; display: inline-block} header nav {width: 100%; display: block; margin: auto;} header nav ul, share {list-style: none; margin: 0;padding: 0; display: inline-block;} header nav li, share li {display: inline-block;} menu > nav > ul > li > a {display: block} .navbar-left {float: left;} .navbar-right {float: right}
menu {
display: inline-block;
} toggle-menu {
position: relative; margin: 0; padding: 0; background: transparent; border: 0; color: #fff
} menu {
position: fixed; top: 0; left: -170px; text-align: left; background: #111; padding: 5px; width: auto; z-index: 666; line-height: 2; height: 100%; width: 160px; transition: left 0.5s;
}
menu.open {
left: 0;
}
menu nav ul {
margin-top: 5px; padding: 0; /*! display: inline-block; */
} menu nav ul li {display: block;width: 100%;}
close-menu {
display: block; width: 100%; text-align: right; font-size: 1.2rem;
}
menu .menu-title {color: #FF4136 }
footer {
padding: 5px;
}
/* Links */
a {
text-decoration: none; color: #0074D9; transition: color 0.5s;
}
a:hover {color: #7FDBFF !important;}
.tag_list {margin: 0; padding: 0;margin-top: 10px;} .tag_list li {
list-style: none; display: inline;
}
container {
width: 90%; max-width: 1000px; margin: 70px auto 10px;
}
/* Entries */
entries {
display: flex; justify-content: space-between; flex-flow: row wrap;
}
.entry, entry, archives {
margin: 5px; background-color: rgba(0,0,0,0.5); position: relative;
} .entry, entry {border-radius: 5px;} .entry {
width: 48%; /*height: 400px;*/ padding: 5px; box-sizing: border-box; max-width: 470px; display: inline-block; vertical-align: top; flex: 1;
}
entry {padding: 5px}
.entry > .entry-body {
padding: 5px 0; display: block; position: relative;
}
.entry > .entry-body{
height: 150px;
}
.entry .entry-body p {
margin: 5px;
}
.entry-date {font-size: 90%; padding: 0; margin: 0}
entry > .entry-body {
display: block; width: 100%; height: 100%; text-align: left
}
.entry-header > h3 {margin: 0 0 5px 0}
.entry-body > .entry-footer {
margin-top: 10px;
}
.entry-footer > .entry-tags, .entry-footer > .read-more {display: inline-block;}
.read-more {
color: #fff; font-weight: bold; float: right;
}
.proyect img {margin: 0} share a {font-size: 1.2em}
entry li {margin-bottom: 5px}
/* pre code */
pre {
white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ padding: 5px;
}
/* Pagination */ pagination {
width: 100%; list-style: none; text-align: center; margin: 0; padding: 0; font-size: 1.2em;
}
pagination a, pagination span {
width: 32px; height: 32px; display: inline-block; text-align: center; line-height: 32px; background-color: rgba(0,0,0,0.5); border-radius: 5px;
}
/* Search */
search {
position: fixed; top: 60px; left: 0; right: 0; bottom: 0; width: 100%; background-color: rgba(0,0,0,0.8); height: calc(100vh - 60px); z-index: 100; overflow-y: auto; display: none;
} search.open{
display: block;
} search form {
width: 90%; border: 0; color: #fff; display: block; max-width: 400px; font-size: 1.5em; margin: 5px auto; position: relative;
}
search-input, reset-search {
border: 0; background-color: transparent;
}
search-input {
border-bottom: 1px solid #fff; width: 100%; padding-right: 1.5em; box-sizing: border-box; color: #fff;
}
reset-search {
position: absolute; top: 0; right: 0; margin: 0; padding: 0;
}
results-container {
width: 90%; list-style: none; padding: 0; margin: auto; font-size: 1.2em;
} results-container > li {margin: 5px} results-container > a {display: block}
search-menu {
width: 98%; position: relative; height: 30px;
}
search-menu input {
width: 100%; border: 1px solid; border-radius: 5px; padding: 5px; padding-right: 20px; box-sizing: border-box;
}
search-menu button {
position: absolute; border: 0; background-color: transparent; top: 5px; height: 30px; right: 0; height: 20px; padding: 0; width: 20px;
}
search-navbar-btn {display: inline-block}
/* Categories and Tags lists */
.archive-group {margin-bottom: 10px} .archive-group > label {font-size: 1.3em} .category_list {
max-height: 0; overflow: hidden; transition: all 1s ease;
}
.acor {display: none} .acor:checked ~ .category_list {
max-height: 500px; transition: all 0s ease;
}
.acor ~ label > i:before {font-size: 0.8em}
.acor:checked ~ label > i:before {
content: '\E80E';
}
/* Responsive for various elements */
img {
max-width: 100%; height: auto;
}
div.video {
position: relative; width: 100%; padding-bottom:56.25%;
}
div.video > iframe {
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}
video {
max-width: 100%; display: block; margin: 10px auto;
}
table {width: 100%} table th {text-align: left}
/* 404 error page */ error404 {
text-align: center; font-size: 200%;
}
/* related posts */
relatedPosts {
text-align: center;
}
relatedPosts .related_post {
width: 20%; display: inline-block; vertical-align: top; margin-bottom: 10px;
}
.related_post > figure {margin: 0}
/* Archives */ archives {padding: 10px;} archives article {margin-left: 20px}
@media (min-width: 468px){
#menu_social_links {display: none}
}
@media (max-width: 767px){
#entries { justify-content: space-around; } .entry{ width: 100%; margin: auto; margin-bottom: 10px; height: auto; float: none; } /* tables */ table:not(.no-rp) tbody, table:not(.no-rp) thead, table:not(.no-rp) tr, table:not(.no-rp) th, table:not(.no-rp) td {display: block} table thead { position: absolute; top: -9999px; } table:not(.no-rp) tr { border-bottom: 1px solid; padding: 10px 0 } table:not(.no-rp) td { position: relative; padding-left: 45%; } table:not(.no-rp) tbody td:before { content: attr(data-title); position: absolute; left: 0; display: block; font-weight: bold; width: 40%; white-space: nowrap; } #relatedPosts .related_post {width: 45%}
}
@media (max-width: 480px) {
#header .uk-logo { font-size: 1.2rem } #header {/*! text-align: center */} #nav_social_links {display: none !important;} .title {font-size: 1.3rem} #logo_menu {float: none; /*! width: 90% */} #search-navbar-big {display: none} #menu_social_links ul {display: block !important;} #menu_social_links li a::after {content: attr(title)} #relatedPosts .related_post {width: 100%}
}