1 |
schoenebeck |
2737 |
/* |
2 |
|
|
CrudeDoc CSS Style (for previewing an article on a local machine) |
3 |
|
|
Copyright (c) 2015 Christian Schoenebeck. All rights reserved. |
4 |
|
|
http://www.crudebyte.com |
5 |
|
|
*/ |
6 |
|
|
|
7 |
|
|
@import 'fontsbase.css'; |
8 |
|
|
@import 'jquery-ui.css'; |
9 |
|
|
|
10 |
|
|
html { |
11 |
|
|
font-family:CRDSans; |
12 |
|
|
font-weight:200; |
13 |
|
|
font-size:17px; |
14 |
|
|
line-height:1.2; |
15 |
|
|
} |
16 |
|
|
|
17 |
|
|
|
18 |
|
|
/* Article */ |
19 |
|
|
|
20 |
|
|
body { |
21 |
|
|
padding: 16px 70px 95px 70px; |
22 |
|
|
font-size:18px; |
23 |
|
|
font-weight:200; |
24 |
|
|
counter-reset:oli; |
25 |
|
|
counter-reset:codeline; |
26 |
|
|
background-color:white; |
27 |
|
|
border:none; |
28 |
|
|
} |
29 |
|
|
|
30 |
|
|
|
31 |
|
|
body h1 { |
32 |
|
|
clear:both; |
33 |
|
|
border-bottom-style:solid; |
34 |
|
|
border-bottom-width:1px; |
35 |
|
|
border-bottom-color:#898989; |
36 |
|
|
text-align:center; |
37 |
|
|
font-family:CRDHigh; |
38 |
|
|
font-size:32px; |
39 |
|
|
font-weight:700; |
40 |
|
|
color:#a19f9f; |
41 |
|
|
padding-top:45px; |
42 |
|
|
padding-bottom:28px; |
43 |
|
|
margin-top:0; |
44 |
|
|
margin-bottom:40px; |
45 |
|
|
} |
46 |
|
|
|
47 |
|
|
body h2 { |
48 |
|
|
clear:both; |
49 |
|
|
border-bottom-style:solid; |
50 |
|
|
border-bottom-width:1px; |
51 |
|
|
border-bottom-color:#898989; |
52 |
|
|
font-family:CRDHigh; |
53 |
|
|
font-size:26px; |
54 |
|
|
font-weight:400; |
55 |
|
|
padding-top:35px; |
56 |
|
|
padding-bottom:16px; |
57 |
|
|
margin-top:0; |
58 |
|
|
margin-bottom:28px; |
59 |
|
|
} |
60 |
|
|
|
61 |
|
|
body h3 { |
62 |
|
|
clear:both; |
63 |
|
|
padding-top:20px; |
64 |
|
|
padding-bottom:0px; |
65 |
|
|
margin-top:0; |
66 |
|
|
margin-bottom:0; |
67 |
|
|
font-family:CRDHigh; |
68 |
|
|
color:#9a6938; |
69 |
|
|
font-size:24px; |
70 |
|
|
font-weight:300; |
71 |
|
|
} |
72 |
|
|
|
73 |
|
|
body a { |
74 |
|
|
font-weight:400; |
75 |
|
|
color:#1ba1dd; |
76 |
|
|
text-decoration:none; |
77 |
|
|
outline:none; |
78 |
|
|
border:none; |
79 |
|
|
} |
80 |
|
|
|
81 |
|
|
body a img { |
82 |
|
|
border:none; |
83 |
|
|
text-decoration:none; |
84 |
|
|
} |
85 |
|
|
|
86 |
|
|
body a:hover { |
87 |
|
|
text-decoration:underline; |
88 |
|
|
} |
89 |
|
|
|
90 |
|
|
body ul { |
91 |
|
|
font-weight:inherit; |
92 |
|
|
padding:0 0 0 60px; |
93 |
|
|
margin:0 0 21px 0; |
94 |
|
|
} |
95 |
|
|
|
96 |
|
|
body ul li { |
97 |
|
|
list-style-type:disc; |
98 |
|
|
padding:4px 0 0 14px; |
99 |
|
|
margin:12px 0 0 0; |
100 |
|
|
} |
101 |
|
|
|
102 |
|
|
|
103 |
|
|
body ol { |
104 |
|
|
counter-reset:oli; |
105 |
|
|
font-weight:inherit; |
106 |
|
|
padding:0 0 0 29px; |
107 |
|
|
margin:0 0 21px 0; |
108 |
|
|
} |
109 |
|
|
|
110 |
|
|
body ol li:before { |
111 |
|
|
content:counters(oli,".") "."; |
112 |
|
|
counter-increment:oli; |
113 |
|
|
font-weight:600; |
114 |
|
|
margin:0 20px 0 0; |
115 |
|
|
} |
116 |
|
|
|
117 |
|
|
body ol li { |
118 |
|
|
list-style-type:none; |
119 |
|
|
padding:4px 0 0 14px; |
120 |
|
|
margin:12px 0 0 0; |
121 |
|
|
} |
122 |
|
|
|
123 |
|
|
|
124 |
|
|
|
125 |
|
|
body code, body .code { |
126 |
|
|
font-family:CRDCour; |
127 |
|
|
color:#404040; |
128 |
|
|
white-space:pre; |
129 |
|
|
} |
130 |
|
|
|
131 |
|
|
body code { |
132 |
|
|
display:inline-block; |
133 |
|
|
font-size:15px; |
134 |
|
|
margin:0 3px 0px 3px; |
135 |
|
|
padding:2px 6px 0px 6px; |
136 |
|
|
background-color:#fcf9f9; |
137 |
|
|
} |
138 |
|
|
|
139 |
|
|
body > code { |
140 |
|
|
display:block; |
141 |
|
|
font-size:15px; |
142 |
|
|
margin:0 37px 0 37px; |
143 |
|
|
padding:2px 6px 0px 6px; |
144 |
|
|
background-color:#fcf9f9; |
145 |
|
|
} |
146 |
|
|
|
147 |
|
|
body ul.code { |
148 |
|
|
list-style:outside none none; |
149 |
|
|
counter-reset:codeline; |
150 |
|
|
font-size:14px; |
151 |
|
|
font-weight:normal; |
152 |
|
|
line-height:1.1; |
153 |
|
|
margin:0 0 0 0; |
154 |
|
|
padding:8px 0px 8px 0px; |
155 |
|
|
} |
156 |
|
|
|
157 |
|
|
body .code li { |
158 |
|
|
display:block; |
159 |
|
|
list-style-type:none; |
160 |
|
|
white-space:pre-wrap; |
161 |
|
|
border-left:32px solid #f9f3f3; |
162 |
|
|
text-indent:-30px; |
163 |
|
|
background-color:#fcf9f9; |
164 |
|
|
margin:0 0 0 0; |
165 |
|
|
padding:0 0 0 0; |
166 |
|
|
} |
167 |
|
|
|
168 |
|
|
body .code li:first-child { |
169 |
|
|
padding-top:6px; |
170 |
|
|
} |
171 |
|
|
|
172 |
|
|
body .code li:last-child { |
173 |
|
|
padding-bottom:3px; |
174 |
|
|
} |
175 |
|
|
|
176 |
|
|
body .code li:before { |
177 |
|
|
display:inline-block; |
178 |
|
|
white-space:pre; |
179 |
|
|
content:counter(codeline,decimal) ". "; |
180 |
|
|
counter-increment:codeline; |
181 |
|
|
min-width:38px; |
182 |
|
|
text-align:right; |
183 |
|
|
color:#c9c9c9; |
184 |
|
|
} |
185 |
|
|
|
186 |
|
|
body .code .k, body code .k { /*keyword*/ |
187 |
|
|
font-weight:bold; |
188 |
|
|
color:black; |
189 |
|
|
} |
190 |
|
|
|
191 |
|
|
body .code .n, body code .n { /*number*/ |
192 |
|
|
color:#c4950c; |
193 |
|
|
} |
194 |
|
|
|
195 |
|
|
body .code .i, body code .i { /*identifier (function name)*/ |
196 |
|
|
/*color:#0c4fc4;*/ |
197 |
|
|
color:#1ba1dd; |
198 |
|
|
} |
199 |
|
|
|
200 |
|
|
body .code .a, body code .a { /*array variable*/ |
201 |
|
|
color:#790cc4; |
202 |
|
|
/*color:black;*/ |
203 |
|
|
} |
204 |
|
|
|
205 |
|
|
body .code .c, body code .c { /*characters*/ |
206 |
|
|
color:#c40c0c; |
207 |
|
|
} |
208 |
|
|
|
209 |
|
|
body .code .s, body code .s { /*string variable*/ |
210 |
|
|
/*color:#9a693c;*/ |
211 |
|
|
/*color:black;*/ |
212 |
|
|
color:#790cc4; |
213 |
|
|
} |
214 |
|
|
|
215 |
|
|
body .code .v, body code .v { /*integer variable*/ |
216 |
|
|
/*color:black;*/ |
217 |
|
|
color:#790cc4; |
218 |
|
|
} |
219 |
|
|
|
220 |
|
|
body .code .h, body code .h { /*event handler*/ |
221 |
|
|
font-weight:bold; |
222 |
|
|
color:#07c0cf; |
223 |
|
|
} |
224 |
|
|
|
225 |
|
|
body .code .q, body code .q { /*comment*/ |
226 |
|
|
color:#9c9c9c; |
227 |
|
|
font-style:italic; |
228 |
|
|
} |
229 |
|
|
|
230 |
|
|
body .code .p, body code .p { /*preprocessor statements*/ |
231 |
|
|
/*color:#87b1a8;*/ |
232 |
|
|
color:#2f8a33; |
233 |
|
|
/*font-style:italic;*/ |
234 |
|
|
font-weight:normal; |
235 |
|
|
} |
236 |
|
|
|
237 |
|
|
body .code .m, body code .m { /* metaphor (natural language text used as pseudo code) */ |
238 |
|
|
background-color:#ddf4fd; |
239 |
|
|
font-size:14px; |
240 |
|
|
color:black; |
241 |
|
|
font-weight:normal; |
242 |
|
|
border:solid 1px #73a3ab; |
243 |
|
|
-webkit-border-radius: 10px; |
244 |
|
|
-moz-border-radius: 10px; |
245 |
|
|
border-radius: 10px; |
246 |
|
|
margin:0 0 0 0; |
247 |
|
|
padding:2px 4px 0px 4px; |
248 |
|
|
} |
249 |
|
|
|
250 |
|
|
body table { |
251 |
|
|
margin:20px 37px 20px 37px; |
252 |
|
|
padding:0 0 0 0; |
253 |
|
|
/*background-color:red;*/ |
254 |
|
|
border:none; |
255 |
|
|
border-collapse:collapse; |
256 |
|
|
} |
257 |
|
|
|
258 |
|
|
body tr { |
259 |
|
|
padding:0 0 0 0; |
260 |
|
|
margin:0 0 0 0; |
261 |
|
|
} |
262 |
|
|
|
263 |
|
|
body th { |
264 |
|
|
background-color:#e8e2e2; |
265 |
|
|
padding:0px 8px 0px 8px; |
266 |
|
|
margin:0 0 0 0; |
267 |
|
|
border:3px solid white; |
268 |
|
|
font-size:16px; |
269 |
|
|
font-weight:600; |
270 |
|
|
} |
271 |
|
|
|
272 |
|
|
body td { |
273 |
|
|
background-color:#f9f7f7; |
274 |
|
|
padding:4px 8px 4px 8px; |
275 |
|
|
margin:0 0 0 0; |
276 |
|
|
border:3px solid white; |
277 |
|
|
font-size:16px; |
278 |
|
|
font-weight:300; |
279 |
|
|
line-height:1.2; |
280 |
|
|
} |
281 |
|
|
|
282 |
|
|
body table a { |
283 |
|
|
font-weight:400; |
284 |
|
|
} |
285 |
|
|
|
286 |
|
|
body note:before { |
287 |
|
|
white-space:pre-wrap; |
288 |
|
|
content:'NOTE: '; |
289 |
|
|
font-weight:500; |
290 |
|
|
} |
291 |
|
|
|
292 |
|
|
body note.important:before { |
293 |
|
|
white-space:pre-wrap; |
294 |
|
|
content:'IMPORTANT: '; |
295 |
|
|
font-weight:500; |
296 |
|
|
} |
297 |
|
|
|
298 |
|
|
body note { |
299 |
|
|
display:table; /*HACK: "block" would stretch the entire page width */ |
300 |
|
|
background-color:#ede8e8; |
301 |
|
|
border-top:none; |
302 |
|
|
border-right:none; |
303 |
|
|
border-bottom:none; |
304 |
|
|
border-left:solid 10px #898989; |
305 |
|
|
margin: 24px auto 27px 43px; |
306 |
|
|
padding: 15px 18px 15px 18px; |
307 |
|
|
max-width: -webkit-calc(100% - 145px); |
308 |
|
|
max-width: -moz-calc(100% - 145px); |
309 |
|
|
max-width: -o-calc(100% - 145px); |
310 |
|
|
max-width: calc(100% - 145px); |
311 |
|
|
} |
312 |
|
|
|
313 |
|
|
body note.important { |
314 |
|
|
border-left:solid 10px #ff4141; |
315 |
|
|
} |
316 |
|
|
|
317 |
|
|
body > img, example > img { |
318 |
|
|
display:block; |
319 |
|
|
clear:both; |
320 |
|
|
max-width:100%; |
321 |
|
|
margin-left:auto; |
322 |
|
|
margin-right:auto; |
323 |
|
|
/*border:solid 1px #8e8e8e;*/ |
324 |
|
|
padding-top:25px; |
325 |
|
|
border:none; |
326 |
|
|
} |
327 |
|
|
|
328 |
|
|
body p img { |
329 |
|
|
display:inline-block; |
330 |
|
|
float:left; |
331 |
|
|
margin:4px 20px 0px 0px; |
332 |
|
|
padding:0 0 0 0; |
333 |
|
|
/*border:solid 1px #8e8e8e;*/ |
334 |
|
|
border:none; |
335 |
|
|
max-width:99%; |
336 |
|
|
} |
337 |
|
|
|
338 |
|
|
body div.imgcptn { |
339 |
|
|
display:block; |
340 |
|
|
width:100%; |
341 |
|
|
text-align:center; |
342 |
|
|
font-weight:200; |
343 |
|
|
color:#999999; |
344 |
|
|
font-size:16px; |
345 |
|
|
font-style:italic; |
346 |
|
|
margin: 8px 0 16px 0; |
347 |
|
|
} |
348 |
|
|
|
349 |
|
|
body example:before { |
350 |
|
|
display:block; |
351 |
|
|
position:relative; top:-5px; left:-32px; |
352 |
|
|
content:'Example'; |
353 |
|
|
font-weight:500; |
354 |
|
|
color:white; |
355 |
|
|
border:none; |
356 |
|
|
margin:0; |
357 |
|
|
padding:0; |
358 |
|
|
width:100px; |
359 |
|
|
background-color:#dedede; |
360 |
|
|
/* -moz-transform: rotate(30deg); |
361 |
|
|
-ms-transform: rotate(30deg); |
362 |
|
|
-o-transform: rotate(30deg); |
363 |
|
|
-webkit-transform: rotate(30deg); |
364 |
|
|
transform: rotate(90deg); |
365 |
|
|
transform-origin: 0% 50%;*/ |
366 |
|
|
text-align:center; |
367 |
|
|
} |
368 |
|
|
|
369 |
|
|
body example { |
370 |
|
|
display:inline-block; |
371 |
|
|
|
372 |
|
|
width: -webkit-calc(100% - 80px); |
373 |
|
|
width: -moz-calc(100% - 80px); |
374 |
|
|
width: -o-calc(100% - 80px); |
375 |
|
|
width: calc(100% - 80px); |
376 |
|
|
|
377 |
|
|
border-top:solid 1px #e5e5e5; |
378 |
|
|
border-right:solid 18px #dedede; |
379 |
|
|
border-bottom:solid 1px #e5e5e5; |
380 |
|
|
border-left:solid 18px #dedede; |
381 |
|
|
margin:0px, 20px, 0px, 20px; |
382 |
|
|
padding:5px 15px 8px 24px; |
383 |
|
|
} |
384 |
schoenebeck |
2738 |
|
385 |
|
|
body dir { |
386 |
|
|
display:block; |
387 |
|
|
list-style-type:none; |
388 |
|
|
background-image:url('../pix/folder.png'); |
389 |
|
|
background-repeat:no-repeat; |
390 |
|
|
background-position:2px top; |
391 |
|
|
padding:0px; |
392 |
|
|
margin:0px; |
393 |
|
|
font-family:CRDCour; |
394 |
schoenebeck |
2740 |
font-size:15px; |
395 |
schoenebeck |
2738 |
color:#000000; |
396 |
|
|
} |
397 |
|
|
|
398 |
|
|
body > dir { |
399 |
|
|
padding-left:66px; |
400 |
|
|
background-position:36px top; |
401 |
|
|
} |
402 |
|
|
|
403 |
|
|
body dir > * { |
404 |
|
|
padding-top:2px; |
405 |
|
|
padding-bottom:2px; |
406 |
|
|
padding-left:31px; |
407 |
|
|
} |
408 |
|
|
|
409 |
|
|
body dir file { |
410 |
|
|
display:block; |
411 |
|
|
list-style-type:none; |
412 |
|
|
background-image:url('../pix/file.png'); |
413 |
|
|
background-repeat:no-repeat; |
414 |
|
|
background-position:2px top; |
415 |
|
|
font-family:CRDCour; |
416 |
schoenebeck |
2740 |
font-size:15px; |
417 |
schoenebeck |
2738 |
color:#6f6f6f; |
418 |
|
|
} |