diff options
author | Matthew Fitzsimmons <matt@joyent.com> | 2012-01-22 08:02:16 +0400 |
---|---|---|
committer | isaacs <i@izs.me> | 2012-01-24 01:11:32 +0400 |
commit | 831c8199f66fee18c68fcc56c96767cca5591e61 (patch) | |
tree | bffb35fbd2d19a6148c9e0e2715bc99a63800405 /doc/pipe.css | |
parent | 6c0c00a2052ec613503a0322dcbabb6fcf41dab0 (diff) |
Nodejs.org design refresh.
Diffstat (limited to 'doc/pipe.css')
-rw-r--r-- | doc/pipe.css | 246 |
1 files changed, 223 insertions, 23 deletions
diff --git a/doc/pipe.css b/doc/pipe.css index 3da6d120a92..09f0a8bb30d 100644 --- a/doc/pipe.css +++ b/doc/pipe.css @@ -13,6 +13,11 @@ body { border-top: 6px #8cc84b solid; } +body.alt { + background: white; + color: #46483e; +} + img { border: 0; } @@ -29,6 +34,15 @@ h1, h2, h3, h4 { margin-left: 0; text-transform: uppercase; } +h1 { + font-family: Georgia, FreeSerif, Times, serif; + font-size: 30px; + line-height: 36px; + text-transform: none; + color: #669900; + font-weight: normal; + margin-top: 1em; +} h2 { font-size: 12px; @@ -62,15 +76,24 @@ h1 a, h2 a, h3 a, h4 a font-size: 14px; } +#intro.interior #logo { + margin-left: -130px; +} + +#intro p.version { + padding-top: 10px; + font-size: 12px; +} + #intro .button { font-weight: bold; font-size: 14px; text-transform: uppercase; - padding: 7px 10px; + padding: 6px 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - margin: 0 5px; + margin: 0 1px; color: #46483e; } @@ -87,7 +110,7 @@ h1 a, h2 a, h3 a, h4 a } #intro #docsbutton { - background-color: #d2d8ba; + background-color: #9a9f8b; } #intro #docsbutton:hover { @@ -141,30 +164,146 @@ h1 a, h2 a, h3 a, h4 a } #content { - width: 775px; + width: 800px; margin: 0 auto; + overflow: visible; + clear: both; + display: block; } -#content #column1 { - width: 420px; +#column1 { + width: 460px; float: left; } -#content #column2 { +#content p { + font-size: 14px; +} + +#content h1 + p { + font-size: 18px; + line-height: 30px; + color: #46483e; + font-family: Georgia, FreeSerif, Times, serif; +} + +#column2 { width: 260px; float: right; } -#content #column1.interior { - width: 510px; +#column1.interior { + width: 590px; float: right; + padding-top: 20px; +} + +#column2.interior { + width: 160px; + float: left; + margin-top: -50px; + overflow: visible; } -#content #column2.interior { +#column2.interior li { + list-style-type: none; +} + +#column2.interior li a { + display: block; + padding: 1px 0px 1px 40px; + color: #878b78; + text-transform: uppercase; +} + +#column2.interior li a.home { background: url(icons-interior.png) no-repeat -158px 3px; } +#column2.interior li a.download { background: url(icons-interior.png) no-repeat -158px -21px; } +#column2.interior li a.about { background: url(icons-interior.png) no-repeat -158px -44px; } +#column2.interior li a.npm { background: url(icons-interior.png) no-repeat -158px -70px; } +#column2.interior li a.docs { background: url(icons-interior.png) no-repeat -158px -93px; } +#column2.interior li a.blog { background: url(icons-interior.png) no-repeat -158px -117px; } +#column2.interior li a.community { background: url(icons-interior.png) no-repeat -158px -140px; } +#column2.interior li a.logos { background: url(icons-interior.png) no-repeat -158px -164px; } +#column2.interior li a.jobs { background: url(icons-interior.png) no-repeat -158px -189px; } + +#column2.interior li a.home.current { background-position: left 3px; } +#column2.interior li a.download.current { background-position: left -21px; } +#column2.interior li a.about.current { background-position: left -44px; } +#column2.interior li a.npm.current { background-position: left -70px; } +#column2.interior li a.docs.current { background-position: left -93px; } +#column2.interior li a.blog.current { background-position: left -117px; } +#column2.interior li a.community.current { background-position: left -140px; } +#column2.interior li a.logos.current { background-position: left -164px; } +#column2.interior li a.jobs.current { background-position: left -189px; } +#column2.interior li a.current { color: #8cc84b; font-weight: bold; } + +#column2.interior li a.home:hover { background-position: -333px 3px; } +#column2.interior li a.download:hover { background-position: -333px -21px; } +#column2.interior li a.about:hover { background-position: -333px -44px; } +#column2.interior li a.npm:hover { background-position: -333px -70px; } +#column2.interior li a.docs:hover { background-position: -333px -93px; } +#column2.interior li a.blog:hover { background-position: -333px -117px; } +#column2.interior li a.community:hover { background-position: -333px -140px; } +#column2.interior li a.logos:hover { background-position: -333px -164px; } +#column2.interior li a.jobs:hover { background-position: -333px -189px; } +#column2.interior li a:hover { color: #000000; text-decoration: none; } + +#column2.interior li + li { + border-top: 1px solid #c1c7ac; +} + +#column2.interior p.twitter { + padding-top: 20px; +} + +#column2.interior p.twitter a { + background: url(twitter-bird.png) no-repeat 0 4px; + padding-left: 37px; +} + +.row { + padding-top: 20px; + padding-bottom: 20px; +} + +.row + .row { + border-top: 1px solid #626557; +} + +.row h2 { + font-size: 24px; + color: white; + text-transform: none; + font-family: Georgia, FreeSerif, Times, serif; + background: url(community-icons.png) no-repeat; + padding-left: 45px; + padding-top: 6px; + padding-bottom: 10px; + margin-top: 10px; +} + +.row h2.github { background-position: left -92px; } +.row h2.mailing { background-position: left -308px; } +.row h2.periodicals { background-position: left -198px; padding-top: 9px; margin-top: 7px; } +.row h2.conferences { background-position: left -522px; } +.row h2.localized { background-position: left -414px; } +.row h2.irc { background-position: left -626px; } + +.block { + width: 280px; + float: left; +} + +.block + .block { + margin-left: 30px; +} + +#content .block p { + font-size: 12px; } #explore { - background: url(icons.png) no-repeat left 15px; + background: url(home-icons.png) no-repeat left 11px; } #explore li { @@ -209,16 +348,54 @@ h1 a, h2 a, h3 a, h4 a #footer p { color: #8BC84B; - height: 32px; - padding-top: 3px; - background: url(footer-logo.png) left top no-repeat; - padding-left: 130px; + font-size: 10px; + padding-left: 195px; + color: #878b78; } #footer p a { text-decoration: underline; + color: #878b78; +} + +#footer ul { + background: url(footer-logo.png) left top no-repeat; + padding-left: 195px; + height: 26px; + padding-top: 6px; +} +.alt #footer ul { + background-image: url(footer-logo-alt.png); +} + +#footer ul li { + list-style-type: none; + display: block; + float: left; +} + +#footer ul li a { + margin: 0; + padding: 0; } +#footer ul li + li { + height: 12px; + margin-left: 3px; +} + +#footer ul li + li a { + padding: 0 0 0 4px; + border-left: 1px solid #878b78; +} + +#footer ul li a.twitter { + background: url(twitter-bird.png) no-repeat 0 2px; + padding-left: 19px; +} + + + div#download { position: absolute; width: 580px; @@ -326,17 +503,41 @@ pre { border-left-color: #626557; } +.alt pre { + font-size: 14px; + margin-left: 0; + border-left: 2px solid #dadad7; + background-color: #f4f4f2; + color: #46483e; + padding: 1em 1.5em; + line-height: 2em; +} + +.alt code { + color: #996633; +} + dd { margin: 1em 0; margin-left: 1em; } + a { color: #8BC84B; text-decoration: none; } a:hover { text-decoration: underline; } +.alt a { + background-color: #eff2db; + padding: 0 2px; +} + +.alt #intro a, .alt #footer a { + background-color: transparent; +} + .highlight { background: #733; padding: 0.2em 0; @@ -350,12 +551,11 @@ a:hover { text-decoration: underline; } } /* simpler clearfix */ -.clearfix { - /* be an independent layout island */ - overflow:hidden; - /* but don't actually cut anything off */ - height:auto; - /* trigger hasLayout in IE */ - zoom:1; - /* fin. */ +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } + |