]> git.r.bdr.sh - rbdr/r.bdr.sh/blame - jekyll/curriculum/style.css
Colorizes links too
[rbdr/r.bdr.sh] / jekyll / curriculum / style.css
CommitLineData
b157bf19
BB
1*{
2 margin: 0;
3 padding: 0;
4 text-rendering: optimizeLegibility;
5}
6
7/*
8 * DEFINE FONTS
9 */
10
11 /* League Gothic */
12
13@font-face {
14 font-family: 'League Gothic';
15 src: url('/curriculum/fonts/league-gothic/League_Gothic-webfont.ttf') format('truetype');
16 font-weight: normal;
17 font-style: normal;
18}
19
20 /* PT Sans */
21
22@font-face {
23 font-family: 'PT Sans';
24 src: url('/curriculum/fonts/pt-sans/PTS55F_W.ttf') format('truetype');
25 font-weight: normal;
26 font-style: normal;
27}
28
29@font-face {
30 font-family: 'PT Sans';
31 src: url('/curriculum/fonts/pt-sans/PTS56F_W.ttf') format('truetype');
32 font-weight: normal;
33 font-style: italic;
34}
35
36 /* PT Serif */
37
38 @font-face {
39 font-family: 'PT Serif';
40 src: url('/curriculum/fonts/pt-serif/PTF55F_W.ttf') format('truetype');
41 font-weight: normal;
42 font-style: normal;
43}
44
45@font-face {
46 font-family: 'PT Serif';
47 src: url('/curriculum/fonts/pt-serif/PTF56F_W.ttf') format('truetype');
48 font-weight: normal;
49 font-style: italic;
50}
51
52 /* VAG - HandWritten */
53
54 @font-face {
55 font-family: 'VAG-HandWritten';
56 src: url('/curriculum/fonts/vag-handwritten/VAG-HandWritten-webfont.ttf') format('truetype');
57 font-weight: normal;
58 font-style: normal;
59}
60
61
62/*
63 * END FONT DEFINITIONS
64 */
65
66/*
67 * MAIN STRUCTURE
68 */
69
70 body{
71 font-size: 0.625em;
72 text-align: center;
73 }
74
75 #wrapper{
76 width: 960px;
77 margin: 0 auto;
78 text-align: left;
79 position: relative;
80 }
81
82 #info{
83 margin-left: 10px;
84 width: 940px;
85 height: 564px;
86 background-image: url(/curriculum/images/bluebg.jpg);
87 background-repeat: no-repeat;
88 }
89
90 #quickinfo{
91 width: 540px;
92 height: 550px;
93 background-image: url(/curriculum/images/benpixel.png);
94 background-repeat: no-repeat;
95 position: relative;
96 z-index: 10;
97 }
98
99 #quickinfo p{
100 font-family: "VAG-HandWritten",sans-serif;
101 font-size: 1.8em;
102 position: absolute;
103 line-height: 0.9em;
104 color: #666666;
105 top: 290px;
106 left: 240px;
107 width: 200px;
108 }
109
110 #info h1{
111 text-shadow: -7px 5px rgba(0,0,0,.15);
112 font-size:16.07em;
113 position: absolute;
114 color: #fff;
115 text-transform: uppercase;
116 font-family: "League Gothic", sans-serif;
117 left: 310px;
118 z-index: 20;
119 font-weight: normal;
120 }
121
122 #info h2.subtitle{
123 position: absolute;
124 display: block;
125 width: 580px;
126 left: 310px;
127 border-bottom: 1px solid rgba(255,255,255,.2);
128 box-shadow: 0px 1px rgba(36,62,69,.33);
129 text-align: center;
130 padding: 10px 0;
131 font-family: "League Gothic", sans-serif;
132 text-transform: uppercase;
133 font-size: 4.25em;
134 top: 160px;
135 z-index: 20;
136 text-shadow: 0px 1px rgba(255,255,255,.23);
137 color: #38616f;
138 font-weight: normal;
139 }
140
141 #info h2.contactheader{
142 position: absolute;
143 left: 600px;
144 padding: 10px;
145 display: block;
146 top: 260px;
147 font-size: 3.6em;
148 font-weight: normal;
149 color: #fff;
150 font-family: "PT Sans", Helvetica, Arial, sans;
151 text-transform: uppercase;
152 text-shadow: 1px 1px rgba(0,0,0,.25);
153 z-index: 20;
154 }
155
156 #info ul.contactinfo{
157 position: absolute;
158 left: 600px;
159 width: 220px;
160 padding: 10px;
161 display: block;
162 list-style: none;
163 top: 320px;
164 }
165
166 #info ul.contactinfo li{
167 font-family: "PT Sans", Helvetica, Arial, sans;
168 background: transparent;
169 padding-left: 40px;
170 font-size: 1.8em;
171 text-shadow: 1px 1px rgba(0,0,0,.25);
172 color: #fff;
173 display: block;
174 height: 25px;
175 margin-bottom: 15px;
176 position: relative;
177 }
178
179 #info ul.contactinfo li.phone{
180 background: transparent url(/curriculum/images/sprites.png)
181 0 0 no-repeat;
182 }
183
184 #info ul.contactinfo li.site{
185 background: transparent url(/curriculum/images/sprites.png)
186 0 -25px no-repeat;
187 }
188
189 #info ul.contactinfo li.mail{
190 background: transparent url(/curriculum/images/sprites.png)
191 0 -50px no-repeat;
192 }
193
194 #info ul.contactinfo li.twitter{
195 background: transparent url(/curriculum/images/sprites.png)
196 0 -75px no-repeat;
197 }
198
199 #info ul.contactinfo li a{
200 color: #fff;
201 text-decoration: none;
202 }
203
204 #info ul.contactinfo li .type{
205 display: none;
206 }
207
208 div#profile:before{
209 display: block;
210 content: "-";
211 color: transparent;
212 background-image: url(/curriculum/images/perfilbgtop.png);
213 background-repeat: no-repeat;
214 z-index: 30;
215 position: absolute;
216 top: -40px;
217 height: 40px;
218 width: 960px;
219 }
220
221 #profile:after{
222 display: block;
223 content: "-";
224 color: transparent;
225 background-image: url(/curriculum/images/perfilbgbottom.png);
226 background-repeat: no-repeat;
227 z-index: 30;
228 height: 23px;
229 width: 960px;
230 position: relative;
231 bottom: -23px;
232 }
233
234 #profile{
235 width: 960px;
236 background: url(/curriculum/images/perfilbg.jpg);
237 background-repeat: repeat;
238 position: relative;
239 color: #000;
240 }
241
242 #profile h2{
243
244 -moz-transform: rotate(-90deg);
245 -o-transform: rotate(-90deg);
246 -webkit-transform: rotate(-90deg);
247 -ms-transform: rotate(-90deg);
248 transform: rotate(-90deg);
249 font-size: 5.35em;
250 font-family: "League Gothic", sans-serif;
251 position: absolute;
252 text-transform: uppercase;
253 color: #c00;
254 text-shadow: 1px 0px rgba(0,0,0,.2),
255 -1px 0px rgba(255,255,255,.75);
256 top: 60px;
257 left: 40px;
258
259 }
260
261 #profile p{
262 font-family: "PT Sans", Helvetica, Arial, sans-serif;
263 position: relative;
264 left: 130px;
265 width: 400px;
266 color: #666;
267 font-size: 1.4em;
268 line-height: 1.17em;
269 margin-bottom: 20px;
270 }
271
272 #profile .visualaid{
273 left: 600px;
274 width: 300px;
275 text-align: center;
276 position: absolute;
277 top: -10px;
278 z-index: 40;
279 }
280
281 #experience, #projects{
282 margin-left: 10px;
283 width: 940px;
284 background-image: url(/curriculum/images/greybg.jpg);
285 background-repeat: repeat;
286 }
287
288 #experience{
289 padding-top: 43px;
290 padding-left: 50px;
291 padding-right: 50px;
292 width: 840px;
293 -webkit-column-count: 3;
294 -webkit-column-width: auto;
295 -webkit-column-gap: 60px;
296 -moz-column-count: 3;
297 -moz-column-width: auto;
298 -moz-column-gap: 60px;
299 column-count: 3;
300 column-gap: 60px;
301 border-bottom: 1px solid #ccc;
302 }
303
304 #experience h2{
305 margin: 10px;
306 font-weight: normal;
307 font-family: "League Gothic", sans-serif;
308 color: #c00;
309 text-transform: uppercase;
310 font-size: 6em;
311 text-shadow: 1px 0 #fff,
312 -1px 0 #fff,
313 0 1px #fff,
314 0 -1px #fff,
315 -5px 3px rgba(127,213,222,.75);
316 }
317
318 #experience h3{
319 font-weight: normal;
320 font-family: "PT Serif", Times, "Times New Roman", serif;
321 color: #aaa;
322 font-style: normal;
323 font-size: 1.8em;
324 text-shadow: 1px 0 #fff;
325}
326
327 #experience h3 span{
328 color: #999;
329 font-style: italic;
330 }
331
332 #experience ul.trabajos{
333 list-style: none;
334 }
335
336 #experience ul.trabajos li{
337 display: inline-block;
338 margin: 20px 10px;
339 }
340
341 #experience p{
342 padding-top: 20px;
343 font-family: "PT Sans", Helvetica, Arial, sans-serif;
344 font-size: 1.4em;
345 color: #414141;
346 }
347
348 #projects{
349 border-top: 1px solid #fff;
350 position: relative;
351 overflow: auto;
352 }
353
354 #projects h2{
355 width:220px;
356 padding-right: 10px;
357 text-align: right;
358 display: block;
359 float: left;
360 font-weight: normal;
361 font-family: "League Gothic", sans-serif;
362 color: #c00;
363 text-transform: uppercase;
364 font-size: 6em;
365 text-shadow: 1px 0 #fff,
366 -1px 0 #fff,
367 0 1px #fff,
368 0 -1px #fff,
369 -5px 3px rgba(127,213,222,.75);
370 }
371
372 #projectsvg, #projectsweb{
373 float: left;
374 width: 220px;
375 padding: 0 10px;
376 margin-left: 60px;
377 margin-top: 10px;
378 }
379
380 #projects h3{
381 font-family: "League Gothic", sans-serif;
382 font-weight: normal;
383 text-transform: uppercase;
384 font-size: 2.4em;
385 color: #999;
386 text-shadow: 0px 1px #fff;
387 padding-left: 60px;
388 width: 180px;
389 background-repeat: no-repeat;
390 height: 25px;
391 display: block;
392 margin-bottom: 20px;
393 }
394
395 #projects h3.vgheader{
396 background: transparent url(/curriculum/images/sprites.png)
397 0 -100px no-repeat;
398 }
399
400 #projects h3.webheader{
401 background: transparent url(/curriculum/images/sprites.png)
402 0 -125px no-repeat;
403 }
404
405 #projects p{
406 color: #414141;
407 font-size: 1.4em;
408 font-family: "PT Sans", Helvetica, Arial, sans-serif;
409 margin: 10px 0;
410 }
411
412 #projects h4, #projects h5{
413 font-family: "PT Serif", Times, "Times New Roman", serif;
414 font-size: 1.8em;
415 text-shadow: 1px 0 #fff;
416 font-weight: normal;
417 }
418
419 #projects ul.projects{
420 list-style: none;
421 display: block;
422 width: 220px;
423 }
424
425 #projects h4{
426 color: #999;
427 font-style: italic;
428 }
429
430 #projects h5{
431 color: #aaa;
432 }
433
434 #projects ul.screenshots{
435 list-style: none;
436 margin-bottom: 20px;
437 }
438
439 #projects ul.screenshots li{
440 display: inline-block;
441 border: 1px solid #ccc;
442 padding: 10px 0;
443 width: 90px;
444 text-align: center;
445 }
446
447 #projects ul.screenshots li.first{
448 margin-right: 15px;
449 }
450
451 #education{
452 margin-left: 10px;
453 width: 940px;
454 height: 550px;
455 background-image: url(/curriculum/images/bluebg.jpg);
456 background-repeat: no-repeat;
457 overflow: auto;
458 }
459
460 #education h2{
461 font-weight: normal;
462 font-size: 9.6em;
463 font-family: "League Gothic", sans-serif;
464 text-align: center;
465 text-shadow: 1px 0 1px #fff,
466 -1px 0 1px #fff,
467 0 1px 1px #fff,
468 0 -1px 1px #fff;
469 color: #fff;
470 text-transform: uppercase;
471 padding-top: 10px;
472 }
473
474 #education .education-para{
475 width: 220px;
476 margin-left: 50px;
477 padding: 10px;
478 font-size: 1.4em;
479 font-family: "PT Sans", Helvetica, Arial, sans-serif;
480 color: #fff;
481 float: left;
482 }
483
484 #education .education-para em{
485 font-style: italic;
486 color: #226076;
487 }
488
489 #education .abilities{
490 list-style: none;
491 display: block;
492 float: left;
493 -webkit-column-count: 3;
494 -webkit-column-width: auto;
495 -webkit-column-gap: 20px;
496 -moz-column-count: 3;
497 -moz-column-width: auto;
498 -moz-column-gap: 20px;
499 column-count: 3;
500 column-gap: 20px;
501 column-width: auto;
502 width: 520px;
503 padding: 10px;
504 margin-left: 60px;
505 }
506
507 #education .abilities li{
508 font-family: "PT Sans", Helvetica, Arial, sans-serif;
509 font-size: 1.4em;
510 color: #fff;
511 background: transparent url(/curriculum/images/sprites.png)
512 0 -150px no-repeat;
513 padding-left: 40px;
514 margin-bottom: 10px;
515 height: 40px;
516 display: inline-block;
517 }
518
519 #personal{
520 margin-left: 10px;
521 width: 940px;
522 background-image: url(/curriculum/images/greybg.jpg);
523 background-repeat: repeat;
524 }
525
526 #personal h2{
527 font-weight: normal;
528 font-family: "League Gothic", sans-serif;
529 display: block;
530 height: 28px;
531 padding-top: 4px;
532 text-transform: uppercase;
533 text-align: center;
534 font-size: 2.4em;
535 color: transparent;
536 box-shadow: 0 0 10px rgba(0,0,0,.33);
537 background-image: url(/curriculum/images/barrapeligro.png);
538 background-repeat: no-repeat;
539 cursor: pointer;
540 }
541
542 #personal h2 a{
543 background: url(/curriculum/images/avisotext.png);
544 background-repeat: no-repeat;
545 color: transparent;
546 text-decoration: none;
547 display: inline-block;
548 text-align: left;
549 padding-left: 2px;
550 width: 293px;
551 height: 24px;
552 cursor: pointer;
553 }
554
555 #personal .hidden{
556 background-image: url(/curriculum/images/blackbg.jpg);
557 overflow: auto;
558 width: 940px;
559 padding-top: 10px;
560 }
561
562 #personal .separatorfinal{
563 display: block;
564 height: 32px;
565 text-align: center;
566 color: transparent;
567 box-shadow: 0 0 10px rgba(0,0,0,.33);
568 background-image: url(/curriculum/images/barrapeligro.png);
569 background-repeat: no-repeat;
570 content: "-"
571 border: 0;
572 clear: both;
573 margin-top: 10px;
574 }
575
576 #personal p{
577 width: 220px;
578 margin-left: 50px;
579 padding: 10px;
580 font-size: 1.4em;
581 font-family: "PT Sans", Helvetica, Arial, sans-serif;
582 color: #fff;
583 float: left;
584 text-shadow: -1px 1px #000;
585 }
586
587 #personal .funfacts{
588 display: block;
589 float: left;
590 -webkit-column-count: 2;
591 -webkit-column-width: auto;
592 -webkit-column-gap: 20px;
593 -moz-column-count: 2;
594 -moz-column-width: auto;
595 -moz-column-gap: 20px;
596 column-count: 2;
597 column-gap: 20px;
598 column-width: auto;
599 width: 520px;
600 padding: 10px;
601 margin-left: 60px;
602 }
603
604 #personal .funfacts li{
605 color: #fff;
606 font-size: 1.4em;
607 font-family: "PT Sans", Helvetica, Arial, sans-serif;
608 text-shadow: -1px 1px #000;
609 display: inline-block;
610 margin-bottom: 15px;
611 padding-left: 16px;
612 background-image: url(/curriculum/images/bullet.png);
613 background-repeat: no-repeat;
614 background-position: left 5px;
615 }
616
617 #personal .disclaimer{
618 text-align: center;
619 padding: 20px 0;
620 margin: 0 auto;
621 font-family: "PT Sans", Helvetica, Arial, sans-serif;
622 color: #666;
623 width: 400px;
624 font-size: 1.4em;
625 }
626
627 #personal .disclaimer em{
628 color: #999;
629 font-style: italic;
630 display: block;
631 }