app/assets/stylesheets/pages/pages.scss
@import "susy";
$font-grey: #2d3237;
$font-blue: #253848;
// Setting up the Static Grid
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$container-style: static;
$susy: (
columns: $total-columns,
gutters: $gutter-width / $column-width,
column-width: $column-width,
math: if($container-style == magic, fluid, $container-style)
);
h2 {
font-size: 2.25em;
color: $font-grey;
line-height: 1.6em;
text-transform: uppercase;
padding-bottom: 1.5em;
font-weight: 600;
}
h3 {
font-size: 1.5em;
font-weight: 600;
color: $font-grey;
text-transform: uppercase;
padding-top: 1.5em;
padding-bottom: 0.6em;
}
h3.first {
padding-top: 0;
}
h4 {
font-size: 1.2em;
color: $font-blue;
padding-top: 0.5em;
padding-bottom: 0.75em;
font-weight: bold;
}
.page {
// page acts as a container for our grid.
@include container;
background-color: #f3f1f1;
max-width: 87.5%;
margin-right: 0;
margin-left: 0;
padding: 60px;
margin-bottom: 105px;
position: relative;
z-index: 666;
strong {
font-weight: 600;
color: #444;
}
p {
padding: 0 0 0.75em 0;
line-height: 1.45em;
color: #666;
font-size: 1.1em;
}
ul {
list-style-type: disc;
margin-top: 0.4em;
margin-bottom: 0.4em;
padding-left: 1.7em;
color: #666;
line-height: 1.45em;
font-size: 1.05em;
li {
padding: 0 0 0.5em 0;
}
ul {
list-style-type:circle;
padding: 0 0 0.75em 1.5em;
color: #666;
}
}
h4.point-header {
margin-top: 1em;
padding-bottom: 0.6em;
}
h4.point-header.first {
margin-top: 0;
}
.strong {
font-weight: 600;
}
.row-header {
clear: both;
}
.column-one {
@include span(6 of 12);
width: 47.5%;
}
.column-two {
@include span(last 6 of 12);
img {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #ddd;
margin-top: 2.5em;
margin-bottom: 0.5em;
}
width: 47.5%;
.notes-text {
font-size: 1.00em;
}
}
}
#main.page {
padding-bottom: 60px;
}
#registration-form {
width: 500px;
margin: auto auto;
padding: 20px 0px;
}
.column-full-width {
@include span(12 of 12);
}