| 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 | 
|---|