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 }
  68
  69 .block {
  70   @include span(full);
  71 }
  72
  73 #header {
  74   h1 {
  75     margin-top: .2em;
  76   }
  77 }
  78
  79 #main-content {
  80   .block {
  81     padding: gutter(12);
  82     margin-bottom: gutter(12);
  83
  84     @include border-radius(.5em);
  85     @include box-shadow($primary-color-darker 0px 2px 3px);
  86     background: $background-color-alternate;
  87     border: $primary-color-lighter 1px solid;
  88   }
  89 }
  90
  91 @include breakpoint(481px) {
  92   #what, #where {
  93     @include span(6 of 12);
  94   }
  95   #why, #who {
  96     @include span(6 last of 12);
  97   }
  98 }
  99
 100 @include breakpoint(769px) {
 101   #what, #why {
 102     @include span(4);
 103   }
 104   #who, #where {
 105     @include span(4 last of 12);
 106   }
 107 }