BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Wherever possible fixed CSSLint warnings.

Browse Source 
Had to exclude some unfeasible rules however.
This commit is contained in:
Nick Pack 2013-05-17 13:01:58 +01:00
parent 9db2cff433
commit 26b0b91551
14 changed files with 184 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.csslintrc Normal file
View File

@ -0,0 +1,5 @@
{
"unique-headings": false,
"box-model": false,
"font-sizes": false
}

3
Gruntfile.js
View File

@ -13,7 +13,8 @@ module.exports = function(grunt) {
csslint: { csslint: {
scssoutput: { scssoutput: {
options: { options: {
import: false import: false,
csslintrc: '.csslintrc'
}, },
src: ['css/skeleton.css'] src: ['css/skeleton.css']
} }

157
css/skeleton.css vendored
View File

@ -1,5 +1,5 @@
/* /*
* Skeleton SCSS V1.0 * Skeleton SCSS V1.0.1
* Skeleton is Copyright 2011, Dave Gamache * Skeleton is Copyright 2011, Dave Gamache
* *
* SCSS Conversion and Mixins by Nick Pack * SCSS Conversion and Mixins by Nick Pack
@ -44,13 +44,13 @@ table {
/* #Misc /* #Misc
================================================== */ ================================================== */
.remove-bottom { .remove-bottom {
margin-bottom: 0 !important; } margin-bottom: 0; }
.half-bottom { .half-bottom {
margin-bottom: 10px !important; } margin-bottom: 10px; }
.add-bottom { .add-bottom {
margin-bottom: 20px !important; } margin-bottom: 20px; }
/* #Basic Styles /* #Basic Styles
================================================== */ ================================================== */
@ -58,7 +58,8 @@ body {
background: #fff; background: #fff;
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444; color: #444;
-webkit-text-size-adjust: 100%; } -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
/* #Forms /* #Forms
================================================== */ ================================================== */
@ -66,57 +67,56 @@ body {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 0; } padding: 0; }
.container .alpha {
margin-left: 0; }
.container .omega {
margin-right: 0; }
.column, .columns { .column, .columns {
float: left; float: left;
display: inline;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; } margin-right: 10px; }
.column.alpha, .columns.alpha {
margin-left: 0; }
.column.omega, .columns.omega {
margin-right: 0; }
.row { .row {
margin-bottom: 20px; } margin-bottom: 20px; }
.container { .container {
width: 960px; } width: 960px; }
.container .columns.one, .container .column.one { .container .one {
width: 40px; } width: 40px; }
.container .columns.two, .container .column.two { .container .two {
width: 100px; } width: 100px; }
.container .columns.three, .container .column.three { .container .three {
width: 160px; } width: 160px; }
.container .columns.four, .container .column.four { .container .four {
width: 220px; } width: 220px; }
.container .columns.five, .container .column.five { .container .five {
width: 280px; } width: 280px; }
.container .columns.six, .container .column.six { .container .six {
width: 340px; } width: 340px; }
.container .columns.seven, .container .column.seven { .container .seven {
width: 400px; } width: 400px; }
.container .columns.eight, .container .column.eight { .container .eight {
width: 460px; } width: 460px; }
.container .columns.nine, .container .column.nine { .container .nine {
width: 520px; } width: 520px; }
.container .columns.ten, .container .column.ten { .container .ten {
width: 580px; } width: 580px; }
.container .columns.eleven, .container .column.eleven { .container .eleven {
width: 640px; } width: 640px; }
.container .columns.twelve, .container .column.twelve { .container .twelve {
width: 700px; } width: 700px; }
.container .columns.thirteen, .container .column.thirteen { .container .thirteen {
width: 760px; } width: 760px; }
.container .columns.fourteen, .container .column.fourteen { .container .fourteen {
width: 820px; } width: 820px; }
.container .columns.fifteen, .container .column.fifteen { .container .fifteen {
width: 880px; } width: 880px; }
.container .columns.sixteen, .container .column.sixteen { .container .sixteen {
width: 940px; } width: 940px; }
.container .columns.one-third, .container .column.one-third { .container .one-third {
width: 300px; } width: 300px; }
.container .columns.two-thirds, .container .column.two-thirds { .container .two-thirds {
width: 620px; } width: 620px; }
.container .offset-by-one { .container .offset-by-one {
padding-left: 60px; } padding-left: 60px; }
@ -152,41 +152,41 @@ body {
@media only screen and (max-width: 959px) { @media only screen and (max-width: 959px) {
.container { .container {
width: 768px; } width: 768px; }
.container .columns.one, .container .column.one { .container .one {
width: 28px; } width: 28px; }
.container .columns.two, .container .column.two { .container .two {
width: 76px; } width: 76px; }
.container .columns.three, .container .column.three { .container .three {
width: 124px; } width: 124px; }
.container .columns.four, .container .column.four { .container .four {
width: 172px; } width: 172px; }
.container .columns.five, .container .column.five { .container .five {
width: 220px; } width: 220px; }
.container .columns.six, .container .column.six { .container .six {
width: 268px; } width: 268px; }
.container .columns.seven, .container .column.seven { .container .seven {
width: 316px; } width: 316px; }
.container .columns.eight, .container .column.eight { .container .eight {
width: 364px; } width: 364px; }
.container .columns.nine, .container .column.nine { .container .nine {
width: 412px; } width: 412px; }
.container .columns.ten, .container .column.ten { .container .ten {
width: 460px; } width: 460px; }
.container .columns.eleven, .container .column.eleven { .container .eleven {
width: 508px; } width: 508px; }
.container .columns.twelve, .container .column.twelve { .container .twelve {
width: 556px; } width: 556px; }
.container .columns.thirteen, .container .column.thirteen { .container .thirteen {
width: 604px; } width: 604px; }
.container .columns.fourteen, .container .column.fourteen { .container .fourteen {
width: 652px; } width: 652px; }
.container .columns.fifteen, .container .column.fifteen { .container .fifteen {
width: 700px; } width: 700px; }
.container .columns.sixteen, .container .column.sixteen { .container .sixteen {
width: 748px; } width: 748px; }
.container .columns.one-third, .container .column.one-third { .container .one-third {
width: 236px; } width: 236px; }
.container .columns.two-thirds, .container .column.two-thirds { .container .two-thirds {
width: 492px; } width: 492px; }
.container .offset-by-one { .container .offset-by-one {
padding-left: 48px; } padding-left: 48px; }
@ -221,22 +221,21 @@ body {
.container { .container {
width: 768px; } width: 768px; }
.container .alpha {
margin-right: 10px; }
.container .omega {
margin-left: 10px; }
.column.alpha, .columns.alpha { .alpha, .omega {
margin-right: 10px; }
.column.omega, .columns.omega {
margin-left: 10px; }
.alpha.omega {
margin-right: 0; margin-right: 0;
margin-left: 0; } } margin-left: 0; } }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { .container {
width: 90%; } width: 90%; }
.container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds {
width: 100%; }
.container .column, .container .columns { .container .column, .container .columns {
margin: 0; } margin: 0; }
.container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds {
width: 100%; }
.container .offset-by-one, .container .offset-by-one,
.container .offset-by-two, .container .offset-by-two,
.container .offset-by-three, .container .offset-by-three,
@ -305,39 +304,52 @@ or wrap each row of columns in a <div class="row"> */
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
*/ */
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit; } font-weight: inherit; }
h1 { h1 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 46px; font-size: 46px;
line-height: 50px; line-height: 50px;
margin: 0 0 14px 0; } margin: 0 0 14px 0; }
h2 { h2 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 35px; font-size: 35px;
line-height: 40px; line-height: 40px;
margin: 0 0 10px 0; } margin: 0 0 10px 0; }
h3 { h3 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
margin: 0 0 8px 0; } margin: 0 0 8px 0; }
h4 { h4 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 21px; font-size: 21px;
line-height: 30px; line-height: 30px;
margin: 0 0 4px 0; } margin: 0 0 4px 0; }
h5 { h5 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 17px; font-size: 17px;
line-height: 24px; } line-height: 24px; }
h6 { h6 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 21px; } line-height: 21px; }
@ -350,7 +362,7 @@ p {
p img { p img {
margin: 0; } margin: 0; }
p.lead { .lead {
font-size: 21px; font-size: 21px;
line-height: 27px; line-height: 27px;
color: #777777; } color: #777777; }
@ -400,12 +412,12 @@ hr {
================================================== */ ================================================== */
a, a:visited { a, a:visited {
color: #333333; color: #333333;
text-decoration: underline; text-decoration: underline; }
outline: 0; }
a:hover, a:focus { a:hover, a:focus {
color: black; color: black;
text-decoration: none; } text-decoration: none;
outline: 0; }
p a, p a:visited { p a, p a:visited {
line-height: inherit; } line-height: inherit; }
@ -442,7 +454,7 @@ li {
line-height: 18px; line-height: 18px;
margin: 0 0 12px 0; } margin: 0 0 12px 0; }
ul.large li { .large li {
line-height: 21px; } line-height: 21px; }
li p { li p {
@ -455,6 +467,7 @@ button,
input[type="submit"], input[type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"] { input[type="button"] {
background-color: #cccccc;
background-color: rgba(153, 153, 153, 0.2); background-color: rgba(153, 153, 153, 0.2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@ -465,9 +478,9 @@ input[type="button"] {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px;
color: #444444; color: #444444;
display: inline-block; display: inline-block;
font-size: 11px; font-size: 11px;
@ -485,6 +498,7 @@ button:hover,
input[type="submit"]:hover, input[type="submit"]:hover,
input[type="reset"]:hover, input[type="reset"]:hover,
input[type="button"]:hover { input[type="button"]:hover {
background-color: #cccccc;
background-color: rgba(153, 153, 153, 0.3); background-color: rgba(153, 153, 153, 0.3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
@ -502,6 +516,7 @@ button:active,
input[type="submit"]:active, input[type="submit"]:active,
input[type="reset"]:active, input[type="reset"]:active,
input[type="button"]:active { input[type="button"]:active {
background-color: #cccccc;
background-color: rgba(153, 153, 153, 0.2); background-color: rgba(153, 153, 153, 0.2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@ -511,14 +526,14 @@ input[type="button"]:active {
background-repeat: repeat-x; background-repeat: repeat-x;
border: 1px solid #666666; } border: 1px solid #666666; }
.button.full-width, .button .full-width,
button.full-width, button.full-width,
input[type="submit"].full-width, input[type="submit"].full-width,
input[type="reset"].full-width, input[type="reset"].full-width,
input[type="button"].full-width { input[type="button"].full-width {
width: 100%; width: 100%;
padding-left: 0 !important; padding-left: 0;
padding-right: 0 !important; padding-right: 0;
text-align: center; } text-align: center; }
/* Fix for odd Mozilla border & padding issues */ /* Fix for odd Mozilla border & padding issues */
@ -551,10 +566,9 @@ textarea,
select { select {
border: 1px solid #cccccc; border: 1px solid #cccccc;
padding: 6px 4px; padding: 6px 4px;
outline: none;
border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777777; color: #777777;
width: 210px; width: 210px;
@ -576,6 +590,7 @@ input[type="tel"]:focus,
textarea:focus { textarea:focus {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
color: #444444; color: #444444;
outline: none;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
@ -603,7 +618,7 @@ legend span {
/* #Images /* #Images
================================================== */ ================================================== */
img.scale-with-grid { .scale-with-grid {
max-width: 100%; max-width: 100%;
height: auto; } height: auto; }

4
css/skeleton.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
scss/_forms.scss
View File

@ -40,14 +40,14 @@ input[type="button"]:active {
border: $form_button_active_border; border: $form_button_active_border;
} }
.button.full-width, .button .full-width,
button.full-width, button.full-width,
input[type="submit"].full-width, input[type="submit"].full-width,
input[type="reset"].full-width, input[type="reset"].full-width,
input[type="button"].full-width { input[type="button"].full-width {
width: 100%; width: 100%;
padding-left: 0 !important; padding-left: 0;
padding-right: 0 !important; padding-right: 0;
text-align: center; text-align: center;
} }
@ -86,7 +86,6 @@ textarea,
select { select {
border: $form_input_border; border: $form_input_border;
padding: $form_input_padding; padding: $form_input_padding;
outline: none;
@include border-radius(2px); @include border-radius(2px);
font: $form_input_font_size $form_element_font; font: $form_input_font_size $form_element_font;
color: $form_input_text_colour; color: $form_input_text_colour;
@ -111,6 +110,7 @@ input[type="tel"]:focus,
textarea:focus { textarea:focus {
border: $form_input_focus_border; border: $form_input_focus_border;
color: $form_input_focus_text_colour; color: $form_input_focus_text_colour;
outline: none;
@include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2)) @include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2))
} }

53
scss/_grid.scss
View File

@ -2,15 +2,14 @@
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
& .alpha { margin-left: 0; }
& .omega { margin-right: 0; }
} }
.column, .columns { .column, .columns {
float: left; float: left;
display: inline;
margin-left: $gutter/2; margin-left: $gutter/2;
margin-right: $gutter/2; margin-right: $gutter/2;
&.alpha { margin-left: 0; }
&.omega { margin-right: 0; }
} }
.row { margin-bottom: $gutter; } .row { margin-bottom: $gutter; }
@ -22,13 +21,13 @@
@media only screen and (max-width: 959px) { @media only screen and (max-width: 959px) {
@include grid($tablet-container-width, $column-count, $gutter); @include grid($tablet-container-width, $column-count, $gutter);
.container { width: $tablet-container-width; } .container {
width: $tablet-container-width;
& .alpha { margin-right: 10px; }
& .omega { margin-left: 10px; }
}
.column, .columns { .alpha, .omega {
&.alpha { margin-right: 10px; }
&.omega { margin-left: 10px; } }
.alpha.omega {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
} }
@ -37,27 +36,27 @@
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { .container {
width: $mobile-container-width; width: $mobile-container-width;
& .one,
& .two,
& .three,
& .four,
& .five,
& .six,
& .seven,
& .eight,
& .nine,
& .ten,
& .eleven,
& .twelve,
& .thirteen,
& .fourteen,
& .fifteen,
& .sixteen,
& .one-third,
& .two-thirds { width: $mobile-column-width; }
.column, .columns { .column, .columns {
margin: 0; margin: 0;
&.one,
&.two,
&.three,
&.four,
&.five,
&.six,
&.seven,
&.eight,
&.nine,
&.ten,
&.eleven,
&.twelve,
&.thirteen,
&.fourteen,
&.fifteen,
&.sixteen,
&.one-third,
&.two-thirds { width: $mobile-column-width; }
} }
.offset-by-one, .offset-by-one,

2
scss/_images.scss
View File

@ -1,7 +1,7 @@
/* #Images /* #Images
================================================== */ ================================================== */
img.scale-with-grid { .scale-with-grid {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }

2
scss/_links.scss
View File

@ -3,12 +3,12 @@
a, a:visited { a, a:visited {
color: $link_colour; color: $link_colour;
text-decoration: $link_decoration; text-decoration: $link_decoration;
outline: $link_outline;
} }
a:hover, a:focus { a:hover, a:focus {
color: $link_hover_colour; color: $link_hover_colour;
text-decoration: $link_hover_decoration; text-decoration: $link_hover_decoration;
outline: $link_outline;
} }
p a, p a:visited { p a, p a:visited {

2
scss/_lists.scss
View File

@ -39,7 +39,7 @@ li {
margin: $list_item_margin; margin: $list_item_margin;
} }
ul.large li { .large li {
line-height: $list_large_line_height; line-height: $list_large_line_height;
} }

61
scss/_mixins.scss
View File

@ -5,12 +5,12 @@
} }
@mixin col-count($colCount, $colSpacing) { @mixin col-count($colCount, $colSpacing) {
column-count: $colCount;
column-gap: $colSpacing;
-webkit-column-count: $colCount; -webkit-column-count: $colCount;
-webkit-column-gap: $colSpacing; -webkit-column-gap: $colSpacing;
-moz-column-count: $colCount; -moz-column-count: $colCount;
-moz-column-gap: $colSpacing; -moz-column-gap: $colSpacing;
column-count: $colCount;
column-gap: $colSpacing;
} }
@mixin size($height, $width) { @mixin size($height, $width) {
@ -23,33 +23,33 @@
} }
@mixin border-radius($radius) { @mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius; -webkit-border-radius: $radius;
-moz-border-radius: $radius; -moz-border-radius: $radius;
border-radius: $radius;
} }
@mixin border-top-left-radius($radius) { @mixin border-top-left-radius($radius) {
border-top-left-radius: $radius;
-webkit-border-top-left-radius: $radius; -webkit-border-top-left-radius: $radius;
-moz-border-radius-topleft: $radius; -moz-border-radius-topleft: $radius;
border-top-left-radius: $radius;
} }
@mixin border-top-right-radius($radius) { @mixin border-top-right-radius($radius) {
border-top-right-radius: $radius;
-webkit-border-top-right-radius: $radius; -webkit-border-top-right-radius: $radius;
-moz-border-radius-topright: $radius; -moz-border-radius-topright: $radius;
border-top-right-radius: $radius;
} }
@mixin border-bottom-right-radius($radius) { @mixin border-bottom-right-radius($radius) {
border-bottom-right-radius: $radius;
-webkit-border-bottom-right-radius: $radius; -webkit-border-bottom-right-radius: $radius;
-moz-border-radius-bottomright: $radius; -moz-border-radius-bottomright: $radius;
border-bottom-right-radius: $radius;
} }
@mixin border-bottom-left-radius($radius) { @mixin border-bottom-left-radius($radius) {
border-bottom-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius; -webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius; -moz-border-radius-bottomleft: $radius;
border-bottom-left-radius: $radius;
} }
@mixin border-top-radius($radius) { @mixin border-top-radius($radius) {
@ -73,23 +73,23 @@
} }
@mixin background-size($size){ @mixin background-size($size){
background-size: $size;
-webkit-background-size: $size; -webkit-background-size: $size;
-moz-background-size: $size; -moz-background-size: $size;
-o-background-size: $size; -o-background-size: $size;
background-size: $size;
} }
@mixin box-sizing($boxsize) { @mixin box-sizing($boxsize) {
box-sizing: $boxsize;
-webkit-box-sizing: $boxsize; -webkit-box-sizing: $boxsize;
-moz-box-sizing: $boxsize; -moz-box-sizing: $boxsize;
-ms-box-sizing: $boxsize; -ms-box-sizing: $boxsize;
-o-box-sizing: $boxsize; -o-box-sizing: $boxsize;
-khtml-box-sizing: $boxsize; -khtml-box-sizing: $boxsize;
box-sizing: $boxsize;
} }
@mixin horizontal-gradient($startColour, $endColour) { @mixin horizontal-gradient($startColour, $endColour) {
background-color: $endColour; background-color: $fallback_hex_gradient_bg;
background-image: linear-gradient(to right, $startColour, $endColour); background-image: linear-gradient(to right, $startColour, $endColour);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour)); background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
background-image: -webkit-linear-gradient(left, $startColour, $endColour); background-image: -webkit-linear-gradient(left, $startColour, $endColour);
@ -99,6 +99,7 @@
} }
@mixin vertical-gradient($startColour, $endColour) { @mixin vertical-gradient($startColour, $endColour) {
background-color: $fallback_hex_gradient_bg;
background-color: mix($startColour, $endColour, 60%); background-color: mix($startColour, $endColour, 60%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
background-image: -webkit-linear-gradient(top, $startColour, $endColour); background-image: -webkit-linear-gradient(top, $startColour, $endColour);
@ -120,26 +121,26 @@
.container { .container {
width: $grid-container-width; width: $grid-container-width;
.columns, .column {
&.one { width: (1*$grid-column-width - $grid-gutter); } .one { width: (1*$grid-column-width - $grid-gutter); }
&.two { width: (2*$grid-column-width - $grid-gutter); } .two { width: (2*$grid-column-width - $grid-gutter); }
&.three { width: (3*$grid-column-width - $grid-gutter); } .three { width: (3*$grid-column-width - $grid-gutter); }
&.four { width: (4*$grid-column-width - $grid-gutter); } .four { width: (4*$grid-column-width - $grid-gutter); }
&.five { width: (5*$grid-column-width - $grid-gutter); } .five { width: (5*$grid-column-width - $grid-gutter); }
&.six { width: (6*$grid-column-width - $grid-gutter); } .six { width: (6*$grid-column-width - $grid-gutter); }
&.seven { width: (7*$grid-column-width - $grid-gutter); } .seven { width: (7*$grid-column-width - $grid-gutter); }
&.eight { width: (8*$grid-column-width - $grid-gutter); } .eight { width: (8*$grid-column-width - $grid-gutter); }
&.nine { width: (9*$grid-column-width - $grid-gutter); } .nine { width: (9*$grid-column-width - $grid-gutter); }
&.ten { width: (10*$grid-column-width - $grid-gutter); } .ten { width: (10*$grid-column-width - $grid-gutter); }
&.eleven { width: (11*$grid-column-width - $grid-gutter); } .eleven { width: (11*$grid-column-width - $grid-gutter); }
&.twelve { width: (12*$grid-column-width - $grid-gutter); } .twelve { width: (12*$grid-column-width - $grid-gutter); }
&.thirteen { width: (13*$grid-column-width - $grid-gutter); } .thirteen { width: (13*$grid-column-width - $grid-gutter); }
&.fourteen { width: (14*$grid-column-width - $grid-gutter); } .fourteen { width: (14*$grid-column-width - $grid-gutter); }
&.fifteen { width: (15*$grid-column-width - $grid-gutter); } .fifteen { width: (15*$grid-column-width - $grid-gutter); }
&.sixteen { width: (16*$grid-column-width - $grid-gutter); } .sixteen { width: (16*$grid-column-width - $grid-gutter); }
&.one-third { width: ($grid-container-width/3) - $grid-gutter; } .one-third { width: ($grid-container-width/3) - $grid-gutter; }
&.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
}
.offset-by-one { padding-left: $grid-column-width; } .offset-by-one { padding-left: $grid-column-width; }
.offset-by-two { padding-left: $grid-column-width*2; } .offset-by-two { padding-left: $grid-column-width*2; }

6
scss/_reset.scss
View File

@ -39,13 +39,13 @@ table {
/* #Misc /* #Misc
================================================== */ ================================================== */
.remove-bottom { .remove-bottom {
margin-bottom: 0 !important; margin-bottom: 0;
} }
.half-bottom { .half-bottom {
margin-bottom: 10px !important; margin-bottom: 10px;
} }
.add-bottom { .add-bottom {
margin-bottom: 20px !important; margin-bottom: 20px;
} }

26
scss/_typography.scss
View File

@ -11,46 +11,58 @@
font-style: normal; } font-style: normal; }
*/ */
h1, h2, h3, h4, h5, h6 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit; font-weight: inherit;
} }
h1 { h1 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading1_font_size; font-size: $heading1_font_size;
line-height: $heading1_line_height; line-height: $heading1_line_height;
margin: $heading1_margin; margin: $heading1_margin;
} }
h2 { h2 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading2_font_size; font-size: $heading2_font_size;
line-height: $heading2_line_height; line-height: $heading2_line_height;
margin: $heading2_margin; margin: $heading2_margin;
} }
h3 { h3 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading3_font_size; font-size: $heading3_font_size;
line-height: $heading3_line_height; line-height: $heading3_line_height;
margin: $heading3_margin; margin: $heading3_margin;
} }
h4 { h4 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading4_font_size; font-size: $heading4_font_size;
line-height: $heading4_line_height; line-height: $heading4_line_height;
margin: $heading4_margin; margin: $heading4_margin;
} }
h5 { h5 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading5_font_size; font-size: $heading5_font_size;
line-height: $heading5_line_height; line-height: $heading5_line_height;
} }
h6 { h6 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading6_font_size; font-size: $heading6_font_size;
line-height: $heading6_line_height; line-height: $heading6_line_height;
} }
@ -67,7 +79,7 @@ p img {
margin: $paragraph_image_margin; margin: $paragraph_image_margin;
} }
p.lead { .lead {
font-size: $paragraph_lead_font_size; font-size: $paragraph_lead_font_size;
line-height: $paragraph_lead_line_height; line-height: $paragraph_lead_line_height;
color: $paragraph_lead_colour; color: $paragraph_lead_colour;

2
scss/_variables.scss
View File

@ -117,3 +117,5 @@ $list_item_line_height: 18px;
$list_item_margin: 0 0 12px 0; $list_item_margin: 0 0 12px 0;
$list_item_paragraph_line_height: 21px; $list_item_paragraph_line_height: 21px;
$fallback_hex_gradient_bg: #CCC;

1
scss/skeleton.scss vendored
View File

@ -21,6 +21,7 @@ body {
font: 14px/21px $body_font_family; font: 14px/21px $body_font_family;
color: #444; color: #444;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
/* #Forms /* #Forms