|
0
|
1 ////////
|
|
|
2 // variables for easy configuration
|
|
|
3 //
|
|
|
4 // (note: this is a less extendend css script, to learn more about less; see lesscss.org)
|
|
|
5
|
|
|
6 @color: black;
|
|
|
7 @color-step-hidden: silver;
|
|
|
8
|
|
1
|
9 @background-color-code: #ffffa9;
|
|
0
|
10
|
|
|
11 // -- gradient colors used for slides classified with cover | title
|
|
|
12
|
|
|
13 @background-gradient-color1-cover: white;
|
|
|
14 @background-gradient-color2-cover: white;
|
|
|
15
|
|
|
16 // -- gradient colors for all other slides
|
|
|
17
|
|
|
18 @background-gradient-color1: white;
|
|
|
19 @background-gradient-color2: white;
|
|
|
20
|
|
|
21 // --- font size
|
|
|
22
|
|
|
23 @font-size-h1: 190%; // 30pt / 40px (assuming 100% => 12pt / 16px)
|
|
|
24 @font-size-h2: 200%; // 28pt / 37px
|
|
|
25 @font-size-h3: 150%; // 24pt / 32px
|
|
1
|
26 @font-size-text: 130%; // 18pt / 24px
|
|
5
|
27 @font-size-list: 120%;
|
|
1
|
28 @font-size-code: 150%; // 16pt / 22px
|
|
|
29 @font-small-size: 100%;
|
|
0
|
30
|
|
|
31 /////////////////////////////
|
|
|
32
|
|
|
33 body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
|
|
|
34
|
|
|
35 a:link,
|
|
|
36 a:visited { color: @color; }
|
|
|
37
|
|
|
38
|
|
|
39 .slide {
|
|
|
40
|
|
|
41 color: @color;
|
|
|
42
|
|
|
43 h1 { font-size: @font-size-h1;
|
|
|
44 color: white;
|
|
|
45 text-align: center;
|
|
|
46
|
|
|
47 &.fullscreen { position: absolute;
|
|
|
48 top: 40%;
|
|
|
49 width: 100%; }
|
|
|
50
|
|
|
51 // lets you create slides with no heading (that is, heading gets hidden but included in toc)
|
|
|
52 &.hidden { display: none; }
|
|
|
53 }
|
|
|
54
|
|
1
|
55 h2 { font-size: @font-size-h2; background-color: #808db5; color:white; padding: 5px;}
|
|
0
|
56
|
|
|
57 h3 { font-size: @font-size-h3; }
|
|
|
58 name {
|
|
|
59 font-size: @font-size-h3;
|
|
|
60 background-color: #ffcc00;
|
|
|
61 &.fullscreen { position: absolute;
|
|
|
62 top: 40%;
|
|
|
63 width: 100%; }
|
|
|
64 }
|
|
|
65
|
|
|
66 .stepcurrent { color: @color; }
|
|
|
67 .step { color: @color-step-hidden; } // or hide next steps e.g. .step { visibility: hidden; }
|
|
|
68 }
|
|
|
69
|
|
|
70
|
|
|
71 ul { list-style-type: square; }
|
|
|
72
|
|
|
73
|
|
5
|
74 p { font-size: @font-size-text; }
|
|
|
75 li, dt, dd, td{ font-size: @font-size-list; }
|
|
2
|
76 th { font-size: @font-small-size; font-weight:normal; align:left}
|
|
0
|
77
|
|
|
78
|
|
1
|
79 pre {font-size: @font-size-code; }
|
|
0
|
80
|
|
|
81 .code {
|
|
|
82 background-color: @background-color-code;
|
|
|
83 padding: 5px;
|
|
1
|
84 }
|
|
|
85 code {
|
|
|
86 font-size: @font-size-code;
|
|
|
87 background-color: @background-color-code;
|
|
|
88 padding: 5px;
|
|
|
89 }
|
|
0
|
90 .footnote a:first-of-type { text-decoration: none; }
|
|
|
91
|
|
|
92 p.footnote { font-size: 88%; }
|
|
|
93
|
|
|
94 .help {
|
|
|
95 p, td { font-size: 88%; }
|
|
|
96 }
|
|
|
97
|
|
|
98 /********
|
|
|
99 * example gradient background using css3
|
|
|
100 */
|
|
|
101
|
|
|
102 .slide {
|
|
|
103 background-image: -webkit-linear-gradient(top, @background-gradient-color1,
|
|
|
104 @background-gradient-color2,
|
|
|
105 @background-gradient-color1,
|
|
|
106 @background-gradient-color2);
|
|
|
107
|
|
|
108 background-image: -moz-linear-gradient(top, @background-gradient-color1,
|
|
|
109 @background-gradient-color2,
|
|
|
110 @background-gradient-color1,
|
|
|
111 @background-gradient-color2);
|
|
|
112
|
|
|
113 &.cover, &.title {
|
|
|
114 background-image: -webkit-linear-gradient(top, @background-gradient-color1-cover,
|
|
|
115 @background-gradient-color2-cover,
|
|
|
116 @background-gradient-color1-cover,
|
|
|
117 @background-gradient-color2-cover);
|
|
|
118
|
|
|
119 background-image: -moz-linear-gradient(top, @background-gradient-color1-cover,
|
|
|
120 @background-gradient-color2-cover,
|
|
|
121 @background-gradient-color1-cover,
|
|
|
122 @background-gradient-color2-cover);
|
|
|
123
|
|
|
124 }
|
|
|
125 } |
