source: documentation/trunk/tutorial_sample_files/libraries/althor/css/lessframework.css@ 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: 8.2 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/* 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 ----------------------------------------------------*/.wrapper {
17 width: 940px;
18}
19/* Defaul tNav ----------------------------------------------------*/#comboNav {
20 display: none;
21}
22#nav {
23 display: block;
24}
25/* Tablet Layout: 768px.
26 Gutters: 24px.
27 Outer margins: 28px.
28 Inherits styles from: Default Layout.
29-----------------------------------------------------------------
30cols 1 2 3 4 5 6 7 8
31px 68 160 252 344 436 528 620 712 */
32@media only screen and (min-width: 768px) and (max-width: 991px) {
33 /* TABLET GENERAL ----------------------------------------------------*/.wrapper {
34 width: 712px;
35 }
36 /* TABLET NAV ----------------------------------------------------*/#nav {
37 display: block;
38 }
39 #comboNav {
40 display: none;
41 }
42 #nav li {
43 word-spacing: -0.1em;
44 font-size: 16px;
45 }
46 /* TABLE ISOTOPE ----------------------------------------------------*/.feature {
47 width: 732px;
48 /* 712 + 20 gap */
49
50 }
51 .feature li {
52 width: 223px;
53 }
54 .feature li .thumb {
55 width: 203px;
56 }
57 .feature li .thumb .date {
58 left: 71px;
59 }
60 /* TABLET BLOG ------------------------------------------------------------*/
61 #posts-list {
62 width: 420px;
63 }
64 #posts-list article {
65 padding: 15px;
66 }
67 #posts-list article .tape {
68 left: 150px;
69 }
70 #posts-list article .excerpt .post-heading {
71 max-width: 330px;
72 }
73 /* TABLET PORTFOLIO ----------------------------------------------------*/.portfolio-content .project-content {
74 float: left;
75 width: 430px;
76 }
77 .portfolio-content .project-info {
78 width: 160px;
79 }
80 /* TABLET RELATED PROJECTS ------------------------------------------------------------*/
81 .related-projects .related-list li {
82 width: 224px;
83 text-align: center;
84 margin-right: 20px;
85 }
86 .related-projects .related-list li .thumb {
87 background: #f3e4c8;
88 padding: 10px;
89 display: block;
90 line-height: 0em;
91 margin-bottom: 10px;
92 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
93 }
94 .related-projects .related-list li:last-child {
95 margin-right: 0px;
96 }
97 /* TABLET WIDGETS ----------------------------------------------------*/.widget-cols > li {
98 width: 163px;
99 float: left;
100 margin-right: 20px;
101 }
102}
103/* Mobile Layout: 320px.
104 Gutters: 24px.
105 Outer margins: 34px.
106 Inherits styles from: Default Layout.
107---------------------------------------------
108cols 1 2 3
109px 68 160 252 */
110@media only screen and (max-width: 767px) {
111 .wrapper {
112 width: 252px;
113 }
114 h1 {
115 font-size: 36px;
116 }
117 h2 {
118 font-size: 30px;
119 }
120 h3 {
121 font-size: 24px;
122 }
123 h4 {
124 font-size: 18px;
125 }
126 h5 {
127 font-size: 14px;
128 }
129 h6 {
130 font-size: 14px;
131 }
132 /* MOBILE NAV ----------------------------------------------------*/#nav {
133 display: none;
134 }
135 #comboNav {
136 display: block;
137 }
138 /* MOBILE Logo ----------------------------------------------------*/#logo {
139 width: 256px;
140 }
141 #logo img {
142 width: 100%;
143 }
144 /* MOBILE SLIDER ----------------------------------------------------*/body .theme-default .nivo-directionNav a {
145 display: none;
146 }
147 /* MOBILE HEALINE ----------------------------------------------------*/.headline {
148 font-family: mensch;
149 font-size: 24px;
150 line-height: 1.3em;
151 }
152 /* MOBILE ISOTOPE ----------------------------------------------------*/#filter-buttons {
153 font-size: 12px;
154 background: #f3e4c8;
155 height: auto;
156 }
157 .feature {
158 width: 252px;
159 margin-left: 0px;
160 }
161 .feature li {
162 width: 252px;
163 margin-left: 0px;
164 }
165 .feature li .thumb {
166 width: 232px;
167 }
168 .feature li .thumb .date {
169 left: 86px;
170 }
171 /* MOBILE COLUMNS ----------------------------------------------------*/.one-half,
172 .one-third,
173 .one-fourth {
174 width: auto;
175 margin-right: 0px;
176 }
177 /* MOBILE BLOG ------------------------------------------------------------*/
178 #posts-list {
179 width: 252px;
180 }
181 #posts-list article {
182 padding: 15px;
183 }
184 #posts-list article .tape {
185 left: 66px;
186 }
187 #posts-list article .feature-image .entry-date {
188 bottom: -66px;
189 right: auto;
190 left: 81px;
191 }
192 #posts-list article .excerpt {
193 margin-top: 90px;
194 }
195 #posts-list article .excerpt .post-heading {
196 max-width: auto;
197 font-size: 24px;
198 }
199 #main .page-navigation {
200 text-indent: -9000px;
201 }
202 #main .page-navigation div {
203 width: 25px;
204 }
205 /* MOBILE SIDEBAR ----------------------------------------------------*/#sidebar {
206 width: 260px;
207 }
208 /* MOBILE PORTFOLIO ----------------------------------------------------*/.portfolio-content .project-content {
209 float: left;
210 width: 192px;
211 }
212 .portfolio-content .project-info {
213 width: 160px;
214 }
215 /* MOBILE RELATED PROJECTS ------------------------------------------------------------*/
216 .related-projects .related-list li {
217 width: 252px;
218 margin-bottom: 30px;
219 }
220 /* MOBILE WIDGETS ----------------------------------------------------*/.widget-cols > li {
221 width: 252px;
222 float: left;
223 margin-right: 20px;
224 border-bottom: 1px solid #f3e4c8;
225 padding-bottom: 30px;
226 margin-bottom: 30px;
227 }
228 .widget-cols > li:last-child {
229 border-bottom: none;
230 }
231 /* MOBILE Social ----------------------------------------------------*/footer #social-bar {
232 margin: 20px 0px 30px 0px;
233 background: none;
234 height: 46px;
235 }
236 footer #social-bar li {
237 margin-bottom: 5px;
238 }
239 footer #social-bar .left-corner,
240 footer #social-bar .right-corner {
241 display: none;
242 }
243}
244/* Wide Mobile Layout: 480px.
245 Gutters: 24px.
246 Outer margins: 22px.
247 Inherits styles from: Default Layout, Mobile Layout.
248------------------------------------------------------------
249cols 1 2 3 4 5
250px 68 160 252 344 436 */
251@media only screen and (min-width: 480px) and (max-width: 767px) {
252 .wrapper {
253 width: 436px;
254 }
255 /* WIDE MOBILE Logo ----------------------------------------------------*/#logo {
256 width: 436px;
257 }
258 #logo img {
259 width: 100%;
260 }
261 /* WIDE MOBILE NAV ----------------------------------------------------*/#nav {
262 display: none;
263 }
264 #comboNav {
265 display: block;
266 }
267 /* WIDE MOBILE HEALINE ----------------------------------------------------*/.headline {
268 font-family: mensch;
269 font-size: 36px;
270 line-height: 1.3em;
271 }
272 /* WIDE MOBILE ISOTOPE ----------------------------------------------------*/.feature {
273 width: 436px;
274 margin-left: 0px;
275 }
276 .feature li {
277 width: 436px;
278 margin-left: 0px;
279 }
280 .feature li .thumb {
281 width: 416px;
282 }
283 .feature li .thumb .date {
284 left: 178px;
285 }
286 /* WIDE MOBILE BLOG ------------------------------------------------------------*/
287 #posts-list {
288 width: 436px;
289 }
290 #posts-list article {
291 padding: 15px;
292 }
293 #posts-list article .tape {
294 left: 156px;
295 }
296 #posts-list article .feature-image .entry-date {
297 bottom: -66px;
298 right: auto;
299 left: 171px;
300 }
301 #posts-list article .excerpt {
302 margin-top: 90px;
303 }
304 #posts-list article .excerpt .post-heading {
305 max-width: auto;
306 font-size: 24px;
307 }
308 /* WIDE MOBILE SIDEBAR ----------------------------------------------------*/#sidebar {
309 width: 436px;
310 }
311 /* WIDE MOBILE PORTFOLIO ----------------------------------------------------*/.portfolio-content .project-content {
312 float: left;
313 width: 376px;
314 }
315 .portfolio-content .project-info {
316 width: 346px;
317 }
318 /* WIDE MOBILE RELATED PROJECTS ------------------------------------------------------------*/
319 .related-projects .related-list li {
320 width: 436px;
321 margin-bottom: 30px;
322 }
323 /* WIDE MOBILE WIDGETS ----------------------------------------------------*/.widget-cols > li {
324 width: 436px;
325 }
326}
Note: See TracBrowser for help on using the repository browser.