/[svn]/doc/tmpl/css/preview.css
ViewVC logotype

Annotation of /doc/tmpl/css/preview.css

Parent Directory Parent Directory | Revision Log Revision Log


Revision 2961 - (hide annotations) (download) (as text)
Sun Jul 17 14:13:50 2016 UTC (7 years, 9 months ago) by schoenebeck
File MIME type: text/css
File size: 8379 byte(s)
- Site layout: auto center the 1st paragraph after a h1 header.

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

  ViewVC Help
Powered by ViewVC