| Index: scss/_layout.scss |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/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; |
| + } |
| +} |