source: documentation/trunk/tutorial_sample_files/libraries/althor/less/style.less@ 28599

Last change on this file since 28599 was 28599, checked in by jlwhisler, 10 years ago

Draft interface for use in Defining Libraries tutorial.

File size: 12.2 KB
Line 
1/*
2* Folder v1.0
3*
4*/
5
6
7@import "palette.less";
8
9
10
11/* IMPORT ------------------------------------------------------------*/
12
13@import url('reset.css');
14@import url('widgets.css');
15@import url('elements.css');
16@import url('comments.css');
17
18/* aditional */
19@import url('../js/poshytip-1.1/src/tip-yellow/tip-yellow.css');
20@import url('isotope.css');
21
22/* Fonts ----------------------------------------------------*/
23
24
25/* Here you go ie */
26@font-face {
27 font-family: 'mensch';
28 font-style: normal;
29 font-weight: normal;
30 src: url('../fonts/mensch-webfont.eot');
31}
32
33/* For real web browsers */
34@font-face {
35 font-family: 'mensch';
36 font-style: normal;
37 font-weight: normal;
38 src: url('../fonts/mensch-webfont.ttf');
39}
40
41/* GENERAL ------------------------------------------------------------*/
42
43
44
45.cf:after,
46.cf:before {
47 content:"";
48 display:table;
49}
50
51.cf:after {
52 clear:both;
53}
54
55.cf {
56 zoom:1;
57}
58
59.wrapper{
60 margin: 0 auto;
61 width: 940px;
62 position: relative;
63}
64
65body{
66 font-family: Helvetica, Arial, sans-serif;
67 font-size: 16px;
68 line-height: 1.5em;
69 background: #95c9c3 url(../img/grunge.png) repeat-x center 150px;
70
71 a{
72 text-decoration: none;
73 .transition();
74 }
75
76
77
78 p{
79 margin-bottom: 21px;
80 }
81
82}
83
84
85#main h1,
86#main h2,
87#main h3,
88#main h4,
89#main h5,
90#main h6 {
91 font-family: mensch;
92 line-height: 1.3em;
93}
94
95h1{ font-size: 48px; }
96h2{ font-size: 36px; }
97h3{ font-size: 30px; }
98h4{ font-size: 24px; }
99h5{ font-size: 18px; }
100h6{ font-size: 14px; }
101
102
103/* HEADER ----------------------------------------------------*/
104
105header{
106 background: url(../img/header.png) ;
107 min-height: 150px;
108
109
110
111 #logo{
112 &:hover{ opacity: 0.8;}
113 img{
114 display: block;
115 margin: 30px auto;
116 }
117 }
118
119}
120
121
122
123
124
125/* NAVIGATION ------------------------------------------------------------*/
126
127nav{
128
129 height: 68px;
130 float: left;
131 width: 100%;
132 margin-top: 0px;
133 position: relative;
134 background: url(../img/ribbon.png) no-repeat top center;
135}
136
137#nav{
138 clear: left;
139 display: block;
140 float: right;
141 position: relative;
142 right: 50%;
143 text-align: center;
144
145 >li{
146 display: block;
147 float: left;
148 position: relative;
149 left: 50%;
150 font-family: mensch;
151 word-spacing: -.1em;
152 font-size: 20px;
153
154 &.current-menu-item,
155 &.current_page_item {
156 i{ display: block; }
157 }
158
159 a{
160 display: block;
161 padding: 20px 10px 0px 10px;
162 color: @fontLightColor;
163 .text-shadow();
164
165 &:hover{
166 i{ display: block; }
167 }
168
169 i{
170 display: none;
171 width: 16px;
172 height: 16px;
173 position: absolute;
174 left: 50%;
175 top: -4px;
176
177 b{
178 position: absolute;
179 display: block;
180 background: url(../img/current.png) no-repeat 0px 0px;
181 width: 16px;
182 height: 16px;
183 left: -8px;
184 }
185 }
186
187
188 }
189
190
191 /* sub navigation -----------------------------------------------------*/
192
193
194
195 ul{
196
197 font-size: 14px;
198 font-family: Tahoma;
199 text-align: left;
200 margin-top: 19px;
201 .shadow();
202
203 li{
204
205 a{
206 padding: 15px;
207 background: #963724;
208 &:hover{
209 background: #a03a26;
210 }
211 }
212
213 border-top: 1px solid #a03a26;
214 border-bottom: 1px solid #812f1e;
215
216 &:last-child{
217 border-bottom: none;
218 }
219 }
220 }
221 }
222}
223
224
225/* COMBO NAVIGATION ------------------------------------------------------------*/
226
227#comboNav{
228 width: 100%;
229 margin-top: 20px;
230 margin-bottom: 30px;
231 float: left;
232}
233
234/* MAIN ----------------------------------------------------*/
235
236#main{
237
238 .wrapper{
239 margin-top: 30px + 30;
240 margin-bottom: 50px;
241 min-height: 500px;
242 color: #444;
243 font-size: 16px;
244 line-height: 1.5em;
245 }
246}
247
248
249/* HEALINE ----------------------------------------------------*/
250
251.headline{
252 color: @accentColor;
253 text-align: center;
254 font-family: mensch;
255 font-size: 48px;
256 line-height: 1.3em;
257 word-spacing: -.1em;
258 text-shadow: 3px 3px 0 rgba(255, 255, 255, .5);
259 margin-bottom: 20px;
260}
261
262/* FEATURE ----------------------------------------------------*/
263
264.feature{
265
266 width: 960px;
267 margin-left: -20px;
268
269 li{
270 position: relative;
271 background: @fgColor;
272 width: 300px;
273 margin-bottom: 50px;
274 margin-left: 20px;
275
276 .shadow();
277
278 .thumb{
279 display: block;
280 margin: 10px;
281 width: 280px;
282 img{
283 max-width: 100%;
284 }
285 }
286 .caption{
287 padding: 10px 10px 20px 10px;
288 text-align: center;
289 }
290 a{ color: @accentColor }
291 .thumb{
292 position: relative;
293
294 .date{
295 position: absolute;
296 bottom: -25px;
297 left: 140px - 30;
298 display: block;
299 .border-radius(40px,40px,40px,40px);
300 height: 50px;
301 width: 60px;
302 background: @fgColor;
303 float: left;
304 font-family: mensch;
305 padding-top: 10px;
306 span{
307 display: block;
308 text-align: center;
309 font-size: 20px;
310 line-height: 20px;
311 }
312 }
313 }
314 }
315}
316
317
318/* PAGE CONTENT ----------------------------------------------------*/
319
320.page-content{
321 position: relative;
322 background: @fgColor;
323 color: @fontColorInner;
324 padding: 50px 30px 60px 30px;
325 .shadow();
326
327 .heading{
328 border-bottom: 5px solid @fontColorInner;
329 margin-bottom: 30px;
330 padding-bottom: 10px;
331 }
332
333 .c-1,
334 .c-2,
335 .c-3,
336 .c-4{
337 position: absolute;
338 width: 48px;
339 height: 50px;
340 }
341
342 .c-1{
343 top: 0px;
344 left: 0px;
345 background: url(../img/corner-1.png) no-repeat top left;
346 }
347
348 .c-2{
349 top: 0px;
350 right: 0px;
351 background: url(../img/corner-2.png) no-repeat top left;
352 }
353
354 .c-3{
355 bottom: 0px;
356 left: 0px;
357 background: url(../img/corner-3.png) no-repeat top left;
358 }
359
360 .c-4{
361 bottom: 0px;
362 right: 0px;
363 background: url(../img/corner-4.png) no-repeat top left;
364 }
365}
366
367
368/* CONTACT ------------------------------------------------------------*/
369
370
371#map_canvas{
372 display: block;
373 height: 300px;
374 width: 100%;
375 margin-bottom: 20px;
376}
377
378
379/* PORTFOLIO ----------------------------------------------------*/
380
381.portfolio-content{
382 margin-bottom: 40px;
383
384
385 .project-content{
386 float: left;
387 width: 660px;
388 }
389
390 .project-info{
391 float: right;
392 width: 160px;
393 font-size: 14px;
394 padding-left: 30px;
395 border-left: 1px solid @fontColorInner;
396
397 p{
398 margin-bottom: 10px;
399 }
400
401 strong{
402 font-weight: bold;
403 display: block;
404 }
405
406 a{
407 color: @accentColor;
408 }
409 }
410}
411
412/* RELATED PROJECTS ------------------------------------------------------------*/
413
414.related-projects{
415 margin-bottom: 80px;
416 .related-heading{
417 text-align: center;
418 margin-bottom: 10px;
419 }
420
421 a{
422 color: @fontColor;
423 }
424
425 .related-list{
426 li{
427 float: left;
428 width: 300px;
429 text-align: center;
430 margin-right: 20px;
431
432 .thumb{
433 background: @fgColor;
434 padding: 10px;
435 display: block;
436 line-height: 0em;
437 margin-bottom: 10px;.shadow();
438 img{
439 max-width: 100%;
440 }
441 }
442
443 &:last-child{
444 margin-right: 0px;
445 }
446 }
447 }
448}
449
450
451/* ENTRY CONTENT ------------------------------------------------------------*/
452
453.entry-content{
454 a{
455 color: @accentColor;
456 }
457
458 strong{
459 font-weight: bold;
460 }
461
462 ul,ol{
463 margin-left: 20px;
464 }
465
466 ul{
467 list-style: disc;
468 }
469
470 ol{
471 list-style: decimal;
472 }
473}
474
475/* BLOG ------------------------------------------------------------*/
476
477#posts-list{
478 position: relative;
479 width: 620px;
480 float: left;
481
482 article{
483 position: relative;
484 margin-bottom: 50px;
485 padding: 30px;
486 background: @fgColor;
487 .shadow();
488
489 .tape{
490 position: absolute;
491 top: -15px;
492 left: 310px - 60;
493 display: block;
494 width: 122px;
495 height: 35px;
496 background: url(../img/tape.png) no-repeat top left;
497 }
498
499 .feature-image{
500 position: relative;
501 line-height: 0em;
502
503
504 img{
505 max-width: 100%;
506 }
507
508 .entry-date{
509 position: absolute;
510 bottom: -66px;
511 right: 0px;
512 width: 51px;
513 height: 66px;
514 background: url(../img/date.png) no-repeat top left;
515 font-family: mensch;
516 font-size: 20px;
517 line-height: 1.1em;
518 text-align: center;
519 color: @fontLightColor;
520 .month{
521 margin-top: 7px;
522 }
523 }
524 }
525
526 .excerpt{
527 margin-top: 40px;
528 color: @fontColorInner;
529 .post-heading{
530 font-family: mensch;
531 font-size: 36px;
532 line-height: 1.1em;
533 color: @fontColorInner;
534 display: block;
535 max-width: 480px;
536 }
537 }
538
539 .meta{
540 display: block;
541 border-top: 1px solid @fontColorInner;
542 font-size: 14px;
543 padding-top: 10px;
544 a{
545 color: @accentColor;
546 }
547 }
548 }
549}
550
551
552/* PAGE NAVIGATION ------------------------------------------------------------*/
553
554#main .page-navigation{
555 position: relative;
556 left: 50%;
557 display: block;
558 margin-bottom: 100px;
559 float: left;
560
561 div{
562 position: relative;
563 right: 50%;
564
565
566 .shadow();
567
568 span{
569 margin-bottom: 15px;
570 display: inline-block;
571 }
572 }
573
574 a{
575 display: block;
576 .transition();
577 color: @accentColor;
578 display: block;
579 padding: 10px 15px;
580 }
581
582 .nav-next{
583 float: left;
584 margin-right: 20px;
585 background: @fgColor url(../img/arrow-left.png) no-repeat left 12px;
586 padding-left: 20px;
587 }
588
589 .nav-previous{
590 float: right;
591 background: @fgColor url(../img/arrow-right.png) no-repeat right 12px;
592 padding-right: 20px;
593 }
594}
595
596
597/* SIDEBAR ------------------------------------------------------------*/
598
599#sidebar{
600 position: relative;
601 width: 260px;
602 float: right;
603 font-size: 14px;
604
605 .block{
606 margin-bottom: 40px;
607 padding-bottom: 5px;
608 }
609
610 .heading{
611 border-top: 5px solid @fontColor;
612 border-bottom: 5px solid @fontColor;
613 margin-bottom: 15px;
614 padding-top: 15px;
615 padding-bottom: 10px;
616 line-height: 1.1em;
617 text-align: center;
618 }
619
620 li{
621 margin-bottom: 7px;
622 }
623
624 a{
625 color: @accentColor;
626 }
627}
628
629/* FILTERED ITEMS ----------------------------------------------------*/
630
631.isotope-item {
632 z-index: 2;
633}
634
635.isotope-hidden.isotope-item {
636 pointer-events: none;
637 z-index: 1;
638}
639
640
641#filter-buttons{
642
643 text-align: center;
644 background: url(../img/filter.png) no-repeat top center;
645 height: 47px;
646 margin-bottom: 20px;
647
648 li{
649 display: inline-block;
650 margin-bottom: 0px;
651
652 a{
653 display: block;
654 text-decoration: none;
655 margin-bottom: 0px;
656 margin-right: 5px;
657 line-height: 47px;
658 color: @accentColor;
659 }
660
661 .selected{
662 background: url(../img/filter-arrow.png) no-repeat center top;
663 }
664 }
665}
666
667
668/* COLUMNS LAYOUT----------------------------------------------------------*/
669
670.one-half,
671.one-third,
672.one-fourth{
673 float:left;
674 margin-bottom: 40px;
675 margin-right: 2.1276%;
676 position:relative;
677}
678
679.one-half{
680 width: 48.9361%;
681}
682
683.one-third{
684 width: 31.9148%;
685
686}
687
688.one-fourth{
689 width: 23.4042%;
690}
691
692.last {
693 clear:right;
694 margin-right:0 !important;
695}
696
697
698/* FOOTER ----------------------------------------------------*/
699
700footer{
701 background: #585246 url(../img/footer.png) repeat-x;
702 color: #f3e4c8;
703 padding-bottom: 60px;
704 a{
705 color: #fff;
706 text-decoration: none;
707 &:hover{
708 color: @accentColor;
709 }
710 }
711
712 h1,h2,h3,h4,h5,h6{
713 color: #f9f5ed;
714 font-family: mensch;
715 word-spacing: -.1em;
716 .text-shadow();
717 line-height: 1.3em;
718 }
719
720
721 .sb-holder{
722 position: relative;
723 left: 50%;
724 text-align: center;
725 float: left;
726
727
728
729 }
730
731 #social-bar{
732 display: block;
733 position: relative;
734 float: left;
735 right: 50%;
736 margin: -7px 5px 0px 5px;
737 background: url(../img/social-bg.png) repeat-x;
738 height: 46px;
739 padding-top: 8px;
740 padding-left: 10px;
741 padding-right: 10px;
742
743
744 li{
745 float: left;
746 line-height: 1em;
747 margin-left: 3px;
748 margin-right: 3px;
749 a{
750 display: block;
751 line-height: 0em;
752 &:hover{
753 -webkit-transform: translate(0px, -2px);
754 -moz-transform: translate(0px, -2px);
755 -o-transform: translate(0px, -2px);
756 transform: translate(0px, -2px);
757 }
758 }
759
760 }
761
762 .left-corner{
763 position: absolute;
764 top:0px;
765 left: -10px;
766 display: block;
767 width: 10px;
768 height: 18px;
769 background: url(../img/social-left-corner.png) no-repeat left top;
770 }
771
772 .right-corner{
773 position: absolute;
774 top:0px;
775 right: -13px;
776 display: block;
777 width: 10px;
778 height: 18px;
779 background: url(../img/social-right-corner.png) no-repeat left top;
780 }
781
782
783 }
784
785 #footer-bottom{
786 font-size: 14px;
787 text-align: center;
788 border-top: 1px solid rgba(0,0,0,0.2);
789 padding-top: 25px;
790 }
791
792}
793
794/* WIDGET COLS ------------------------------------------------------------*/
795
796.widget-cols{
797 margin-top: 80px;
798 margin-bottom: 30px;
799 font-size: 14px;
800
801 h1, h2, h3, h4, h5, h6{
802 margin-bottom: 20px;
803 font-weight: normal;
804 text-align: center;
805 border-bottom: 0px solid #ada18e;
806 border-top: 0px solid #ada18e;
807 padding-top:0px;
808 padding-bottom: 0px;
809 }
810
811 >li{
812 width: 220px;
813 float: left;
814 margin-right: 20px;
815 }
816
817 >li.fourth-col{
818 margin-right: 0px;
819 }
820}
821
822
823
Note: See TracBrowser for help on using the repository browser.