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