body { margin: 0; padding: 0; width: 100%; background-color: @body-color; } // Main // -------------------------------------------------- .entry, .hentry { .clearfix(); } .entry-content { .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; } } } // Entry Header // -------------------------------------------------- .entry-header { width: 100%; overflow: hidden; position: relative; } .header-title { text-align: center; margin: 30px 0 0; h1 { margin: 10px 20px; font-weight: 700; .font-rem(28); color: lighten(@base-color,20); @media @medium { .font-rem(48); } @media @large { .font-rem(60); } } h2 { margin: 0; .font-rem(18); text-transform: uppercase; color: lighten(@base-color,40); @media @medium { .font-rem(30); } } } .feature .header-title { position: absolute; top: 0; display: table; margin-top: 0; width: 100%; height: 400px; overflow: hidden; .header-title-wrap { display: table-cell; vertical-align: middle; margin: 0 auto; text-align: center; } h1 { margin: 10px; font-weight: 700; margin: 10px 60px; color: @white; text-shadow: 1px 1px 4px fade(@base-color,60); a { color: @white; } @media @large { } } h2 { margin: 0; color: @white; text-transform: uppercase; @media @medium { a { color: @white; } } } } .entry-image { position: relative; top: -50%; left: -50%; width: 200%; height: 200%; min-height: 400px; overflow: hidden; &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: fade(@base-color,30); } img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } } // Feature Image Caption .image-credit { position: absolute; bottom: 0; right: 0; margin: 0 auto; max-width: 440px; padding: 10px 15px; background-color: fade(@base-color,50); color: @white; .font-rem(12); text-align: right; .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 { .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; padding: 2px 6px; background-color: lighten(@base-color,60); color: @white; .rounded(3px); color: @white; span { vertical-align: super; .font-rem(10); } &:hover { background-color: lighten(@base-color,50); } &:active { .translate(0, 1px); .box-shadow(0 0 1px fade(@base-color, 20)); } } } #post, #page { .entry-content { margin: 40px 2px 20px 2px; padding: 10px 15px; background-color: @white; box-shadow: 0 0 0 1px fade(@border-color,10), 0 6px 12px fade(@black,10); .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 { .font-size(20); } } } #disqus_thread { margin-left: 10px; margin-right: 10px; margin-bottom: 20px; padding: 25px 40px; background-color: @white; box-shadow: 0 0 0 1px fade(@border-color,10), 0 6px 12px fade(@black,10); .rounded(3px); @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; } // 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 fade(@border-color,10), 0 6px 12px fade(@black,10); .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; .clearfix(); } .read-more-header { position: absolute; top: -20px; left: 0; right: 0; height: 35px; a { .btn(); } } .read-more-content { .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; .font-rem(28); a { color: @primary; } @media @medium { .font-rem(36); } } } .read-more-list { border-top: solid 1px lighten(@base-color,60); } .list-item { width: 100%; text-align: left; h4 { .font-rem(18); margin-bottom: 0; } span { display: block; .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 1px fade(@base-color,10), 0 6px 12px fade(@base-color,10); .rounded(3px); margin-bottom: 20px; padding: 25px 15px; @media @medium { padding: 30px; } @media @large { margin-bottom: 30px; padding: 50px 80px; } } } // Footer // -------------------------------------------------- .footer-wrapper { .clearfix(); margin: 2em auto; text-align: center; color: lighten(@text-color,20); a { color: lighten(@text-color,20); } } // Social Share // -------------------------------------------------- .socialcount { .font-rem(16); font-weight: 700; 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; .font-rem(14); background-color: @white; color: @primary; border-width: 2px !important; border-style: solid !important; border-color: lighten(@primary,50); .rounded(3px); } #goog-wm-sb { .btn(); }