| Index: scss/_layout.scss | 
| =================================================================== | 
| new file mode 100644 | 
| --- /dev/null | 
| +++ b/scss/_layout.scss | 
| @@ -0,0 +1,114 @@ | 
| +/******************************************************************************* | 
| + * 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; | 
| +} | 
| + | 
| +/* #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; | 
| + } | 
| +} |