|
1 |
| -$visual-grid: true !global; |
2 |
| - |
3 |
| -// Grid Settings |
4 |
| -$column: 90px; |
5 |
| -$gutter: 30px; |
6 |
| -$grid-columns: 12; |
7 |
| -$max-width: 1200px; |
8 |
| - |
9 |
| -// Media |
10 |
| -$medium-screen: 600px; |
11 |
| -$large-screen: 900px; |
12 |
| - |
13 |
| -@import "../app/assets/stylesheets/neat"; |
14 |
| - |
15 |
| -$medium-screen-up: new-breakpoint(min-width $medium-screen 4); |
16 |
| -$large-screen-up: new-breakpoint(min-width $large-screen 8); |
17 |
| - |
18 |
| -// Base |
19 |
| -$base-line-height: 1.625; |
20 |
| -$base-spacing: $base-line-height * 1em; |
21 |
| - |
22 |
| -// Visual Grid |
23 |
| - |
24 |
| -$visual-grid-color: #e6f6ff; |
25 |
| -$visual-grid-opacity: 0.4; |
26 |
| - |
27 |
| -// Colors |
28 |
| -$white: #fafafa; |
29 |
| -$lightblue: #d5eefb; |
30 |
| -$blue: #aadbf5; |
31 |
| -$darkblue: #41a8df; |
32 |
| -$darkerblue: #072f44; |
33 |
| - |
34 |
| -// Base |
35 |
| -// ============================================ |
36 |
| - |
37 |
| -body { |
38 |
| - color: $darkerblue; |
39 |
| - font-family: sans-serif; |
40 |
| - line-height: $base-line-height; |
41 |
| - margin: 0 0 (1.5rem * 2); |
42 |
| - text-align: center; |
43 |
| -} |
44 |
| - |
45 |
| -h3 { |
46 |
| - margin: 1em; |
47 |
| -} |
48 |
| - |
49 |
| -a, |
50 |
| -a:visited { |
51 |
| - color: inherit; |
52 |
| -} |
53 |
| - |
54 |
| -pre { |
55 |
| - line-height: 1.6em; |
56 |
| -} |
57 |
| - |
58 |
| -code { |
59 |
| - display: block; |
60 |
| -} |
61 |
| - |
62 |
| -// Header |
63 |
| -// ============================================ |
64 |
| - |
65 |
| -.container { |
66 |
| - margin: 0 auto; |
67 |
| - max-width: 500px; |
68 |
| - padding: 0 $gutter; |
69 |
| - position: relative; |
70 |
| -} |
71 |
| - |
72 |
| -.welcome-message { |
73 |
| - @include clearfix(); |
74 |
| - background-color: $blue; |
75 |
| - margin-bottom: 1.5rem; |
76 |
| - padding: $base-spacing 0; |
77 |
| - text-align: center; |
78 |
| -} |
79 |
| - |
80 |
| -.welcome-message-title { |
81 |
| - font-weight: 200; |
82 |
| - line-height: 1; |
83 |
| -} |
84 |
| - |
85 |
| -// ============================================ |
86 |
| - |
87 |
| -.code { |
88 |
| - @include outer-container(); |
89 |
| - background-color: $lightblue; |
90 |
| - padding: 0.5em; |
91 |
| - text-align: center; |
92 |
| -} |
93 |
| - |
94 |
| -.page-section { |
95 |
| - @include outer-container; |
96 |
| - background-color: $lightblue; |
97 |
| - line-height: $base-line-height * 1.5; |
98 |
| - margin-bottom: 3em; |
99 |
| - text-align: center; |
100 |
| -} |
101 |
| - |
102 |
| -.page-section-inner { |
103 |
| - background-color: $blue; |
104 |
| - font-size: 0.8em; |
105 |
| - height: $base-line-height * 4rem; |
106 |
| - line-height: $base-line-height; |
107 |
| - margin-bottom: 2em; |
108 |
| - padding: 1em; |
109 |
| - text-align: left; |
110 |
| -} |
111 |
| - |
112 |
| -// Zero |
113 |
| -// ============================================ |
114 |
| - |
115 |
| -.zero-alpha, |
116 |
| -.zero-beta { |
117 |
| - @include span-columns(6); |
118 |
| - height: $base-line-height * 4rem; |
119 |
| - line-height: $base-line-height; |
120 |
| - padding: 1em; |
121 |
| - text-align: left; |
122 |
| -} |
123 |
| - |
124 |
| -// First |
125 |
| -// ============================================ |
126 |
| - |
127 |
| -.first-alpha { |
128 |
| - @include span-columns(1); |
129 |
| -} |
130 |
| - |
131 |
| -.first-beta { |
132 |
| - @include span-columns(11); |
133 |
| -} |
134 |
| - |
135 |
| -.first-gamma { |
136 |
| - @include span-columns(2); |
137 |
| -} |
138 |
| - |
139 |
| -.first-delta { |
140 |
| - @include span-columns(10); |
141 |
| -} |
142 |
| - |
143 |
| -.first-epsilon { |
144 |
| - @include span-columns(3); |
145 |
| -} |
146 |
| - |
147 |
| -.first-zeta { |
148 |
| - @include span-columns(9); |
149 |
| -} |
150 |
| - |
151 |
| -.first-eta { |
152 |
| - @include span-columns(4); |
153 |
| -} |
154 |
| - |
155 |
| -.first-theta { |
156 |
| - @include span-columns(8); |
157 |
| -} |
158 |
| - |
159 |
| -.first-iota { |
160 |
| - @include span-columns(5); |
161 |
| -} |
162 |
| - |
163 |
| -.first-kappa { |
164 |
| - @include span-columns(7); |
165 |
| -} |
166 |
| - |
167 |
| -.first-lambda { |
168 |
| - @include span-columns(6); |
169 |
| -} |
170 |
| - |
171 |
| -.first-mu { |
172 |
| - @include span-columns(6); |
173 |
| -} |
174 |
| - |
175 |
| -.first-beta, |
176 |
| -.first-delta, |
177 |
| -.first-zeta, |
178 |
| -.first-theta, |
179 |
| -.first-kappa, |
180 |
| -.first-mu { |
181 |
| - @include omega; |
182 |
| -} |
183 |
| - |
184 |
| -// Second |
185 |
| -// ============================================ |
186 |
| - |
187 |
| -.second-alpha { |
188 |
| - @include span-columns(4); |
189 |
| -} |
190 |
| - |
191 |
| -.second-beta { |
192 |
| - @include span-columns(8); |
193 |
| - line-height: $base-line-height * 2; |
194 |
| - padding: 0; |
195 |
| - text-align: center; |
196 |
| -} |
197 |
| - |
198 |
| -.second-beta-alpha, |
199 |
| -.second-beta-beta { |
200 |
| - @include span-columns(4 of 8); |
201 |
| - background-color: $lightblue; |
202 |
| - height: 84%; |
203 |
| - padding: 1em; |
204 |
| -} |
205 |
| - |
206 |
| -// Third |
207 |
| -// =================================== |
208 |
| - |
209 |
| -.third-dummy { |
210 |
| - border-bottom: 0; |
211 |
| - height: 5.5em; |
212 |
| - text-align: center; |
213 |
| -} |
214 |
| - |
215 |
| -.third-alpha { |
216 |
| - @include fill-parent(); |
217 |
| - @include row(table); |
218 |
| - margin-bottom: 0; |
219 |
| - padding: 0; |
220 |
| -} |
221 |
| - |
222 |
| -.third-alpha-alpha { |
223 |
| - @include span-columns(4); |
224 |
| - border-right: 1px solid rgba($white, 0.5); |
225 |
| -} |
226 |
| - |
227 |
| -.third-alpha-beta { |
228 |
| - @include reset-display; |
229 |
| - @include span-columns(8); |
230 |
| - height: 20em; |
231 |
| -} |
232 |
| - |
233 |
| -// Fourth |
234 |
| -// =================================== |
235 |
| - |
236 |
| -.fourth { |
237 |
| - |
238 |
| - .fourth-alpha { |
239 |
| - @include span-columns(6); |
240 |
| - @include shift(3); |
241 |
| - height: 20em; |
242 |
| - text-align: center; |
243 |
| - } |
244 |
| -} |
245 |
| - |
246 |
| -// Fifth |
247 |
| -// =================================== |
248 |
| - |
249 |
| -.fifth-box { |
250 |
| - @include omega(4n); |
251 |
| - @include span-columns(3); |
252 |
| - font-size: 0.78em; |
253 |
| - height: 8em; |
254 |
| - margin-top: 2em; |
255 |
| -} |
256 |
| - |
257 |
| -// Fifth |
258 |
| -// =================================== |
259 |
| - |
260 |
| -.sixth { |
261 |
| - @include media($medium-screen) { |
262 |
| - font-size: 0.9em; |
263 |
| - line-height: 1.5em; |
264 |
| - } |
265 |
| - |
266 |
| - pre { |
267 |
| - padding: 10px 0; |
268 |
| - } |
269 |
| -} |
270 |
| - |
271 |
| -.sixth-alpha, |
272 |
| -.sixth-beta { |
273 |
| - line-height: 2em; |
274 |
| - min-height: 20em; |
275 |
| - padding: 1em; |
276 |
| - text-align: left; |
277 |
| -} |
278 |
| - |
279 |
| -.sixth-alpha { |
280 |
| - @include span-columns(4); |
281 |
| - |
282 |
| - @include media($medium-screen) { |
283 |
| - @include span-columns(3); |
284 |
| - } |
285 |
| -} |
286 |
| - |
287 |
| -.sixth-beta { |
288 |
| - @include span-columns(8); |
289 |
| - |
290 |
| - @include media($medium-screen) { |
291 |
| - @include span-columns(3); |
292 |
| - } |
293 |
| -} |
| 1 | +@import "../core/neat"; |
0 commit comments