body {
margin: 0; padding: 0; width: 100%; background-color: $body-color; overflow-x: hidden;
}
// Main // ————————————————– .entry, .hentry {
@include clearfix; h1, h2, h3, h4, h5, h6, p, li { word-wrap: break-word; }
} .hentry-dark {
background-color: $header-color;
} .entry-content {
@include font-size(16); // Dotted line underlines for links p > a, li > a { border-bottom: 1px dotted lighten($link-color, 50); &:hover { border-bottom-style: solid; } }
}
///sections
.content-header-title {
text-align: center; margin: 30px 0 0; h1 { margin: 10px 20px; font-weight: 700; @include font-rem(32); color: lighten($base-color,20); @media #{$medium} { @include font-rem(48); } @media #{$large} { @include font-rem(60); } } h2 { margin: 0; @include font-rem(18); text-transform: uppercase; color: lighten($base-color,40); @media #{$medium} { @include font-rem(24); } } p { color: lighten($base-color,20); }
}
// Feature Image Caption .image-credit {
position: absolute; bottom: 0; right: 0; margin: 0 auto; max-width: 440px; padding: 10px 15px; background-color: rgba($base-color,0.5); color: $white; @include font-rem(12); text-align: right; @include border-radius(3px,0,0,3px); z-index: 10; @media #{$medium} { max-width: 760px; } @media #{$large} { max-width: 960px; } a { color: $white; text-decoration: none; }
}
// Single Post and Page // ————————————————– .entry-meta {
@include font-rem(12); text-transform: uppercase; color: lighten($base-color,60); a { color: lighten($base-color,60); } .vcard { &:before { content: " by "; } } .tag { display: inline-block; margin: 4px; color: $white; @include rounded(3px); background-color: lighten($base-color,50); span { float: left; padding: 2px 6px; } .count { background-color: lighten($base-color,40); @include border-radius(3px,3px,0,0); } &:hover { background-color: lighten($base-color,40); } } .entry-reading-time { float: right; }
} header .entry-meta {
display: none; // hide header meta on small screens @media #{$medium} { display: block; }
} menu{
margin-bottom: 48px;
} post, page {
.entry-content { margin: 40px 2px 20px 2px; padding: 10px 15px; background-color: $white; box-shadow: 0 0 0 0, 0 6px 12px rgba($black,0.1); @include rounded(3px); @media #{$medium} { margin-left: 10px; margin-right: 10px; padding: 20px 30px; } @media #{$large} { max-width: 800px; margin: 50px auto 30px auto; padding: 50px 80px; > p:first-child { @include font-size(20); } } } #disqus_thread { margin: 40px 2px 20px 2px; padding: 10px 15px; background-color: $white; box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1); @include rounded(3px); @media #{$medium} { margin-left: 10px; margin-right: 10px; padding: 20px 30px; } @media #{$large} { max-width: 800px; padding: 50px 80px; margin: 0 auto 30px auto; } } .entry-meta { margin: 50px 30px 30px; text-align: center; }
} .entry-tags {
display: block; margin-bottom: 6px;
} .tag-heading, .year-heading {
margin-top: 0;
} // Go to the exact location of bookmarks in tags, categories .anchor-bookmark{
display: block; height: $menu-height; /*same height as header*/ margin-top: -$menu-height; /*same height as header*/ visibility: hidden;
} // Permalink icon for link post .permalink {
margin-right: 7px;
} // Post Pagination Module .pagination {
margin: 20px 10px; text-align: center; ul { display: inline; margin-left: 10px; margin-right: 10px; } li { padding-left: 4px; padding-right: 4px; } .current-page { font-weight: 700; }
}
// Read More Module .read-more {
position: relative; margin: 40px 2px 20px 2px; padding: 40px 15px 25px; background-color: $white; box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1); @include rounded(3px); @media #{$medium} { margin: 50px 10px 20px 10px; padding: 50px 40px 25px; } @media #{$large} { max-width: 800px; padding: 50px 80px; margin: 60px auto; } text-align: center; @include clearfix;
} .read-more-header {
position: absolute; top: -20px; left: 0; right: 0; height: 35px; a { @extend .btn; }
} .read-more-content {
@include font-size(16); // Dotted line underlines for links p > a, li > a { border-bottom: 1px dotted lighten($link-color, 50); &:hover { border-bottom-style: solid; } } h3 { margin: 0; @include font-rem(28); a { color: $text-color; } @media #{$medium} { @include font-rem(36); } }
} .author-img {
width: 150px; height: 150px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
} .author-container{
display: flex;
} .author-bio{
padding-top: 30px; padding-left: 20px; flex-grow: 1;
} ul.social-buttons li a {
display: block; width: 40px; height: 40px; border-radius: 100%; font-size: 20px; line-height: 40px; outline: 0; color: #fff; background-color: #222; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;
} .list-inline {
padding-left: 0; margin-left: -5px; list-style: none;
} .list-inline > li {
display: inline-block; padding-right: 5px; padding-left: 5px;
}
ul.social-buttons li:hover a{
transform: scale(1.2, 1.2);;
} ul.social-buttons li a:hover, ul.social-buttons li a:focus, ul.social-buttons li a:active {
color: #222; background-color: #fec503;
} .read-more-list {
border-top: solid 2px lighten($base-color,80);
} .list-item {
width: 100%; text-align: left; h4 { @include font-rem(18); margin-bottom: 0; } span { display: block; @include font-rem(14); color: lighten($base-color,50); } @media #{$medium} { width: 49%; float: left; &:nth-child(2) { text-align: right; } }
}
// Post Index // ————————————————– post-index {
#main { margin: 40px 2px 20px 2px; @media #{$medium} { margin-left: 20px; margin-right: 20px; } @media #{$large} { max-width: 800px; margin-top: 50px; margin-left: auto; margin-right: auto; } } article { background-color: $white; box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1); @include rounded(3px); margin-bottom: 20px; padding: 25px 15px; @media #{$medium} { padding: 30px; } @media #{$large} { margin-bottom: 30px; padding: 50px 80px; } }
} .entry-image-index {
margin-top: -25px; margin-left: -15px; margin-right: -15px; margin-bottom: 10px; position: relative; @media #{$medium} { margin-top: -30px; margin-left: -30px; margin-right: -30px; margin-bottom: 15px; } @media #{$large} { margin-top: -50px; margin-left: -80px; margin-right: -80px; margin-bottom: 20px; } img { @include border-radius(3px,0,0,3px); // round image corners }
}
// Footer // ————————————————– .footer-wrapper {
@include clearfix; margin: 2em auto; text-align: center; color: lighten($text-color,20); a { color: lighten($text-color,20); }
}
// Social Share // ————————————————– .socialcount {
@include font-rem(16); li { padding-left: 10px; padding-right: 10px; } p > a, li > a { border-bottom-width: 0; }
}
// Browser Upgrade // ————————————————– .upgrade {
padding: 10px; text-align: center;
}
// Google Search // ————————————————– goog-fixurl {
ul { list-style: none; margin-left: 0; padding-left: 0; li { list-style-type: none; } }
} goog-wm-qt {
width: auto; margin-right: 10px; margin-bottom: 20px; padding: 8px 20px; display: inline-block; @include font-rem(14); background-color: $white; color: $text-color; border-width: 2px !important; border-style: solid !important; border-color: lighten($primary,50); @include rounded(3px);
} goog-wm-sb {
@extend .btn;
}
// Header // ————————————————– .entry-header {
width: 100%; overflow: hidden; position: relative; width: 100%; height: 100%; overflow: hidden; height: 50px; @media #{$medium} { background-color: $header-color; min-height: 300px; }
} .header-toggle{
display: block; @media #{$large} { display: none; }
} .header-title {
text-align: center; position: absolute; bottom: 0; display: table; margin-top: 0; width: 100%; overflow: hidden; .header-title-wrap { display: table-cell; vertical-align: middle; margin: 0 auto; text-align: center; } h2 { color: $white; } h1 { font-weight: 700; margin-bottom: 20px; @include font-rem(32); color: $white; text-shadow: 1px 1px 4px rgba($base-color, 0.6); display: block; a { color: $white; } @media #{$medium} { @include font-rem(26); } @media #{$large} { @include font-rem(36); } } h1.post-title{ display: block; @media #{$medium}{ display: none; } } p { color: $white; }
} .header-menu {
position: fixed; top: 0; left: 0; width: 100%; height: $menu-height; z-index: 20; ul { margin: 0 auto; list-style-type: none; height: 100%; padding: 0; @media #{$large} { max-width: 900px; } }
} .header-menu-top{
background-color: $menu-top; box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
}
.header-menu-overflow{
background-color: $menu-overflow; z-index: 100; box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
} .header-menu-overflow ul li a{
color: $white;
}
.header-menu-top .sub-item{
background-color: $menu-top;
}
.header-menu-overflow .sub-item{
background-color: $menu-overflow;
}
.header-item, .header-item-title {
float: right; padding-left: 20px; padding-right: 20px; border-top-color: transparent; border-top-style: solid; border-top-width: 5px; box-sizing: border-box; a { vertical-align: middle; display: table-cell; height: $menu-height - 2; }
} ///sections .logo{
width: $menu-height; height: $menu-height; float: left; padding: 10px;
} .header-item-container{
height: 100%;
} .header-item{
height: 100%; display: none; @media #{$large} { display: block; }
} .header-item-title{
float: left; border-top-width: 0px; height: 100%; a.title { font-size: 1.5rem; padding-left: 5px; display: none; vertical-align: middle; height: $menu-height - 2; @media #{$medium}{ display: table-cell; } }
}
.header-item.active, .header-item:hover{
border-top-color: $header-margin;
}
.header-item:hover .header-submenu{
display: block; position: absolute;
}
.header-submenu {
display: none; border-top: 2px solid $header-margin; width: 200px; z-index: 100; list-style-type: none; transform: translateX(-25%);
}
.sub-item {
position: relative; padding-left: 10px; width: 100%; border-bottom: 1px solid gray; border-left: 1px solid; height: 50px; text-decoration: none;
}
.sub-item a{
vertical-align: middle; display: table-cell; height: 50px;
} .sub-item:hover {
border-bottom-color: $header-margin; border-left-color: $header-margin;
}
.button-twitter {
color: $white; position: fixed; margin-top: $menu-height / 2 - 20; margin-right: 10px; top: 0; right: 0; z-index: 10000000000; @media #{$large}{ top: auto; bottom: 0; } span { display: none; @media #{$medium}{ display: inline; } }
}