Moar variablez kthx

This commit is contained in:
Nick Pack
2013-04-23 20:56:43 +01:00
parent 0b1467d62c
commit f10d7fb1a3
15 changed files with 899 additions and 77 deletions

View File

@ -10,14 +10,14 @@ input[type="button"] {
@include border-radius($form_button_border_radius);
color: $form_button_text_colour;
display: inline-block;
font-size: 11px;
font-size: $form_button_font_size;
font-weight: bold;
text-decoration: none;
text-shadow: $form_button_text_shadow;
cursor: pointer;
margin-bottom: 20px;
margin: $form_input_margin;
line-height: normal;
padding: 8px 10px;
padding: $form_button_padding;
font-family: $form_element_font;
}
@ -62,11 +62,11 @@ input::-moz-focus-inner {
================================================== */
form {
margin-bottom: 20px;
margin: $form_fieldset_margin;
}
fieldset {
margin-bottom: 20px;
margin: $form_fieldset_margin;
}
input[type="text"],
@ -75,16 +75,15 @@ input[type="email"],
textarea,
select {
border: $form_input_border;
padding: 6px 4px;
padding: $form_input_padding;
outline: none;
@include border-radius(2px);
font: 13px $form_element_font;
font: $form_input_font_size $form_element_font;
color: $form_input_text_colour;
margin: 0;
width: 210px;
width: $form_input_width;
max-width: 100%;
display: block;
margin-bottom: 20px;
margin: $form_input_margin;
background: $form_input_background;
}
@ -108,12 +107,12 @@ textarea {
label,
legend {
display: block;
font-weight: bold;
font-size: 13px;
font-weight: $legend_font_weight;
font-size: $legend_font_size;
}
select {
width: 220px;
width: $form_input_select_width;
}
input[type="checkbox"] {
@ -123,6 +122,6 @@ input[type="checkbox"] {
label span,
legend span {
font-weight: normal;
font-size: 13px;
font-size: $form_input_font_size;
color: $form_label_legend_colour;
}

View File

@ -2,12 +2,13 @@
================================================== */
a, a:visited {
color: $link_colour;
text-decoration: underline;
outline: 0;
text-decoration: $link_decoration;
outline: $link_outline;
}
a:hover, a:focus {
color: $link_hover_colour;
text-decoration: $link_hover_decoration;
}
p a, p a:visited {

View File

@ -1,19 +1,19 @@
/* #Lists
================================================== */
ul, ol {
margin-bottom: 20px;
margin: $list_margin;
}
ul {
list-style: none outside;
list-style: $ul_list_style;
}
ol {
list-style: decimal;
list-style: $ol_list_style;
}
ol, ul.square, ul.circle, ul.disc {
margin-left: 30px;
margin: $list_styled_margin;
}
ul.square {
@ -30,24 +30,19 @@ ul.disc {
ul ul, ul ol,
ol ol, ol ul {
margin: 4px 0 5px 30px;
font-size: 90%;
}
ul ul li, ul ol li,
ol ol li, ol ul li {
margin-bottom: 6px;
margin: $nested_list_margin;
font-size: $nested_list_font_size;
}
li {
line-height: 18px;
margin-bottom: 12px;
line-height: $list_item_line_height;
margin: $list_item_margin;
}
ul.large li {
line-height: 21px;
line-height: $list_large_line_height;
}
li p {
line-height: 21px;
line-height: $list_item_paragraph_line_height;
}

View File

@ -14,7 +14,7 @@
h1, h2, h3, h4, h5, h6 {
color: $heading_colour;
font-family: $heading_font;
font-weight: normal;
font-weight: $heading_font_weight;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
@ -22,55 +22,55 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
}
h1 {
font-size: 46px;
line-height: 50px;
margin-bottom: 14px;
font-size: $heading1_font_size;
line-height: $heading1_line_height;
margin: $heading1_margin;
}
h2 {
font-size: 35px;
line-height: 40px;
margin-bottom: 10px;
font-size: $heading2_font_size;
line-height: $heading2_line_height;
margin: $heading2_margin;
}
h3 {
font-size: 28px;
line-height: 34px;
margin-bottom: 8px;
font-size: $heading3_font_size;
line-height: $heading3_line_height;
margin: $heading3_margin;
}
h4 {
font-size: 21px;
line-height: 30px;
margin-bottom: 4px;
font-size: $heading4_font_size;
line-height: $heading4_line_height;
margin: $heading4_margin;
}
h5 {
font-size: 17px;
line-height: 24px;
font-size: $heading5_font_size;
line-height: $heading5_line_height;
}
h6 {
font-size: 14px;
line-height: 21px;
font-size: $heading6_font_size;
line-height: $heading6_line_height;
}
.subheader {
color: #777;
color: $subheader_colour;
}
p {
margin: 0 0 20px 0;
margin: $paragraph_margin;
}
p img {
margin: 0;
margin: $paragraph_image_margin;
}
p.lead {
font-size: 21px;
line-height: 27px;
color: #777;
font-size: $paragraph_lead_font_size;
line-height: $paragraph_lead_line_height;
color: $paragraph_lead_colour;
}
em {
@ -79,7 +79,7 @@ em {
strong {
font-weight: bold;
color: #333;
color: $strong_colour;
}
small {
@ -95,14 +95,14 @@ blockquote, blockquote p {
}
blockquote {
margin: 0 0 20px;
padding: 9px 20px 0 19px;
margin: $blockquote_margin;
padding: $blockquote_padding;
border-left: $blockquote_border_left;
}
blockquote cite {
display: block;
font-size: 12px;
font-size: $blockquote_cite_font_size;
color: $blockquote_cite_colour;
}
@ -117,8 +117,8 @@ blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
/* not really typographical, but I couldnt find anywhere else to put it */
hr {
border: $hr_border;
border-width: 1px 0 0;
border-width: $hr_border_width;
clear: both;
margin: 10px 0 30px;
margin: $hr_margin;
height: 0;
}

View File

@ -7,6 +7,8 @@ $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_hover_border_topleft: 1px solid #aaa;
$form_button_hover_border_rightbottom: 1px solid #888;
@ -21,23 +23,90 @@ $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_focus_border: 1px solid #aaa;
$form_input_focus_text_colour: #444;
$form_label_legend_colour: #444;
$form_fieldset_margin: 0 0 20px 0;
$legend_font_weight: bold;
$legend_font_size: $form_input_font_size;
$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: 50px;
$heading1_margin: 0 0 14px 0;
$heading2_font_size: 35px;
$heading2_line_height: 40px;
$heading2_margin: 0 0 10px 0;
$heading3_font_size: 28px;
$heading3_line_height: 34px;
$heading3_margin: 0 0 8px 0;
$heading4_font_size: 21px;
$heading4_line_height: 30px;
$heading4_margin: 0 0 4px 0;
$heading5_font_size: 17px;
$heading5_line_height: 24px;
$heading6_font_size: 14px;
$heading6_line_height: 21px;
$subheader_colour: #777;
$paragraph_margin: 0 0 20px 0;
$paragraph_image_margin: 0;
$paragraph_lead_font_size: 21px;
$paragraph_lead_line_height: 27px;
$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;
$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. */
$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;
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;