Repo restructure
This commit is contained in:
Nick Pack
50
src/scss/Ribs.scss
Normal file
50
src/scss/Ribs.scss
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* Ribs
|
||||
* Skeleton is Copyright 2011, Dave Gamache
|
||||
*
|
||||
* Ribs is the evolution of Skeleton by Nick Pack
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
@import "normalize/_normalize";
|
||||
@import "_mixins";
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
font: 14px/21px $body_font_family;
|
||||
color: #444;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: $hr_border;
|
||||
border-width: $hr_border_width;
|
||||
clear: both;
|
||||
margin: $hr_margin;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@import "_grid";
|
||||
@import "_typography";
|
||||
@import "_links";
|
||||
@import "_lists";
|
||||
@import "_forms";
|
||||
@import "_images";
|
||||
|
||||
// Smaller than standard 960 (devices and browsers)
|
||||
@media only screen and (max-width: 959px) {}
|
||||
|
||||
// Tablet Portrait size to standard 960 (devices and browsers)
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {}
|
||||
|
||||
// All Mobile Sizes (devices and browser)
|
||||
@media only screen and (max-width: 767px) {}
|
||||
|
||||
// Mobile Landscape Size to Tablet Portrait (devices and browsers)
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) {}
|
||||
|
||||
// Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
|
||||
@media only screen and (max-width: 479px) {}
|
||||
141
src/scss/_forms.scss
Normal file
141
src/scss/_forms.scss
Normal file
@ -0,0 +1,141 @@
|
||||
// #Buttons
|
||||
// ==================================================
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
@include vertical-gradient($form_button_gradient_start, $form_button_gradient_end);
|
||||
@include button_border($form_button_border_rightbottom, $form_button_border_topleft);
|
||||
@include border-radius($form_button_border_radius);
|
||||
color: $form_button_text_colour;
|
||||
display: inline-block;
|
||||
font-size: $form_button_font_size;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-shadow: $form_button_text_shadow;
|
||||
cursor: pointer;
|
||||
margin: $form_input_margin;
|
||||
line-height: $form_button_line_height;
|
||||
padding: $form_button_padding;
|
||||
font-family: $form_element_font;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover {
|
||||
@include vertical-gradient($form_button_hover_gradient_start, $form_button_hover_gradient_end);
|
||||
color: $form_button_hover_text_colour;
|
||||
@include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
|
||||
}
|
||||
|
||||
.button:active,
|
||||
button:active,
|
||||
input[type="submit"]:active,
|
||||
input[type="reset"]:active,
|
||||
input[type="button"]:active {
|
||||
@include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
|
||||
border: $form_button_active_border;
|
||||
}
|
||||
|
||||
.button .full-width,
|
||||
button.full-width,
|
||||
input[type="submit"].full-width,
|
||||
input[type="reset"].full-width,
|
||||
input[type="button"].full-width {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Fix for odd Mozilla border & padding issues
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// #Forms
|
||||
// ==================================================
|
||||
|
||||
form {
|
||||
margin: $form_fieldset_margin;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: $form_fieldset_margin;
|
||||
}
|
||||
|
||||
input[type="search"],
|
||||
input[type="url"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
input[type="number"],
|
||||
input[type="tel"],
|
||||
textarea,
|
||||
select {
|
||||
border: $form_input_border;
|
||||
padding: $form_input_padding;
|
||||
@include border-radius($form_input_border_radius);
|
||||
font: $form_input_font_size $form_element_font;
|
||||
color: $form_input_text_colour;
|
||||
width: $form_input_width;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: $form_input_margin;
|
||||
background: $form_input_background;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: $form_input_select_padding;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
textarea:focus {
|
||||
border: $form_input_focus_border;
|
||||
color: $form_input_focus_text_colour;
|
||||
outline: $form_input_focus_outline;
|
||||
@include box-shadow($form_input_focus_box_shadow_x, $form_input_focus_box_shadow_y, $form_input_focus_box_shadow_blur, $form_input_focus_box_shadow_colour)
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: $form_textarea_min_height;
|
||||
}
|
||||
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
font-weight: $legend_font_weight;
|
||||
font-size: $legend_font_size;
|
||||
}
|
||||
|
||||
select {
|
||||
width: $form_input_select_width;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: $form_input_checkbox_display;
|
||||
}
|
||||
|
||||
label span,
|
||||
legend span {
|
||||
font-weight: normal;
|
||||
font-size: $form_input_font_size;
|
||||
color: $form_label_legend_colour;
|
||||
}
|
||||
117
src/scss/_grid.scss
Normal file
117
src/scss/_grid.scss
Normal file
@ -0,0 +1,117 @@
|
||||
.container {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
& .alpha { margin-left: 0; }
|
||||
& .omega { margin-right: 0; }
|
||||
}
|
||||
|
||||
.column, .columns {
|
||||
float: left;
|
||||
margin-left: $gutter/2;
|
||||
margin-right: $gutter/2;
|
||||
}
|
||||
|
||||
.alpha-omega {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row { margin-bottom: $gutter; }
|
||||
|
||||
@include grid($desktop-container-width, $column-count, $gutter);
|
||||
|
||||
//-----------------------------------------------------------------------
|
||||
// #Tablet
|
||||
@media only screen and (max-width: 959px) {
|
||||
@include grid($tablet-container-width, $column-count, $gutter);
|
||||
|
||||
.container {
|
||||
width: $tablet-container-width;
|
||||
& .alpha { margin-right: 10px; }
|
||||
& .omega { margin-left: 10px; }
|
||||
}
|
||||
}
|
||||
//--------------------------------------------------------------------
|
||||
// #Mobile
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container {
|
||||
width: $mobile-container-width;
|
||||
& .one,
|
||||
& .two,
|
||||
& .three,
|
||||
& .four,
|
||||
& .five,
|
||||
& .six,
|
||||
& .seven,
|
||||
& .eight,
|
||||
& .nine,
|
||||
& .ten,
|
||||
& .eleven,
|
||||
& .twelve,
|
||||
& .thirteen,
|
||||
& .fourteen,
|
||||
& .fifteen,
|
||||
& .sixteen,
|
||||
& .one-third,
|
||||
& .two-thirds,
|
||||
& .one-half,
|
||||
& .one-quarter,
|
||||
& .three-quarters
|
||||
{ width: $mobile-column-width; }
|
||||
|
||||
.column, .columns {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.offset-by-one,
|
||||
.offset-by-two,
|
||||
.offset-by-three,
|
||||
.offset-by-four,
|
||||
.offset-by-five,
|
||||
.offset-by-six,
|
||||
.offset-by-seven,
|
||||
.offset-by-eight,
|
||||
.offset-by-nine,
|
||||
.offset-by-ten,
|
||||
.offset-by-eleven,
|
||||
.offset-by-twelve,
|
||||
.offset-by-thirteen,
|
||||
.offset-by-fourteen,
|
||||
.offset-by-fifteen { padding-left: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
// #Clearing
|
||||
// ==================================================
|
||||
|
||||
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
// Use clearfix class on parent to clear nested columns,
|
||||
// or wrap each row of columns in a <div class="row">
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.row:before,
|
||||
.row:after {
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.row:after,
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
.row,
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
// You can also use a <br class="clear" /> to clear columns
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
7
src/scss/_images.scss
Normal file
7
src/scss/_images.scss
Normal file
@ -0,0 +1,7 @@
|
||||
// #Images
|
||||
// ==================================================
|
||||
|
||||
.scale-with-grid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
16
src/scss/_links.scss
Normal file
16
src/scss/_links.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// #Links
|
||||
// ==================================================
|
||||
a, a:visited {
|
||||
color: $link_colour;
|
||||
text-decoration: $link_decoration;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: $link_hover_colour;
|
||||
text-decoration: $link_hover_decoration;
|
||||
outline: $link_outline;
|
||||
}
|
||||
|
||||
p a, p a:visited {
|
||||
line-height: inherit;
|
||||
}
|
||||
48
src/scss/_lists.scss
Normal file
48
src/scss/_lists.scss
Normal file
@ -0,0 +1,48 @@
|
||||
// #Lists
|
||||
// ==================================================
|
||||
ul, ol {
|
||||
margin: $list_margin;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: $ul_list_style;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: $ol_list_style;
|
||||
}
|
||||
|
||||
ol, ul.square, ul.circle, ul.disc {
|
||||
margin: $list_styled_margin;
|
||||
}
|
||||
|
||||
ul.square {
|
||||
list-style: square $list_styled_position;
|
||||
}
|
||||
|
||||
ul.circle {
|
||||
list-style: circle $list_styled_position;
|
||||
}
|
||||
|
||||
ul.disc {
|
||||
list-style: disc $list_styled_position;
|
||||
}
|
||||
|
||||
ul ul, ul ol,
|
||||
ol ol, ol ul {
|
||||
margin: $nested_list_margin;
|
||||
font-size: $nested_list_font_size;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: $list_item_line_height;
|
||||
margin: $list_item_margin;
|
||||
}
|
||||
|
||||
.large li {
|
||||
line-height: $list_large_line_height;
|
||||
}
|
||||
|
||||
li p {
|
||||
line-height: $list_item_paragraph_line_height;
|
||||
}
|
||||
172
src/scss/_mixins.scss
Normal file
172
src/scss/_mixins.scss
Normal file
@ -0,0 +1,172 @@
|
||||
@mixin button_border($rightbottom, $topleft) {
|
||||
border: $rightbottom;
|
||||
border-top: $topleft;
|
||||
border-left: $topleft;
|
||||
}
|
||||
|
||||
@mixin col-count($colCount, $colSpacing) {
|
||||
-webkit-column-count: $colCount;
|
||||
-webkit-column-gap: $colSpacing;
|
||||
-moz-column-count: $colCount;
|
||||
-moz-column-gap: $colSpacing;
|
||||
column-count: $colCount;
|
||||
column-gap: $colSpacing;
|
||||
}
|
||||
|
||||
@mixin size($height, $width) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-left-radius($radius) {
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-right-radius($radius) {
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-moz-border-radius-topright: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-top-left-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@include border-bottom-right-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
@mixin background-size($size){
|
||||
-webkit-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
@mixin box-sizing($boxsize) {
|
||||
-webkit-box-sizing: $boxsize;
|
||||
-moz-box-sizing: $boxsize;
|
||||
-ms-box-sizing: $boxsize;
|
||||
-o-box-sizing: $boxsize;
|
||||
-khtml-box-sizing: $boxsize;
|
||||
box-sizing: $boxsize;
|
||||
}
|
||||
|
||||
@mixin horizontal-gradient($startColour, $endColour) {
|
||||
background-color: $fallback_hex_gradient_bg;
|
||||
background-image: linear-gradient(to right, $startColour, $endColour);
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
|
||||
background-image: -webkit-linear-gradient(left, $startColour, $endColour);
|
||||
background-image: -moz-linear-gradient(left, $startColour, $endColour);
|
||||
background-image: -o-linear-gradient(left, $startColour, $endColour);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@mixin vertical-gradient($startColour, $endColour) {
|
||||
background-color: $fallback_hex_gradient_bg;
|
||||
background-color: mix($startColour, $endColour, 60%);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
|
||||
background-image: -webkit-linear-gradient(top, $startColour, $endColour);
|
||||
background-image: -moz-linear-gradient(top, $startColour, $endColour);
|
||||
background-image: -o-linear-gradient(top, $startColour, $endColour);
|
||||
background-image: linear-gradient(to bottom, $startColour, $endColour);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@mixin box-shadow($a, $b, $c, $colour) {
|
||||
-moz-box-shadow: $a $b $c $colour;
|
||||
-webkit-box-shadow: $a $b $c $colour;
|
||||
box-shadow: $a $b $c $colour;
|
||||
}
|
||||
|
||||
@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
|
||||
|
||||
$grid-column-width: $grid-container-width/$grid-column-count;
|
||||
|
||||
.container {
|
||||
width: $grid-container-width;
|
||||
|
||||
.one { width: (1*$grid-column-width - $grid-gutter); }
|
||||
.two { width: (2*$grid-column-width - $grid-gutter); }
|
||||
.three { width: (3*$grid-column-width - $grid-gutter); }
|
||||
.four { width: (4*$grid-column-width - $grid-gutter); }
|
||||
.five { width: (5*$grid-column-width - $grid-gutter); }
|
||||
.six { width: (6*$grid-column-width - $grid-gutter); }
|
||||
.seven { width: (7*$grid-column-width - $grid-gutter); }
|
||||
.eight { width: (8*$grid-column-width - $grid-gutter); }
|
||||
.nine { width: (9*$grid-column-width - $grid-gutter); }
|
||||
.ten { width: (10*$grid-column-width - $grid-gutter); }
|
||||
.eleven { width: (11*$grid-column-width - $grid-gutter); }
|
||||
.twelve { width: (12*$grid-column-width - $grid-gutter); }
|
||||
.thirteen { width: (13*$grid-column-width - $grid-gutter); }
|
||||
.fourteen { width: (14*$grid-column-width - $grid-gutter); }
|
||||
.fifteen { width: (15*$grid-column-width - $grid-gutter); }
|
||||
.sixteen { width: (16*$grid-column-width - $grid-gutter); }
|
||||
.one-third { width: ($grid-container-width/3) - $grid-gutter; }
|
||||
.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
|
||||
.one-half { width: ($grid-container-width/2) - $grid-gutter; }
|
||||
.one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
|
||||
.three-quarters { width: (($grid-container-width/4)*3) - $grid-gutter; }
|
||||
|
||||
.offset-by-one { padding-left: $grid-column-width; }
|
||||
.offset-by-two { padding-left: $grid-column-width*2; }
|
||||
.offset-by-three { padding-left: $grid-column-width*3; }
|
||||
.offset-by-four { padding-left: $grid-column-width*4; }
|
||||
.offset-by-five { padding-left: $grid-column-width*5; }
|
||||
.offset-by-six { padding-left: $grid-column-width*6; }
|
||||
.offset-by-seven { padding-left: $grid-column-width*7; }
|
||||
.offset-by-eight { padding-left: $grid-column-width*8; }
|
||||
.offset-by-nine { padding-left: $grid-column-width*9; }
|
||||
.offset-by-ten { padding-left: $grid-column-width*10; }
|
||||
.offset-by-eleven { padding-left: $grid-column-width*11; }
|
||||
.offset-by-twelve { padding-left: $grid-column-width*12; }
|
||||
.offset-by-thirteen { padding-left: $grid-column-width*13; }
|
||||
.offset-by-fourteen { padding-left: $grid-column-width*14; }
|
||||
.offset-by-fifteen { padding-left: $grid-column-width*15; }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
117
src/scss/_typography.scss
Normal file
117
src/scss/_typography.scss
Normal file
@ -0,0 +1,117 @@
|
||||
// #Typography
|
||||
// ==================================================
|
||||
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $heading_colour;
|
||||
font-family: $heading_font;
|
||||
font-weight: $heading_font_weight;
|
||||
font-size: $heading1_font_size;
|
||||
line-height: $heading1_line_height;
|
||||
margin: $heading1_margin;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $heading_colour;
|
||||
font-family: $heading_font;
|
||||
font-weight: $heading_font_weight;
|
||||
font-size: $heading2_font_size;
|
||||
line-height: $heading2_line_height;
|
||||
margin: $heading2_margin;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $heading_colour;
|
||||
font-family: $heading_font;
|
||||
font-weight: $heading_font_weight;
|
||||
font-size: $heading3_font_size;
|
||||
line-height: $heading3_line_height;
|
||||
margin: $heading3_margin;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $heading_colour;
|
||||
font-family: $heading_font;
|
||||
font-weight: $heading_font_weight;
|
||||
font-size: $heading4_font_size;
|
||||
line-height: $heading4_line_height;
|
||||
margin: $heading4_margin;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: $heading_colour;
|
||||
font-family: $heading_font;
|
||||
font-weight: $heading_font_weight;
|
||||
font-size: $heading5_font_size;
|
||||
line-height: $heading5_line_height;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $heading_colour;
|
||||
font-family: $heading_font;
|
||||
font-weight: $heading_font_weight;
|
||||
font-size: $heading6_font_size;
|
||||
line-height: $heading6_line_height;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
color: $subheader_colour;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $paragraph_margin;
|
||||
line-height: $paragraph_line_height;
|
||||
}
|
||||
|
||||
p img {
|
||||
margin: $paragraph_image_margin;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: $paragraph_lead_font_size;
|
||||
line-height: $paragraph_lead_line_height;
|
||||
color: $paragraph_lead_colour;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
color: $strong_colour;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
blockquote, blockquote p {
|
||||
font-size: $blockquote_font_size;
|
||||
line-height: $blockquote_line_height;
|
||||
color: $blockquote_colour;
|
||||
font-style: $blockquote_font_style;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: $blockquote_margin;
|
||||
padding: $blockquote_padding;
|
||||
border-left: $blockquote_border_left;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
display: block;
|
||||
font-size: $blockquote_cite_font_size;
|
||||
color: $blockquote_cite_colour;
|
||||
}
|
||||
|
||||
blockquote cite:before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
|
||||
color: $blockquote_cite_link_colour;
|
||||
}
|
||||
140
src/scss/_variables.scss
Normal file
140
src/scss/_variables.scss
Normal file
@ -0,0 +1,140 @@
|
||||
$gutter: 20px;
|
||||
$column-count: 16;
|
||||
$desktop-container-width: 960px;
|
||||
$tablet-container-width: 768px;
|
||||
$mobile-container-width: 90%;
|
||||
$mobile-column-width: 100%;
|
||||
$base_font_size: 14px;
|
||||
|
||||
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
$form_button_border_radius: 3px;
|
||||
$form_button_border_topleft: 1px solid #ccc;
|
||||
$form_button_border_rightbottom: 1px solid #aaa;
|
||||
$form_button_text_colour: #444;
|
||||
$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
|
||||
$form_button_gradient_start: rgba(255, 255, 255, .2);
|
||||
$form_button_gradient_end: rgba(0, 0, 0, .2);
|
||||
$form_button_font_size: 11px;
|
||||
$form_button_padding: 8px 10px;
|
||||
$form_button_line_height: normal;
|
||||
|
||||
$form_button_hover_border_topleft: 1px solid #aaa;
|
||||
$form_button_hover_border_rightbottom: 1px solid #888;
|
||||
$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
|
||||
$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
|
||||
$form_button_hover_text_colour: #222;
|
||||
|
||||
$form_button_active_border: 1px solid #666;
|
||||
$form_button_active_gradient_start: rgba(255, 255, 255, .2);
|
||||
$form_button_active_gradient_end: rgba(0, 0, 0, .2);
|
||||
|
||||
$form_input_border: 1px solid #ccc;
|
||||
$form_input_text_colour: #777;
|
||||
$form_input_background: #fff;
|
||||
$form_input_padding: 6px 4px;
|
||||
$form_input_width: 210px;
|
||||
$form_input_select_width: 220px;
|
||||
$form_input_margin: 0 0 20px 0;
|
||||
$form_input_font_size: 13px;
|
||||
$form_input_border_radius: 2px;
|
||||
|
||||
$form_input_checkbox_display: inline;
|
||||
|
||||
$form_input_focus_border: 1px solid #aaa;
|
||||
$form_input_focus_text_colour: #444;
|
||||
$form_input_focus_outline: none;
|
||||
$form_input_focus_box_shadow_x: 0;
|
||||
$form_input_focus_box_shadow_y: 0;
|
||||
$form_input_focus_box_shadow_blur: 3px;
|
||||
$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
|
||||
|
||||
$form_input_select_padding: 10px;
|
||||
|
||||
$form_label_legend_colour: #444;
|
||||
$form_fieldset_margin: 0 0 20px 0;
|
||||
|
||||
$legend_font_weight: bold;
|
||||
$legend_font_size: $form_input_font_size;
|
||||
|
||||
$form_textarea_min_height: 60px;
|
||||
|
||||
$link_colour: #333;
|
||||
$link_decoration: underline;
|
||||
$link_outline: 0;
|
||||
$link_hover_colour: #000;
|
||||
$link_hover_decoration: none;
|
||||
|
||||
$heading_font: "Georgia", "Times New Roman", serif;
|
||||
$heading_font_weight: normal;
|
||||
$heading_colour: #181818;
|
||||
|
||||
$heading1_font_size: 46px;
|
||||
$heading1_line_height: $heading1_font_size * 1.5;
|
||||
$heading1_margin: 0 0 14px 0;
|
||||
|
||||
$heading2_font_size: 35px;
|
||||
$heading2_line_height: $heading2_font_size * 1.5;
|
||||
$heading2_margin: 0 0 10px 0;
|
||||
|
||||
$heading3_font_size: 28px;
|
||||
$heading3_line_height: $heading3_font_size * 1.5;
|
||||
$heading3_margin: 0 0 8px 0;
|
||||
|
||||
$heading4_font_size: 21px;
|
||||
$heading4_line_height: $heading4_font_size * 1.5;
|
||||
$heading4_margin: 0 0 4px 0;
|
||||
|
||||
$heading5_font_size: 17px;
|
||||
$heading5_line_height: $heading5_font_size * 1.5;
|
||||
|
||||
$heading6_font_size: 14px;
|
||||
$heading6_line_height: $heading6_font_size * 1.5;
|
||||
|
||||
$subheader_colour: #777;
|
||||
|
||||
$paragraph_margin: 0 0 20px 0;
|
||||
$paragraph_image_margin: 0;
|
||||
$paragraph_line_height: $base_font_size * 1.5;
|
||||
|
||||
$paragraph_lead_font_size: 21px;
|
||||
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
|
||||
$paragraph_lead_colour: #777;
|
||||
|
||||
$strong_colour: #333;
|
||||
|
||||
$blockquote_colour: #777;
|
||||
$blockquote_border_left: 1px solid #ddd;
|
||||
$blockquote_cite_colour: #555;
|
||||
$blockquote_cite_link_colour: #555;
|
||||
$blockquote_cite_font_size: 12px;
|
||||
$blockquote_margin: 0 0 20px;
|
||||
$blockquote_padding: 9px 20px 0 19px;
|
||||
$blockquote_font_size: 17px;
|
||||
$blockquote_line_height: 24px;
|
||||
$blockquote_font_style: italic;
|
||||
|
||||
$hr_border: solid #ddd;
|
||||
$hr_border_width: 1px 0 0;
|
||||
$hr_margin: 10px 0 30px;
|
||||
|
||||
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
$list_margin: 0 0 20px 0;
|
||||
$list_large_line_height: 21px;
|
||||
|
||||
$ul_list_style: none outside;
|
||||
$ol_list_style: decimal;
|
||||
|
||||
$list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc.
|
||||
$list_styled_position: outside; // List item bullet position
|
||||
|
||||
$nested_list_margin: 4px 0 5px 30px;
|
||||
$nested_list_font_size: 90%;
|
||||
|
||||
$list_item_line_height: 18px;
|
||||
$list_item_margin: 0 0 12px 0;
|
||||
$list_item_paragraph_line_height: 21px;
|
||||
|
||||
$fallback_hex_gradient_bg: #CCC;
|
||||
|
||||
Reference in New Issue
Block a user