Left: | ||
Right: |
OLD | NEW |
---|---|
(Empty) | |
1 @font-face | |
2 { | |
3 font-family: "Source Sans Pro"; | |
4 font-style: normal; | |
5 font-weight: 400; | |
6 font-stretch: normal; | |
7 src: local ("Ø"), | |
8 url(fonts/SourceSansPro-Regular.woff) format("woff"); | |
9 } | |
10 | |
11 @font-face | |
juliandoucette
2017/10/30 15:30:10
NIT: I'm guessing my comment about us using 600 se
martin
2017/11/03 10:02:12
Changed to 600.
| |
12 { | |
13 font-family: "Source Sans Pro"; | |
14 font-style: bold; | |
15 font-weight: 700; | |
16 font-stretch: normal; | |
17 src: local ("Ø"), | |
18 url(fonts/SourceSansPro-bold.woff) format("woff"); | |
19 } | |
20 | |
21 html | |
22 { | |
23 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; | |
24 } | |
25 | |
26 body | |
27 { | |
28 margin: 0; | |
29 padding: 0; | |
30 } | |
31 | |
32 .full-width-container | |
33 { | |
34 width: 100%; | |
35 } | |
36 | |
37 .graphic-column | |
juliandoucette
2017/10/30 15:30:10
This class and the one below have enough in common
martin
2017/11/03 10:02:13
Refactored.
| |
38 { | |
39 height: 100vh; | |
40 width: 50%; | |
41 background: #8DC446; | |
42 display: flex; | |
43 align-items: center; | |
44 justify-content: center; | |
45 } | |
46 | |
47 .content-column | |
48 { | |
49 height: 100vh; | |
50 width: 50%; | |
51 background: #fff; | |
52 display: flex; | |
53 justify-content: center; | |
54 align-items: center; | |
55 } | |
56 | |
57 .content-column-entries | |
juliandoucette
2017/10/30 15:30:10
NIT: We generally use IDs for things that only occ
martin
2017/11/03 10:02:12
Changed to id="column-content"
| |
58 { | |
59 padding: 0 3em; | |
60 max-width: 760px; | |
61 } | |
62 | |
63 .content-column-entries a { | |
juliandoucette
2017/10/30 15:30:10
NIT: .content a would work fine here
| |
64 color: #C70D2C; | |
65 } | |
66 | |
67 .content-column-entries hgroup | |
68 { | |
69 margin: 0 0 2em 5em; | |
70 } | |
71 | |
72 .content-column h1 | |
73 { | |
74 margin: 0; | |
75 } | |
76 | |
77 .content-column h2 | |
78 { | |
79 margin: 0; | |
80 font-weight: normal; | |
81 opacity: .5; | |
82 } | |
83 | |
84 .custom-feature-entry | |
85 { | |
86 margin-top: 2em; | |
87 } | |
88 | |
89 .custom-feature-entry h2 { | |
90 margin: 0 0 0 3.4em; | |
91 } | |
92 | |
93 .update-graphic-container | |
94 { | |
95 width: 560px; | |
96 height: 460px; | |
97 background: url('/skin/updates-page/base-graphic.svg'); | |
98 position: relative; | |
99 display: flex; | |
100 align-items: center; | |
101 background-repeat: no-repeat; | |
102 background-size: cover; | |
103 } | |
104 | |
105 .update-graphic-container img | |
106 { | |
107 display: block; | |
108 width: 162px; | |
109 height: 162px; | |
110 } | |
111 | |
112 .update-graphic-content | |
113 { | |
114 position: absolute; | |
115 top: 65px; | |
116 left: 100px; | |
117 display: flex; | |
118 align-items: center; | |
119 } | |
120 | |
121 .version-details | |
122 { | |
123 margin: 0 0 0 1em; | |
124 } | |
125 | |
126 .version-details h2 | |
127 { | |
128 margin: 0; | |
129 } | |
130 | |
131 .version-details span | |
132 { | |
133 color: #bebebe; | |
134 } | |
135 | |
136 .feature-entry | |
137 { | |
138 display: flex; | |
139 align-items: center; | |
140 padding: 0 1em; | |
141 } | |
142 | |
143 .feature-entry img | |
144 { | |
145 width: 50px; | |
146 height: 50px; | |
147 display: block; | |
148 margin: 0 1em 0 0; | |
149 } | |
150 | |
151 .store-buttons | |
152 { | |
153 width: 100%; | |
154 hegiht: 58px; | |
155 margin-left: 5em; | |
156 } | |
157 | |
158 .store-button | |
159 { | |
160 display: block; | |
161 width: 180px; | |
162 height: 58px; | |
163 border-radius: 6px; | |
164 background: #000; | |
165 float: left; | |
166 margin-bottom: 1em; | |
167 } | |
168 | |
169 .store-button > img | |
170 { | |
171 height: 54px; | |
172 } | |
173 | |
174 .applestore-button | |
175 { | |
176 margin-right: 1em; | |
177 } | |
178 | |
179 [dir="rtl"] .appstore-button | |
180 { | |
181 margin-right: 0; | |
182 margin-left: 1em; | |
183 } | |
OLD | NEW |