findcommonground.uk/scss/style.scss

283 lines
3.6 KiB
SCSS
Raw Normal View History

2014-02-07 00:18:00 +00:00
//
// IMPORTS
//
@import "_reset";
@import "_variables";
2014-02-07 13:35:17 +00:00
@import "_highlights";
// TODO - Tempted to move this to the end of the file, so that it shows up at the end of the .css. Or remove it entirely and find a better way to include highlighting.
2014-02-07 00:18:00 +00:00
//
// 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 20px;
width: 100%;
}
2014-02-13 01:42:49 +00:00
h1, h2, h3, h4, h5, h6 {
2014-02-07 00:18:00 +00:00
font-family: $helveticaNeue;
color: $darkerGray;
font-weight: 500;
2014-02-07 00:18:00 +00:00
line-height: 1.7;
2014-02-13 01:42:49 +00:00
margin: 1em 0 15px;
2014-02-07 00:18:00 +00:00
padding: 0;
}
2014-02-13 01:42:49 +00:00
2014-02-07 00:18:00 +00:00
h1 {
font-weight: 400;
font-size: 32px;
a {
color: inherit;
}
2014-02-07 00:18:00 +00:00
}
h2 {
font-size: 26px;
2014-02-07 00:18:00 +00:00
}
h3 {
font-size: 22px;
2014-02-07 00:18:00 +00:00
}
h4 {
font-size: 18px;
font-weight: 600;
}
h5 {
font-size: 18px;
color: $gray;
font-weight: 600;
2014-02-07 00:18:00 +00:00
}
p {
margin: 15px 0;
}
a {
text-decoration: none;
cursor: pointer;
2014-02-11 14:11:56 +00:00
color: $blue;
&:hover, &:active {
2014-02-07 00:18:00 +00:00
text-decoration: underline;
}
}
ul, ol {
margin: 15px 0;
2014-02-07 00:18:00 +00:00
padding-left: 30px;
}
ul {
2014-02-07 00:18:00 +00:00
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 {
font-style: italic;
}
strong {
font-weight: 600;
}
2014-02-13 01:42:49 +00:00
img {
max-width: 100%;
}
.date {
font-style: italic;
color: $gray;
}
2014-02-07 00:18:00 +00:00
// Specify the color of the selection
::-moz-selection {
color: $black;
background: $lighterGray;
}
::selection {
color: $black;
background: $lighterGray;
}
//
// LAYOUT / SECTIONS
//
2014-02-17 15:07:14 +00:00
//
// .masthead
//
.wrapper-masthead {
2014-05-18 23:13:54 +00:00
//background-color: #e8e8f2;
margin-bottom: 40px;
}
2014-02-17 15:07:14 +00:00
.masthead {
2014-05-18 23:13:54 +00:00
padding: 20px 0;
border-bottom: #777 dotted 1px;
@include mobile {
text-align: center;
}
// @TODO: OMG this is so bad, I just can't
br {
visibility: none;
}
2014-02-17 15:07:14 +00:00
}
.avatar {
2014-02-07 00:18:00 +00:00
float: left;
width: 70px;
margin-right: 15px;
@include mobile {
float: none;
display: block;
margin: 0 auto;
}
img {
border-radius: 5px;
}
2014-02-17 15:07:14 +00:00
}
.site-name {
float: left;
font-family: $helveticaNeue;
font-weight: 300;
font-size: 28px;
2014-02-17 15:07:14 +00:00
letter-spacing: 1px;
@include mobile {
float: none;
display: block;
2014-02-17 15:07:14 +00:00
}
text-decoration: none;
cursor: pointer;
color: $darkGray;
&:hover, &:active {
2014-02-07 00:18:00 +00:00
text-decoration: none;
2014-02-07 00:18:00 +00:00
}
}
2014-02-17 15:07:14 +00:00
.site-description {
float: left;
font-size: 16px;
margin: 0;
margin-top: -5px;
color: $darkGray;
@include mobile {
float: none;
display: block;
margin: 3px 0;
}
2014-02-13 01:42:49 +00:00
}
2014-02-07 00:18:00 +00:00
nav {
float: right;
margin-top: -25px; // @TODO - containers for nav and content blocks in header
2014-02-07 00:18:00 +00:00
font-family: $helveticaNeue;
font-size: 18px;
2014-02-07 00:18:00 +00:00
@include mobile {
float: none;
display: block;
margin-top: 15px;
font-size: 16px;
2014-02-07 00:18:00 +00:00
}
2014-02-11 14:11:56 +00:00
// nav has it's own link highlighting
2014-02-07 00:18:00 +00:00
a {
margin-left: 25px;
text-align: right;
font-weight: 300;
letter-spacing: 1px;
2014-02-17 15:07:14 +00:00
color: $darkGray;
2014-02-07 00:18:00 +00:00
&:hover, &:active {
text-decoration: none;
cursor: pointer;
color: $darkGray;
}
@include mobile {
margin: 0 10px;
}
2014-02-07 00:18:00 +00:00
}
}
.logo, nav {
@include mobile {
float: none;
width: 100%;
text-align: center;
}
}
2014-02-17 15:07:14 +00:00
//
// .main
//
.wrapper-posts {
}
2014-02-13 01:42:49 +00:00
.posts > .post {
padding-bottom: 2em;
border-bottom: 1px solid $lighterGray;
}
2014-02-07 00:18:00 +00:00
2014-02-13 01:42:49 +00:00
.post {
2014-02-07 00:18:00 +00:00
blockquote {
border-left: 2px solid $gray;
font-size: 22px;
2014-02-07 00:18:00 +00:00
font-style: italic;
margin: 1.8em .8em;
padding: 0.1em 1em;
color: $gray;
}
}
.wrapper-footer {
margin-top: 50px;
background-color: #eee;
border-top: 1px solid #ddd;
}
2014-02-07 00:18:00 +00:00
footer {
padding: 20px 0;
text-align: center;
2014-02-07 00:18:00 +00:00
}