Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Use LESS (client side), IE fixes, gradient updates

  • Loading branch information...
commit f35ecad85fafaf52ef47f830213f5419fda322f7 1 parent d33efdc
Steven Garrity authored
171 css/style.css → css/sandstone.less
... ... @@ -1,3 +1,16 @@
  1 +/* {{{ LESS Vars */
  2 +
  3 +@text-color-primary: #333;
  4 +@text-color-secondary: #484848;
  5 +@text-color-light: #bbb;
  6 +
  7 +@link-blue: #67a7d0;
  8 +
  9 +.open-sans {
  10 + font-family: 'Open Sans', sans-serif;
  11 +}
  12 +
  13 +/* }}} */
1 14 /* {{{ Resets */
2 15 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video {
3 16 margin: 0;
@@ -52,19 +65,16 @@ a img { border: 0; }
52 65
53 66 body {
54 67 font: 16px/24px Georgia, serif;
55   - color: #333;
  68 + color: @text-color-primary;
56 69 background: #fff;
57 70 }
58 71
59 72 #wrapper {
60   - background-color: #f2f0ee;
61   - background-image: url(../img/stripes.png), -moz-radial-gradient(left top, circle, rgba(250, 221, 195,1) 2%, rgba(238, 215, 211,0.75) 20%, rgba(238, 215, 211,0) 40%);
62   - background-position: 0 0, 0 0;
63   - background-repeat: repeat-x, no-repeat;
  73 + background: #f2f0ee url(../img/bg.png) 0 0 repeat-x;
64 74 }
65 75
66 76 a {
67   - color: #67a7d0;
  77 + color: @link-blue;
68 78 text-decoration: none;
69 79 }
70 80
@@ -74,7 +84,7 @@ a:active {
74 84 }
75 85
76 86 h1, h2, h3, h4, h5, h6 {
77   - font-family: 'Open Sans', sans-serif;
  87 + .open-sans;
78 88 font-weight: 300;
79 89 margin: 24px 0 12px 0;
80 90 }
@@ -278,100 +288,121 @@ px 68 160 252 344 436 */
278 288 /* }}} */
279 289 /* {{{ Header Nav */
280 290
281   -#masthead h1 {
282   - padding: 48px 0 24px 0;
283   - margin: 0;
284   -}
  291 +#masthead {
285 292
286   -#masthead nav {
287   - float: right;
288   - margin-right: 16px;
289   - font-family: 'Open Sans', sans-serif;
290   - text-transform: uppercase;
291   - font-size: 13px;
292   -}
  293 + h1 {
  294 + padding: 48px 0 24px 0;
  295 + margin: 0;
  296 + }
293 297
294   -#masthead nav ul li {
295   - list-style-type: none;
296   - display: inline;
297   -}
  298 + nav {
  299 + float: right;
  300 + margin-right: 16px;
  301 + text-transform: uppercase;
  302 + font-size: 13px;
  303 + .open-sans;
298 304
299   -#masthead nav ul a,
300   -#masthead nav ul span {
301   - display: inline-block;
302   - padding: 12px;
303   -}
  305 + ul li {
  306 + list-style-type: none;
  307 + display: inline;
  308 +
  309 + a,
  310 + span {
  311 + display: inline-block;
  312 + padding: 12px;
  313 + }
  314 +
  315 + a,
  316 + a:link,
  317 + a:visited {
  318 + color: @text-color-secondary;
  319 + }
  320 +
  321 + }
  322 +
  323 + }
304 324
305   -#masthead nav ul a,
306   -#masthead nav ul a:link,
307   -#masthead nav ul a:visited {
308   - color: #484848;
309 325 }
310 326
  327 +
311 328 /* }}} */
312 329 /* {{{ Header Breadcrumbs */
313 330
314   -#masthead nav.breadcrumbs {
315   - float: none;
316   - padding: 24px 0;
317   -}
  331 +#masthead {
318 332
319   -#masthead .breadcrumbs a,
320   -#masthead .breadcrumbs span {
321   - margin-right: 1em;
322   - margin-left: 1em;
323   -}
  333 + nav.breadcrumbs {
  334 + float: none;
  335 + padding: 24px 0;
  336 +
  337 + a,
  338 + span {
  339 + margin-right: 1em;
  340 + margin-left: 1em;
  341 + }
  342 +
  343 + a:first-child,
  344 + span:first-child {
  345 + margin-left: 0;
  346 + }
  347 +
  348 + }
324 349
325   -#masthead .breadcrumbs a:first-child,
326   -#masthead .breadcrumbs span:first-child {
327   - margin-left: 0;
328 350 }
329 351
330 352 /* }}} */
331 353 /* {{{ Sidebar */
332 354
333   -#sidebar nav {
334   - font-family: 'Open Sans', sans-serif;
335   - font-size: 16px;
336   - font-weight: 300;
337   - color: #484848;
338   -}
  355 +#sidebar {
339 356
340   -#sidebar nav li {
341   - list-style-type: none;
342   - border-bottom: 1px dotted #ccc;
343   -}
  357 + nav {
  358 + .open-sans;
  359 + font-size: 16px;
  360 + font-weight: 300;
  361 + color: @text-color-secondary;
344 362
345   -#sidebar nav li:first-child {
346   - font-size: 24px;
347   -}
  363 + li {
  364 + list-style-type: none;
  365 + border-bottom: 1px dotted #ccc;
348 366
349   -#sidebar nav li a,
350   -#sidebar nav li b {
351   - display: block;
352   - padding: 8px 0;
353   -}
  367 + a,
  368 + b {
  369 + display: block;
  370 + padding: 8px 0;
  371 + }
  372 +
  373 + li b {
  374 + font-weight: 600;
  375 + }
  376 +
  377 + }
  378 +
  379 + li:first-child {
  380 + font-size: 24px;
  381 + }
  382 +
  383 + }
354 384
355   -#sidebar nav li b {
356   - font-weight: 600;
357 385 }
358 386
359 387 /* }}} */
360 388 /* {{{ Footer */
361 389
362 390 #colophon {
363   - color: #bbb;
  391 + color: @text-color-light;
364 392 padding: 48px 0;
365 393 font-size: 14px;
366 394 line-height: 18px;
367   -}
368 395
369   -#colophon nav {
370   - font-family: 'Open Sans', sans-serif;
371   -}
  396 + nav {
  397 + .open-sans;
  398 +
  399 + ul li {
  400 + list-style-type: none;
  401 + margin-left: 0;
  402 + }
  403 +
  404 + }
372 405
373   -#colophon nav ul li {
374   - list-style-type: none;
375 406 }
376 407
377 408 /* }}} */
BIN  img/bg.png
BIN  img/footer-mozilla.png
BIN  img/mozilla.png
BIN  img/stripes.png
5 index.html
@@ -12,7 +12,10 @@
12 12 <meta name="viewport" content="width=device-width">
13 13
14 14 <link href="//www.mozilla.org/tabzilla/media/css/tabzilla.css" rel="stylesheet">
15   - <link rel="stylesheet" href="css/style.css">
  15 + <link rel="stylesheet/less" type="text/css" href="css/sandstone.less">
  16 +
  17 + <script src="//www.mozilla.org/js/html5.js" type="text/javascript"></script>
  18 + <script src="js/less.js" type="text/javascript"></script>
16 19
17 20 </head>
18 21 <body>
3,293 js/less.js
3,293 additions, 0 deletions not shown

0 comments on commit f35ecad

Please sign in to comment.
Something went wrong with that request. Please try again.