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; |
+ } |
+} |