style.scss

   1 @import "normalize";
   2 @import "susy";
   3
   4 @import "breakpoint";
   5 @include breakpoint-set('to ems', true);
   6
   7 @import "compass/css3";
   8 @import "compass/typography/links/link-colors";
   9 @import "compass/utilities/general/clearfix";
  10
  11 // See [1] below
  12 @include border-box-sizing;
  13
  14 $susy: (
  15 container: 70em,
  16 columns: 12,
  17 global-box-sizing: border-box, // [1] http://stackoverflow.com/questions/27590328
  18 gutters: 1/6,
  19 );
  20
  21 $text-color: rgba(0, 0, 0, 0.87);
  22
  23 $background-color: #fafafa;
  24 $background-color-alternate: #f5f5f5;
  25
  26 // Blue from Android Material
  27 $primary-color: #1976d2; // 700
  28 $primary-color-darker: #0d47a1; // 900
  29 $primary-color-lighter: #2196f3; // 500
  30
  31 // Deep Orange from Android Material
  32 $accent-color: #dd2c00; // A700
  33 $accent-color-lighter: #ff3d00; // A400
  34 $accent-color-darker: #bf360c; // 900
  35
  36
  37 // Flexible objects
  38 img, embed, object, video
  39 {
  40   max-width: 100%;
  41   padding-top: .5em;
  42 }
  43
  44 body {
  45   font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  46   background: $background-color;
  47   color: $text-color;
  48
  49   @include container;
  50   padding: gutter(12);
  51 }
  52
  53 abbr, acronym {
  54   border-bottom: 1px dashed $primary-color;
  55 }
  56
  57 h1, h2, h3, h4, h5, h6 {
  58   color: $primary-color;
  59   a {
  60     @include link-colors($primary-color, $primary-color-lighter, $primary-color, $primary-color-darker, $primary-color);
  61   }
  62 }
  63
  64 a {
  65   @include link-colors($accent-color, $accent-color-lighter, $accent-color, $accent-color-darker, $accent-color);
  66   text-decoration: none;
  67   &:focus {
  68     outline: none;
  69   }
  70 }
  71
  72 .block {
  73   @include span(full);
  74 }
  75
  76 #header {
  77   h1 {
  78     margin-top: .2em;
  79   }
  80 }
  81
  82 #main-content {
  83   .block {
  84     padding: gutter(12);
  85     margin-bottom: gutter(12);
  86
  87     @include border-radius(.5em);
  88     @include box-shadow($primary-color-darker 0px 2px 3px);
  89     background: $background-color-alternate;
  90     border: $primary-color-lighter 1px solid;
  91   }
  92 }
  93
  94 @include breakpoint(481px) {
  95   #what, #where {
  96     @include span(6 of 12);
  97   }
  98   #why, #who {
  99     @include span(6 last of 12);
 100   }
 101 }
 102
 103 @include breakpoint(769px) {
 104   #what, #why {
 105     @include span(4);
 106   }
 107   #who, #where {
 108     @include span(4 last of 12);
 109   }
 110 }