@import 'microcss';

// Colors $orange: #D65A31;

body {

background: $black;
color: $white;

}

header {

position: sticky;
top: 0;
background: $black;
z-index: 5;
height: 54px;

#site-title {
        font-size: 1.2rem;
        float: left;
}

#main-nav {
        float: right;
}

.navbar {
        line-height: 1;
        padding: 1rem .5rem;
        margin-bottom: 0;
        z-index: 10;
}

}

home {

background: $red;
position: relative;
display: inline-block;
width: 100%;
height: 200px;
text-align: center;

#site-desc {
        font-size: 1.5rem;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

h1 {
        font-weight: bold;
        margin-bottom: 1rem;
}

}

a {

color: $orange;
text-decoration: none;

&:hover {
        color: $red;
}

}

footer {

background-color: $red;
width: 100%;
padding: 1rem;
text-align: center;

a {
        color: $black;

        &:hover {
                color: $white;
        }
}

#social_links {
        font-size: 1.5rem;
        margin-bottom: .5rem;
}

}

content, search-results {

width: 90%;
max-width: 1024px;
margin: 1rem auto;

}

content.no-scroll {

position: fixed;
width: 100%;

}

entries {

.entry {
        padding: .5rem;
}

}

.entry {

.entry-title {
        display: block;
        font-size: 2rem;
        font-weight: bold;
}

.entry-date {
        display: block;
        color: $red;
}

.entry-title, .entry-date {
        margin-bottom: 1rem;
}

.entry-footer {
        margin-top: .5rem;
        display: inline-block;
        width: 100%;

        .entry-tags {
                float: left;
        }
}

}

pagination {

font-size: 1.3rem;
text-align: center;

}

table {

th, td {
        border-color: $white;
}

}

toggle-menu {

display: none;
float: right;

}

toggle-search {

float: right;

}

/* Search */

search-div {

position: fixed;
left: 0;
top: 54px;
z-index: 20;
background: $black;
width: 100%;
height: calc(100vh - 54px);
display: none;

#search {
        width: 90%;
        max-width: 380px;
        margin: 1rem auto;
        position: relative;
        font-size: 1.2rem;
}

#search-input {
        width: 100%;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid;
        background: transparent;
        color: $white;
        padding-right: 1.6rem;

        &+button {
                position: absolute;
                right: 0;
                background: transparent;
                border: 0;
                color: $white;
        }
}

&.open {
        display: block;
        overflow-y: auto;
}

}

@media (max-width: 1024px){

#home {
        height: auto;

        #site-desc {
                position: relative;
                transform: translate(0, 0);
                top: 0;
                left: 0;
                padding: 1rem;
        }
}

}

@media (max-width: 639px){

table.responsive tr:nth-of-type(2n+2) {
        background-color: $red;
}

header .navbar {
        line-height: 1;
        padding: .5rem;
        position: relative;
}

#toggle-menu {
        display: block;

        &.open > i::before {
                content: '\e800';
        }
}

#main-nav {
        position: absolute;
        float: none;
        width: 100%;
        line-height: 2rem;
        text-align: right;
        left: 0;
        width: 100%;
        background-color: $black;
        z-index: 10;
        padding-right: .5rem;
        max-height: 0;
        height: auto;
        overflow: hidden;
        transition: max-height .3s ease-in-out;

        &.open {
                max-height: 100vh;
        }
}

}

@media (max-width: 479px){

header #site-desc > h1 {
        font-size: 2rem;
        line-height: 1
}

}