theme-geeklab/static/_css/style.css

@font-face {
    font-family: 'OpenSans';
    src: url('/_font/OpenSans/OpenSans-Regular.eot');
    src: url('/_font/OpenSans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/_font/OpenSans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('/_font/OpenSans/OpenSans-Light.eot');
    src: url('/_font/OpenSans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
         url('/_font/OpenSans/OpenSans-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'CreteRound';
    src: url('/_font/CreteRound/CreteRound-Regular.otf') format('truetype');
}
@font-face {
    font-family: 'DroidSans_Mono';
    src: url('/_font/DroidSansMono/DroidSansMono-webfont.eot');
    src: url('/_font/DroidSansMono/DroidSansMono-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_font/DroidSansMono/DroidSansMono-webfont.ttf') format('truetype');
}

html,body {
    margin:0;
    padding:0;
    height: 100%;
}
html{
    box-sizing: border-box;
    font-family:OpenSans;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/*
    Global Helper Classes
*/
.table{
    display:table;
}
.table-cell{
    display:table-cell;
}
.floated{
    float:left;
}
.clear{
    clear:both;
}

.chroma code{
  font-family: DroidSans_Mono;
  font-size: 0.9em;
}


/*
    Global Blog Header
*/
.site-header {
    background: #4186C9;
    padding: 2em 0;
    text-align: center;
    color: #FFF;
}
.site-header__icon {
    font-size: 2.5em;
    background: #FFF;
    padding: 0 0.25em;
    border-radius: 50%;
    color: #4186C9;
}
.site-header__title {
    font-size: 2.5em;
    font-family:CreteRound;
    font-weight: normal;
    padding-left: 0.3em;
}
.site-header__description {
    display: block;
    margin: 0.8em 0 0.5em;
}
.site-nav,
.site-nav__mobile {
    background: #2F333E;
    text-align: center;
    color: #D9D9D9;
}
.site-nav {
    display: block;
}
.site-nav__mobile {
    display: none;
}
.site-nav__button{
    color: #D9D9D9;
    text-decoration: none;
    padding: 0.2em 0.5em;
    border: 1px solid;
    border-radius: 6px;
    display: inline-block;
}
.site-nav__button:hover,
.site-nav__button.is-active {
    background: #3D4352;
    cursor: pointer;
}
.site-nav__list{
    margin:0;
    padding: 0.8em 0;
}
.site-nav__list li {
    display:inline-block;
    margin: 0 0.3em;
}


/*
    Content Section
*/
.site-wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.site-content,
.site-footer__block {
    margin:0 auto;
    width:80%;
    max-width:980px;
}

.post {
    word-wrap: break-word;
    border-top:1px dashed #959595;
    margin: 0 2em;
    padding: 1.5em 0;
}
.post:first-child{
    border:0;
}
.post-header__link {
    color:#000000;
    text-decoration: none;
}
.post-header__link:hover{
    text-decoration: underline;
}
.post-header__title {
    font-weight: normal;
}

.post-content__link {
    color:#0A539A;
    text-decoration: underline;
}
.post-content__link:hover {
    background:#0A539A;
    color:#FFFFFF;
    text-decoration:none;
}
.post-content__link.is-readmore:after {
    content:' \f30b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.post-content__link.is-readmore {
    margin-bottom: 1.5em;
    display: inline-block;
}

.post-footer__link {
    border:1px solid #BFBFBF;
    padding:1px 4px;
    margin:2px 0;
    border-radius: 4px;
    text-decoration: none;
    color:#505050;
    text-transform: uppercase;
    position:relative;
    display:inline-block;
}
.post-footer__icon {
    font-size: 20px;
    padding: 0 2px;
}

.post-footer__link:hover {
    background:#4CA0F4;
    border-color: #3E82C7;
    color:#FFFFFF;
    text-decoration:none;
    cursor:pointer;
}

.post-footer__button {
    color: #4A4A4A;
    margin-right:10px;
    position:relative;
    display:inline-block;
    white-space:nowrap;
}

.sticky{
    font-weight:bold;
    padding-right:10px;
}


/*
    Global Blog Footer
*/
.site-footer {
    position: absolute;
    bottom: -7.6em;
    width: 100%;
    background: #2F333E;
    color: #FFFFFF;
    padding: 1em 0;
}
.site-footer__block {
    line-height:30px;
}
.site-footer__link {
    color:#FFA31E;
    text-decoration:underline;
}
.site-footer__link:hover{
    background:#FFA31E;
    color:#000000;
    text-decoration:none;
}
.site-footer__button {
    margin:0 10px 0 0;
}


/* page navigation */
#pagenav{
    margin-top:1em;
    margin-bottom:1em;
}
#pagenav .left{
    position:relative;
    float:left;
}
#pagenav .right{
    position:relative;
    float:right;
}
#pagenav a,
#serendipity_comment input[type="submit"]{
    position:relative;
    display:inline-block;
    text-align:center;
    border:1px solid #BFBFBF;
    text-decoration: none;
    color:#505050;
    padding:10px 15px;
    font-size:15px;
    text-transform: uppercase;
    font-weight:bold;
    background:#FFF;
}
#pagenav .fa-arrow-left{
    padding-right:5px;
}
#pagenav .fa-arrow-right{
    padding-left:5px;
}


@media all and (max-device-width: 900px),
all and (max-width: 900px){
    .container-centered{
        margin:0;
        width:100%;
    }
    #banner-first-line,
    #banner-last-line,
    #footer{
        padding-left: 1em;
        padding-right: 1em;
    }
    .blog-entry,
    #entry-comment,
    #pagenav{
       margin-left: 1em;
       margin-right: 1em;
    }
    .notice-info,
    .notice-important,
    .notice-success,
    .notice-warning,
    .input-group,
    #serendipity_comment textarea{
        width:100%;
    }
    .notice-noarticle{
        margin:40px 1em;
    }
}

@media all and (max-device-width: 710px), all and (max-width: 710px){
    .site-nav {
        display: none;
    }
    .site-nav__mobile {
        display: block;
    }
    .site-header__banner{
        padding-left: 1em;
        padding-right: 1em;
    }
    #banner .quickmenu-icon.non-mobile{
        display:none;
    }
    #footer .quickmenu-icon{
        display:block;
    }
    #banner-last-line .table-cell{
        display:inline-block;
        width:100%;
    }
    #banner .right{
        text-align: right;
        margin-bottom:20px;
    }
    #serendipityQuickSearchTermField{
        width:100%;
    }
    #banner-last-line nav ul{
        text-align: center;
    }
    #banner nav{
        width:100%;
    }
    #footer div{
        height:auto;
        min-height:30px;
    }
    #serendipity_comment input[type="submit"] {
        padding:10px 10px;
    }
    #content{
        padding-bottom:230px;
    }

    .serendipity_image_left{
        float: none;
        margin: 0 auto 1em auto;
    }

    header.main nav {
        background: #3E4352;
    }
    header.main nav ul {
        padding: 0;
    }
    header.main nav ul li {
        display: block;
        margin: 0;
    }
    header.main a {
        color: #D9D9D9;
        text-decoration: none;
        padding: 0.6em 0;
        width: 100%;
        border: 0;
        border-radius: 0;
        display: inline-block;
    }
    header.main a:hover {
        background: #383C4A;
    }
}