| Index: src/scss/_layout.scss | 
| =================================================================== | 
| new file mode 100644 | 
| --- /dev/null | 
| +++ b/src/scss/_layout.scss | 
| @@ -0,0 +1,115 @@ | 
| +/******************************************************************************* | 
| + * Layout | 
| + ******************************************************************************/ | 
| + | 
| +html | 
| +{ | 
| +  background-color: #F3F3F3; | 
| +} | 
| + | 
| +body | 
| +{ | 
| +  @media (min-width: $phablet-breakpoint) | 
| +  { | 
| +    display: table; | 
| +    width: 100%; | 
| +    min-height: 100vh; | 
| +  } | 
| +} | 
| + | 
| +/* .outer-container | 
| + ******************************************************************************/ | 
| + | 
| +.outer-container | 
| +{ | 
| +  @media (min-width: $phablet-breakpoint) | 
| +  { | 
| +    display: table-cell; | 
| +    vertical-align: middle; | 
| +  } | 
| +} | 
| + | 
| +/* #page-header | 
| + ******************************************************************************/ | 
| + | 
| +#page-header | 
| +{ | 
| +  margin-top: $medium-space; | 
| +  margin-bottom: $small-space; | 
| + | 
| +  @media (min-width: $phablet-breakpoint) | 
| +  { | 
| +    margin-top: 0; | 
| +    margin-bottom: $medium-space; | 
| +    text-align: center; | 
| +  } | 
| +} | 
| + | 
| +#page-header figure | 
| +{ | 
| +  display: inline-table; | 
| +  font-size: 1.5em; | 
| +  font-weight: 300; | 
| + | 
| +  @media (min-width: $phablet-breakpoint) | 
| +  { | 
| +    font-size: 2em; | 
| +  } | 
| + | 
| +  img, | 
| +  figcaption | 
| +  { | 
| +    display: table-cell; | 
| +    vertical-align: middle; | 
| +  } | 
| + | 
| +  img | 
| +  { | 
| +    height: 1.5em; | 
| + | 
| +    @media (min-width: $phablet-breakpoint) | 
| +    { | 
| +      height: 2em; | 
| +    } | 
| +  } | 
| + | 
| +  figcaption | 
| +  { | 
| +    padding: 0 $x-small-space; | 
| +  } | 
| + | 
| +  strong { font-weight: 700; } | 
| +} | 
| + | 
| +#page-header h1 | 
| +{ | 
| +  margin: $small-space auto $x-small-space; | 
| +  font-weight: 700; | 
| +} | 
| + | 
| +/* #sign-up, #page-footer | 
| + ******************************************************************************/ | 
| + | 
| +#sign-up, | 
| +#page-footer | 
| +{ | 
| +  width: 100%; | 
| + | 
| +  @media (min-width: $phablet-breakpoint) | 
| +  { | 
| +    max-width: 320px; | 
| +    margin-right: auto; | 
| +    margin-left: auto; | 
| +  } | 
| +} | 
| + | 
| +#page-footer | 
| +{ | 
| +  margin-top: $small-space; | 
| +  text-align: center; | 
| + | 
| +  @media (min-width: $phablet-breakpoint) | 
| +  { | 
| +    text-align: left; | 
| +  } | 
| +} | 
|  |