body { background-color: @bodycolor; font-family: @base-font; font-color: @textcolor; } .navigation-wrapper { .container(); padding: 2em 0 0; font-family: @heading-font; font-weight: 700; text-transform: uppercase; .clearfix(); } .site-name { .grid(12,10); .prefix(12,1); .suffix(12,1); margin-bottom: 1em; float: none; display: block; } .top-navigation { .grid(12,10); .prefix(12,1); .suffix(12,1); margin-bottom: 1em; float: none; display: block; } .top-navigation { ul { list-style: none; margin: 0; padding: 0; } li { list-style-type: none; display: inline; margin-right: 25px; white-space: nowrap; a { decoration: none; border-bottom: 0 solid transparent; .transition(all .2s); } } } #main { counter-reset: captions; .container(); .clearfix(); clear: both; margin-top: 1em; article { .container(); .grid(12,10); .prefix(12,1); .suffix(12,1); margin-bottom: 2em; } } #index { .container(); .grid(12,10); .prefix(12,1); .suffix(12,1); margin-bottom: 2em; h3 { margin: 0; padding-bottom: .5em; .font-rem(28); border-bottom: 1px solid lighten(@black,70); } article { h2 { margin-bottom: 4px; .font-rem(20); text-transform: uppercase; } p { .font-rem(14); } p+p { text-indent: 0; } } } .image-wrap { position: relative; margin-bottom: 2em; &:after { content: " "; display: block; position: absolute; bottom: -1px; left: 8%; width: 0; height: 0; border: 20px solid transparent; border-bottom-color: @bodycolor; } img { width: 100%; height: auto; -ms-interpolation-mode: bicubic; } .headline-wrap { position: absolute; bottom: 25px; .prefix(12,1); h1, h2 { color: @white; .text-shadow(0 1px 2px rgba(0,0,0,.25)); } } } .byline { clear: both; font-size: 80%; } .article-author-top, .article-author-bottom { h3 { margin-bottom: 0; } p { font-size: 80%; font-style: italic; } a, a:hover { border-bottom: 0 solid transparent; } img.bio-photo { width: 100px; height: 100px; .rounded(100px); } } .author-social { display: block; margin-bottom: 5px; .font-rem(14); color: @black; &:visited { color: @black; } &:hover { .scale(1.1); } &:active { .translate(0, 2px); } } .article-author-top { display: none; } .article-author-bottom { margin-bottom: 1em; .bio-photo { float: left; margin-right: 25px; } .author-social { display: inline-block; margin-right: 5px; } } .article-wrap { // Dotted line underlines for links p > a, li > a { border-bottom: 1px dotted lighten(@link-color, 50); &:hover { border-bottom-style: solid; } } p > a.reversefootnote, li > a.reversefootnote { border-bottom-width: 0; } } .toc { display: none; font-size: 95%; .opacity(0.7); .transition(opacity 0.2s ease-in-out); &:hover { .opacity(1); } header { background: lighten(@black, 10); } h3 { margin: 0; padding: 5px 10px; color: @white; &:hover { cursor: pointer; } } ul { margin: 2px 0 0; padding: 0; background: lighten(@black, 30); line-height: 1; } li { display: block; margin: 0; padding: 0; font-family: @heading-font; border-bottom: 1px solid darken(@white, 50); &:last-child { border-bottom-width: 0; } a { padding: 10px; display: block; color: @white; border-bottom-width: 0; &:hover { font-weight: 400; :before { content: "\00bb"; padding-right: 5px; } } } ul { margin: 0; border-top: 1px solid darken(@white, 50); } } } .image-grid { .clearfix(); list-style: none; margin: 0 0 1em; padding: 0; li { .grid(12,6); } } .recent-grid { .clearfix(); list-style: none; margin: 1em 0; li { display: inline; a { border-bottom: 0 solid transparent; &:hover { border-bottom: 0 solid transparent; } } } img { width: 19%; margin-bottom: 1%; } } .holder { font-family: @heading-font; a { cursor: pointer; margin: 0 5px; } a.jp-previous { margin-left: 0; margin-right: 15px; } a.jp-next { margin-left: 15px; margin-right: 0; } a.jp-current { font-weight: bold; } a.jp-disabled, a.jp-disabled:hover { } a.jp-current, a.jp-current:hover, a.jp-disabled, a.jp-disabled:hover { cursor: default; background: none; } span { margin: 0 5px; } } .footer-wrap { .container(); .clearfix(); clear: both; margin-top: 1em; padding-top: 2em; padding-bottom: 3em; background-color: @black; a, a:active, a:visited, p, h4, h5, h6, span { color: darken(@white, 25); } span { .font-rem(14); } a { border-bottom: 0 solid transparent; &:hover { color: @white; border-bottom: 0 solid transparent; } } footer { .grid(12,10); .prefix(12,1); .suffix(12,1); } } .related-articles { .grid(12,10); .prefix(12,1); .suffix(12,1); margin-bottom: 2em; h4 { text-transform: uppercase; margin-bottom: 0; } li { margin-bottom: 0; color: @white; } } .footer-icons { li { display: inline-block; padding-right: 5px; a { color: lighten(@basecolor, 40%); .transition(.4s linear); &:hover { text-decoration: none; border-bottom: none; .icon-twitter, .icon-twitter-sign { color: #2aa9df; } .icon-facebook, .icon-facebook-sign { color: #3a5a98; } .icon-instagram, .icon-instagram-sign { color: #306088; } .icon-google-plus, .icon-google-plus-sign { color: #b63324; } .icon-lastfm, .icon-lastfm-sign { color: #d80049; } .icon-github { color: #4183c4; } } } } } // Browser Upgrade // -------------------------------------------------- .browser-upgrade { background: #000; text-align: center; margin: 0 0 2em 0; padding: 10px; text-align: center; color: @white; a { color: @white; border-bottom: 1px dotted @white; text-decoration: none; &:hover { border-bottom: 1px solid @white; } } } // 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: @black; border-width: 2px !important; border-style: solid !important; border-color: lighten(@black,50); .rounded(3px); } #goog-wm-sb { .btn(); }