I always thought that CSS lacks in expressiveness which is far below the one of XPath. For example you can’t select elements based on their child elements. How nice would it be if you could format anker tags if and only if they contain a single image tag.
For this to work you would simply use the following XPath expression:
//a[count(img)=1]
Imagine you would have the following HTML file only the first anker tag would be selected.
<html> <head/> <body> <a href="/"><img src="home.png"/></a> <a href="/">Alternative Home link</a> <a href="/"> <img src="image1.png"/> <img src="image2.png"/> </a> </body> </html>
There are other features I miss. For example you can’t express nested rules. Suppose you wanted to style you navigation. What you would have to do is to always repeat the tag whose content you want to style:
nav { .. } nav ul { .. } nav li { .. } nav li a { .. }
Wouldn’t it be easier to write the following?
nav { .. ul { .. li { .. a { .. } } } }
And what about variables and calculations?
They also don’t existing.
But CSS preprocessors come to help!
They all have in common that they provide you with further expressions and even extend CSS’s expressiveness by giving you the possibility to work with variables and make calculations.
There is more than a dozen of CSS preprocessors in the web and I tried some of them. But the best is to my mind is {less} as it provides many of the features I always missed, has a broad browser support and can be processed on the browser as well as on the server side.
For the client approach all you have to do is to rename your style.css to style.less and include a javascript file. No you’re free to use the new {less} expressions which include:
- Variables
- Mixins
- Parametric Mixins
- Pattern-matching
- Nested Rules
- Operations
- Color functions
- Namespaces
- Scope
- Single Line Comments
- Importing
There is an especially easy way to use {less} in conjunction with WordPress. Simply install the WordPress plugin #BW-LESS-CSS and add all {less} stylesheet files in the administration section.
The only restriction you have to accept is that {less} does not even touch .css files. This means you have to move your style.css content to let’s say style.less and only leave the WordPress comments in the style.css.
My WordPress theme’s main stylesheet has a couple of duplicate expressions and made it to 1170 lines. I spent 2 hours on improving the old stylesheet which now has 1069 lines. So were not even 10% of line savings worth the time?
Yes. I had no idea of {less} and immediately saved some lines but the more important thing is that the code is already much better maintainable.
- The rules are now nested (see line 71).
- I can centrally change important values (see line 6).
- I could finally get rid of the browser specific statements à la -webkit- or -moz-(see line 16).
- I don’t have to update dependent values since I now use calculations (see line 898).
Consider using {less} or any other CSS preprocessor.
I didn’t regret it and extremely look forward for the next stylesheet I develop using a CSS preprocessor from the ground up.
style.css | style.less | ||
---|---|---|---|
1 | @import url(“../boilerplate/style.css”); | 1 | @import “../boilerplate/style.css”; |
2 | @import url(“css/fonts.css”); | 2 | @import “css/fonts.css”; |
3 | @import url(“css/anythingslider.custom.css”); | 3 | @import “css/anythingslider.custom.css”; |
4 | @import url(“css/colorbox.custom.css”); | 4 | @import “css/colorbox.custom.css”; |
5 | |||
6 | @blue: #4B83B3; | ||
7 | |||
8 | .border(@width: 2px, @style: solid, @color: @blue) { | ||
9 | border: @width @style @color; | ||
10 | } | ||
11 | |||
12 | .border(@color: @blue) { | ||
13 | border: 2px solid @color; | ||
14 | } | ||
15 | |||
16 | .border-radius (@radius: 5px) { | ||
17 | -webkit-border-radius: @radius; | ||
18 | -moz-border-radius: @radius; | ||
19 | border-radius: @radius; | ||
20 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; | ||
21 | } | ||
22 | |||
23 | .background-gradient (@start: @blue, @end: darken(@blue, 10%)) { | ||
24 | background-color: @start; | ||
25 | background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); | ||
26 | background-image: -webkit-linear-gradient(top, @start, @end); | ||
27 | background-image: -moz-linear-gradient(top, @start, @end); | ||
28 | background-image: -ms-linear-gradient(top, @start, @end); | ||
29 | background-image: -o-linear-gradient(top, @start, @end); | ||
30 | background-image: linear-gradient(top, @start, @end); | ||
31 | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’@start’, EndColorStr=’@end’); | ||
32 | } | ||
33 | |||
34 | .transition (@property, @duration, @easing) { | ||
35 | -webkit-transition: @property @duration @easing; | ||
36 | -moz-transition: @property @duration @easing; | ||
37 | -ms-transition: @property @duration @easing; | ||
38 | -o-transition: @property @duration @easing; | ||
39 | transition: @property @duration @easing; | ||
40 | } | ||
41 | |||
42 | .transform (@t) { | ||
43 | -webkit-transform: @t; | ||
44 | -moz-transform: @t; | ||
45 | -ms-transform: @t; | ||
46 | -o-transform: @t; | ||
47 | -transform: @t; | ||
48 | } | ||
49 | |||
50 | .box-shadow (@style, @x, @y, @width, @color) { | ||
51 | -webkit-box-shadow: @style @x @y @width @color; | ||
52 | -moz-box-shadow: @style @x @y @width @color; | ||
53 | box-shadow: @style @x @y @width @color; | ||
54 | } | ||
55 | |||
56 | .clearfix { | ||
57 | content: “.”; | ||
58 | display: block; | ||
59 | clear: left; | ||
60 | visibility: hidden; | ||
61 | line-height: 0; | ||
62 | height: 0; | ||
63 | } | ||
64 | |||
65 | |||
5 | 66 | ||
6 | .page-item-178 { /* impressum link */ | 67 | .page-item-178 { /* impressum link */ |
7 | display: none; | 68 | display: none; |
8 | } | 69 | } |
9 | 70 | ||
10 | body { | 71 | body { |
11 | font-family: Nunito, Arial, Helvetica, sans-serif; | 72 | font-family: Nunito, Arial, Helvetica, sans-serif; |
12 | font-weight: 300; | 73 | font-weight: 300; |
13 | font-size: 14px; | 74 | font-size: 14px; |
14 | line-height: 1.7em; | 75 | line-height: 1.7em; |
15 | background: url(images/stripe_25.png) top left repeat; | 76 | background: url(images/stripe_25.png) top left repeat; |
16 | } | 77 | |
17 | 78 | &.home:before { | |
18 | body.home:before { | 79 | content: “”; |
19 | content: “”; | 80 | display: block; |
20 | display: block; | 81 | width: 100%; |
21 | width: 100%; | 82 | height: 415px; |
22 | height: 415px; | 83 | background: url(images/header.png) center top no-repeat; |
23 | background: url(images/header.png) center top no-repeat; | 84 | } |
24 | } | 85 | |
25 | 86 | &.home div.headertext { | |
26 | div.headertext { | 87 | display: block; |
27 | font-size: 15px; | 88 | font-size: 15px; |
28 | text-shadow: 0px 1px 0px #e0f0fa; | 89 | text-shadow: 0px 1px 0px #e0f0fa; |
29 | margin: -135px auto 135px auto; | 90 | margin: -135px auto 135px auto; |
30 | width: 450px; | 91 | width: 450px; |
31 | display: none; | 92 | color: #333333; |
32 | } | 93 | |
33 | 94 | a { | |
34 | div.headertext, | 95 | color: #333333; |
35 | div.headertext a { | 96 | } |
36 | color: #333333; | 97 | |
37 | } | 98 | a:hover, |
38 | 99 | a:active { | |
39 | div.headertext a:hover, | 100 | color: #e0f0fa; |
40 | div.headertext a:active { | 101 | text-shadow: 0px 1px 0px #333333; |
41 | color: #e0f0fa; | 102 | } |
42 | text-shadow: 0px 1px 0px #333333; | 103 | |
43 | } | 104 | div { |
44 | 105 | position: relative; | |
45 | div.headertext div { | 106 | left: 51px; |
46 | position: relative; | 107 | } |
47 | left: 51px; | 108 | } |
48 | } | 109 | |
49 | 110 | &:not(.home) div.headertext { | |
50 | body.home div.headertext { | 111 | display: none; |
51 | display: block; | 112 | } |
52 | } | 113 | } |
114 | |||
115 | |||
53 | 116 | ||
54 | 117 | ||
55 | 118 | ||
56 | 119 | ||
57 | 120 | ||
58 | 121 | ||
59 | img[align=right] { | 122 | img[align=right] { |
60 | margin-left: 15px; | 123 | margin-left: 15px; |
61 | } | 124 | } |
62 | 125 | ||
63 | a, | 126 | a, |
64 | a * { | 127 | a * { |
65 | -webkit-transition: all 0.15s linear; | 128 | .transition(all, 0.15s, linear); |
66 | -moz-transition: all 0.15s linear; | ||
67 | -ms-transition: all 0.15s linear; | ||
68 | -o-transition: all 0.15s linear; | ||
69 | transition: all 0.15s linear; | ||
70 | |||
71 | -webkit-transition-property: background-color, background-position, color, opacity, width, height; | ||
72 | -moz-transition-property: background-color, background-position, color, opacity, width, height; | ||
73 | -ms-transition-property: background-color, background-position, color, opacity, width, height; | ||
74 | -o-transition-property: background-color, background-position, color, opacity, width, height; | ||
75 | transition-property: background-color, background-position, color, opacity, width, height; | ||
76 | } | 129 | } |
77 | 130 | ||
78 | h1, | 131 | h1, |
79 | h2 { | 132 | h2 { |
80 | font-size: 2em; | 133 | font-size: 2em; |
81 | font-weight: 300; | 134 | font-weight: 300; |
82 | line-height: 1.2em; | 135 | line-height: 1.2em; |
83 | } | 136 | } |
84 | 137 | ||
85 | section h1 { | 138 | section h1 { |
86 | margin-bottom: 1em; | 139 | margin-bottom: 1em; |
87 | } | 140 | } |
88 | 141 | ||
89 | * + h1, | 142 | * { |
90 | * + h2, | 143 | + h1, |
91 | * + h3 { | 144 | + h2, |
92 | margin-top: 1em; | 145 | + h3 { |
93 | } | 146 | margin-top: 1em; |
94 | 147 | } | |
95 | .isocube + h1, | 148 | } |
96 | .isocube + h2, | 149 | |
97 | .isocube + h3 { | 150 | .isocube { |
98 | margin-top: 0; | 151 | + h1, |
152 | + h2, | ||
153 | + h3 { | ||
154 | margin-top: 0; | ||
155 | } | ||
99 | } | 156 | } |
100 | 157 | ||
101 | section, | 158 | section, |
102 | footer { | 159 | footer { |
103 | text-shadow: 0px 1px 0px #fff; | 160 | text-shadow: 0px 1px 0px #fff; |
104 | } | 161 | } |
105 | 162 | ||
106 | section .isocube { | 163 | section .isocube { |
107 | text-shadow: none; | 164 | text-shadow: none; |
108 | } | 165 | } |
109 | 166 | ||
110 | section h1 a, | 167 | section h1 a, |
111 | section h1 a:visited, | 168 | section h1 a:visited, |
112 | section h1 a:hover, | 169 | section h1 a:hover, |
113 | section h1 a:active, | 170 | section h1 a:active, |
114 | section h2 a, | 171 | section h2 a, |
115 | section h2 a:visited, | 172 | section h2 a:visited, |
116 | section h2 a:hover, | 173 | section h2 a:hover, |
117 | section h2 a:active, | 174 | section h2 a:active, |
118 | footer[role=contentinfo] a, | 175 | footer[role=contentinfo] a, |
119 | footer[role=contentinfo] a:visited, | 176 | footer[role=contentinfo] a:visited, |
120 | footer[role=contentinfo] a:hover, | 177 | footer[role=contentinfo] a:hover, |
121 | footer[role=contentinfo] a:active { | 178 | footer[role=contentinfo] a:active { |
122 | text-decoration: none; | 179 | text-decoration: none; |
123 | color: #444; | 180 | color: #444; |
124 | } | 181 | } |
125 | 182 | ||
126 | section h1 a:hover:after, | 183 | section h1 a:hover:after, |
127 | section h1 a:active:after, | 184 | section h1 a:active:after, |
128 | section h2 a:hover:after, | 185 | section h2 a:hover:after, |
129 | section h2 a:active:after, | 186 | section h2 a:active:after, |
130 | footer[role=contentinfo] a:hover:after, | 187 | footer[role=contentinfo] a:hover:after, |
131 | footer[role=contentinfo] a:active:after { | 188 | footer[role=contentinfo] a:active:after { |
132 | content: ” →”; | 189 | content: ” →”; |
133 | } | 190 | } |
134 | 191 | ||
135 | h3 { | 192 | h3 { |
136 | font-size: 1.2em; | 193 | font-size: 1.2em; |
137 | font-weight: 300; | 194 | font-weight: 300; |
138 | margin: 1em 0 0.5em 0; | 195 | margin: 1em 0 0.5em 0; |
139 | } | 196 | } |
140 | 197 | ||
198 | // links | ||
141 | nav a, | 199 | nav a, |
142 | nav a:visited, | 200 | nav a:visited, |
143 | section p a, | 201 | section p a, |
144 | section p a:visited, | 202 | section p a:visited, |
145 | section li a, | 203 | section li a, |
146 | section li a:visited, | 204 | section li a:visited, |
147 | .entry-meta.isocube a, | 205 | .entry-meta.isocube a, |
148 | .entry-meta.isocube a:visited { | 206 | .entry-meta.isocube a:visited { |
149 | padding: 0px 5px; | 207 | padding: 0px 5px; |
150 | color:black; | 208 | color: #000; |
151 | text-decoration:none; | 209 | text-decoration: none; |
152 | border: 2px solid #4B83B3; | ||
153 | outline: none; | 210 | outline: none; |
154 | 211 | ||
155 | -webkit-border-radius: 5px; | 212 | .border; |
156 | -moz-border-radius: 5px; | 213 | .border-radius; |
157 | border-radius: 5px; | ||
158 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; | ||
159 | } | 214 | } |
160 | nav a:focus, | 215 | nav a:focus, |
161 | nav a:hover, | 216 | nav a:hover, |
162 | nav a:active, | 217 | nav a:active, |
163 | section p a:focus, | 218 | section p a:focus, |
164 | section p a:hover, | 219 | section p a:hover, |
165 | section p a:active, | 220 | section p a:active, |
166 | section li a:focus, | 221 | section li a:focus, |
167 | section li a:hover, | 222 | section li a:hover, |
168 | section li a:active, | 223 | section li a:active, |
169 | .entry-meta.isocube a:focus, | 224 | .entry-meta.isocube a:focus, |
170 | .entry-meta.isocube a:hover, | 225 | .entry-meta.isocube a:hover, |
171 | .entry-meta.isocube a:active { | 226 | .entry-meta.isocube a:active { |
172 | background: #4B83B3; | 227 | background: @blue; |
173 | text-shadow: none; | 228 | text-shadow: none; |
174 | color: #000; | 229 | color: #000; |
175 | } | 230 | } |
176 | nav a:active, | 231 | nav a:active, |
177 | section p a:active, | 232 | section p a:active, |
178 | section li a:active, | 233 | section li a:active, |
179 | .entry-meta.isocube a:active { | 234 | .entry-meta.isocube a:active { |
180 | -webkit-box-shadow: inset 0px 0px 8px #000; | 235 | .box-shadow(inset, 0px, 0px, 8px, #000); |
181 | -moz-box-shadow: inset 0px 0px 8px #000; | ||
182 | box-shadow: inset 0px 0px 8px #000; | ||
183 | } | 236 | } |
184 | 237 | ||
185 | a > img { | 238 | a > img { |
186 | -webkit-transition: all 0.15s ease-in; | 239 | .transition(all, 0.15s, ease-in); |
187 | -moz-transition: all 0.15s ease-in; | ||
188 | -ms-transition: all 0.15s ease-in; | ||
189 | -o-transition: all 0.15s ease-in; | ||
190 | transition: all 0.15s ease-in; | ||
191 | cursor: pointer !important; | 240 | cursor: pointer !important; |
192 | } | 241 | } |
193 | 242 | ||
194 | a:hover > img { | 243 | a:hover > img { |
195 | -webkit-transform: scale(1.05); | 244 | .transform(scale(1.05)); |
196 | -moz-transform: scale(1.05); | ||
197 | -ms-transform: scale(1.05); | ||
198 | -o-transform: scale(1.05); | ||
199 | -transform: scale(1.05); | ||
200 | } | 245 | } |
201 | 246 | ||
202 | a:active > img { | 247 | a:active > img { |
203 | -webkit-transform: scale(0.95); | 248 | .transform(scale(0.95)); |
204 | -moz-transform: scale(0.95); | ||
205 | -ms-transform: scale(0.95); | ||
206 | -o-transform: scale(0.95); | ||
207 | -transform: scale(0.95); | ||
208 | } | 249 | } |
209 | 250 | ||
210 | 251 | ||
211 | 252 | ||
212 | 253 | ||
213 | 254 | ||
214 | p { | 255 | p { |
215 | margin: 1em 0; | 256 | margin: 1em 0; |
216 | } | 257 | } |
217 | 258 | ||
218 | header[role=banner] p { | 259 | header[role=banner] p { |
219 | display: none; | 260 | display: none; |
220 | } | 261 | } |
221 | 262 | ||
222 | 263 | ||
223 | /* | 264 | /* |
224 | * XING / Facebook / RSS | 265 | * XING / Facebook / RSS |
225 | */ | 266 | */ |
226 | div.me { | 267 | div.me { |
227 | position: absolute; | 268 | position: absolute; |
228 | top: 10px; | 269 | top: 10px; |
229 | right: 10px; | 270 | right: 10px; |
230 | } | 271 | |
231 | 272 | ul { | |
232 | div.me ul { | 273 | list-style: none; |
233 | list-style: none; | 274 | |
234 | } | 275 | &:after { |
235 | 276 | content: “.”; | |
236 | div.me ul:after { | 277 | display: block; |
237 | content: “.”; | 278 | height: 0; |
238 | display: block; | 279 | clear: left; |
239 | height: 0; | 280 | visibility: hidden; |
240 | clear: left; | 281 | } |
241 | visibility: hidden; | 282 | |
242 | } | 283 | li { |
243 | 284 | float: left; | |
244 | div.me li { | 285 | margin-left: 10px; |
245 | float: left; | 286 | |
246 | margin-left: 10px; | 287 | a { |
247 | } | 288 | display: block; |
248 | 289 | width: 22px; | |
249 | div.me li a { | 290 | height: 22px; |
250 | display: block; | 291 | font-size: 0px; |
251 | width: 22px; | 292 | background-image: url(images/me.png); |
252 | height: 22px; | 293 | background-repeat: no-repeat; |
253 | font-size: 0px; | 294 | } |
254 | background-image: url(images/me.png); | 295 | |
255 | background-repeat: no-repeat; | 296 | &:nth-child(1) a { |
256 | } | 297 | background-position: -2px -5px; |
257 | 298 | ||
258 | div.me li:nth-child(1) a { | 299 | &:hover { |
259 | background-position: -2px -5px; | 300 | background-position: -2px -45px; |
260 | } | 301 | } |
261 | 302 | } | |
262 | div.me li:nth-child(2) a { | 303 | |
263 | background-position: -30px -5px; | 304 | &:nth-child(2) a { |
264 | } | 305 | background-position: -30px -5px; |
265 | 306 | ||
266 | div.me li:nth-child(3) a { | 307 | &:hover { |
267 | background-position: -58px -5px; | 308 | background-position: -30px -45px; |
268 | } | 309 | } |
269 | 310 | } | |
270 | div.me li:nth-child(1) a:hover { | 311 | |
271 | background-position: -2px -45px; | 312 | &:nth-child(3) a { |
272 | } | 313 | background-position: -58px -5px; |
273 | 314 | ||
274 | div.me li:nth-child(2) a:hover { | 315 | &:hover { |
275 | background-position: -30px -45px; | 316 | background-position: -58px -45px; |
276 | } | 317 | } |
277 | 318 | } | |
278 | div.me li:nth-child(3) a:hover { | 319 | } |
279 | background-position: -58px -45px; | 320 | } |
280 | } | 321 | } |
281 | 322 | ||
282 | 323 | .isocube { | |
283 | 324 | .face { | |
325 | font-size: 13px; | ||
326 | line-height: 1.3em; | ||
327 | |||
328 | &.left { | ||
329 | background-color:#CCC; | ||
330 | } | ||
331 | |||
332 | &.top { | ||
333 | background-color:#AAA; | ||
334 | } | ||
335 | |||
336 | &.right { | ||
337 | background-color:#999; | ||
338 | } | ||
339 | } | ||
340 | |||
341 | .shadow { | ||
342 | background: #EEE; | ||
343 | } | ||
344 | } | ||
345 | |||
284 | nav { | 346 | nav { |
285 | z-index: 10; | 347 | z-index: 10; |
286 | } | 348 | |
287 | 349 | li { | |
288 | .isocube { | 350 | display: inline-block; |
289 | } | 351 | width: 100%; |
290 | 352 | font-size: 0.9em; | |
291 | .isocube .face { | 353 | } |
292 | font-size: 13px; | 354 | |
293 | line-height: 1.3em; | 355 | a { |
294 | } | 356 | display: block; |
295 | 357 | padding: 4px; | |
296 | .isocube .face.left { | 358 | margin: 6px 6px 0 6px; |
297 | background-color:#CCC; | 359 | } |
298 | } | 360 | |
299 | 361 | &.isocube .page_item .children { // don’t show sub navs in the cube | |
300 | .isocube .face.top { | 362 | display: none; |
301 | background-color:#AAA; | 363 | } |
302 | } | 364 | |
303 | 365 | .current_page_ancestor a, | |
304 | .isocube .face.right { | 366 | .current_page_item a { |
305 | background-color:#999; | 367 | color: #000 !important; |
306 | } | 368 | background: #D8FF26 !important; |
307 | 369 | } | |
308 | .isocube .shadow { | 370 | |
309 | background: #EEE; | 371 | &#access { |
310 | } | 372 | margin: 25px 25px 25px 25px; |
311 | 373 | float: right; | |
312 | .isocube.secondary .face.left { | 374 | position: relative; |
313 | background-color:#D83FDD; | 375 | right: 0; |
314 | } | 376 | width: 449px; |
315 | 377 | height: 330px; | |
316 | .isocube.secondary .face.top { | 378 | z-index: 20; |
317 | background-color:#981B9C; | 379 | |
318 | } | 380 | #skip, |
319 | 381 | li:nth-child(1) { /* Home link */ | |
320 | .isocube.secondary .face.right { | 382 | display: none; |
321 | background-color:#430B45; | 383 | } |
322 | } | 384 | |
323 | 385 | &.isocube { | |
324 | .isocube.secondary .shadow { | 386 | .face { |
325 | background: #EEE; | 387 | line-height: 1.15em; |
326 | } | 388 | |
327 | 389 | &.left { | |
328 | 390 | background: #CCC; | |
329 | 391 | } | |
330 | nav li { | 392 | |
331 | display: inline-block; | 393 | &.right { |
332 | width: 100%; | 394 | background: #999 url(images/logo.cube.png) 16px -316px no-repeat; |
333 | font-size: 0.9em; | 395 | |
334 | } | 396 | // used to simulate alpha transparency for the logo |
335 | 397 | div { | |
336 | nav a { | 398 | background: #999 url(images/logo.cube.png) 16px -120px no-repeat; |
337 | display: block; | 399 | width: 100%; |
338 | padding: 4px; | 400 | height: 100%; |
339 | margin: 6px 6px 0 6px; | 401 | } |
340 | } | 402 | } |
341 | 403 | ||
342 | nav.isocube .page_item .children { /* don’t show sub navs in the cube */ | 404 | &.top { |
343 | display: none; | 405 | background: #aaa; |
344 | } | 406 | } |
345 | 407 | ||
346 | nav .current_page_ancestor a, | 408 | &.top div { |
347 | nav .current_page_item a { | 409 | width: 100%; |
348 | color: #000 !important; | 410 | height: 100%; |
349 | background: #D8FF26 !important; | 411 | background: url(images/logo.cube.png) 18px -120px no-repeat; |
350 | } | 412 | |
351 | 413 | .transition(all, 0.4s, ease); | |
352 | 414 | } | |
353 | 415 | } | |
354 | 416 | ||
355 | 417 | a:hover .face.top div, | |
356 | nav#access { | 418 | a:focus .face.top div { |
357 | margin: 25px 25px 25px 25px; | 419 | width: 100%; |
358 | float: right; | 420 | height: 100%; |
359 | position: relative; | 421 | background: url(images/logo.cube.png) 18px -5px no-repeat; |
360 | right: 0; | 422 | } |
361 | width: 449px; | 423 | |
362 | height: 330px; | 424 | header { |
363 | z-index: 20; | 425 | a { |
426 | padding: 0; | ||
427 | border: none; | ||
428 | } | ||
429 | |||
430 | h1 { | ||
431 | margin: -120px 0; | ||
432 | padding: 55px 0px 25px 14px; | ||
433 | line-height: 1.2em; | ||
434 | font-family: Arial, Helvetica, sans-serif; | ||
435 | font-size: 34px; | ||
436 | font-weight: 500; | ||
437 | border: none; | ||
438 | color: rgba(40, 40, 40, 0.0); | ||
439 | } | ||
440 | |||
441 | &:link.face { | ||
442 | .top, | ||
443 | .right, | ||
444 | .right div, | ||
445 | .top, | ||
446 | .right, | ||
447 | .right div {} | ||
448 | } | ||
449 | &:focus .face.top, | ||
450 | &:focus .face.right, | ||
451 | &:focus .face.right div, | ||
452 | &:hover .face.top, | ||
453 | &:hover .face.right, | ||
454 | &:hover .face.right div, | ||
455 | &:active .face.top, | ||
456 | &:active .face.right, | ||
457 | &:active .face.right div { | ||
458 | .box-shadow(inset, 0px, 0px, 38px, @blue); | ||
459 | } | ||
460 | |||
461 | &:active .face { | ||
462 | &.top, | ||
463 | &.right { | ||
464 | .box-shadow(inset, 0px, 0px, 8px, #000); | ||
465 | } | ||
466 | } | ||
467 | } | ||
468 | } | ||
469 | |||
470 | li a, | ||
471 | li a:visited, | ||
472 | li a:active, | ||
473 | .isocube.secondary li a, | ||
474 | .isocube.secondary li a:visited, | ||
475 | .isocube.secondary li a:active { | ||
476 | color: #fff; | ||
477 | border: none; | ||
478 | background-color: @blue; | ||
479 | .box-shadow(inset, 1px, 1px, 1px, #000); | ||
480 | } | ||
481 | |||
482 | li a:hover, | ||
483 | li a:active { | ||
484 | background-color: @blue; | ||
485 | .box-shadow(1px, 1px, 1px, #000); | ||
486 | } | ||
487 | |||
488 | li:nth-child(2) a, | ||
489 | li:nth-child(5) a, | ||
490 | li:nth-child(6) a { | ||
491 | margin: 6px 6px 0 6px; | ||
492 | } | ||
493 | |||
494 | li:nth-child(3), | ||
495 | li:nth-child(4) { | ||
496 | width: 50%; | ||
497 | } | ||
498 | |||
499 | li:nth-child(3) a, | ||
500 | li:nth-child(4) a { | ||
501 | margin: 6px 3px 0 6px; | ||
502 | } | ||
503 | |||
504 | li:nth-child(4) a { | ||
505 | margin-left: 3px; | ||
506 | margin-right: 6px; | ||
507 | } | ||
508 | } | ||
364 | } | 509 | } |
365 | 510 | ||
366 | .secondary_wrapper { | 511 | .secondary_wrapper { |
367 | display: none; | 512 | display: none; |
368 | margin: -180px 0 0 0; | 513 | } |
369 | float: right; | 514 | |
370 | clear: right; | ||
371 | overflow: hidden; | ||
372 | } | ||
373 | |||
374 | nav#access #skip, | ||
375 | nav#access li:nth-child(1) { /* Home link */ | ||
376 | display: none; | ||
377 | } | ||
378 | |||
379 | nav#access.isocube .face { | ||
380 | line-height: 1.15em; | ||
381 | } | ||
382 | |||
383 | nav#access.isocube .face.right { | ||
384 | background: #999 url(images/logo.cube.png) 16px -316px no-repeat; | ||
385 | } | ||
386 | |||
387 | /* used to simulate alpha transparency for the logo */ | ||
388 | nav#access.isocube .face.right div { | ||
389 | background: #999 url(images/logo.cube.png) 16px -120px no-repeat; | ||
390 | width: 100%; | ||
391 | height: 100%; | ||
392 | } | ||
393 | |||
394 | nav#access.isocube header a { | ||
395 | padding: 0; | ||
396 | border: none; | ||
397 | } | ||
398 | |||
399 | nav#access.isocube header h1 { | ||
400 | margin: -120px 0; | ||
401 | padding: 55px 0px 25px 14px; | ||
402 | line-height: 1.2em; | ||
403 | font-family: Arial, Helvetica, sans-serif; | ||
404 | font-size: 34px; | ||
405 | font-weight: 500; | ||
406 | border: none; | ||
407 | color: rgba(40, 40, 40, 0.0); | ||
408 | } | ||
409 | nav#access.isocube header a:link .face.top, | ||
410 | nav#access.isocube header a:link .face.right, | ||
411 | nav#access.isocube header a:link .face.right div, | ||
412 | nav#access.isocube header a:visited .face.top, | ||
413 | nav#access.isocube header a:visited .face.right, | ||
414 | nav#access.isocube header a:visited .face.right div {} | ||
415 | nav#access.isocube header a:focus .face.top, | ||
416 | nav#access.isocube header a:focus .face.right, | ||
417 | nav#access.isocube header a:focus .face.right div, | ||
418 | nav#access.isocube header a:hover .face.top, | ||
419 | nav#access.isocube header a:hover .face.right, | ||
420 | nav#access.isocube header a:hover .face.right div, | ||
421 | nav#access.isocube header a:active .face.top, | ||
422 | nav#access.isocube header a:active .face.right, | ||
423 | nav#access.isocube header a:active .face.right div { | ||
424 | /*background-color: #8d9ead;/* durch verschobenes Hintergrundbild wird “Blog” eingeblendet */ | ||
425 | -webkit-box-shadow: inset 0px 0px 38px #4B83B3; | ||
426 | -moz-box-shadow: inset 0px 0px 38px #4B83B3; | ||
427 | box-shadow: inset 0px 0px 38px #4B83B3; | ||
428 | } | ||
429 | |||
430 | nav#access.isocube header a:active .face.top, | ||
431 | nav#access.isocube header a:active .face.right { | ||
432 | -webkit-box-shadow: inset 0px 0px 8px #000; | ||
433 | -moz-box-shadow: inset 0px 0px 8px #000; | ||
434 | box-shadow: inset 0px 0px 8px #000; | ||
435 | } | ||
436 | |||
437 | nav#access.isocube .face.top { | ||
438 | background: #aaa; | ||
439 | } | ||
440 | |||
441 | nav#access.isocube .face.top div { | ||
442 | width: 100%; | ||
443 | height: 100%; | ||
444 | background: url(images/logo.cube.png) 18px -120px no-repeat; | ||
445 | |||
446 | -webkit-transition: all 0.4s ease; | ||
447 | -moz-transition: all 0.4s ease; | ||
448 | -ms-transition: all 0.4s ease; | ||
449 | -o-transition: all 0.4s ease; | ||
450 | transition: all 0.4s ease; | ||
451 | } | ||
452 | |||
453 | nav#access.isocube a:hover .face.top div, | ||
454 | nav#access.isocube a:focus .face.top div { | ||
455 | width: 100%; | ||
456 | height: 100%; | ||
457 | background: url(images/logo.cube.png) 18px -5px no-repeat; | ||
458 | } | ||
459 | |||
460 | nav#access.isocube .left { | ||
461 | background: #CCC; | ||
462 | } | ||
463 | |||
464 | nav#access li a, | ||
465 | nav#access li a:visited, | ||
466 | nav#access li a:active, | ||
467 | .isocube.secondary li a, | ||
468 | .isocube.secondary li a:visited, | ||
469 | .isocube.secondary li a:active { | ||
470 | color: #fff; | ||
471 | border: none; | ||
472 | background-color: #4B83B3; | ||
473 | -webkit-box-shadow: inset 1px 1px 1px #000; | ||
474 | -moz-box-shadow: inset 1px 1px 1px #000; | ||
475 | box-shadow: inset 1px 1px 1px #000; | ||
476 | } | ||
477 | |||
478 | nav#access li a:hover, | ||
479 | nav#access li a:active, | ||
480 | .isocube.secondary li a:hover, | ||
481 | .isocube.secondary li a:active { | ||
482 | background-color: #4B83B3; | ||
483 | -webkit-box-shadow: 1px 1px 1px #000; | ||
484 | -moz-box-shadow: 1px 1px 1px #000; | ||
485 | box-shadow: 1px 1px 1px #000; | ||
486 | } | ||
487 | |||
488 | nav#access li:nth-child(2) a, | ||
489 | nav#access li:nth-child(5) a, | ||
490 | nav#access li:nth-child(6) a { | ||
491 | margin: 6px 6px 0 6px; | ||
492 | } | ||
493 | |||
494 | nav#access li:nth-child(3), | ||
495 | nav#access li:nth-child(4) { | ||
496 | width: 50%; | ||
497 | } | ||
498 | |||
499 | nav#access li:nth-child(3) a, | ||
500 | nav#access li:nth-child(4) a { | ||
501 | margin: 6px 3px 0 6px; | ||
502 | } | ||
503 | |||
504 | nav#access li:nth-child(4) a { | ||
505 | margin-left: 3px; | ||
506 | margin-right: 6px; | ||
507 | } | ||
508 | |||
509 | nav.secondary { | ||
510 | } | ||
511 | 515 | ||
512 | section, | 516 | section, |
513 | footer[role=contentinfo] { | 517 | footer[role=contentinfo] { |
514 | margin: 50px auto; | 518 | margin: 50px auto; |
515 | width: 960px; | 519 | width: 960px; |
516 | } | 520 | } |
517 | 521 | ||
518 | #nav-above, | 522 | #nav-above, |
519 | #nav-below, | 523 | #nav-below, |
520 | article, | 524 | article, |
521 | article + h3, /* comments */ | 525 | article + h3, /* comments */ |
522 | article + h3 + ol, /* comments */ | 526 | article + h3 + ol, /* comments */ |
523 | footer[role=contentinfo] .xoxo { | 527 | footer[role=contentinfo] .xoxo { |
524 | position: relative; | 528 | position: relative; |
525 | margin-left: 155px; | 529 | margin-left: 155px; |
526 | margin-right: 250px; | 530 | margin-right: 250px; |
527 | } | 531 | } |
528 | 532 | ||
529 | /* | 533 | /* |
530 | * Navigation Below & Above | 534 | * Navigation Below & Above |
531 | */ | 535 | */ |
532 | #nav-above, | 536 | #nav-above, |
533 | #nav-below { | 537 | #nav-below { |
534 | display: none; | 538 | display: none; |
535 | } | ||
536 | |||
537 | #nav-above { | ||
538 | display: none; | ||
539 | } | ||
540 | |||
541 | #nav-below { | ||
542 | margin-top: 100px; | ||
543 | } | ||
544 | |||
545 | #nav-below:after { | ||
546 | content: “.”; | ||
547 | display: block; | ||
548 | height: 0; | ||
549 | clear: left; | ||
550 | visibility: hidden; | ||
551 | } | ||
552 | |||
553 | #nav-below .nav-previous, | ||
554 | #nav-below .nav-next { | ||
555 | width: 50%; | ||
556 | float: left; | ||
557 | } | ||
558 | |||
559 | #nav-below a { | ||
560 | margin: 0; | ||
561 | text-overflow: ellipsis; | ||
562 | overflow: hidden; | ||
563 | white-space: nowrap; | ||
564 | } | ||
565 | |||
566 | #nav-below .nav-previous a { | ||
567 | margin-right: 5px; | ||
568 | } | ||
569 | |||
570 | #nav-below .nav-next a { | ||
571 | margin-left: 5px; | ||
572 | } | 539 | } |
573 | 540 | ||
574 | 541 | ||
575 | 542 | ||
576 | 543 | ||
577 | 544 | ||
578 | #respond { | 545 | #respond { |
579 | margin-left: 155px; | 546 | margin-left: 155px; |
580 | margin-right: 250px; | 547 | margin-right: 250px; |
581 | margin-top: 100px; | 548 | margin-top: 100px; |
549 | |||
550 | input, textarea { width: 100%; } | ||
582 | } | 551 | } |
583 | 552 | ||
584 | footer[role=contentinfo] { | 553 | footer[role=contentinfo] { |
585 | padding-bottom: 20px; | 554 | padding-bottom: 20px; |
586 | } | ||
587 | |||
588 | footer[role=contentinfo] { | ||
589 | clear: both; | 555 | clear: both; |
590 | } | 556 | |
591 | 557 | li { | |
592 | footer[role=contentinfo] li { | 558 | display: block; |
593 | display: block; | 559 | float: left; |
594 | float: left; | 560 | } |
595 | } | 561 | |
596 | 562 | > a { // default wordpress links | |
597 | footer[role=contentinfo] > a { /* default wordpress links */ | 563 | display: none; |
564 | } | ||
565 | } | ||
566 | |||
567 | body.page article h1 { | ||
598 | display: none; | 568 | display: none; |
599 | } | 569 | } |
600 | 570 | ||
601 | article + article { | 571 | article { |
602 | margin-top: 100px; | 572 | + article { |
603 | } | 573 | margin-top: 100px; |
604 | 574 | } | |
605 | article h2 { | 575 | |
606 | margin-bottom: 15px; | 576 | h2 { |
607 | } | 577 | margin-bottom: 15px; |
608 | 578 | } | |
609 | article .entry-content { | 579 | |
610 | font-size: 110%; | 580 | .entry-content { |
611 | } | 581 | font-size: 110%; |
612 | 582 | } | |
613 | article .entry-summary a, | 583 | |
614 | article .entry-content a { | 584 | .entry-summary a, |
615 | white-space: nowrap; | 585 | .entry-content a { |
616 | } | 586 | white-space: nowrap; |
617 | 587 | } | |
618 | article .entry-content img { | 588 | |
619 | margin: 15px auto; | 589 | .entry-content img { |
620 | } | 590 | margin: 15px auto; |
621 | 591 | } | |
622 | article .example { | 592 | |
623 | display: block; | 593 | .example { |
624 | 594 | display: block; | |
625 | border: 2px solid #728B00; | 595 | |
626 | 596 | .border(#728B00); | |
627 | -webkit-border-radius: 5px; | 597 | |
628 | -moz-border-radius: 5px; | 598 | .border-radius; |
629 | border-radius: 5px; | 599 | .background-gradient(#D8FF26, #728B00); |
630 | 600 | } | |
631 | 601 | ||
632 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; | 602 | .hosting { |
633 | 603 | display: block; | |
634 | 604 | color: #fff; | |
635 | background-color: #D8FF26; | 605 | padding: 5px 15px 5px 148px; |
636 | background-image: -webkit-gradient(linear, left top, left bottom, from(#D8FF26), to(#728B00)); | 606 | margin: 50px 0; |
637 | background-image: -webkit-linear-gradient(top, #D8FF26, #728B00); | 607 | text-shadow: #000000 0px 1px 0px; |
638 | background-image: -moz-linear-gradient(top, #D8FF26, #728B00); | 608 | border: 2px dashed #2C4E6B; |
639 | background-image: -ms-linear-gradient(top, #D8FF26, #728B00); | 609 | .border-radius; |
640 | background-image: -o-linear-gradient(top, #D8FF26, #728B00); | 610 | .background-gradient(@blue, #2C3E6B); |
641 | background-image: linear-gradient(top, #D8FF26, #728B00); | 611 | .transition(all, 0.15s, linear); |
642 | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#D8FF26′, EndColorStr=’#728B00′); | 612 | |
643 | } | 613 | &:hover { |
644 | 614 | .background-gradient(#3184CC, #2C4E6B); | |
645 | article .hosting { | 615 | } |
646 | display: block; | 616 | |
647 | 617 | h2 { | |
648 | color: #fff; | 618 | margin: 0; |
649 | padding: 5px 15px 5px 148px; | 619 | height: 0; |
650 | margin: 50px 0; | 620 | opacity: 0; |
651 | 621 | filter: alpha(opacity = 0); | |
652 | border: 2px dashed #2C4E6B; | 622 | } |
653 | 623 | ||
654 | -webkit-border-radius: 5px; | 624 | a { |
655 | -moz-border-radius: 5px; | 625 | color: #000 !important; |
656 | border-radius: 5px; | 626 | text-shadow: none; |
657 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; | 627 | border-color: #fff !important; |
658 | 628 | background-color: #fff; | |
659 | background-color: #4B83B3; | 629 | } |
660 | background-image: -webkit-gradient(linear, left top, left bottom, from(#4B83B3), to(#2C4E6B)); | 630 | |
661 | background-image: -webkit-linear-gradient(top, #4B83B3, #2C4E6B); | 631 | .isocube .face { |
662 | background-image: -moz-linear-gradient(top, #4B83B3, #2C4E6B); | 632 | &.left { |
663 | background-image: -ms-linear-gradient(top, #4B83B3, #2C4E6B); | 633 | background-image: url(images/arrow-down.png); |
664 | background-image: -o-linear-gradient(top, #4B83B3, #2C4E6B); | 634 | background-position: center -155px; |
665 | background-image: linear-gradient(top, #4B83B3, #2C4E6B); | 635 | background-repeat: no-repeat; |
666 | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#4B83B3′, EndColorStr=’#2C4E6B’); | 636 | } |
667 | 637 | ||
668 | -webkit-transition: all 0.15s linear; | 638 | &.top { |
669 | -moz-transition: all 0.15s linear; | 639 | background-image: url(images/arrow-down.png); |
670 | -ms-transition: all 0.15s linear; | 640 | background-position: center -10px; |
671 | -o-transition: all 0.15s linear; | 641 | background-repeat: no-repeat; |
672 | transition: all 0.15s linear; | 642 | } |
673 | } | 643 | } |
674 | 644 | } | |
675 | article .hosting:hover { | 645 | |
676 | background-color: #3184CC; | 646 | /* |
677 | background-image: -webkit-gradient(linear, left top, left bottom, from(#3184CC), to(#2C4E6B)); | 647 | * Comments |
678 | background-image: -webkit-linear-gradient(top, #3184CC, #2C4E6B); | 648 | */ |
679 | background-image: -moz-linear-gradient(top, #3184CC, #2C4E6B); | 649 | + h3 { |
680 | background-image: -ms-linear-gradient(top, #3184CC, #2C4E6B); | 650 | margin-top: 50px; |
681 | background-image: -o-linear-gradient(top, #3184CC, #2C4E6B); | 651 | } |
682 | background-image: linear-gradient(top, #3184CC, #2C4E6B); | 652 | |
683 | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#3184CC’, EndColorStr=’#2C4E6B’); | 653 | + ol { |
684 | } | 654 | margin-bottom: 50px; |
685 | 655 | } | |
686 | article .hosting h2 { | ||
687 | margin: 0; | ||
688 | height: 0; | ||
689 | opacity: 0; | ||
690 | filter: alpha(opacity = 0); | ||
691 | } | ||
692 | |||
693 | article .hosting a { | ||
694 | color: #000 !important; | ||
695 | border-color: #fff !important; | ||
696 | background-color: #fff; | ||
697 | } | ||
698 | |||
699 | article .hosting .isocube .face.left { | ||
700 | background-image: url(images/arrow-down.png); | ||
701 | background-position: center -155px; | ||
702 | background-repeat: no-repeat; | ||
703 | } | ||
704 | |||
705 | article .hosting .isocube .face.top { | ||
706 | background-image: url(images/arrow-down.png); | ||
707 | background-position: center -10px; | ||
708 | background-repeat: no-repeat; | ||
709 | } | 656 | } |
710 | 657 | ||
711 | .entry-meta { | 658 | .entry-meta { |
712 | position: absolute; | 659 | position: absolute; |
713 | top: 0px; | 660 | top: 0px; |
714 | left: -155px; | 661 | left: -155px; |
715 | width: 129px; | 662 | width: 129px; |
716 | height: 103px; | 663 | height: 103px; |
717 | } | 664 | |
718 | 665 | &.isocube .face { | |
719 | .entry-meta.isocube .face { | 666 | font-size: 12px; |
720 | font-size: 12px; | 667 | text-align: center; |
721 | } | 668 | |
722 | 669 | &.left { | |
723 | .entry-meta.isocube .face { | 670 | > a { |
724 | text-align: center; | 671 | padding: 6px 0; |
725 | } | 672 | display: block; |
726 | 673 | border: none; | |
727 | .entry-meta.isocube .face.left > a { | 674 | } |
728 | padding: 6px 0; | 675 | |
729 | display: block; | 676 | > *:not(a) { |
730 | border: none; | 677 | display: none; |
731 | } | 678 | } |
732 | 679 | } | |
733 | .entry-meta.isocube .face.left > *:not(a) { | 680 | |
734 | display: none; | 681 | &.right a { |
735 | } | 682 | padding: 6px 0; |
736 | 683 | display: block; | |
737 | .entry-meta.isocube .face.right a { | 684 | border: none; |
738 | padding: 6px 0; | 685 | } |
739 | display: block; | 686 | |
740 | border: none; | 687 | |
741 | } | 688 | &.top { |
742 | 689 | overflow: hidden; | |
743 | 690 | ||
744 | .entry-meta.isocube .face.top { | 691 | a { |
745 | overflow: hidden; | 692 | padding: 3px 0 4px 0; |
746 | } | 693 | display: block; |
747 | 694 | border: none; | |
748 | .entry-meta.isocube .face.top a { | 695 | font-size: 15px; |
749 | padding: 3px 0 4px 0; | 696 | font-weight: 700; |
750 | display: block; | 697 | color: #fff; |
751 | border: none; | 698 | |
752 | font-size: 15px; | 699 | // the development category is only a marker and makes the post appear in the development page |
753 | font-weight: 700; | 700 | &.development { |
754 | color: #fff; | 701 | display: none; |
755 | } | 702 | } |
756 | 703 | ||
757 | /* the development category is only a marker and makes the post appear in the development page */ | 704 | &.news { |
758 | .entry-meta.isocube .face.top a.development { | 705 | background: #7C4BB4; |
759 | display: none; | 706 | &:hover { |
760 | } | 707 | background: #B092D2; |
761 | 708 | } | |
762 | .entry-meta.isocube .face.top a.news { | 709 | } |
763 | background: #7C4BB4; | 710 | |
764 | } | 711 | &.eclipse { |
765 | 712 | background: #B47C4B; | |
766 | .entry-meta.isocube .face.top a.news:hover { | 713 | &:hover { |
767 | background: #B092D2; | 714 | background: #D2B092; |
768 | } | 715 | } |
769 | 716 | } | |
770 | .entry-meta.isocube .face.top a.eclipse { | 717 | |
771 | background: #B47C4B; | 718 | &.web { |
772 | } | 719 | background: #559234; |
773 | 720 | &:hover { | |
774 | .entry-meta.isocube .face.top a.eclipse:hover { | 721 | background: #87C764; |
775 | background: #D2B092; | 722 | } |
776 | } | 723 | } |
777 | 724 | ||
778 | .entry-meta.isocube .face.top a.web { | 725 | &.usability { |
779 | background: #559234; | 726 | background: #B44B83; |
780 | } | 727 | &:hover { |
781 | 728 | background: #D292B4; | |
782 | .entry-meta.isocube .face.top a.web:hover { | 729 | } |
783 | background: #87C764; | 730 | } |
784 | } | 731 | |
785 | 732 | &.mobile { | |
786 | .entry-meta.isocube .face.top a.usability { | 733 | background: #41C58E; |
787 | background: #B44B83; | 734 | &:hover { |
788 | } | 735 | background: #8FDCBC; |
789 | 736 | } | |
790 | .entry-meta.isocube .face.top a.usability:hover { | 737 | } |
791 | background: #D292B4; | 738 | } |
792 | } | 739 | } |
793 | 740 | } | |
794 | .entry-meta.isocube .face.top a.mobile { | 741 | } |
795 | background: #41C58E; | 742 | |
796 | } | 743 | |
797 | 744 | ||
798 | .entry-meta.isocube .face.top a.mobile:hover { | ||
799 | background: #8FDCBC; | ||
800 | } | ||
801 | |||
802 | /* | ||
803 | * Comments | ||
804 | */ | ||
805 | article + h3 { | ||
806 | margin-top: 50px; | ||
807 | } | ||
808 | |||
809 | article + h3 + ol { | ||
810 | margin-bottom: 50px; | ||
811 | } | ||
812 | |||
813 | |||
814 | body.page article h1 { | ||
815 | display: none; | ||
816 | } | ||
817 | |||
818 | |||
819 | ul.tile { | 745 | ul.tile { |
820 | list-style: none; | 746 | list-style: none; |
821 | padding: 0; | 747 | padding: 0; |
822 | margin: 0; | 748 | margin: 0; |
823 | } | 749 | |
824 | 750 | > li { | |
825 | ul.tile > li { | 751 | float: left; |
826 | float: left; | 752 | width: 50%; |
827 | width: 50%; | 753 | height: 15em; |
828 | height: 15em; | 754 | margin: 0.8em 0; |
829 | margin: 0.8em 0; | 755 | |
830 | } | 756 | li { |
831 | 757 | padding: 0; | |
832 | ul.tile > li li { | 758 | margin-left: 0.2em; |
833 | padding: 0; | 759 | margin-bottom: 0.2em; |
834 | margin-left: 0.2em; | 760 | } |
835 | margin-bottom: 0.2em; | 761 | } |
836 | } | 762 | |
837 | 763 | ul { | |
838 | 764 | list-style: none; | |
839 | ul.tile ul { | 765 | margin-left: 0; |
840 | list-style: none; | 766 | padding-left: 0; |
841 | margin-left: 0; | 767 | } |
842 | padding-left: 0; | 768 | |
843 | } | 769 | h3 { |
844 | 770 | padding: 1px 5px 0px 5px; | |
845 | ul.tile h3 { | 771 | margin: 0 10px 5px -4px; |
846 | padding: 1px 5px 0px 5px; | 772 | |
847 | margin: 0 10px 5px -4px; | 773 | color: #FFFFFF; |
848 | 774 | text-shadow: #000000 0px 1px 0px; | |
849 | color: #FFFFFF; | 775 | |
850 | text-shadow: #000000 0px 1px 0px; | 776 | .border; |
851 | 777 | .border-radius; | |
852 | border: 1px solid #999; | 778 | .box-shadow(0px, 1px, 1px, #666); |
853 | border-radius: 5px; | 779 | |
854 | -moz-border-radius: 5px; | 780 | background: #666666 url(../../images/half-bg.png); |
855 | -webkit-border-radius: 5px; | 781 | } |
856 | |||
857 | box-shadow: 0px 1px 1px #666; | ||
858 | -moz-box-shadow: 0px 1px 1px #666; | ||
859 | -webkit-box-shadow: 0px 1px 1px #666; | ||
860 | |||
861 | background: #666666 url(../../images/half-bg.png); | ||
862 | } | 782 | } |
863 | 783 | ||
864 | 784 | ||
865 | /* | 785 | /* |
866 | * Fact Sheet | 786 | * Fact Sheet |
867 | */ | 787 | */ |
868 | .post-119 .entry-content { | 788 | .post-119 { |
869 | background-image: url(images/notebook.png); | 789 | .entry-content { |
870 | width: 460px; | 790 | background-image: url(images/notebook.png); |
871 | } | 791 | width: 460px; |
872 | 792 | } | |
873 | .post-119 .entry-content .s9gwrapper { | 793 | |
874 | padding: 58px 42px 55px 54px !important; | 794 | .entry-content .s9gwrapper { |
875 | } | 795 | padding: 58px 42px 55px 54px !important; |
876 | 796 | } | |
877 | .post-119 .entry-content h2, | 797 | |
878 | .post-119 .entry-content p, | 798 | .entry-content { |
879 | .post-119 .entry-content li { | 799 | h2, |
880 | margin: 0; | 800 | p, |
881 | padding: 0; | 801 | li { |
882 | 802 | margin: 0; | |
883 | font-family: KingthingsTrypewriter2Regular, “Lucida Console”, Monaco, monospace; | 803 | padding: 0; |
884 | font-size: 17px; | 804 | |
885 | line-height: 22px; | 805 | font-family: KingthingsTrypewriter2Regular, “Lucida Console”, Monaco, monospace; |
886 | } | 806 | font-size: 17px; |
887 | 807 | line-height: 22px; | |
888 | .post-119 .entry-content h2:after { | 808 | } |
889 | content: “:”; | 809 | |
890 | } | 810 | h2:after { |
891 | 811 | content: “:”; | |
892 | .post-119 .entry-content p, | 812 | } |
893 | .post-119 .entry-content li { | 813 | |
894 | } | 814 | p + h2 { |
895 | 815 | margin-top: 20px; | |
896 | .post-119 .entry-content a { | 816 | } |
897 | border: none; | 817 | |
898 | color: #333; | 818 | a { |
899 | border-bottom: 2px solid #333; | 819 | border: none; |
900 | border-radius: 0px; | 820 | color: #333; |
901 | -moz-border-radius: 0px; | 821 | border-bottom: 2px solid #333; |
902 | -webkit-border-radius: 0px; | 822 | .border-radius; |
903 | padding: 0; | 823 | padding: 0; |
904 | } | 824 | |
905 | 825 | &:hover, | |
906 | .post-119 .entry-content a:hover, | 826 | &:active { |
907 | .post-119 .entry-content a:active { | 827 | background: transparent; |
908 | background: transparent; | 828 | color: @blue; |
909 | color: #4B83B3; | 829 | border-color: @blue; |
910 | border-color: #4B83B3; | 830 | } |
911 | } | 831 | } |
912 | 832 | ||
913 | .post-119 .entry-content p + h2 { | 833 | &:after { |
914 | margin-top: 20px; | 834 | .clearfix; |
915 | } | 835 | } |
916 | 836 | } | |
917 | .post-119 .entry-content:after { | ||
918 | content: “.”; | ||
919 | display: block; | ||
920 | clear: left; | ||
921 | visibility: hidden; | ||
922 | line-height: 0; | ||
923 | height: 0; | ||
924 | } | 837 | } |
925 | 838 | ||
926 | 839 | ||
927 | 840 | ||
928 | /* | 841 | /* |
929 | * Skills | 842 | * Skills |
930 | */ | 843 | */ |
931 | article.post-121 .entry-content p:first-child:first-letter { | 844 | .post-121 { |
932 | font-family: Verdana, Geneva, sans-serif; | 845 | .entry-content p:first-child:first-letter { |
933 | font-size: 270px; | 846 | font-family: Verdana, Geneva, sans-serif; |
934 | line-height: 190px; | 847 | font-size: 270px; |
935 | padding-right: 14px; | 848 | line-height: 190px; |
936 | float: left; | 849 | padding-right: 14px; |
937 | display: block; | 850 | float: left; |
938 | width: 170px; | 851 | display: block; |
939 | height: 207px; | 852 | width: 170px; |
940 | color: rgba(0, 0, 0, 0.0); | 853 | height: 207px; |
941 | text-shadow: none; | 854 | color: rgba(0, 0, 0, 0.0); |
942 | background-image: url(images/S.png); | 855 | text-shadow: none; |
943 | background-repeat: no-repeat; | 856 | background-image: url(images/S.png); |
944 | } | 857 | background-repeat: no-repeat; |
945 | article.post-121:after { | 858 | } |
946 | content: “.”; | 859 | |
947 | display: block; | 860 | &:after { |
948 | clear: left; | 861 | .clearfix; |
949 | visibility: hidden; | 862 | } |
950 | line-height: 0; | ||
951 | height: 0; | ||
952 | } | 863 | } |
953 | 864 | ||
954 | 865 | ||
955 | 866 | ||
956 | 867 | ||
957 | /* | 868 | /* |
958 | * Development | 869 | * Development |
959 | */ | 870 | */ |
960 | article.post-125 .entry-content p:first-child:first-letter { | 871 | .post-125 { |
961 | font-family: Verdana, Geneva, sans-serif; | 872 | .entry-content p:first-child:first-letter { |
962 | font-size: 270px; | 873 | font-family: Verdana, Geneva, sans-serif; |
963 | line-height: 190px; | 874 | font-size: 270px; |
964 | padding-right: 5px; | 875 | line-height: 190px; |
965 | float: left; | 876 | padding-right: 5px; |
966 | display: block; | 877 | float: left; |
967 | width: 184px; | 878 | display: block; |
968 | height: 207px; | 879 | width: 184px; |
969 | color: rgba(0, 0, 0, 0.0); | 880 | height: 207px; |
970 | text-shadow: none; | 881 | color: rgba(0, 0, 0, 0.0); |
971 | background-image: url(images/A.png); | 882 | text-shadow: none; |
972 | background-repeat: no-repeat; | 883 | background-image: url(images/A.png); |
973 | } | 884 | background-repeat: no-repeat; |
974 | article.post-125:after { | 885 | } |
975 | content: “.”; | 886 | |
976 | display: block; | 887 | &:after { |
977 | clear: left; | 888 | .clearfix; |
978 | visibility: hidden; | 889 | } |
979 | line-height: 0; | 890 | } |
980 | height: 0; | 891 | |
981 | } | 892 | |
982 | 893 | ||
983 | |||
984 | |||
985 | 894 | ||
986 | /* | 895 | /* |
987 | * Contact | 896 | * Contact |
988 | */ | 897 | */ |
989 | 898 | .post-127 .entry-content { | |
990 | /* Row 1 */ | 899 | .envelope { // row 1 |
991 | .post-127 .entry-content .envelope { | 900 | @width: 460px; |
992 | background: url(images/envelope.png) no-repeat; | 901 | @height: 258px; |
993 | width: 145px; | 902 | @content-width: 145px; |
994 | height: 132px; | 903 | @content-height: 132px; |
995 | padding: 95px 30px 30px 285px; | 904 | @top: 83px; |
996 | font-family: AquilineTwoRegular, “Comic Sans MS”, “Comic Sans MS”, cursive; | 905 | @left: 285px; |
997 | font-size: 1.5em; | 906 | |
998 | line-height: 1.4em; | 907 | background: url(images/envelope.png) no-repeat; |
999 | } | 908 | width: @content-width; |
1000 | 909 | height: @content-height; | |
1001 | .post-127 .entry-content .envelope h2 { | 910 | padding: @top (@width – @left – @content-width) (@height – @top – @content-height) @left; |
1002 | display: none; | 911 | font-family: AquilineTwoRegular, “Comic Sans MS”, “Comic Sans MS”, cursive; |
1003 | } | 912 | font-size: 1.5em; |
1004 | 913 | line-height: 1.4em; | |
1005 | /* Row 2 */ | 914 | |
1006 | .post-127 .entry-content .row2 { | 915 | h2 { |
1007 | width: 460px; | 916 | display: none; |
1008 | } | 917 | } |
1009 | 918 | } | |
1010 | .post-127 .entry-content .row2:after { | 919 | |
1011 | content: “.”; | 920 | .row2 { |
1012 | display: block; | 921 | width: 460px; |
1013 | clear: both; | 922 | |
1014 | visibility: hidden; | 923 | &:after { |
1015 | line-height: 0; | 924 | .clearfix; |
1016 | height: 0; | 925 | } |
1017 | } | 926 | |
1018 | 927 | > * { | |
1019 | .post-127 .entry-content .row2 > * { | 928 | width: 220px; |
1020 | width: 220px; | 929 | height: 303px; |
1021 | height: 303px; | 930 | float: left; |
1022 | float: left; | 931 | margin-top: 10px; |
1023 | margin-top: 10px; | 932 | margin-right: 20px; |
1024 | margin-right: 20px; | 933 | } |
1025 | } | 934 | |
1026 | 935 | > *:last-child { | |
1027 | .post-127 .entry-content .row2 > *:last-child { | 936 | margin-right: 0px; |
1028 | margin-right: 0px; | 937 | } |
1029 | } | 938 | |
1030 | 939 | > * p { | |
1031 | .post-127 .entry-content .row2 > * p { | 940 | font-size: 1.2em; |
1032 | font-size: 1.2em; | 941 | text-align: center; |
1033 | text-align: center; | 942 | } |
1034 | } | 943 | |
1035 | 944 | > * a { | |
1036 | .post-127 .entry-content .row2 > * a { | 945 | background-repeat: no-repeat; |
1037 | background-repeat: no-repeat; | 946 | background-position: center 15px; |
1038 | background-position: center 15px; | 947 | display: block; |
1039 | display: block; | 948 | padding: 225px 15px 15px 15px; |
1040 | padding: 225px 15px 15px 15px; | 949 | } |
1041 | } | 950 | |
1042 | 951 | > * h2 { | |
1043 | .post-127 .entry-content .row2 > * h2 { | 952 | display: none; |
1044 | display: none; | 953 | } |
1045 | } | 954 | |
1046 | 955 | .phone a { | |
1047 | .post-127 .entry-content .phone a { | 956 | background-image: url(images/phone.png); |
1048 | background-image: url(images/phone.png); | 957 | } |
1049 | } | 958 | |
1050 | 959 | .mail a { | |
1051 | .post-127 .entry-content .mail a { | 960 | background-image: url(images/mail.png); |
1052 | background-image: url(images/mail.png); | 961 | } |
1053 | } | 962 | } |
1054 | 963 | ||
1055 | /* Row 3 */ | 964 | .row3 { |
1056 | .post-127 .entry-content .row3 { | 965 | width: 460px; |
1057 | width: 460px; | 966 | text-shadow: none; |
1058 | text-shadow: none; | 967 | |
1059 | } | 968 | &:after { |
1060 | 969 | .clearfix; | |
1061 | .post-127 .entry-content .row3:after { | 970 | } |
1062 | content: “.”; | 971 | |
1063 | display: block; | 972 | .col1, |
1064 | clear: both; | 973 | .col2 { |
1065 | visibility: hidden; | 974 | width: 220px; |
1066 | line-height: 0; | 975 | margin: 0; |
1067 | height: 0; | 976 | float: left; |
1068 | } | 977 | } |
1069 | 978 | ||
1070 | .post-127 .entry-content .row3 .col1, | 979 | .col2 { |
1071 | .post-127 .entry-content .row3 .col2 { | 980 | margin-left: 20px; |
1072 | width: 220px; | 981 | } |
1073 | margin: 0; | 982 | |
1074 | float: left; | 983 | .col1:after, |
1075 | } | 984 | .col2:after { |
1076 | 985 | .clearfix; | |
1077 | .post-127 .entry-content .row3 .col2 { | 986 | } |
1078 | margin-left: 20px; | 987 | |
1079 | } | 988 | a { |
1080 | 989 | position: relative; | |
1081 | .post-127 .entry-content .row3 .col1:after, | 990 | width: 46px; |
1082 | .post-127 .entry-content .row3 .col2:after { | 991 | height: 54px; |
1083 | content: “.”; | 992 | display: block; |
1084 | display: block; | 993 | margin-right: 20px; |
1085 | clear: both; | 994 | float: left; |
1086 | visibility: hidden; | 995 | padding-top: 3px; |
1087 | line-height: 0; | 996 | font-size: 9px; |
1088 | height: 0; | 997 | line-height: 14px; |
1089 | } | 998 | white-space: normal; |
1090 | 999 | ||
1091 | .post-127 .entry-content .row3 a { | 1000 | &:last-child { |
1092 | position: relative; | 1001 | margin-right: 0px; |
1093 | width: 46px; | 1002 | } |
1094 | height: 54px; | 1003 | } |
1095 | display: block; | 1004 | |
1096 | margin-right: 20px; | 1005 | .col1 { |
1097 | float: left; | 1006 | a { |
1098 | padding-top: 3px; | 1007 | -webkit-border-bottom-right-radius: 50% 10px; |
1099 | font-size: 9px; | 1008 | -moz-border-bottom-right-radius: 50% 10px; |
1100 | line-height: 14px; | 1009 | border-bottom-right-radius: 50% 10px; |
1101 | white-space: normal; | 1010 | |
1102 | } | 1011 | &:link { |
1103 | 1012 | .background-gradient(#D9E5EF, @blue); | |
1104 | .post-127 .entry-content .row3 a:last-child { | 1013 | } |
1105 | margin-right: 0px; | 1014 | |
1106 | } | 1015 | &:hover, |
1107 | 1016 | &:active { | |
1108 | .post-127 .entry-content .row3 .col1 a { | 1017 | color: #fff; |
1109 | -webkit-border-bottom-right-radius: 50% 10px; | 1018 | .background-gradient(@blue, #2C4E6B); |
1110 | -moz-border-bottom-right-radius: 50% 10px; | 1019 | } |
1111 | border-bottom-right-radius: 50% 10px; | 1020 | } |
1112 | } | 1021 | |
1113 | 1022 | span.lang { | |
1114 | .post-127 .entry-content .row3 .col1 a:link { | 1023 | position: absolute; |
1115 | background-color: #D9E5EF; | 1024 | bottom: 2px; |
1116 | background-image: -webkit-gradient(linear, left top, left bottom, from(#D9E5EF), to(#4B83B3)); | 1025 | left: 4px; |
1117 | background-image: -webkit-linear-gradient(top, #D9E5EF, #4B83B3); | 1026 | } |
1118 | background-image: -moz-linear-gradient(top, #D9E5EF, #4B83B3); | 1027 | } |
1119 | background-image: -ms-linear-gradient(top, #D9E5EF, #4B83B3); | 1028 | |
1120 | background-image: -o-linear-gradient(top, #D9E5EF, #4B83B3); | 1029 | .col2 { |
1121 | background-image: linear-gradient(top, #D9E5EF, #4B83B3); | 1030 | a { |
1122 | } | 1031 | background-position: center center; |
1123 | 1032 | background-repeat: no-repeat; | |
1124 | .post-127 .entry-content .row3 .col1 a:hover, | 1033 | border-color: transparent; |
1125 | .post-127 .entry-content .row3 .col1 a:active { | 1034 | |
1126 | color: #fff; | 1035 | span { |
1127 | 1036 | display: none; | |
1128 | background-color: #4B83B3; | 1037 | } |
1129 | background-image: -webkit-gradient(linear, left top, left bottom, from(#4B83B3), to(#2C4E6B)); | 1038 | |
1130 | background-image: -webkit-linear-gradient(top, #4B83B3, #2C4E6B); | 1039 | &:nth-child(1), |
1131 | background-image: -moz-linear-gradient(top, #4B83B3, #2C4E6B); | 1040 | &:nth-child(2), |
1132 | background-image: -ms-linear-gradient(top, #4B83B3, #2C4E6B); | 1041 | &:nth-child(3) { |
1133 | background-image: -o-linear-gradient(top, #4B83B3, #2C4E6B); | 1042 | background-image: url(images/me.contact.png); |
1134 | background-image: linear-gradient(top, #4B83B3, #2C4E6B); | 1043 | background-color: transparent; |
1135 | } | 1044 | } |
1136 | 1045 | ||
1137 | .post-127 .entry-content .row3 .col1 span.lang { | 1046 | &:nth-child(1) { |
1138 | position: absolute; | 1047 | background-position: -4px -6px; |
1139 | bottom: 2px; | 1048 | &:hover { |
1140 | left: 4px; | 1049 | background-position: -4px -116px; |
1141 | } | 1050 | } |
1142 | 1051 | } | |
1143 | .post-127 .entry-content .row3 .col2 a { | 1052 | |
1144 | background-position: center center; | 1053 | &:nth-child(2) { |
1145 | background-repeat: no-repeat; | 1054 | background-position: -85px -6px; |
1146 | border-color: transparent; | 1055 | &:hover { |
1147 | } | 1056 | background-position: -85px -116px; |
1148 | 1057 | } | |
1149 | .post-127 .entry-content .row3 .col2 a:hover, | 1058 | } |
1150 | .post-127 .entry-content .row3 .col2 a:active { | 1059 | |
1151 | background-position: center center; | 1060 | &:nth-child(3) { |
1152 | background-repeat: no-repeat; | 1061 | background-position: -162px -6px; |
1153 | border-color: 4B83B3; | 1062 | &:hover { |
1154 | } | 1063 | background-position: -162px -116px; |
1155 | 1064 | } | |
1156 | .post-127 .entry-content .row3 .col2 a span { | 1065 | } |
1157 | display: none; | 1066 | } |
1158 | } | 1067 | } |
1159 | 1068 | } | |
1160 | .post-127 .entry-content .row3 .col2 a:nth-child(1) { | 1069 | } |
1161 | background-image: url(images/xing.png); | ||
1162 | } | ||
1163 | |||
1164 | .post-127 .entry-content .row3 .col2 a:nth-child(2) { | ||
1165 | background-image: url(images/facebook.png); | ||
1166 | } | ||
1167 | |||
1168 | .post-127 .entry-content .row3 .col2 a:nth-child(3) { | ||
1169 | background-image: url(images/rss.png); | ||
1170 | } |