@import "normalize"; @import "susy"; @import "breakpoint"; @include breakpoint-set('to ems', true); @import "compass/css3"; @import "compass/typography/links/link-colors"; @import "compass/utilities/general/clearfix"; // See [1] below @include border-box-sizing; $susy: ( container: 70em, columns: 12, global-box-sizing: border-box, // [1] http://stackoverflow.com/questions/27590328 gutters: 1/6, ); $text-color: rgba(0, 0, 0, 0.87); $background-color: #fafafa; $background-color-alternate: #f5f5f5; // Blue from Android Material $primary-color: #1976d2; // 700 $primary-color-darker: #0d47a1; // 900 $primary-color-lighter: #2196f3; // 500 // Deep Orange from Android Material $accent-color: #dd2c00; // A700 $accent-color-lighter: #ff3d00; // A400 $accent-color-darker: #bf360c; // 900 // Flexible objects img, embed, object, video { max-width: 100%; padding-top: .5em; } body { font-family: Cambria, Georgia, "Times New Roman", Times, serif; background: $background-color; color: $text-color; @include container; padding: gutter(12); } abbr, acronym { border-bottom: 1px dashed $primary-color; } h1, h2, h3, h4, h5, h6 { color: $primary-color; a { @include link-colors($primary-color, $primary-color-lighter, $primary-color, $primary-color-darker, $primary-color); } } a { @include link-colors($accent-color, $accent-color-lighter, $accent-color, $accent-color-darker, $accent-color); text-decoration: none; &:focus { outline: none; } } .block { @include span(full); } #header { h1 { margin-top: .2em; } } #main-content { .block { padding: gutter(12); margin-bottom: gutter(12); @include border-radius(.5em); @include box-shadow($primary-color-darker 0px 2px 3px); background: $background-color-alternate; border: $primary-color-lighter 1px solid; } } @include breakpoint(481px) { #what, #where { @include span(6 of 12); } #why, #who { @include span(6 last of 12); } } @include breakpoint(769px) { #what, #why { @include span(4); } #who, #where { @include span(4 last of 12); } }