source: main/trunk/greenstone3/web/interfaces/therin/css/lessframework.css@ 28644

Last change on this file since 28644 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: 11.0 KB
RevLine 
[28644]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/* Default Layout: 992px.
10 Gutters: 24px.
11 Outer margins: 48px.
12 Leftover space for scrollbars @1024px: 32px.
13-------------------------------------------------------------------------------
14cols 1 2 3 4 5 6 7 8 9 10
15px 68 160 252 344 436 528 620 712 804 896 */
16/* Vars ----------------------------------------------------*//* Mixins ----------------------------------------------------*//* Default General ----------------------------------------------------*//* Defaul tNav ----------------------------------------------------*/#comboNav {
17 display: none;
18}
19#nav {
20 display: block;
21}
22/* Tablet Layout: 768px.
23 Gutters: 24px.
24 Outer margins: 28px.
25 Inherits styles from: Default Layout.
26-----------------------------------------------------------------
27cols 1 2 3 4 5 6 7 8
28px 68 160 252 344 436 528 620 712 */
29@media only screen and (min-width: 768px) and (max-width: 991px) {
30 /* TABLET GENERAL ----------------------------------------------------*/.wrapper {
31 width: 712px;
32 }
33 /* TABLET NAV ----------------------------------------------------*/#nav {
34 display: block;
35 }
36 #comboNav {
37 display: none;
38 }
39 #nav li {
40 margin-left: 0px;
41 margin-right: 0px;
42 font-size: 16px;
43 }
44 /* TABLET SLIDER ----------------------------------------------------*/.theme-halftone .nivoSlider {
45 margin-left: -10px;
46 width: 100%;
47 margin-left: 0px;
48 }
49 .theme-halftone .slider-right,
50 .theme-halftone .slider-left {
51 display: none;
52 }
53 #main .headline {
54 font-size: 36px;
55 }
56 /* TABLET FEATURED----------------------------------------------------*/.feature li,
57 .work-list li {
58 width: 210px;
59 }
60 .feature li .thumb .date,
61 .work-list li .thumb .date {
62 left: 70px;
63 }
64 /* TABLET BLOG ----------------------------------------------------*/#posts-list {
65 position: relative;
66 width: 672px;
67 margin-left: 20px;
68 margin-bottom: 40px;
69 float: left;
70 }
71 #posts-list article {
72 position: relative;
73 margin-bottom: 60px;
74 }
75 #posts-list article .entry-right-data {
76 width: 573px;
77 }
78 /* TABLET SIDEBAR ----------------------------------------------------*/#sidebar {
79 clear: both;
80 float: none;
81 margin: 0 auto 40px auto;
82 }
83 /* TABLET PROJECT ------------------------------------------------------------*/
84 #project-title {
85 font-size: 48px;
86 }
87 #project-gallery {
88 width: 362px;
89 }
90 #project-info {
91 width: 290px;
92 }
93 /* TABLET RELATED PROJECTS ------------------------------------------------------------*/
94 .related-projects {
95 margin-bottom: 80px;
96 }
97 .related-projects .related-heading {
98 margin-bottom: 10px;
99 margin-left: 20px;
100 }
101 .related-projects .related-list li {
102 float: left;
103 width: 210px;
104 }
105 /* TABLET WIDGETS ----------------------------------------------------*/.widget-cols > li {
106 width: 153px;
107 margin-left: 20px;
108 }
109}
110/* Mobile Layout: 320px.
111 Gutters: 24px.
112 Outer margins: 34px.
113 Inherits styles from: Default Layout.
114---------------------------------------------
115cols 1 2 3
116px 68 160 252 */
117@media only screen and (max-width: 767px) {
118 .wrapper {
119 width: 252px;
120 }
121 #main {
122 font-size: 14px;
123 }
124 h1 {
125 font-size: 24px;
126 }
127 h2 {
128 font-size: 24px;
129 }
130 h3 {
131 font-size: 24px;
132 }
133 h4 {
134 font-size: 18px;
135 }
136 h5 {
137 font-size: 14px;
138 }
139 h6 {
140 font-size: 14px;
141 }
142 /* MOBILE NAV ----------------------------------------------------*/#nav {
143 display: none;
144 }
145 #comboNav {
146 display: block;
147 width: 212px;
148 margin-left: 20px;
149 }
150 /* MOBILE Logo ----------------------------------------------------*/#logo {
151 width: 200px;
152 margin: 0 auto;
153 }
154 #logo img {
155 width: 100%;
156 }
157 /* SLIDER ----------------------------------------------------*/.theme-halftone {
158 margin-bottom: 20px;
159 }
160 .theme-halftone .nivoSlider {
161 margin-left: -10px;
162 width: 100%;
163 margin-left: 0px;
164 }
165 .theme-halftone .slider-right,
166 .theme-halftone .slider-left {
167 display: none;
168 }
169 .theme-halftone .nivo-controlNav {
170 display: none;
171 }
172 .theme-halftone .nivo-directionNav {
173 display: block !important;
174 /* ALWAYS show the arrows */
175
176 }
177 .theme-halftone .nivo-directionNav a {
178 width: 16px;
179 height: 16px;
180 background: #e37655 url(../img/arrows-mobile.png) no-repeat;
181 }
182 .theme-halftone .nivo-directionNav .nivo-prevNav {
183 left: 0px;
184 }
185 .theme-halftone .nivo-directionNav .nivo-nextNav {
186 right: 0px;
187 background-position: 0px -16px;
188 }
189 #main .headline {
190 font-size: 24px;
191 }
192 /* MOBILE FEATURE----------------------------------------------------*/.feature,
193 .work-list {
194 width: 212px;
195 margin-left: 20px;
196 }
197 .feature li,
198 .work-list li {
199 width: 212px;
200 margin-left: 0px;
201 }
202 .feature li .thumb .date,
203 .work-list li .thumb .date {
204 left: 71px;
205 }
206 /* MOBILE COLUMNS ----------------------------------------------------*/.entry-content .one-half,
207 .entry-content .one-third,
208 .entry-content .one-fourth {
209 width: auto;
210 margin-right: 0px;
211 }
212 #main .page-navigation {
213 text-indent: -9000px;
214 }
215 #main .page-navigation div {
216 width: 25px;
217 }
218 /* MOBILE BLOG ----------------------------------------------------*/#posts-list {
219 position: relative;
220 width: 212px;
221 margin-left: 20px;
222 margin-bottom: 40px;
223 float: left;
224 }
225 #posts-list article {
226 position: relative;
227 margin-bottom: 60px;
228 }
229 #posts-list article .entry-left-data {
230 width: 200px;
231 height: 20px;
232 float: left;
233 position: relative;
234 }
235 #posts-list article .entry-right-data {
236 width: 212px;
237 margin-left: 0px;
238 }
239 #posts-list article .entry-right-data .post-heading {
240 font-size: 24px;
241 }
242 #posts-list article .entry-date {
243 position: absolute;
244 top: -50px;
245 left: 76px;
246 font-size: 18px;
247 width: 60px;
248 height: 60px;
249 }
250 #posts-list article .comments {
251 position: absolute;
252 top: -60px;
253 left: 200px;
254 display: none;
255 }
256 /* MOBILE SIDEBAR ----------------------------------------------------*/#sidebar {
257 clear: both;
258 float: none;
259 margin: 0 auto 40px auto;
260 width: 252px;
261 }
262 #sidebar .block {
263 background: #f1f1f1;
264 margin-bottom: 20px;
265 border: 1px solid #ccc;
266 }
267 #sidebar .block .sidebar-content {
268 background: none;
269 width: 232px;
270 padding-left: 10px;
271 padding-right: 10px;
272 margin-bottom: 0px;
273 padding-bottom: 10px;
274 }
275 #sidebar .block .sidebar-top {
276 background: none;
277 width: 100%;
278 height: 38px;
279 }
280 #sidebar .block .sidebar-bottom {
281 background: none;
282 width: 100%;
283 height: 38px;
284 }
285 /* MOBILE PROJECT ------------------------------------------------------------*/
286 #project-title {
287 font-size: 24px;
288 }
289 #project-gallery {
290 width: 212px;
291 }
292 #project-info {
293 width: 212px;
294 }
295 /* MOBILE RELATED PROJECTS ------------------------------------------------------------*/
296 .related-projects {
297 margin-bottom: 80px;
298 }
299 .related-projects .related-heading {
300 margin-bottom: 10px;
301 margin-left: 20px;
302 }
303 .related-projects .related-list li {
304 float: left;
305 width: 210px;
306 }
307 /* MOBILE WIDGETS ----------------------------------------------------*/.widget-cols > li {
308 width: 212px;
309 float: left;
310 margin-left: 20px;
311 margin-right: 0px;
312 border-bottom: 1px solid #ece9d6;
313 padding-bottom: 30px;
314 margin-bottom: 30px;
315 }
316 .widget-cols > li:last-child {
317 border-bottom: none;
318 }
319 /* MOBILE Social ----------------------------------------------------*/footer #social-bar {
320 margin: 20px 0px 30px 0px;
321 background: none;
322 height: 46px;
323 }
324 footer #social-bar li {
325 margin-bottom: 5px;
326 }
327 footer #social-bar .left-corner,
328 footer #social-bar .right-corner {
329 display: none;
330 }
331}
332/* Wide Mobile Layout: 480px.
333 Gutters: 24px.
334 Outer margins: 22px.
335 Inherits styles from: Default Layout, Mobile Layout.
336------------------------------------------------------------
337cols 1 2 3 4 5
338px 68 160 252 344 436 */
339@media only screen and (min-width: 480px) and (max-width: 767px) {
340 .wrapper {
341 width: 436px;
342 }
343 /* WIDE MOBILE Logo ----------------------------------------------------*/#logo img {
344 width: 100%;
345 }
346 /* WIDE MOBILE NAV ----------------------------------------------------*/#nav {
347 display: none;
348 }
349 #comboNav {
350 display: block;
351 width: 396px;
352 margin-left: 20px;
353 }
354 /* WIDE MOBILE FEATURE ----------------------------------------------------*/.feature,
355 .work-list {
356 width: 396px;
357 margin-left: 20px;
358 }
359 .feature li,
360 .work-list li {
361 width: 396px;
362 margin-left: 0px;
363 }
364 .feature li .thumb .date,
365 .work-list li .thumb .date {
366 left: 163px;
367 }
368 /* WIDE MOBILE BLOG ------------------------------------------------------------*/
369 #posts-list {
370 position: relative;
371 width: 396px;
372 margin-left: 20px;
373 margin-bottom: 40px;
374 float: left;
375 }
376 #posts-list article {
377 position: relative;
378 margin-bottom: 60px;
379 }
380 #posts-list article .entry-left-data {
381 width: 400px;
382 height: 20px;
383 float: left;
384 position: relative;
385 }
386 #posts-list article .entry-right-data {
387 width: 396px;
388 margin-left: 0px;
389 }
390 #posts-list article .entry-date {
391 position: absolute;
392 top: -50px;
393 left: 165px;
394 }
395 #posts-list article .comments {
396 position: absolute;
397 top: -60px;
398 left: 200px;
399 display: none;
400 }
401 /* WIDE MOBILE SIDEBAR ----------------------------------------------------*/#sidebar {
402 position: relative;
403 width: 320px;
404 margin: 0px auto 40px auto;
405 float: none;
406 }
407 #sidebar .block {
408 background: none;
409 border: none;
410 }
411 #sidebar .block .sidebar-content {
412 background: url(../img/sidebar.png) repeat-y;
413 width: 300px;
414 padding-left: 10px;
415 padding-right: 10px;
416 margin-bottom: 0px;
417 padding-bottom: 10px;
418 }
419 #sidebar .block .sidebar-top {
420 background: url(../img/sidebar-top.png) no-repeat;
421 width: 100%;
422 height: 38px;
423 }
424 #sidebar .block .sidebar-bottom {
425 background: url(../img/sidebar-bottom.png) no-repeat;
426 width: 100%;
427 height: 38px;
428 }
429 #sidebar .heading {
430 border-bottom: 1px solid #888;
431 margin-bottom: 20px;
432 text-align: center;
433 }
434 #sidebar li {
435 display: block;
436 }
437 #sidebar a {
438 color: #e37655;
439 }
440 /* WIDE MOBILE PROJECT ------------------------------------------------------------*/
441 #project-title {
442 font-size: 24px;
443 }
444 #project-gallery {
445 width: 396px;
446 }
447 #project-info {
448 width: 396px;
449 }
450 /* WIDE MOBILE RELATED PROJECTS ------------------------------------------------------------*/
451 .related-projects .related-list li {
452 width: 396px;
453 margin-bottom: 30px;
454 }
455 /* WIDE MOBILE WIDGETS ----------------------------------------------------*/.widget-cols > li {
456 width: 396px;
457 }
458}
Note: See TracBrowser for help on using the repository browser.