| Left: | ||
| Right: |
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 /******************************************************************************* | |
| 2 * Layout | |
| 3 ******************************************************************************/ | |
| 4 | |
| 5 html | |
| 6 { | |
| 7 background-color: #F3F3F3; | |
|
juliandoucette
2017/12/21 22:06:52
Detail: See comment re greys on this page in forms
juliandoucette
2017/12/22 13:32:23
Acknowledged.
| |
| 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 .align-center | |
|
saroyanm
2017/12/21 16:07:59
Detail: this is only used on the form element, so
| |
| 21 { | |
| 22 margin-right: auto; | |
| 23 margin-left: auto; | |
| 24 } | |
| 25 | |
| 26 /* .outer-container | |
| 27 ******************************************************************************/ | |
| 28 | |
| 29 .outer-container | |
|
juliandoucette
2017/12/21 22:06:53
NIT: This has more to do with vertical alignment t
| |
| 30 { | |
| 31 @media (min-width: $phablet-breakpoint) | |
| 32 { | |
| 33 display: table-cell; | |
| 34 vertical-align: middle; | |
| 35 } | |
| 36 } | |
| 37 | |
| 38 /* .phone-width | |
| 39 ******************************************************************************/ | |
| 40 | |
| 41 @media (max-width: $phablet-breakpoint) | |
| 42 { | |
| 43 .phone-width { width: 100% } | |
| 44 } | |
| 45 | |
|
juliandoucette
2017/12/21 22:06:52
Where's .phablet-width?
| |
| 46 /* #header | |
| 47 ******************************************************************************/ | |
| 48 | |
| 49 #header | |
| 50 { | |
| 51 margin-bottom: $small-space; | |
| 52 | |
| 53 @media (min-width: $phablet-breakpoint) | |
| 54 { | |
| 55 margin-bottom: $medium-space; | |
| 56 text-align: center; | |
| 57 } | |
| 58 } | |
| 59 | |
| 60 #title | |
| 61 { | |
| 62 display: inline-table; | |
|
juliandoucette
2017/12/21 22:06:52
Not sure why this is necessary? It seems to work s
| |
| 63 font-size: 1.5em; | |
| 64 font-weight: 300; | |
|
juliandoucette
2017/12/21 22:06:52
Detail: We decided to go with 400 for adblockplus.
| |
| 65 | |
| 66 @media (min-width: $phablet-breakpoint) | |
| 67 { | |
| 68 font-size: 2em; | |
| 69 } | |
| 70 | |
| 71 img, | |
| 72 span | |
| 73 { | |
| 74 display: table-cell; | |
| 75 vertical-align: middle; | |
| 76 } | |
| 77 | |
| 78 img | |
| 79 { | |
| 80 height: 1.5em; | |
| 81 | |
| 82 @media (min-width: $phablet-breakpoint) | |
| 83 { | |
| 84 height: 2em; | |
| 85 } | |
| 86 } | |
| 87 | |
| 88 span | |
| 89 { | |
| 90 padding: 0 $x-small-space; | |
| 91 } | |
| 92 | |
| 93 strong { font-weight: 700; } | |
|
juliandoucette
2017/12/21 22:06:53
NIT/suggest: stronger
Work it, make it, do it, ma
| |
| 94 } | |
| OLD | NEW |