writesdown/app-cms

View on GitHub
themes/writesdown/assets/css/site.css

Summary

Maintainability
Test Coverage
/* GENERIC STYLE */
img{
    max-width: 100%;
    height: auto;
}
body{
    font-family: "Lucida Sans","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;
}
a:hover,
a:focus{
    text-decoration: none;
}
blockquote {
    font-size: 14px;
    font-style: italic;
}
blockquote p{
    margin-bottom: 0 !important;
}
h2{
    font-size: 24px;
    line-height: 36px;
}
h3{
    font-size: 20px;
    line-height: 30px;
}
h4{
    font-size: 16px;
    line-height: 24px;
}
h5{
    font-size: 12px;
    line-height: 18px;
}
h6{
    font-size: 10px;
    line-height: 15px;
}
/* SOCIAL TOP */
#social-top{
    border-bottom: 1px solid #e7e7e7;
    background-color: #FEFEFE;
}
#social-top ul{
    padding: 0;
    margin: 0;
    list-style: none outside;
}
#social-top ul > li{
    float: left;
    display: block;
    position: relative;
}
#social-top ul > li > a{
    padding: 10px 15px;
    display: block;
}
/* FACEBOOK */
#social-top ul > li.facebook a{
    color: #216AB4;
}
#social-top ul > li.facebook a:hover,
#social-top ul > li.facebook a:focus {
    color: #FFFEFF;
    background-color: #216AB4;
}
/* TWITTER */
#social-top ul > li.twitter a{
    color: #44B4E5;
}
#social-top ul > li.twitter a:hover,
#social-top ul > li.twitter a:focus {
    color: #FFFEFF;
    background-color: #44B4E5;
}
/* GOOGLE PLUS */
#social-top ul > li.google-plus a{
    color: #DA4B3A;
}
#social-top ul > li.google-plus a:hover,
#social-top ul > li.google-plus a:focus {
    color: #FFFEFF;
    background-color: #DA4B3A;
}
/* YOUTUBE */
#social-top ul > li.youtube a{
    color: #E64B42;
}
#social-top ul > li.youtube a:hover,
#social-top ul > li.youtube a:focus {
    color: #FFFEFF;
    background-color: #E64B42;
}
/* RSS  */
#social-top ul > li.rss a{
    color: #E9A11E;
}
#social-top ul > li.rss a:hover,
#social-top ul > li.rss a:focus {
    color: #FFFEFF;
    background-color: #E9A11E;
}

/* NAVBAR PRIMARY */
#navbar-primary{
    background-color: white;
    margin-bottom: 0;
    font-family: 'Droid Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#navbar-primary .navbar-brand {
    float: left;
    font-size: 24px;
    height: 80px;
    line-height: 50px;
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
}
#navbar-primary .navbar-toggle {
    border-radius: 0;
    margin-bottom: 23px;
    margin-top: 23px;
}
#navbar-primary .navbar-brand{
    margin: 0;
}
#navbar-primary .navbar-brand img{
    margin-right: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
}
#navbar-primary .navbar-nav > li > a {
    padding: 30px 20px;
}
#navbar-primary .navbar-nav > li > a:hover,
#navbar-primary .navbar-nav > li > a:focus,
#navbar-primary .navbar-nav > li.active > a,
#navbar-primary .navbar-nav > li.open > a {
    border-bottom: 3px solid #008000;
    padding-bottom: 27px;
    background-color: white;
    color: #008000;
}
/* BREADCRUMB PRIMARY */
#search-breadcrumb{
    background-color: #F6F6F6;
    border-bottom: 1px solid #e7e7e7;
    padding: 20px 0;
}
#breadcrumb-primary .breadcrumb{
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding-right: 0;
    padding-left: 0;
}
#search-form-top .btn,
#search-form-top .form-control{
    border-radius: 0;
}
/* WRAPPER */
#wrapper .entry-meta > span {
    margin-right: 3px;
    font-size: 12px;
}
#wrapper .entry-date a:before {
    content: "\E023";
    font-family: "Glyphicons Halflings";
    margin: 3px;
    font-size: 10px;
    color: #d0d0d0;
}
#wrapper .author a:before {
    content: "\E008";
    font-family: "Glyphicons Halflings";
    margin: 3px;
    color: #d0d0d0;
    font-size: 10px;
}
#wrapper .comments-link a:before {
    content: "\E111";
    font-family: "Glyphicons Halflings";
    margin: 3px;
    color: #d0d0d0;
    font-size: 10px;
}

