mt-site
RSS
Replace hard-coded colors with variables.
darkmorford -
9ecc5ebca9fd
Not Reviewed
Show More
Add another comment
Collapse all files
TODOs: 0 unresolved 0 Resolved
COMMENTS: 0 General 0 Inline
Show file before | Show file after | Show commentsHide comments
@@ -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;
Show file before | Show file after | Show commentsHide comments
@@ -1,9 +1,17
1 $background: #4C565E;
2 $foreground: #757B81;
3 $infobox: #23272B;
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;
4 11
5 12 $text-normal: #B7BFC7;
6 13 $text-accent: #F6B33D;
14 $text-credits: #E4E4D6;
7 15
8 16 $link-normal: #FF6600;
9 17 $link-hover: #EB5252;
Show file before | Show file after | Show commentsHide comments
@@ -1,16 +1,27
1 @charset "utf-8";
2 @import "palette";
3
1 4 .content ol {
2 5 padding: 1ex 3em;
3 background-color: #757b81;
4 margin: 0px;
6 background-color: $foreground;
7 margin: 0;
5 8 }
6 9
7 10 .content ul {
8 11 list-style-type: none;
9 12 padding: 1ex 2em;
10 background-color: #757b81;
11 margin: 0px;
13 background-color: $foreground;
14 margin: 0;
15 }
16
17 .content a {
18 color: $text-accent;
12 19 }
13 20
14 .content a { color: #f6b33d; }
15 .content a:visited { color:#ececa3; }
16 .content a:hover { color:#eb5252; }
21 .content a:visited {
22 color: $link-visited;
23 }
24
25 .content a:hover {
26 color: $link-hover;
27 }
Show file before | Show file after | Show commentsHide comments
@@ -1,8 +1,11
1 @charset "utf-8";
2 @import "palette";
3
1 4 h2,
2 5 h3 a {
3 6 margin: 0px;
4 7 padding: 0px;
5 color: #f6b33d;
8 color: $text-accent;
6 9 }
7 10
8 11 .content .column { width:330px }
@@ -18,9 +21,9 h3 a {
18 21 #comic .nl {
19 22 padding-top: 5px;
20 23 padding-bottom: 5px;
21 background-color: black;
24 background-color: $nl-background;
22 25 margin: -5em auto 0px;
23 border-top: solid 5em #b7bfc7;
26 border-top: solid 5em $text-normal;
24 27 width: 700px;
25 28 text-align: center;
26 29 }
@@ -176,14 +179,14 h3 a {
176 179 }
177 180
178 181 /* Make the archive link stand out */
179 #comic #archivelink { background-color:#b7bfc7 }
180 #comic #archivelink a { color:black }
181 #comic #archivelink a:hover { color:#eb5252 }
182 #comic #archivelink { background-color: $text-normal; }
183 #comic #archivelink a { color: $nl-background; }
184 #comic #archivelink a:hover { color: $link-hover; }
182 185
183 186 /* Boxes between the comic and the rants */
184 187 #megagear { text-align:center }
185 188
186 #newsbox a { color:#f6b33d }
189 #newsbox a { color: $text-accent; }
187 190 #newsbox ul {
188 191 margin-left: 3ex;
189 192 padding-left: 0px;
@@ -203,13 +206,13 h3 a {
203 206
204 207 #status dd {
205 208 margin-left: 7em;
206 color: #f6b33d;
209 color: $text-accent;
207 210 }
208 211
209 212 #status dd div#percentbox {
210 213 padding: 1px;
211 214 width: 90%;
212 border: 1px solid #567;
215 border: 1px solid $percent-border;
213 216 margin: 0px;
214 217 }
215 218
@@ -218,7 +221,7 h3 a {
218 221 border-bottom:none;
219 222 margin:0;
220 223 padding:0;
221 background: url(../parts/twitter-seperator.png) 6px 0 #23272B;
224 background: url(../parts/twitter-seperator.png) 6px 0 $infobox;
222 225 }
223 226
224 227 /* Fix a bug caused by OpenAds injecting a <div> into the status area which
@@ -234,7 +237,7 h3 a {
234 237 .content div#status,
235 238 .content div#fred_twitter { border: none; background: none; }
236 239
237 #support { border-bottom: 5px solid black; }
240 #support { border-bottom: 5px solid $nl-background; }
238 241
239 242 #status ul, #fred_twitter ul { margin-top:0px }
240 243
@@ -287,7 +290,7 h3 a {
287 290 z-index: 1;
288 291 border: solid 5px black;
289 292 width: 400px;
290 background: #4c565e;
293 background: $background;
291 294 text-align: left;
292 295 }
293 296
@@ -295,7 +298,7 h3 a {
295 298 display: inline-block;
296 299 margin: 0px;
297 300 padding: 7.5px 4px;
298 color: #B7BFC7;
301 color: $text-normal;
299 302 }
300 303
301 304 #blogbits a.rightcol img,
@@ -353,7 +356,7 h3 a {
353 356 }
354 357
355 358 #newsbox .adinfo a, #support .adinfo a {
356 color: #f6b33d;
359 color: $text-accent;
357 360 font-size: 11px;
358 361 }
359 362
@@ -368,9 +371,9 h3 a {
368 371
369 372 #console h3 {
370 373 padding: 0.75ex;
371 background-color: #757b81;
374 background-color: $foreground;
372 375
373 font-family: monospace;
376 font-family: $banner-font;
374 377 font-size: xx-large;
375 378 text-align: center;
376 379 }
@@ -384,7 +387,7 h3 a {
384 387
385 388 #feed-list h4 {
386 389 margin: auto;
387 color: #F6B33D;
390 color: $text-accent;
388 391 text-align: center;
389 392 font-size: medium;
390 393 width: 400px;
@@ -395,14 +398,14 h3 a {
395 398 padding: 0.75ex 0px;
396 399 width: 330px;
397 400
398 background-color: #757b81;
399 color: #F6B33D;
401 background-color: $foreground;
402 color: $text-accent;
400 403
401 404 text-align: center;
402 405 font-size: medium;
403 406 }
404 407
405 #console h4 a {color:#f6b33d}
408 #console h4 a {color: $text-accent;}
406 409
407 410 #console .rantbody {
408 411 margin-top: 0px;
@@ -418,12 +421,12 h3 a {
418 421
419 422 #console .leftcol {
420 423 width: 350px;
421 color: #b7bfc7;
424 color: $text-normal;
422 425 }
423 426
424 427 #console .rightcol {
425 428 width: 350px;
426 color: #f6b33D;
429 color: $text-accent;
427 430 }
428 431
429 432 #console .rantimage {
@@ -466,7 +469,7 h3 a {
466 469 }
467 470
468 471 #console .nameplate {
469 background-color: #757B81;
472 background-color: $foreground;
470 473 width: 350px
471 474 }
472 475
@@ -483,7 +486,7 h3 a {
483 486
484 487 #console .oldrant {
485 488 margin-top: 1.5em;
486 border-top: medium solid #B7BFC7;
489 border-top: medium solid $text-normal;
487 490 padding-top: 1em;
488 491 width: 345px;
489 492 }
@@ -513,7 +516,7 h3 a {
513 516 height: 123px;
514 517 }
515 518
516 #console .oldrant .rantimage p,
519 #console .oldrant .rantimage p,
517 520 #console .oldrant .rantimage p img {
518 521 float: none;
519 522 width: 150px;
@@ -525,7 +528,7 h3 a {
525 528
526 529 #console .oldrant .nameplate {
527 530 margin-top: 43px;
528 background-color: #757B81;
531 background-color: $foreground;
529 532 width: 150px;
530 533 float: right;
531 534 }
@@ -554,7 +557,7 h3 a {
554 557
555 558 div#strip {
556 559 width:700px;
557 background-color: white;
560 background-color: $comic-background;
558 561 }
559 562
560 563 #strip-tl {
Show file before | Show file after | Show commentsHide comments
@@ -1,13 +1,16
1 @charset "utf-8";
2 @import "palette";
3
1 4 /* Set basic element styles */
2 img { border:none }
5 img { border: none; }
3 6
4 7 a {
5 8 text-decoration: none;
6 color: #f60;
9 color: $link-normal;
7 10 }
8 11
9 a:visited { color:#ececa3; }
10 a:hover { color:#eb5252; }
12 a:visited { color: $link-visited; }
13 a:hover { color: $link-hover; }
11 14
12 15 body {
13 16 position: relative; /* Make IE not hate positioned elements */
@@ -15,10 +18,10 body {
15 18 margin: auto;
16 19 padding: 14px;
17 20
18 background-color: #4c565e;
21 background-color: $background;
19 22
20 23 font-size: 0.8em;
21 font-family: Verdana, Arial, Helvetica, sans-serif;
24 font-family: $font-stack;
22 25 }
23 26
24 27 /* Set default widths for page boxes */
@@ -27,21 +30,21 body div {
27 30 margin: auto;
28 31 width: 700px;
29 32 }
30 body div div { width:auto }
33 body div div { width: auto; }
31 34
32 35 /* Make the headers look nice */
33 h1 { margin:0px }
36 h1 { margin: 0; }
34 37
35 38 h2 {
36 39 text-align: left;
37 color: #f6b33d;
40 color: $text-accent;
38 41 }
39 42
40 43 /* Create special elements and classes */
41 44 h2, .blackbar {
42 45 height: 18px; /* Take that, old gecko! */
43 margin: 0px;
44 padding: 0px 1ex;
46 margin: 0;
47 padding: 0 1ex;
45 48
46 49 overflow: hidden;
47 50 background-color: black;
@@ -58,16 +61,16 h2 span, .blackbar span {
58 61 height: 100%;
59 62 }
60 63
61 .clearer { clear:both }
62 br.clearer { line-height:0px }
63 .leftcol { float:left }
64 .rightcol { float:right }
64 .clearer { clear: both; }
65 br.clearer { line-height: 0; }
66 .leftcol { float: left }
67 .rightcol { float: right }
65 68
66 69 .nl {
67 margin: 0px;
68 padding: 0px;
70 margin: 0;
71 padding: 0;
69 72
70 background-color: black;
73 background-color: $nl-background;
71 74 text-align: center;
72 75
73 76 list-style-type: none;
@@ -77,18 +80,18 br.clearer { line-height:0px }
77 80 display: inline;
78 81 margin: 0px;
79 82 padding: 0em 0.5ex;
80 color: #B7BFC7;
83 color: $text-normal;
81 84 }
82 85
83 .nl a { color:#b7bfc7; text-decoration:none }
84 .nl a:link, .nl a:visited { color:#b7bfc7 }
85 .nl a:hover { color:#eb5252 }
86 .nl a { color: $text-normal; text-decoration: none; }
87 .nl a:link, .nl a:visited { color: $text-normal; }
88 .nl a:hover { color: $link-hover; }
86 89
87 90 .content {
88 91 margin-top: 1em;
89 92 margin-bottom: 1em;
90 background-color: black;
91 color: #b7bfc7;
93 background-color: $nl-background;
94 color: $text-normal;
92 95 }
93 96
94 97 .content div {
@@ -96,8 +99,8 br.clearer { line-height:0px }
96 99 overflow: hidden;
97 100 height: 100%;
98 101
99 border: solid 5px black;
100 background-color: #23272b;
102 border: solid 5px $nl-background;
103 background-color: $infobox;
101 104 padding: 5px;
102 105 }
103 106
@@ -141,19 +144,19 br.clearer { line-height:0px }
141 144 width: 468px;
142 145 margin-left: -246px;
143 146
144 background-image:url(parts/banner_bg.gif);
147 background-image: url(../parts/banner_bg.gif);
145 148 padding: 14px 12px;
146 149 }
147 150
148 151 /* Style the top banner */
149 152 #banner {
150 background-color: black;
153 background-color: $nl-background;
151 154 text-align: center;
152 155 }
153 156
154 157 #banner h2 {
155 color: #b7bfc7;
156 font-family: monospace;
158 color: $text-normal;
159 font-family: $banner-font;
157 160 }
158 161
159 162 #banner .nl {
@@ -163,8 +166,8 br.clearer { line-height:0px }
163 166
164 167 /* Style the footer */
165 168 #credits {
166 background-color: #757b81;
167 color: #e4e4d6;
169 background-color: $foreground;
170 color: $text-credits;
168 171 padding-bottom: 0.5ex;
169 172 margin-top: 1em;
170 173 }
@@ -173,10 +176,10 br.clearer { line-height:0px }
173 176 margin: 0px;
174 177 text-align: center;
175 178 padding: 0.5ex;
176 font-family: Arial, helvetica, sans-serif;
179 font-family: $credits-font;
177 180 font-size: x-small;
178 181 }
179 182
180 183 /* Overload header texts */
181 184 #banner .blackbar span { background: url(../parts/mt3-bar-comic.gif) no-repeat }
182 #credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat } No newline at end of file
185 #credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat }
Show file before | Show file after | Show commentsHide comments
@@ -1,3 +1,6
1 @charset "utf-8";
2 @import "palette";
3
1 4 .search {
2 5 margin: 10px;
3 6 }
@@ -7,20 +10,20
7 10 }
8 11
9 12 .results {
10 margin: 0px;
13 margin: 0;
11 14 padding: 1ex 2em;
12 background-color: #757b81;
15 background-color: $foreground;
13 16 }
14 17
15 .results, .results a { color: #f6b33d; }
16 .results a:visited { color:#ececa3; }
17 .results a:hover { color:#eb5252; }
18 .results, .results a { color: $text-accent; }
19 .results a:visited { color: $link-visited; }
20 .results a:hover { color: $link-hover; }
18 21
19 #syntax code { color:#f6b33d }
20 #syntax form { margin:0px }
22 #syntax code { color: $text-accent; }
23 #syntax form { margin: 0; }
21 24
22 25 dt {
23 font-size:larger;
26 font-size: larger;
24 27 }
25 28
26 29 ol {
@@ -28,4 +31,4 ol {
28 31 }
29 32
30 33 /* Overload header texts */
31 #syntax h2 span { background:url(parts/mt-blk_bar-search_syntax.png) no-repeat }
34 #syntax h2 span { background:url(../parts/mt-blk_bar-search_syntax.png) no-repeat }
Show file before | Show file after | Show commentsHide comments
@@ -1,1 +1,6
1 h3, h4, h5, h6 { color:#f6b33d }
1 @charset "utf-8";
2 @import "palette";
3
4 h3, h4, h5, h6 {
5 color: $text-accent;
6 }
Show file before | Show file after | Show commentsHide comments
@@ -1,19 +1,22
1 @charset "utf-8";
2 @import "palette";
3
1 4 #inner {
2 /* Satisfy internal floated elements */
5 // Satisfy internal floated elements
3 6 overflow: hidden;
4 height: 100%;
5 border: none;
6 margin: 0em 1em;
7 height: 100%;
8 border: none;
9 margin: 0 1em;
7 10 }
8 11
9 12 #inner img
10 13 {
11 display: block;
12 margin-left: auto;
13 margin-right: auto
14 display: block;
15 margin-left: auto;
16 margin-right: auto;
14 17 }
15 18
16 19 #inner h3
17 20 {
18 color:#F6B33D;
19 } No newline at end of file
21 color: $text-accent;
22 }
Comments 0
You need to be logged in to leave comments. Login now