source: main/trunk/greenstone3/web/interfaces/halftone/less/lessframework.less@ 32388

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

A new interface created using a CSS template by luiszuno.com. Based on the default interface.
File size: 10.1 KB
Line 
1/* Less Framework 4
2 http://lessframework.com
3 by Joni Korpi
4 License: http://opensource.org/licenses/mit-license.php */
5
6
7/*
8
9
10
11/* Default Layout: 992px.
12 Gutters: 24px.
13 Outer margins: 48px.
14 Leftover space for scrollbars @1024px: 32px.
15-------------------------------------------------------------------------------
16cols 1 2 3 4 5 6 7 8 9 10
17px 68 160 252 344 436 528 620 712 804 896 */
18
19
20@import "palette.less";
21
22
23
24/* Default General ----------------------------------------------------*/
25
26.wrapper{
27
28}
29
30/* Defaul tNav ----------------------------------------------------*/
31
32#comboNav{ display: none; }
33#nav{ display: block; }
34
35
36
37
38/* Tablet Layout: 768px.
39 Gutters: 24px.
40 Outer margins: 28px.
41 Inherits styles from: Default Layout.
42-----------------------------------------------------------------
43cols 1 2 3 4 5 6 7 8
44px 68 160 252 344 436 528 620 712 */
45
46@media only screen and (min-width: 768px) and (max-width: 991px) {
47
48 /* TABLET GENERAL ----------------------------------------------------*/
49
50
51 .wrapper{ width: 712px; }
52
53
54 /* TABLET NAV ----------------------------------------------------*/
55
56 #nav{ display: block; }
57 #comboNav{ display: none; }
58 #nav{
59
60 li{
61 margin-left: 0px;
62 margin-right: 0px;
63 font-size: 16px;
64 }
65 }
66
67 /* TABLET SLIDER ----------------------------------------------------*/
68
69 .theme-halftone {
70 .nivoSlider {
71 margin-left: -10px;
72 width: 100%;
73 margin-left: 0px;
74 }
75 .slider-right,
76 .slider-left{
77 display: none;
78 }
79 }
80
81 #main{
82 .headline{ font-size: 36px; }
83 }
84
85 /* TABLET FEATURED----------------------------------------------------*/
86
87
88 .feature,
89 .work-list{
90 li{
91 width: 210px;
92 .thumb{
93 .date{
94 left: 105px - 35;
95 }
96 }
97 }
98 }
99
100 /* TABLET BLOG ----------------------------------------------------*/
101
102 #posts-list{
103 position: relative;
104 width: 672px;
105 margin-left: 20px;
106 margin-bottom: 40px;
107 float: left;
108 article{
109 position: relative;
110 margin-bottom: 60px;
111 .entry-right-data{
112 width: 573px;
113 }
114
115 }
116 }
117
118 /* TABLET SIDEBAR ----------------------------------------------------*/
119
120 #sidebar{
121 clear: both;
122 float: none;
123 margin: 0 auto 40px auto;
124 }
125
126 /* TABLET PROJECT ------------------------------------------------------------*/
127
128 #project-title{
129 font-size: 48px;
130 }
131
132 #project-gallery{
133 width: 362px;
134 }
135
136 #project-info{
137 width: 290px;
138 }
139
140 /* TABLET RELATED PROJECTS ------------------------------------------------------------*/
141
142 .related-projects{
143 margin-bottom: 80px;
144
145 .related-heading{
146 margin-bottom: 10px;
147 margin-left: 20px;
148 }
149
150 .related-list{
151 li{
152 float: left;
153 width: 210px;
154 }
155 }
156 }
157
158
159 /* TABLET WIDGETS ----------------------------------------------------*/
160
161 .widget-cols{
162 >li{
163 width: 153px;
164 margin-left: 20px;
165 }
166 }
167
168
169}
170
171
172
173/* Mobile Layout: 320px.
174 Gutters: 24px.
175 Outer margins: 34px.
176 Inherits styles from: Default Layout.
177---------------------------------------------
178cols 1 2 3
179px 68 160 252 */
180
181@media only screen and (max-width: 767px) {
182
183 .wrapper{ width: 252px; }
184
185 #main{
186 font-size: 14px;
187 }
188
189 h1{ font-size: 24px; }
190 h2{ font-size: 24px; }
191 h3{ font-size: 24px; }
192 h4{ font-size: 18px; }
193 h5{ font-size: 14px; }
194 h6{ font-size: 14px; }
195
196 /* MOBILE NAV ----------------------------------------------------*/
197
198 #nav{ display: none; }
199
200 #combo-holder{
201 }
202
203 #comboNav{
204 display: block;
205 width: 252px - 40;
206 margin-left: 20px;
207 }
208
209 /* MOBILE Logo ----------------------------------------------------*/
210
211 #logo{
212 width: 200px;
213 margin: 0 auto;
214 img{
215 width: 100%;
216 }
217 }
218
219
220 /* SLIDER ----------------------------------------------------*/
221
222 .theme-halftone {
223 margin-bottom: 20px;
224 .nivoSlider {
225 margin-left: -10px;
226 width: 100%;
227 margin-left: 0px;
228 }
229 .slider-right,
230 .slider-left{
231 display: none;
232 }
233 .nivo-controlNav{ display: none }
234
235 .nivo-directionNav{
236 display: block !important; /* ALWAYS show the arrows */
237 a {
238 width:16px;
239 height:16px;
240 background: @accentColor url(../img/arrows-mobile.png) no-repeat;
241 }
242 .nivo-prevNav {
243 left:0px;
244 }
245 .nivo-nextNav {
246 right:0px;
247 background-position:0px -16px;
248 }
249 }
250 }
251
252 #main{
253 .headline{
254 font-size: 24px;
255 }
256 }
257
258 /* MOBILE FEATURE----------------------------------------------------*/
259
260
261 .feature,
262 .work-list{
263 width: 212px;
264 margin-left: 20px;
265 li{
266 width: 212px;
267 margin-left: 0px;
268 .thumb{
269 .date{
270 left: 106px - 35;
271 }
272 }
273 }
274 }
275
276 /* MOBILE COLUMNS ----------------------------------------------------*/
277
278 .entry-content{
279 .one-half,
280 .one-third,
281 .one-fourth{
282 width: auto;
283 margin-right: 0px;
284 }
285 }
286
287
288
289 #main .page-navigation{
290 text-indent: -9000px;
291 div{
292 width: 25px;
293 }
294 }
295
296 /* MOBILE BLOG ----------------------------------------------------*/
297
298 #posts-list{
299 position: relative;
300 width: 252px - 40;
301 margin-left: 20px;
302 margin-bottom: 40px;
303 float: left;
304 article{
305 position: relative;
306 margin-bottom: 60px;
307 .entry-left-data{
308 width: 200px;
309 height: 20px;
310 float: left;
311 position: relative;
312 }
313 .entry-right-data{
314 width: 252px - 40;
315 margin-left: 0px;
316 .post-heading{
317 font-size: 24px;
318 }
319 }
320 .entry-date{
321 position: absolute;
322 top: -50px;
323 left: 106px - 30;
324 font-size: 18px;
325 width: 60px;
326 height: 60px;
327 }
328
329 .comments{
330 position: absolute;
331 top: -60px;
332 left: 200px;
333 display: none;
334 }
335 }
336 }
337
338 /* MOBILE SIDEBAR ----------------------------------------------------*/
339
340 #sidebar{
341 clear: both;
342 float: none;
343 margin: 0 auto 40px auto;
344 width: 252px;
345 .block{
346 background: #f1f1f1;
347 margin-bottom: 20px;
348 border: 1px solid #ccc;
349
350 .sidebar-content{
351 background: none;
352 width: 252px - 20;
353 padding-left: 10px;
354 padding-right: 10px;
355 margin-bottom: 0px;
356 padding-bottom: 10px;
357 }
358 .sidebar-top{
359 background: none;
360 width: 100%;
361 height: 38px;
362 }
363 .sidebar-bottom{
364 background: none;
365 width: 100%;
366 height: 38px;
367 }
368
369 }
370 }
371
372
373
374 /* MOBILE PROJECT ------------------------------------------------------------*/
375
376 #project-title{
377 font-size: 24px;
378 }
379
380 #project-gallery{
381 width: 212px;
382 }
383
384 #project-info{
385 width: 212px;
386 }
387
388 /* MOBILE RELATED PROJECTS ------------------------------------------------------------*/
389
390 .related-projects{
391 margin-bottom: 80px;
392
393 .related-heading{
394 margin-bottom: 10px;
395 margin-left: 20px;
396 }
397
398 .related-list{
399 li{
400 float: left;
401 width: 210px;
402 }
403 }
404 }
405
406 /* MOBILE WIDGETS ----------------------------------------------------*/
407
408 .widget-cols{
409 >li{
410 width: 212px;
411 float: left;
412 margin-left: 20px;
413 margin-right: 0px;
414 border-bottom: 1px solid @fgColor;
415 padding-bottom: 30px;
416 margin-bottom: 30px;
417 &:last-child{
418 border-bottom: none;
419 }
420 }
421 }
422
423 /* MOBILE Social ----------------------------------------------------*/
424
425 footer{
426 #social-bar{
427 margin: 20px 0px 30px 0px;
428 background: none;
429 height: 46px;
430 li{
431 margin-bottom: 5px;
432 }
433 .left-corner,
434 .right-corner{
435 display: none;
436 }
437 }
438
439
440 }
441}
442
443
444/* Wide Mobile Layout: 480px.
445 Gutters: 24px.
446 Outer margins: 22px.
447 Inherits styles from: Default Layout, Mobile Layout.
448------------------------------------------------------------
449cols 1 2 3 4 5
450px 68 160 252 344 436 */
451
452@media only screen and (min-width: 480px) and (max-width: 767px) {
453
454 @widemobile-w: 436px;
455
456 .wrapper{ width: @widemobile-w; }
457
458
459 /* WIDE MOBILE Logo ----------------------------------------------------*/
460
461 #logo{
462
463 img{
464 width: 100%;
465 }
466 }
467
468 /* WIDE MOBILE NAV ----------------------------------------------------*/
469
470 #nav{ display: none; }
471 #comboNav{
472 display: block;
473 width: 436px - 40;
474 margin-left: 20px;
475 }
476
477
478 /* WIDE MOBILE FEATURE ----------------------------------------------------*/
479
480 .feature,
481 .work-list{
482 width: 436px - 40;
483 margin-left: 20px;
484 li{
485 width: 436px - 40;
486 margin-left: 0px;
487 .thumb{
488 .date{
489 left: 198px - 35;
490 }
491 }
492 }
493 }
494
495 /* WIDE MOBILE BLOG ------------------------------------------------------------*/
496
497
498 #posts-list{
499 position: relative;
500 width: 436px - 40;
501 margin-left: 20px;
502 margin-bottom: 40px;
503 float: left;
504 article{
505 position: relative;
506 margin-bottom: 60px;
507 .entry-left-data{
508 width: 400px;
509 height: 20px;
510 float: left;
511 position: relative;
512 }
513 .entry-right-data{
514 width: 436px - 40;
515 margin-left: 0px;
516 }
517 .entry-date{
518 position: absolute;
519 top: -50px;
520 left: 200px - 35;
521 }
522
523 .comments{
524 position: absolute;
525 top: -60px;
526 left: 200px;
527 display: none;
528 }
529 }
530 }
531
532
533 /* WIDE MOBILE SIDEBAR ----------------------------------------------------*/
534
535 #sidebar{
536 position: relative;
537 width: 320px;
538 margin: 0px auto 40px auto;
539 float: none;
540
541
542 .block{
543 background: none;
544 border: none;
545 .sidebar-content{
546 background: url(../img/sidebar.png) repeat-y ;
547 width: 300px;
548 padding-left: 10px;
549 padding-right: 10px;
550 margin-bottom: 0px;
551 padding-bottom: 10px;
552 }
553 .sidebar-top{
554 background: url(../img/sidebar-top.png) no-repeat ;
555 width: 100%;
556 height: 38px;
557 }
558 .sidebar-bottom{
559 background: url(../img/sidebar-bottom.png) no-repeat;
560 width: 100%;
561 height: 38px;
562 }
563
564 }
565
566 .heading{
567 border-bottom: 1px solid #888;
568 margin-bottom: 20px;
569 text-align: center;
570 }
571
572 li{
573 display: block;
574 }
575
576 a{
577 color: @accentColor;
578 }
579 }
580
581
582 /* WIDE MOBILE PROJECT ------------------------------------------------------------*/
583
584 #project-title{
585 font-size: 24px;
586 }
587
588 #project-gallery{
589 width: 436px - 40;
590 }
591
592 #project-info{
593 width: 436px - 40;
594 }
595
596 /* WIDE MOBILE RELATED PROJECTS ------------------------------------------------------------*/
597
598 .related-projects{
599 .related-list{
600 li{
601 width: 436px - 40;
602 margin-bottom: 30px;
603 }
604 }
605 }
606
607 /* WIDE MOBILE WIDGETS ----------------------------------------------------*/
608
609 .widget-cols{
610 >li{
611 width: 436px - 40;
612 }
613 }
614}
615
616
617
618
619
620
621
Note: See TracBrowser for help on using the repository browser.