/* CONTENT */
#content{
    margin-top: 30px;
}
#content .hentry + .hentry{
    margin-top: 30px;
}
#content .entry-header{
    margin-bottom: 20px;
}
#content .entry-title{
    font-size: 24px;
    line-height: 36px;
    margin: 5px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #EEE;
}
#content .entry-content,
#content .entry-summary{
    text-align: justify;
    line-height: 24px;
}
#content .entry-content img{
    margin-bottom: 15px;
}
#content .entry-content p{
    margin-bottom: 15px;
}
#content .footer-meta h3 .badge{
    white-space: normal;
    margin-top: 3px;
}
#content #single-pagination{
    margin: 30px 0;
}
#content #archive-pagination{
    text-align: right;
}
/* SIDEBAR */
#sidebar{
    margin-top: 30px;
}
#sidebar .widget + .widget{
    margin-top: 30px;
}
#sidebar .widget-title > * {
    padding-bottom: 10px;
    border-bottom: 1px solid #EEE;
}
#sidebar .nav > li > a {
    display: block;
    padding: 5px 0;
    position: relative;
}
#sidebar .widget .nav > li > a:focus,
#sidebar .widget .nav > li > a:hover,
#sidebar .widget .nav > li.active > a{
    background-color: transparent;
}

/* COMMENT VIEW */
#comment-view .comment-title{
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 22px;
}
#comment-view .reply-title{
    margin-top: 30px;
}
/* COMMENTS */
#comments{
    padding-left: 0;
}
#comments .media{
    margin-top: 25px;
}
#comments .avatar{
    display: block;
    float: left;
}
#comments ul {
    padding-left: 54px;
}
#comments .comment-reply-link,
#comments .comment-edit-link {
    max-width: 100%;
    transition: all 0.2s linear 0s;
    padding: 0 5px;
    display: inline-block;
}
#comments .comment-edit-link:before {
    content: "?";
    font-family: "Glyphicons Halflings";
    margin-right: 2px;
}
#comments .comment-reply-link:before {
    content: '\E095';
    font-family: "Glyphicons Halflings";
    margin-right: 2px;
    font-size: 12px;
}
#comments .comment-content{
    text-align: justify;
}

/* FOOTER PRIMARY */
#footer-primary{
    margin-top: 40px;
    padding-bottom: 30px;
    color: #aaaaaa;
    background-color: #2d2e2f;
    background-image: linear-gradient(top , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 15px);
    background-image: -o-linear-gradient(top , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 15px);
    background-image: -moz-linear-gradient(top , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 15px);
    background-image: -webkit-linear-gradient(top , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 15px);
    background-image: -ms-linear-gradient(top , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 15px);
    border-bottom: 1px solid #323334;
    border-top: 1px solid #000;
    box-shadow: 0 -1px 0 #fff;
    font-family: 'Droid Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer-primary .widget{
    margin-top: 30px;
}
#footer-primary .widget-title{
    color: #CCCCCC;
}
#footer-primary .nav > li > a {
    display: block;
    padding: 5px 0;
    position: relative;
}
#footer-primary .widget .nav > li > a:focus,
#footer-primary .widget .nav > li > a:hover,
#footer-primary .widget .nav > li.active > a{
    background-color: transparent;
    color: #F5F5F5;
}

/* FOOTER SECONDARY */
#footer-secondary{
    background: #28292A;
    border-top: 1px solid #232425;
    padding: 23px 0;
    font-family: 'Droid Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer-secondary h5 {
    margin-top: 0;
    margin-bottom: 0;
    color: #555;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* ARCHIVE HEADER */
#archive-header,
#page-header{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 3px double #eee;
}

/* ALIGN AND CAPTION */
p.align-center{
    text-align: center;
}
p.align-right{
    text-align: right;
}
p.align-left{
    text-align: left;
}
.media-caption{
    max-width: 100%;
}
.media-caption img{
    float: none !important;
}
.media-caption .media-caption-text{
    margin-top: 10px;
    margin-bottom: 10px;
}
.media-caption.align-left,
img.align-left{
    float: left;
    margin-right: 10px;
}
.media-caption.align-right,
img.align-right{
    float: right;
    margin-left: 10px;
}
.media-caption.align-center,
img.align-center{
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    #navbar-primary .navbar-brand {
        padding-left: 15px;
        padding-right: 15px;
    }
    #navbar-primary .navbar-nav > li > a {
        padding: 10px 15px;
    }
    #navbar-primary .navbar-nav > li > a:hover,
    #navbar-primary .navbar-nav > li > a:focus,
    #navbar-primary .navbar-nav > li.active > a,
    #navbar-primary .navbar-nav > li.open > a {
        border-bottom: none;
        padding-bottom: 10px;
        background-color: white;
    }
}
@media (max-width: 360px) {
    #navbar-primary .navbar-brand span{
        display: none;
    }
    #content .hentry .entry-thumbnail{
        display: none;
    }
}