@import 'nanocss'; // Colors $dark: #222831; $grey: #393e46; $orange: d65a31; $white: eee;
body, html {
height: 100%;
}
body {
color: $white; background: $grey; line-height: 1.2;
}
container {
min-height: 100vh;
}
a, about a, .search-entry a {
color: $orange; text-decoration: none; transition: all .5s; &:hover { color: $white; }
}
header, content {
display: inline-block; padding: 1rem;
}
header {
width: 250px; background: $dark; color: $white; font-size: .8rem; height: 100vh; position: fixed; top: 0; left: 0; overflow-y: auto; a { color: $white; &:hover { color: $orange; } } #site-desc { font-weight: bold; margin-bottom: .5rem; } #main-nav { &.open { display: block; } a { &.nav-page { line-height: 1.5rem; display: block; } &.tag { margin: 0 3px 3px 0; display: inline-block; } } } #social_links { font-size: 1.1rem; margin-bottom: 1.5rem; a { display: inline; } } #main-nav { margin-bottom: 1rem; a { font-size: 1.1rem; } } #toggle_nav { font-size: 1.5rem; display: none; margin: 0 auto 1rem; width: 1.7rem; height: 1.7rem; text-align: center; }
}
content {
width: calc(100% - 250px); position: relative; padding: 1rem 2rem 60px; min-height: 100vh; box-sizing: border-box; margin-left: 250px;
}
site-title {
font-size: 1.3rem; display: block;
}
.entry {
margin-bottom: 1rem; .entry-title { margin-bottom: .2rem; } .entry-date { font-size: .8rem; margin-bottom: .5rem; display: block; } #post-content { margin-top: 1.5rem; } #share { list-style: none; li { display: inline-block; } }
}
.resp-iframe {
position: relative; width: 100%; padding-bottom:56.25%; margin: auto; margin-bottom: 1.5rem; height: 0; iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
}
video, audio {
width: 100%; max-width: 1280px; height: auto;
}
blockquote, pre {
background: $black; color: $white; border-left: 3px solid $orange;
}
/* Search */
search {
position: relative; max-width: 360px; margin-top: 1rem; #search-input { background: $dark; color: $white; padding-right: 24px; } #search-btn { position: absolute; top: 0; right: 0; padding: 0 3px; background: transparent; }
}
search-div {
position: fixed; top: 0; left: 25%; height: 100vh; background: $grey; width: 75%; display: none; z-index: 100; padding: 1rem 2rem; #close-search { position: absolute; top: .5rem; right: .5rem; font-size: 1.5rem; } #no-results { font-size: 1.2rem; }
}
.show {
display: block !important;
}
.no-scroll {
overflow: hidden;
}
/* Pagination */ pagination {
text-align: center; font-size: 1.2rem; .inactive { color: $black; }
}
/* 404 */
error404 {
color: $orange; text-align: center;
}
footer {
position: absolute; height: 60px; padding-bottom: 1rem; bottom: 0;
}
credits {
font-size: .8rem;
}
@media (max-width: 768px){
#container { display: block; } header { width: 100%; height: auto; padding: 1rem 5% 0; position: relative; #site-desc, #social_links { text-align: center; } #main-nav, .hide-menu { display: none; } #main-nav a { display: inline-block; } #toggle_nav { display: block; } } #search { margin: auto; } #search-div { position: absolute; width: 100%; top: 40px; left: 0; height: auto; padding: 1rem; margin-bottom: 1rem; border-radius: .2rem; border: 1px solid $black; .search-entry { margin-bottom: 0; h4 { font-size: 1rem; margin-bottom: 0; } span { display: none; } } } #content { width: 90%; margin: auto; padding: 1rem 0 60px; display: block; } table.responsive { & thead {display: none} & th, & td { display: block; padding-left: 50%; position: relative; border-bottom: 0; } & th:before, & td:before{ display: inline-block; width: 50%; content: attr(data-title); position: absolute; left: 0; font-weight: bold; padding:0 5px; } & tr:nth-of-type(2n+2) { background-color: $dark; } }
}
@media (max-width: 479px) {
table.responsive { & th, & td { display: block; width: 100%; padding-left: 5px; } & th:before, & td:before{ display: block; width: 100%; position: relative; padding: 0; } }
}