Not Reviewed
Show More
Add another comment
| @@ -0,0 +1,5 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | ||
|
|
3 | $font-stack: Verdana, Arial, Helvetica, sans-serif; | |
|
|
4 | $banner-font: monospace; | |
|
|
5 | $credits-font: Arial, Helvetica, sans-serif; | |
| @@ -0,0 +1,18 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | ||
|
|
3 | $background: #4C565E; | |
|
|
4 | $foreground: #757B81; | |
|
|
5 | $infobox: #23272B; | |
|
|
6 | ||
|
|
7 | $nl-background: #000000; | |
|
|
8 | $comic-background: #FFFFFF; | |
|
|
9 | ||
|
|
10 | $percent-border: #556677; | |
|
|
11 | ||
|
|
12 | $text-normal: #B7BFC7; | |
|
|
13 | $text-accent: #F6B33D; | |
|
|
14 | $text-credits: #E4E4D6; | |
|
|
15 | ||
|
|
16 | $link-normal: #FF6600; | |
|
|
17 | $link-hover: #EB5252; | |
|
|
18 | $link-visited: #ECECA3; | |
| @@ -0,0 +1,30 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | @import "palette"; | |
|
|
3 | ||
|
|
4 | .content { | |
|
|
5 | ol, ul { | |
|
|
6 | background-color: $foreground; | |
|
|
7 | margin: 0; | |
|
|
8 | } | |
|
|
9 | ||
|
|
10 | ol { | |
|
|
11 | padding: 1ex 3em; | |
|
|
12 | } | |
|
|
13 | ||
|
|
14 | ul { | |
|
|
15 | list-style-type: none; | |
|
|
16 | padding: 1ex 2em; | |
|
|
17 | } | |
|
|
18 | ||
|
|
19 | a { | |
|
|
20 | color: $text-accent; | |
|
|
21 | ||
|
|
22 | &:visited { | |
|
|
23 | color: $link-visited; | |
|
|
24 | } | |
|
|
25 | ||
|
|
26 | &:hover { | |
|
|
27 | color: $link-hover; | |
|
|
28 | } | |
|
|
29 | } | |
|
|
30 | } | |
| This diff has been collapsed as it changes many lines, (692 lines changed) Show them Hide them | |||
| @@ -0,0 +1,692 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | @import "fonts"; | |
|
|
3 | @import "palette"; | |
|
|
4 | ||
|
|
5 | h2, h3 a { | |
|
|
6 | margin: 0; | |
|
|
7 | padding: 0; | |
|
|
8 | color: $text-accent; | |
|
|
9 | } | |
|
|
10 | ||
|
|
11 | /* Dress up the comic */ | |
|
|
12 | #comic { | |
|
|
13 | /* Give IE hasLayout to fix a neg margin bug */ | |
|
|
14 | height: 1%; | |
|
|
15 | margin-top: 0; | |
|
|
16 | width: auto; | |
|
|
17 | ||
|
|
18 | .nl { | |
|
|
19 | padding-top: 5px; | |
|
|
20 | padding-bottom: 5px; | |
|
|
21 | background-color: $nl-background; | |
|
|
22 | margin: -5em auto 0; | |
|
|
23 | border-top: solid 5em $text-normal; | |
|
|
24 | width: 700px; | |
|
|
25 | text-align: center; | |
|
|
26 | } | |
|
|
27 | ||
|
|
28 | .navpanel { | |
|
|
29 | position: relative; | |
|
|
30 | margin: auto; | |
|
|
31 | ||
|
|
32 | .navcontrols { | |
|
|
33 | position: absolute; | |
|
|
34 | z-index: 1; | |
|
|
35 | ||
|
|
36 | ul { | |
|
|
37 | width: 124px; | |
|
|
38 | height: 33px; | |
|
|
39 | margin: 0; | |
|
|
40 | padding: 0; | |
|
|
41 | clear: both; | |
|
|
42 | ||
|
|
43 | li { | |
|
|
44 | display: block; | |
|
|
45 | float: left; | |
|
|
46 | ||
|
|
47 | a, span { | |
|
|
48 | display: block; | |
|
|
49 | padding-top: 33px; | |
|
|
50 | width: 62px; | |
|
|
51 | height: 0; | |
|
|
52 | overflow: hidden; | |
|
|
53 | } | |
|
|
54 | } | |
|
|
55 | } | |
|
|
56 | } | |
|
|
57 | ||
|
|
58 | .search-filter { | |
|
|
59 | margin-bottom: 15px; | |
|
|
60 | } | |
|
|
61 | ||
|
|
62 | #q { | |
|
|
63 | width: 350px; | |
|
|
64 | } | |
|
|
65 | ||
|
|
66 | #go, #iego { | |
|
|
67 | vertical-align: middle; | |
|
|
68 | padding-bottom: 2px; | |
|
|
69 | } | |
|
|
70 | } | |
|
|
71 | ||
|
|
72 | div.navpanel { | |
|
|
73 | /* Make IE draw panel above glow border */ | |
|
|
74 | position: relative; | |
|
|
75 | z-index: 1; | |
|
|
76 | height: 33px; | |
|
|
77 | padding: 0; | |
|
|
78 | width: 650px; | |
|
|
79 | ||
|
|
80 | .navcontrols { | |
|
|
81 | right: 25px; | |
|
|
82 | } | |
|
|
83 | ||
|
|
84 | #title { | |
|
|
85 | padding: 1ex; | |
|
|
86 | } | |
|
|
87 | } | |
|
|
88 | ||
|
|
89 | form.navpanel { | |
|
|
90 | margin-top: -28px; | |
|
|
91 | padding: 0; | |
|
|
92 | width: 625px; | |
|
|
93 | ||
|
|
94 | .navcontrols { | |
|
|
95 | right: 0; | |
|
|
96 | } | |
|
|
97 | } | |
|
|
98 | ||
|
|
99 | /* Need to gank the button out of the document flow somehow */ | |
|
|
100 | .search-field { | |
|
|
101 | position: relative; | |
|
|
102 | ||
|
|
103 | a { | |
|
|
104 | position: absolute; | |
|
|
105 | } | |
|
|
106 | } | |
|
|
107 | ||
|
|
108 | .search-filter { | |
|
|
109 | padding: 0 25px; | |
|
|
110 | margin-bottom: 15px; | |
|
|
111 | } | |
|
|
112 | } | |
|
|
113 | ||
|
|
114 | ||
|
|
115 | /* Top Nav */ | |
|
|
116 | #comic .navpanel .navcontrols.top { | |
|
|
117 | li.prev { | |
|
|
118 | background: url(../parts/nav2-top-prev.png) no-repeat; | |
|
|
119 | } | |
|
|
120 | ||
|
|
121 | li.next { | |
|
|
122 | background: url(../parts/nav2-top-next.png) no-repeat; | |
|
|
123 | } | |
|
|
124 | ||
|
|
125 | li.prevoff { | |
|
|
126 | background: url(../parts/nav2-top-prevoff.png) no-repeat; | |
|
|
127 | } | |
|
|
128 | ||
|
|
129 | li.nextoff { | |
|
|
130 | background: url(../parts/nav2-top-nextoff.png) no-repeat; | |
|
|
131 | } | |
|
|
132 | } | |
|
|
133 | ||
|
|
134 | /* Bottom Nav */ | |
|
|
135 | #comic .navpanel .navcontrols.bottom { | |
|
|
136 | li.prev { | |
|
|
137 | background: url(../parts/nav2-bottom-prev.png) no-repeat; | |
|
|
138 | } | |
|
|
139 | ||
|
|
140 | li.next { | |
|
|
141 | background: url(../parts/nav2-bottom-next.png) no-repeat; | |
|
|
142 | } | |
|
|
143 | ||
|
|
144 | li.prevoff { | |
|
|
145 | background: url(../parts/nav2-bottom-prevoff.png) no-repeat; | |
|
|
146 | } | |
|
|
147 | ||
|
|
148 | li.nextoff { | |
|
|
149 | background: url(../parts/nav2-bottom-nextoff.png) no-repeat; | |
|
|
150 | } | |
|
|
151 | } | |
|
|
152 | ||
|
|
153 | /* Form Nav only for disable */ | |
|
|
154 | #comic .navpanel .navcontrols { | |
|
|
155 | li.findprevoff { | |
|
|
156 | background: url(../parts/nav2-prevfindoff.png) no-repeat; | |
|
|
157 | } | |
|
|
158 | ||
|
|
159 | li.findnextoff { | |
|
|
160 | background: url(../parts/nav2-nextfindoff.png) no-repeat; | |
|
|
161 | } | |
|
|
162 | ||
|
|
163 | ul#searchprevnext { | |
|
|
164 | li { | |
|
|
165 | height: 33px; | |
|
|
166 | } | |
|
|
167 | } | |
|
|
168 | } | |
|
|
169 | ||
|
|
170 | #comic .transcript { | |
|
|
171 | list-style-type: none; | |
|
|
172 | padding: 66px 50px; | |
|
|
173 | margin: 0; | |
|
|
174 | ||
|
|
175 | .panelhead { | |
|
|
176 | font-size: larger; | |
|
|
177 | font-weight: bold; | |
|
|
178 | } | |
|
|
179 | ||
|
|
180 | dl { | |
|
|
181 | padding-left: 50px; | |
|
|
182 | } | |
|
|
183 | ||
|
|
184 | dt { | |
|
|
185 | float: left; | |
|
|
186 | padding-right: 1em; | |
|
|
187 | font-weight: bold; | |
|
|
188 | } | |
|
|
189 | ||
|
|
190 | dd { | |
|
|
191 | margin-left: 5.5em; | |
|
|
192 | padding-left: 0; | |
|
|
193 | padding-bottom: 0.5ex; | |
|
|
194 | } | |
|
|
195 | } | |
|
|
196 | ||
|
|
197 | /* Make the archive link stand out */ | |
|
|
198 | #comic #archivelink { | |
|
|
199 | background-color: $text-normal; | |
|
|
200 | ||
|
|
201 | a { | |
|
|
202 | color: $nl-background; | |
|
|
203 | ||
|
|
204 | &:hover { | |
|
|
205 | color: $link-hover; | |
|
|
206 | } | |
|
|
207 | } | |
|
|
208 | } | |
|
|
209 | ||
|
|
210 | /* Boxes between the comic and the rants */ | |
|
|
211 | #megagear { | |
|
|
212 | text-align: center; | |
|
|
213 | } | |
|
|
214 | ||
|
|
215 | #newsbox { | |
|
|
216 | overflow: visible; | |
|
|
217 | height: 60px; | |
|
|
218 | ||
|
|
219 | .leftcol { | |
|
|
220 | // left: 5px; | |
|
|
221 | } | |
|
|
222 | ||
|
|
223 | .rightcol { | |
|
|
224 | // right: 5px; | |
|
|
225 | } | |
|
|
226 | ||
|
|
227 | div { | |
|
|
228 | border: none; | |
|
|
229 | overflow: visible; | |
|
|
230 | } | |
|
|
231 | ||
|
|
232 | a { | |
|
|
233 | color: $text-accent; | |
|
|
234 | } | |
|
|
235 | ||
|
|
236 | ul { | |
|
|
237 | margin-left: 3ex; | |
|
|
238 | padding-left: 0; | |
|
|
239 | } | |
|
|
240 | ||
|
|
241 | h3 { | |
|
|
242 | text-align: center; | |
|
|
243 | } | |
|
|
244 | } | |
|
|
245 | ||
|
|
246 | #support { | |
|
|
247 | font-size: 80%; | |
|
|
248 | border-bottom: 5px solid $nl-background; | |
|
|
249 | ||
|
|
250 | div.thewrap { | |
|
|
251 | div { | |
|
|
252 | // Fix a bug caused by OpenAds injecting a <div> into the status area which | |
|
|
253 | // partially obscures the 'support' heading | |
|
|
254 | background-color: transparent; | |
|
|
255 | } | |
|
|
256 | } | |
|
|
257 | } | |
|
|
258 | ||
|
|
259 | #newsbox div.thewrap, #support div.thewrap { | |
|
|
260 | border-bottom: none; | |
|
|
261 | margin: 0; | |
|
|
262 | padding: 0; | |
|
|
263 | background: url(../parts/twitter-seperator.png) 6px 0 $infobox; | |
|
|
264 | } | |
|
|
265 | ||
|
|
266 | #status { | |
|
|
267 | dl { | |
|
|
268 | margin: 1em; | |
|
|
269 | } | |
|
|
270 | ||
|
|
271 | dt { | |
|
|
272 | float: left; | |
|
|
273 | } | |
|
|
274 | ||
|
|
275 | dd { | |
|
|
276 | margin-left: 7em; | |
|
|
277 | color: $text-accent; | |
|
|
278 | ||
|
|
279 | div#percentbox { | |
|
|
280 | padding: 1px; | |
|
|
281 | width: 90%; | |
|
|
282 | border: 1px solid $percent-border; | |
|
|
283 | margin: 0; | |
|
|
284 | } | |
|
|
285 | } | |
|
|
286 | } | |
|
|
287 | ||
|
|
288 | .content .column { | |
|
|
289 | width: 330px; | |
|
|
290 | } | |
|
|
291 | ||
|
|
292 | .content div.column.leftcol, .content div.column.rightcol { | |
|
|
293 | border: none; | |
|
|
294 | } | |
|
|
295 | ||
|
|
296 | .content div#status, .content div#fred_twitter { | |
|
|
297 | border: none; | |
|
|
298 | background: none; | |
|
|
299 | } | |
|
|
300 | ||
|
|
301 | #status ul, #fred_twitter ul { | |
|
|
302 | margin-top: 0; | |
|
|
303 | } | |
|
|
304 | ||
|
|
305 | #status li, #fred_twitter li { | |
|
|
306 | padding-top: 4px; | |
|
|
307 | padding-right: 1em; | |
|
|
308 | } | |
|
|
309 | ||
|
|
310 | #blogbits { | |
|
|
311 | padding: 0; | |
|
|
312 | width: 370px; | |
|
|
313 | ||
|
|
314 | ul { | |
|
|
315 | margin: 0; | |
|
|
316 | padding: 0; | |
|
|
317 | text-align: center; | |
|
|
318 | list-style-type: none; | |
|
|
319 | } | |
|
|
320 | ||
|
|
321 | ul#blogbitslist { | |
|
|
322 | margin-left: 250px; | |
|
|
323 | } | |
|
|
324 | ||
|
|
325 | ul#feed-list { | |
|
|
326 | margin: auto; | |
|
|
327 | ||
|
|
328 | li { | |
|
|
329 | display: inline-block; | |
|
|
330 | margin: 0; | |
|
|
331 | padding: 7.5px 4px; | |
|
|
332 | color: $text-normal; | |
|
|
333 | } | |
|
|
334 | } | |
|
|
335 | ||
|
|
336 | #feed-list { | |
|
|
337 | ul { | |
|
|
338 | display: none; | |
|
|
339 | position: absolute; | |
|
|
340 | z-index: 1; | |
|
|
341 | border: solid 5px $nl-background; | |
|
|
342 | width: 400px; | |
|
|
343 | background: $background; | |
|
|
344 | text-align: left; | |
|
|
345 | } | |
|
|
346 | } | |
|
|
347 | ||
|
|
348 | a.rightcol, a.leftcol { | |
|
|
349 | img { | |
|
|
350 | width: 180px; | |
|
|
351 | } | |
|
|
352 | } | |
|
|
353 | ||
|
|
354 | a.rightcol { | |
|
|
355 | img { | |
|
|
356 | padding-left: 5px; | |
|
|
357 | } | |
|
|
358 | } | |
|
|
359 | ||
|
|
360 | a.leftcol { | |
|
|
361 | img { | |
|
|
362 | padding-right: 5px; | |
|
|
363 | } | |
|
|
364 | } | |
|
|
365 | } | |
|
|
366 | ||
|
|
367 | #feed-list h4 { | |
|
|
368 | margin: auto; | |
|
|
369 | color: $text-accent; | |
|
|
370 | text-align: center; | |
|
|
371 | font-size: medium; | |
|
|
372 | width: 400px; | |
|
|
373 | } | |
|
|
374 | ||
|
|
375 | #facebook { | |
|
|
376 | border: none; | |
|
|
377 | padding: 0; | |
|
|
378 | ||
|
|
379 | img { | |
|
|
380 | width: 300px; | |
|
|
381 | height: 60px; | |
|
|
382 | } | |
|
|
383 | } | |
|
|
384 | ||
|
|
385 | #support { | |
|
|
386 | position: relative; | |
|
|
387 | } | |
|
|
388 | ||
|
|
389 | #support .thewrap .column .glowwrap, | |
|
|
390 | #support .thewrap .column .glowwrap a { | |
|
|
391 | display: block; | |
|
|
392 | width: 100%; | |
|
|
393 | } | |
|
|
394 | ||
|
|
395 | #support .thewrap .column .glowwrap img, | |
|
|
396 | #support .thewrap .column .glowwrap embed { | |
|
|
397 | display: block; | |
|
|
398 | margin: auto; | |
|
|
399 | } | |
|
|
400 | ||
|
|
401 | #support .glowwrap div { | |
|
|
402 | border: none; | |
|
|
403 | } | |
|
|
404 | ||
|
|
405 | #newsbox .adinfo, #support .adinfo { | |
|
|
406 | position: absolute; | |
|
|
407 | top: 2px; | |
|
|
408 | right: 10px; | |
|
|
409 | height: 16px; | |
|
|
410 | ||
|
|
411 | margin: 0; | |
|
|
412 | border: 0; | |
|
|
413 | padding: 0; | |
|
|
414 | ||
|
|
415 | background-color: transparent; | |
|
|
416 | ||
|
|
417 | a { | |
|
|
418 | color: $text-accent; | |
|
|
419 | font-size: 11px; | |
|
|
420 | } | |
|
|
421 | ||
|
|
422 | p { | |
|
|
423 | margin: 0 10px 0 0; | |
|
|
424 | } | |
|
|
425 | } | |
|
|
426 | ||
|
|
427 | /* Rant Columns */ | |
|
|
428 | #console { | |
|
|
429 | overflow: hidden; | |
|
|
430 | ||
|
|
431 | h3 { | |
|
|
432 | padding: 0.75ex; | |
|
|
433 | background-color: $foreground; | |
|
|
434 | ||
|
|
435 | font-family: $banner-font; | |
|
|
436 | font-size: xx-large; | |
|
|
437 | text-align: center; | |
|
|
438 | } | |
|
|
439 | ||
|
|
440 | h4 { | |
|
|
441 | margin: auto; | |
|
|
442 | padding: 0.75ex 0; | |
|
|
443 | width: 330px; | |
|
|
444 | ||
|
|
445 | background-color: $foreground; | |
|
|
446 | color: $text-accent; | |
|
|
447 | ||
|
|
448 | text-align: center; | |
|
|
449 | font-size: medium; | |
|
|
450 | ||
|
|
451 | a { | |
|
|
452 | color: $text-accent; | |
|
|
453 | } | |
|
|
454 | } | |
|
|
455 | ||
|
|
456 | .date, .rantbody { | |
|
|
457 | margin: 5px; | |
|
|
458 | padding: 5px; | |
|
|
459 | width: 330px; | |
|
|
460 | } | |
|
|
461 | ||
|
|
462 | .rantbody { | |
|
|
463 | margin-top: 0; | |
|
|
464 | padding-top: 0; | |
|
|
465 | ||
|
|
466 | pre { | |
|
|
467 | /* force <pre> to not break our boxes */ | |
|
|
468 | white-space: pre-wrap; | |
|
|
469 | white-space: -moz-pre-wrap; | |
|
|
470 | word-wrap: break-word; | |
|
|
471 | } | |
|
|
472 | } | |
|
|
473 | ||
|
|
474 | .leftcol, .rightcol { | |
|
|
475 | width: 350px; | |
|
|
476 | } | |
|
|
477 | ||
|
|
478 | .leftcol { | |
|
|
479 | color: $text-normal; | |
|
|
480 | } | |
|
|
481 | ||
|
|
482 | .rightcol { | |
|
|
483 | color: $text-accent; | |
|
|
484 | } | |
|
|
485 | ||
|
|
486 | .rantimage { | |
|
|
487 | background: url(../parts/mt-glow-mainrant-vert.png) repeat-y; | |
|
|
488 | width: 350px; | |
|
|
489 | height: 285px; | |
|
|
490 | ||
|
|
491 | p, p img { | |
|
|
492 | float: none; | |
|
|
493 | width: 300px; | |
|
|
494 | height: 245px; | |
|
|
495 | text-align: left; | |
|
|
496 | padding: 0; | |
|
|
497 | margin: 0; | |
|
|
498 | } | |
|
|
499 | } | |
|
|
500 | ||
|
|
501 | .ri-top, .ri-bottom { | |
|
|
502 | width: 350px; | |
|
|
503 | } | |
|
|
504 | ||
|
|
505 | .ri-top { | |
|
|
506 | background: url(../parts/mt-glow-mainrant-top.png) top no-repeat; | |
|
|
507 | height: 245px; | |
|
|
508 | } | |
|
|
509 | ||
|
|
510 | .ri-bottom { | |
|
|
511 | background: url(../parts/mt-glow-mainrant-bottom.png) bottom no-repeat; | |
|
|
512 | } | |
|
|
513 | ||
|
|
514 | .ri-matte { | |
|
|
515 | padding: 20px 0 20px 0; | |
|
|
516 | margin: 0 25px; | |
|
|
517 | width: 300px; | |
|
|
518 | height: 245px; | |
|
|
519 | } | |
|
|
520 | ||
|
|
521 | .rantnav { | |
|
|
522 | margin: 2em 0; | |
|
|
523 | text-align: center; | |
|
|
524 | } | |
|
|
525 | ||
|
|
526 | .nameplate { | |
|
|
527 | background-color: $foreground; | |
|
|
528 | width: 350px; | |
|
|
529 | ||
|
|
530 | span { | |
|
|
531 | display: block; | |
|
|
532 | height: 48px; | |
|
|
533 | background-repeat: no-repeat; | |
|
|
534 | background-position: top center; | |
|
|
535 | } | |
|
|
536 | ||
|
|
537 | h3 { | |
|
|
538 | display: none; | |
|
|
539 | } | |
|
|
540 | } | |
|
|
541 | ||
|
|
542 | .oldrant { | |
|
|
543 | margin-top: 1.5em; | |
|
|
544 | border-top: medium solid $text-normal; | |
|
|
545 | padding-top: 1em; | |
|
|
546 | width: 345px; | |
|
|
547 | ||
|
|
548 | .rantimage { | |
|
|
549 | float: left; | |
|
|
550 | background: url(../parts/mt-glow-oldrant-vert.png) repeat-y; | |
|
|
551 | width: 176px; | |
|
|
552 | height: 141px; | |
|
|
553 | ||
|
|
554 | p, p img { | |
|
|
555 | float: none; | |
|
|
556 | width: 150px; | |
|
|
557 | height: 123px; | |
|
|
558 | text-align: left; | |
|
|
559 | padding: 0; | |
|
|
560 | margin: 0; | |
|
|
561 | } | |
|
|
562 | } | |
|
|
563 | ||
|
|
564 | .ri-top, .ri-bottom { | |
|
|
565 | width: 178px; | |
|
|
566 | } | |
|
|
567 | ||
|
|
568 | .ri-top { | |
|
|
569 | background: url(../parts/mt-glow-oldrant-top.png) top no-repeat; | |
|
|
570 | height: 123px; | |
|
|
571 | } | |
|
|
572 | ||
|
|
573 | .ri-bottom { | |
|
|
574 | background: url(../parts/mt-glow-oldrant-bottom.png) bottom no-repeat; | |
|
|
575 | } | |
|
|
576 | ||
|
|
577 | .ri-matte { | |
|
|
578 | padding: 9px 0 9px 0; | |
|
|
579 | margin: 0 13px; | |
|
|
580 | width: 150px; | |
|
|
581 | height: 123px; | |
|
|
582 | } | |
|
|
583 | ||
|
|
584 | .nameplate { | |
|
|
585 | margin-top: 43px; | |
|
|
586 | background-color: $foreground; | |
|
|
587 | width: 150px; | |
|
|
588 | float: right; | |
|
|
589 | } | |
|
|
590 | ||
|
|
591 | h4 { | |
|
|
592 | float: right; | |
|
|
593 | margin:5px 0 5px 5px; | |
|
|
594 | } | |
|
|
595 | } | |
|
|
596 | } | |
|
|
597 | ||
|
|
598 | /* Shaded borders around images */ | |
|
|
599 | #strip, #strip span { | |
|
|
600 | /* Everyone treat <span> like <div> */ | |
|
|
601 | display: block; | |
|
|
602 | ||
|
|
603 | /* Shrinkwrap blocks for IE */ | |
|
|
604 | display: inline-block; | |
|
|
605 | } | |
|
|
606 | ||
|
|
607 | /* hasLayout */ | |
|
|
608 | * html #strip, * html #strip span { | |
|
|
609 | height: 1%; | |
|
|
610 | } | |
|
|
611 | ||
|
|
612 | #strip { | |
|
|
613 | /* Shrinkwrap blocks for everyone else */ | |
|
|
614 | display: table; | |
|
|
615 | position: relative; | |
|
|
616 | margin: -33px auto 0px; | |
|
|
617 | min-width: 650px; | |
|
|
618 | ||
|
|
619 | img { | |
|
|
620 | margin: 33px 25px; | |
|
|
621 | } | |
|
|
622 | ||
|
|
623 | iframe { | |
|
|
624 | border: none; | |
|
|
625 | margin: 33px 25px; | |
|
|
626 | width: 1024px; | |
|
|
627 | height: 576px; | |
|
|
628 | } | |
|
|
629 | } | |
|
|
630 | ||
|
|
631 | div#strip { | |
|
|
632 | width: 700px; | |
|
|
633 | background-color: $comic-background; | |
|
|
634 | } | |
|
|
635 | ||
|
|
636 | #strip-tl { | |
|
|
637 | background: url(../parts/mt-corner-UL.png) no-repeat left top; | |
|
|
638 | } | |
|
|
639 | ||
|
|
640 | #strip-tr { | |
|
|
641 | background: url(../parts/mt-corner-UR.png) no-repeat right top; | |
|
|
642 | } | |
|
|
643 | ||
|
|
644 | #strip-t { | |
|
|
645 | background: url(../parts/mt-slice-vert-top.png) repeat-x top; | |
|
|
646 | } | |
|
|
647 | ||
|
|
648 | #strip-bl { | |
|
|
649 | background: url(../parts/mt-corner-LL.png) no-repeat left bottom; | |
|
|
650 | } | |
|
|
651 | ||
|
|
652 | #strip-br { | |
|
|
653 | background: url(../parts/mt-corner-LR.png) no-repeat right bottom; | |
|
|
654 | } | |
|
|
655 | ||
|
|
656 | #strip-b { | |
|
|
657 | background: url(../parts/mt-slice-vert-bottom.png) repeat-x bottom; | |
|
|
658 | } | |
|
|
659 | ||
|
|
660 | #strip-l { | |
|
|
661 | background: url(../parts/mt-shadow-vert-left.png) repeat-y left; | |
|
|
662 | } | |
|
|
663 | ||
|
|
664 | #strip-r { | |
|
|
665 | background: url(../parts/mt-shadow-vert-right.png) repeat-y right; | |
|
|
666 | } | |
|
|
667 | ||
|
|
668 | #strip-transcript { | |
|
|
669 | padding: 10px; | |
|
|
670 | } | |
|
|
671 | ||
|
|
672 | /* Center the comic */ | |
|
|
673 | #comic { | |
|
|
674 | text-align: center; | |
|
|
675 | ||
|
|
676 | * { | |
|
|
677 | text-align: left; | |
|
|
678 | } | |
|
|
679 | } | |
|
|
680 | ||
|
|
681 | /* Overload header texts */ | |
|
|
682 | #metabox h2 span { | |
|
|
683 | background: url(../parts/mt-blk_bar-metabox.png) no-repeat; | |
|
|
684 | } | |
|
|
685 | ||
|
|
686 | #support h2 span { | |
|
|
687 | background: url(../parts/mt-blk_bar-support.png) no-repeat; | |
|
|
688 | } | |
|
|
689 | ||
|
|
690 | #console h2 span { | |
|
|
691 | background: url(../parts/mt-blk_bar-console.png) no-repeat; | |
|
|
692 | } | |
| @@ -0,0 +1,224 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | @import "fonts"; | |
|
|
3 | @import "palette"; | |
|
|
4 | ||
|
|
5 | /* Set basic element styles */ | |
|
|
6 | img { | |
|
|
7 | border: none; | |
|
|
8 | } | |
|
|
9 | ||
|
|
10 | a { | |
|
|
11 | text-decoration: none; | |
|
|
12 | color: $link-normal; | |
|
|
13 | ||
|
|
14 | &:visited { | |
|
|
15 | color: $link-visited; | |
|
|
16 | } | |
|
|
17 | ||
|
|
18 | &:hover { | |
|
|
19 | color: $link-hover; | |
|
|
20 | } | |
|
|
21 | } | |
|
|
22 | ||
|
|
23 | body { | |
|
|
24 | /* Make IE not hate positioned elements */ | |
|
|
25 | position: relative; | |
|
|
26 | ||
|
|
27 | margin: auto; | |
|
|
28 | padding: 14px; | |
|
|
29 | ||
|
|
30 | background-color: $background; | |
|
|
31 | ||
|
|
32 | font-size: 0.8em; | |
|
|
33 | font-family: $font-stack; | |
|
|
34 | ||
|
|
35 | div { | |
|
|
36 | /* Set default widths for page boxes */ | |
|
|
37 | position: relative; | |
|
|
38 | margin: auto; | |
|
|
39 | width: 700px; | |
|
|
40 | ||
|
|
41 | div { | |
|
|
42 | width: auto; | |
|
|
43 | } | |
|
|
44 | } | |
|
|
45 | } | |
|
|
46 | ||
|
|
47 | /* Make the headers look nice */ | |
|
|
48 | h1 { | |
|
|
49 | margin: 0; | |
|
|
50 | } | |
|
|
51 | ||
|
|
52 | h2 { | |
|
|
53 | text-align: left; | |
|
|
54 | color: $text-accent; | |
|
|
55 | } | |
|
|
56 | ||
|
|
57 | /* Create special elements and classes */ | |
|
|
58 | h2, .blackbar { | |
|
|
59 | /* Take that, old gecko! */ | |
|
|
60 | height: 18px; | |
|
|
61 | margin: 0; | |
|
|
62 | padding: 0 1ex; | |
|
|
63 | ||
|
|
64 | overflow: hidden; | |
|
|
65 | background-color: $nl-background; | |
|
|
66 | ||
|
|
67 | font-size: 16px; | |
|
|
68 | font-weight: 100; | |
|
|
69 | font-family: $banner-font; | |
|
|
70 | letter-spacing: 0.5ex; | |
|
|
71 | ||
|
|
72 | span { | |
|
|
73 | display: block; | |
|
|
74 | width: 100%; | |
|
|
75 | height: 100%; | |
|
|
76 | } | |
|
|
77 | } | |
|
|
78 | ||
|
|
79 | .clearer { | |
|
|
80 | clear: both; | |
|
|
81 | } | |
|
|
82 | ||
|
|
83 | br.clearer { | |
|
|
84 | line-height: 0; | |
|
|
85 | } | |
|
|
86 | ||
|
|
87 | .leftcol { | |
|
|
88 | float: left; | |
|
|
89 | } | |
|
|
90 | ||
|
|
91 | .rightcol { | |
|
|
92 | float: right; | |
|
|
93 | } | |
|
|
94 | ||
|
|
95 | .nl { | |
|
|
96 | margin: 0; | |
|
|
97 | padding: 0; | |
|
|
98 | ||
|
|
99 | background-color: $nl-background; | |
|
|
100 | text-align: center; | |
|
|
101 | ||
|
|
102 | list-style-type: none; | |
|
|
103 | ||
|
|
104 | li { | |
|
|
105 | display: inline; | |
|
|
106 | margin: 0; | |
|
|
107 | padding: 0 0.5ex; | |
|
|
108 | color: $text-normal; | |
|
|
109 | } | |
|
|
110 | ||
|
|
111 | a { | |
|
|
112 | color: $text-normal; | |
|
|
113 | text-decoration: none; | |
|
|
114 | ||
|
|
115 | &:link, &:visited { | |
|
|
116 | color: $text-normal; | |
|
|
117 | } | |
|
|
118 | ||
|
|
119 | &:hover { | |
|
|
120 | color: $link-hover; | |
|
|
121 | } | |
|
|
122 | } | |
|
|
123 | } | |
|
|
124 | ||
|
|
125 | .content { | |
|
|
126 | margin-top: 1em; | |
|
|
127 | margin-bottom: 1em; | |
|
|
128 | background-color: $nl-background; | |
|
|
129 | color: $text-normal; | |
|
|
130 | ||
|
|
131 | div { | |
|
|
132 | /* Satisfy internal floated elements */ | |
|
|
133 | overflow: hidden; | |
|
|
134 | height: 100%; | |
|
|
135 | ||
|
|
136 | border: solid 5px $nl-background; | |
|
|
137 | background-color: $infobox; | |
|
|
138 | padding: 5px; | |
|
|
139 | } | |
|
|
140 | ||
|
|
141 | .clearer { | |
|
|
142 | border: none; | |
|
|
143 | padding: 0; | |
|
|
144 | } | |
|
|
145 | } | |
|
|
146 | ||
|
|
147 | /* Correct a word wrapping bug in the ad bar */ | |
|
|
148 | #adbar { | |
|
|
149 | position: relative; | |
|
|
150 | height: 90px; | |
|
|
151 | text-align: center; | |
|
|
152 | font-size: 1px; | |
|
|
153 | letter-spacing: 500px; | |
|
|
154 | ||
|
|
155 | #megagear-ad, #kickstarter-ad, #cologuys-ad { | |
|
|
156 | position: absolute; | |
|
|
157 | top: 14px; | |
|
|
158 | } | |
|
|
159 | ||
|
|
160 | #megagear-ad { | |
|
|
161 | left: 0; | |
|
|
162 | } | |
|
|
163 | ||
|
|
164 | #kickstarter-ad { | |
|
|
165 | left: 115px; | |
|
|
166 | } | |
|
|
167 | ||
|
|
168 | #cologuys-ad { | |
|
|
169 | right: 0; | |
|
|
170 | } | |
|
|
171 | ||
|
|
172 | .glowwrap { | |
|
|
173 | position: absolute; | |
|
|
174 | display: block; | |
|
|
175 | top: 0; | |
|
|
176 | left: 50%; | |
|
|
177 | width: 468px; | |
|
|
178 | margin-left: -246px; | |
|
|
179 | ||
|
|
180 | background-image: url(../parts/banner_bg.gif); | |
|
|
181 | padding: 14px 12px; | |
|
|
182 | } | |
|
|
183 | } | |
|
|
184 | ||
|
|
185 | /* Style the top banner */ | |
|
|
186 | #banner { | |
|
|
187 | background-color: $nl-background; | |
|
|
188 | text-align: center; | |
|
|
189 | ||
|
|
190 | h2 { | |
|
|
191 | color: $text-normal; | |
|
|
192 | font-family: $banner-font; | |
|
|
193 | } | |
|
|
194 | ||
|
|
195 | .nl { | |
|
|
196 | padding-bottom: 5px; | |
|
|
197 | padding-top: 5px; | |
|
|
198 | } | |
|
|
199 | } | |
|
|
200 | ||
|
|
201 | /* Style the footer */ | |
|
|
202 | #credits { | |
|
|
203 | background-color: $foreground; | |
|
|
204 | color: $text-credits; | |
|
|
205 | padding-bottom: 0.5ex; | |
|
|
206 | margin-top: 1em; | |
|
|
207 | ||
|
|
208 | p { | |
|
|
209 | margin: 0; | |
|
|
210 | text-align: center; | |
|
|
211 | padding: 0.5ex; | |
|
|
212 | font-family: $credits-font; | |
|
|
213 | font-size: x-small; | |
|
|
214 | } | |
|
|
215 | } | |
|
|
216 | ||
|
|
217 | /* Overload header texts */ | |
|
|
218 | #banner .blackbar span { | |
|
|
219 | background: url(../parts/mt3-bar-comic.gif) no-repeat | |
|
|
220 | } | |
|
|
221 | ||
|
|
222 | #credits h2 span { | |
|
|
223 | background: url(../parts/mt-blk_bar-credits.png) no-repeat | |
|
|
224 | } | |
| @@ -0,0 +1,47 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | @import "palette"; | |
|
|
3 | ||
|
|
4 | .search { | |
|
|
5 | margin: 10px; | |
|
|
6 | ||
|
|
7 | #q { | |
|
|
8 | width: 45%; | |
|
|
9 | } | |
|
|
10 | } | |
|
|
11 | ||
|
|
12 | .results { | |
|
|
13 | margin: 0; | |
|
|
14 | padding: 1ex 2em; | |
|
|
15 | background-color: $foreground; | |
|
|
16 | color: $text-accent; | |
|
|
17 | a { | |
|
|
18 | color: $text-accent; | |
|
|
19 | ||
|
|
20 | &:visited { | |
|
|
21 | color: $link-visited; | |
|
|
22 | } | |
|
|
23 | ||
|
|
24 | &:hover { | |
|
|
25 | color: $link-hover; | |
|
|
26 | } | |
|
|
27 | } | |
|
|
28 | } | |
|
|
29 | ||
|
|
30 | #syntax { | |
|
|
31 | code { color: $text-accent; } | |
|
|
32 | form { margin: 0; } | |
|
|
33 | h2 { | |
|
|
34 | span { | |
|
|
35 | // Overload header texts | |
|
|
36 | background: url(../parts/mt-blk_bar-search_syntax.png) no-repeat; | |
|
|
37 | } | |
|
|
38 | } | |
|
|
39 | } | |
|
|
40 | ||
|
|
41 | dt { | |
|
|
42 | font-size: larger; | |
|
|
43 | } | |
|
|
44 | ||
|
|
45 | ol { | |
|
|
46 | list-style-type: none; | |
|
|
47 | } | |
| @@ -0,0 +1,6 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | @import "palette"; | |
|
|
3 | ||
|
|
4 | h3, h4, h5, h6 { | |
|
|
5 | color: $text-accent; | |
|
|
6 | } | |
| @@ -0,0 +1,22 | |||
|
|
1 | @charset "utf-8"; | |
|
|
2 | @import "palette"; | |
|
|
3 | ||
|
|
4 | #inner { | |
|
|
5 | // Satisfy internal floated elements | |
|
|
6 | overflow: hidden; | |
|
|
7 | height: 100%; | |
|
|
8 | border: none; | |
|
|
9 | margin: 0 1em; | |
|
|
10 | ||
|
|
11 | img { | |
|
|
12 | display: block; | |
|
|
13 | margin: { | |
|
|
14 | left: auto; | |
|
|
15 | right: auto; | |
|
|
16 | } | |
|
|
17 | } | |
|
|
18 | ||
|
|
19 | h3 { | |
|
|
20 | color: $text-accent; | |
|
|
21 | } | |
|
|
22 | } | |
| @@ -3,6 +3,7 | |||
|
|
3 | 3 | |
|
|
4 | 4 | # Code files |
|
|
5 | 5 | *.php text |
|
|
6 | *.scss text | |
|
|
6 | 7 | *.css text |
|
|
7 | 8 | *.js text |
|
|
8 | 9 | *.html text |
| @@ -14,3 +14,8 extra | |||
|
|
14 | 14 | naishou |
|
|
15 | 15 | promotions |
|
|
16 | 16 | scr33n |
|
|
17 | ||
|
|
18 | # SASS conversion artifacts | |
|
|
19 | *.css | |
|
|
20 | *.css.map | |
|
|
21 | .sass-cache | |
| @@ -241,7 +241,6 function mtdie($errno, $errstr, $errfile, $errline, $errcontext) { | |||
|
|
241 | 241 | #logo { |
|
|
242 | 242 | margin-bottom: 2em; |
|
|
243 | 243 | } |
|
|
244 | --> | |
|
|
245 | 244 | </style> |
|
|
246 | 245 | </head> |
|
|
247 | 246 | <body> |
| @@ -298,8 +297,8 function pagehead($caller, $title = 'relax, we understand j00', $style='') | |||
|
|
298 | 297 | |
|
|
299 | 298 | <title>MegaTokyo - <?php echo $title ?></title> |
|
|
300 | 299 | <link type="image/x-icon" rel="shortcut icon" href="favicon.ico" /> |
|
|
301 | <link type="text/css" rel="stylesheet" href="main.css" /> | |
|
|
302 | <link type="text/css" rel="stylesheet" href="<?php echo $caller ?>.css" /> | |
|
|
300 | <link type="text/css" rel="stylesheet" href="styles/main.css" /> | |
|
|
301 | <link type="text/css" rel="stylesheet" href="styles/<?php echo $caller ?>.css" /> | |
|
|
303 | 302 | |
|
|
304 | 303 | <?php |
|
|
305 | 304 | if($style != '') |
|
|
1 | NO CONTENT: file renamed from characters.css to styles/characters.scss |
|
|
1 | NO CONTENT: file renamed from community.css to styles/community.scss |
|
|
1 | NO CONTENT: file renamed from faq.css to styles/faq.scss |
|
|
1 | NO CONTENT: file renamed from search-help.css to styles/search-help.scss |
|
|
1 | NO CONTENT: file renamed from story.css to styles/story.scss |
|
|
1 | NO CONTENT: file was removed |
|
|
1 | NO CONTENT: file was removed | |
| This diff has been collapsed as it changes many lines, (614 lines changed) Show them Hide them | |||
|
|
1 | NO CONTENT: file was removed |
|
|
1 | NO CONTENT: file was removed |
|
|
1 | NO CONTENT: file was removed |
|
|
1 | NO CONTENT: file was removed |
Comments 0
You need to be logged in to leave comments.
Login now