findcommonground.uk/style.scss.org

— —

/ / IMPORTS //

@import "reset"; @import "variables"; // Syntax highlighting @import is at the bottom of this file

** * BASE RULES * **

html { font-size: 100%; }

body { background: $white; font: 18px/1.4 $helvetica; color: $darkGray; }

.container { margin: 0 auto; max-width: 740px; padding: 0 10px; width: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: $helveticaNeue; color: $darkerGray; font-weight: bold;

line-height: 1.7; margin: 1em 0 15px; padding: 0;

@include mobile { line-height: 1.4; } }

h1 { font-size: 30px; a { color: inherit; } }

h2 { font-size: 24px; }

h3 { font-size: 20px; }

h4 { font-size: 18px; color: $gray; }

p { margin: 15px 0; }

a { color: $blue; text-decoration: none; cursor: pointer; &:hover, &:active { color: $blue; } }

ul, ol { margin: 15px 0; padding-left: 30px; }

ul { list-style-type: disc; }

ol { list-style-type: decimal; }

ol ul, ul ol, ul ul, ol ol { margin: 0; }

ul ul, ol ul { list-style-type: circle; }

em, i { font-style: italic; }

strong, b { font-weight: bold; }

img { max-width: 100%; }

// Fixes images in popup boxes from Google Translate .gmnoprint img { max-width: none; }

.date { font-style: italic; color: $gray; }

.info { font-size: smaller; color: $gray; }

// Specify the color of the selection ::-moz-selection { color: $black; background: $lightGray; } ::selection { color: $black; background: $lightGray; }

/ Nicolas Gallagher's micro clearfix hack / http://nicolasgallagher.com/micro-clearfix-hack/ .clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

* * LAYOUT / SECTIONS * *

/ / .masthead //

.wrapper-masthead { margin-bottom: 50px; }

.masthead { padding: 20px 0; border-bottom: 1px solid $lightGray;

@include mobile { text-align: center; } }

.site-avatar { float: left; width: 70px; height: 70px; margin-right: 15px;

@include mobile { float: none; display: block; margin: 0 auto; }

img { border-radius: 5px; } }

.site-info { float: left;

@include mobile { float: none; display: block; margin: 0 auto; } }

.site-name { margin: 0; color: $darkGray; cursor: pointer; font-family: $helveticaNeue; font-weight: 300; font-size: 28px; letter-spacing: 1px; }

.site-description { margin: -5px 0 0 0; color: $gray; font-size: 16px;

@include mobile { margin: 3px 0; } }

nav { float: right; margin-top: 23px; // @TODO: Vertically middle align font-family: $helveticaNeue; font-size: 18px;

@include mobile { float: none; margin-top: 9px; display: block; font-size: 16px; }

a { margin-left: 20px; color: $darkGray; text-align: right; font-weight: 300; letter-spacing: 1px;

@include mobile { margin: 0 10px; color: $blue; } } }

/ / .main //

.posts > .post { padding-bottom: 2em; border-bottom: 1px solid $lightGray; }

.posts > .post:last-child { padding-bottom: 1em; border-bottom: none; }

.post { blockquote { margin: 1.8em .8em; border-left: 2px solid $gray; padding: 0.1em 1em; color: $gray; font-size: 22px; font-style: italic; }

.comments { margin-top: 10px; }

.read-more { text-transform: uppercase; font-size: 15px; } }

.wrapper-footer { margin-top: 50px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: $lightGray; }

footer { padding: 20px 0; text-align: center; }

/ Settled on moving the import of syntax highlighting to the bottom of the CSS / … Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start @import "highlights"; @import "svg-icons";