| OLD | NEW | 
| (Empty) |  | 
 |    1 /******************************************************************************* | 
 |    2  * Layout | 
 |    3  ******************************************************************************/ | 
 |    4  | 
 |    5 html | 
 |    6 { | 
 |    7   background-color: #F3F3F3; | 
 |    8 } | 
 |    9  | 
 |   10 body | 
 |   11 { | 
 |   12   @media (min-width: $phablet-breakpoint) | 
 |   13   { | 
 |   14     display: table; | 
 |   15     width: 100%; | 
 |   16     min-height: 100vh; | 
 |   17   } | 
 |   18 } | 
 |   19  | 
 |   20 /* .outer-container | 
 |   21  ******************************************************************************/ | 
 |   22  | 
 |   23 .outer-container | 
 |   24 { | 
 |   25   @media (min-width: $phablet-breakpoint) | 
 |   26   { | 
 |   27     display: table-cell; | 
 |   28     vertical-align: middle; | 
 |   29   } | 
 |   30 } | 
 |   31  | 
 |   32 /* #page-header | 
 |   33  ******************************************************************************/ | 
 |   34  | 
 |   35 #page-header | 
 |   36 { | 
 |   37   margin-top: $medium-space; | 
 |   38   margin-bottom: $small-space; | 
 |   39  | 
 |   40   @media (min-width: $phablet-breakpoint) | 
 |   41   { | 
 |   42     margin-top: 0; | 
 |   43     margin-bottom: $medium-space; | 
 |   44     text-align: center; | 
 |   45   } | 
 |   46 } | 
 |   47  | 
 |   48 #page-header figure | 
 |   49 { | 
 |   50   display: inline-table; | 
 |   51   font-size: 1.5em; | 
 |   52   font-weight: 300; | 
 |   53  | 
 |   54   @media (min-width: $phablet-breakpoint) | 
 |   55   { | 
 |   56     font-size: 2em; | 
 |   57   } | 
 |   58  | 
 |   59   img, | 
 |   60   figcaption | 
 |   61   { | 
 |   62     display: table-cell; | 
 |   63     vertical-align: middle; | 
 |   64   } | 
 |   65  | 
 |   66   img | 
 |   67   { | 
 |   68     height: 1.5em; | 
 |   69  | 
 |   70     @media (min-width: $phablet-breakpoint) | 
 |   71     { | 
 |   72       height: 2em; | 
 |   73     } | 
 |   74   } | 
 |   75  | 
 |   76   figcaption | 
 |   77   { | 
 |   78     padding: 0 $x-small-space; | 
 |   79   } | 
 |   80  | 
 |   81   strong { font-weight: 700; } | 
 |   82 } | 
 |   83  | 
 |   84 #page-header h1 | 
 |   85 { | 
 |   86   margin: $small-space auto $x-small-space; | 
 |   87   font-weight: 700; | 
 |   88 } | 
 |   89  | 
 |   90 /* #sign-up, #page-footer | 
 |   91  ******************************************************************************/ | 
 |   92  | 
 |   93 #sign-up, | 
 |   94 #page-footer | 
 |   95 { | 
 |   96   width: 100%; | 
 |   97    | 
 |   98   @media (min-width: $phablet-breakpoint) | 
 |   99   { | 
 |  100     max-width: 320px; | 
 |  101     margin-right: auto; | 
 |  102     margin-left: auto; | 
 |  103   } | 
 |  104 } | 
 |  105  | 
 |  106 #page-footer | 
 |  107 { | 
 |  108   margin-top: $small-space; | 
 |  109   text-align: center; | 
 |  110  | 
 |  111   @media (min-width: $phablet-breakpoint) | 
 |  112   { | 
 |  113     text-align: left; | 
 |  114   } | 
 |  115 } | 
| OLD | NEW |