Left: | ||
Right: |
OLD | NEW |
---|---|
(Empty) | |
1 /******************************************************************************* | |
2 * Layout | |
3 ******************************************************************************/ | |
4 | |
5 html | |
6 { | |
7 background-color: #F3F3F3; | |
juliandoucette
2018/01/22 19:47:54
NIT: Colors should be lower case
ire
2018/01/23 08:48:10
Done.
(We should add this to our stylelint)
| |
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 /* .outer-container | |
21 ******************************************************************************/ | |
22 | |
23 .outer-container | |
24 { | |
25 @media (min-width: $phablet-breakpoint) | |
26 { | |
27 display: table-cell; | |
28 vertical-align: middle; | |
29 } | |
30 } | |
31 | |
32 /* #page-header | |
33 ******************************************************************************/ | |
34 | |
35 #page-header | |
36 { | |
37 margin-top: $medium-space; | |
38 margin-bottom: $small-space; | |
39 | |
40 @media (min-width: $phablet-breakpoint) | |
41 { | |
42 margin-top: 0; | |
43 margin-bottom: $medium-space; | |
44 } | |
45 } | |
46 | |
47 #page-header figure | |
48 { | |
49 display: inline-table; | |
50 font-size: 1.5em; | |
51 font-weight: 300; | |
52 | |
53 @media (min-width: $phablet-breakpoint) | |
54 { | |
55 font-size: 2em; | |
56 } | |
57 | |
58 img, | |
59 figcaption | |
60 { | |
61 display: table-cell; | |
62 vertical-align: middle; | |
63 } | |
64 | |
65 img | |
66 { | |
67 height: 1.5em; | |
68 | |
69 @media (min-width: $phablet-breakpoint) | |
70 { | |
71 height: 2em; | |
72 } | |
73 } | |
74 | |
75 figcaption | |
76 { | |
77 padding: 0 $x-small-space; | |
78 } | |
79 | |
80 strong { font-weight: 700; } | |
81 } | |
82 | |
83 #page-header h1 | |
84 { | |
85 margin: $small-space auto $x-small-space; | |
86 font-weight: 700; | |
87 } | |
88 | |
89 /* #sign-up, #page-footer | |
90 ******************************************************************************/ | |
91 | |
92 #sign-up, | |
93 #page-footer | |
94 { | |
95 width: 100%; | |
96 } | |
97 | |
98 #page-footer | |
99 { | |
100 margin-top: $small-space; | |
101 text-align: center; | |
102 | |
103 @media (min-width: $phablet-breakpoint) | |
104 { | |
105 text-align: left; | |
106 } | |
107 } | |
OLD | NEW |