Skip to content

Commit 831c819

Browse files
Matthew Fitzsimmonsisaacs
Matthew Fitzsimmons
authored and
isaacs
committed
Nodejs.org design refresh.
1 parent 6c0c00a commit 831c819

File tree

9 files changed

+737
-201
lines changed

9 files changed

+737
-201
lines changed

‎doc/about/index.html‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,34 +18,49 @@
1818
href="http://feeds.feedburner.com/nodejs/123123123">
1919
<title>node.js</title>
2020
</head>
21-
<body>
22-
<div id="intro">
21+
<body class="alt">
22+
<div id="intro" class="interior">
2323
<a href="/" title="Go back to the home page">
24-
<img id="logo" src="../logo.png" alt="node.js">
24+
<img id="logo" src="../logo-light.png" alt="node.js">
2525
</a>
2626
</div>
2727
<div id="content" class="clearfix">
28+
<div id="column2" class="interior">
29+
<ul>
30+
<li><a href="/" class="home">Home</a></li>
31+
<li><a href="/#download" class="download">Download</a></li>
32+
<li><a href="/about/" class="about current">About</a></li>
33+
<li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
34+
<li><a href="http://nodejs.org/docs/latest/api/index.html" class="docs">Docs</a></li>
35+
<li><a href="http://blog.nodejs.org" class="blog">Blog</a></li>
36+
<li><a href="/community/" class="community">Community</a></li>
37+
<li><a href="/logos/" class="logos">Logos</a></li>
38+
<li><a href="http://jobs.nodejs.org/" class="jobs">Jobs</a></li>
39+
</ul>
40+
<p class="twitter"><a href="http://twitter.com/nodejs">@nodejs</a></p>
41+
</div>
42+
2843
<div id="column1" class="interior">
29-
<h2>About</h2>
44+
<h1>Node's goal is to provide an easy way to build scalable
45+
network programs</h1>
3046

31-
<pre>
32-
var http = require('http');
33-
http.createServer(function (req, res) {
34-
res.writeHead(200, {'Content-Type': 'text/plain'});
35-
res.end('Hello World\n');
36-
}).listen(1337, "127.0.0.1");
37-
console.log('Server running at http://127.0.0.1:1337/');</pre>
3847

39-
<p>Node's goal is to provide an easy way to build scalable
40-
network programs. In the "hello world" web server example
41-
above, many client connections can be handled concurrently.
48+
<p>In the "hello world" web server example
49+
below, many client connections can be handled concurrently.
4250
Node tells the operating system (through <code>epoll</code>,
4351
<code>kqueue</code>, <code>/dev/poll</code>, or
4452
<code>select</code>) that it should be notified when a new
4553
connection is made, and then it goes to sleep. If someone new
4654
connects, then it executes the callback. Each connection is
4755
only a small heap allocation.</p>
4856

57+
<pre>
58+
var http = require('http');
59+
http.createServer(function (req, res) {
60+
res.writeHead(200, {'Content-Type': 'text/plain'});
61+
res.end('Hello World\n');
62+
}).listen(1337, "127.0.0.1");
63+
console.log('Server running at http://127.0.0.1:1337/');</pre>
4964
<p>This is in contrast to today's more common concurrency
5065
model where OS threads are employed. Thread-based networking
5166
is relatively inefficient and very difficult to use. See: <a
@@ -99,16 +114,26 @@ <h2>About</h2>
99114
<li><a href="http://nodejs.org/jsconf2010.pdf">Slides from JSConf 2010</a></li>
100115
<li><a href="http://www.yuiblog.com/blog/2010/05/20/video-dahl/">Video from a talk at Yahoo in May 2010</a></li>
101116
</ul>
102-
<p><a href="/">Go back to the home page</a></p>
103117
</div>
104-
<div id="column2" class="interior">
105-
</div>
106118
</div>
107119
<div id="footer">
108-
<p>Copyright <a href="http://joyent.com">Joyent, Inc</a>, Node.js
109-
is a <a href="trademark-policy.pdf">trademark of Joyent, Inc</a>.
120+
<ul class="clearfix">
121+
<li><a href="/">Node.js</a></li>
122+
<li><a href="/#download">Download</a></li>
123+
<li><a href="/about/">About</a></li>
124+
<li><a href="http://search.npmjs.org/">npm Registry</a></li>
125+
<li><a href="http://nodejs.org/docs/latest/api/index.html">Docs</a></li>
126+
<li><a href="http://blog.nodejs.org">Blog</a></li>
127+
<li><a href="/community/">Community</a></li>
128+
<li><a href="/logos/">Logos</a></li>
129+
<li><a href="http://jobs.nodejs.org/">Jobs</a></li>
130+
<li><a hrfe="http://twitter.com/nodejs" class="twitter">@nodejs</a></li>
131+
</ul>
132+
133+
<p>Copyright 2010 <a href="http://joyent.com">Joyent, Inc</a>, Node.js is a <a href="trademark-policy.pdf">trademark</a> of Joyent, Inc. View <a href="https://raw.github.com/joyent/node/v0.6.8/LICENSE">license</a>.</p>
110134
</div>
111135

136+
112137
<script src="../sh_main.js"></script>
113138
<script src="../sh_javascript.min.js"></script>
114139
<script>highlight(undefined, undefined, 'pre');</script>

‎doc/api_assets/style.css‎

Lines changed: 216 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
/*--------------------- Layout and Typography ----------------------------*/
2+
html {
3+
-webkit-font-smoothing: antialiased;
4+
}
5+
26
body {
3-
// font-family: "Helvetica Neue", Helvetica, FreeSans, Arial, sans-serif;
4-
font-family: Georgia, FreeSerif, Times, serif;
5-
font-size: 0.9375em;
6-
line-height: 1.4667em;
7-
color: #222;
8-
margin: 0; padding: 0;
7+
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
8+
font-size: 14px;
9+
line-height: 180%;
10+
color: black;
11+
margin: 0; padding: 40px 0 0 0;
12+
border-top: 6px #8CC84B solid;
913
}
1014
a {
11-
color: #0050c0;
15+
color: #669900;
1216
text-decoration: underline;
1317
}
1418
a:visited {
15-
color: #b950b7;
19+
color: #46483e;
1620
text-decoration: underline;
1721
}
1822
a:hover, a:focus {
@@ -28,6 +32,18 @@ a {
2832
display: none;
2933
}
3034

35+
#gtoc a {
36+
font-family: Georgia, FreeSerif, Times, serif;
37+
font-size: 16px;
38+
text-decoration: none;
39+
color: #46483e;
40+
}
41+
42+
#gtoc a:hover {
43+
color: #669900;
44+
text-decoration: underline;
45+
}
46+
3147
.notice {
3248
display: block;
3349
padding: 1em;
@@ -89,15 +105,18 @@ dd + dt.pre {
89105
}
90106

91107
h1, h2, h3, h4, h5, h6 {
92-
font-family: Georgia, FreeSerif, Times, serif;
108+
font-family: Helvetica, Arial, sans-serif
93109
color: #000;
94110
text-rendering: optimizeLegibility;
95111
position: relative;
96112
}
97113

98114
h1 {
99-
font-size: 2.55em;
100-
line-height: 1.375em;
115+
font-family: Georgia, FreeSerif, Times, serif;
116+
font-size: 30px;
117+
font-weight: normal;
118+
line-height: 36px;
119+
color: #669900;
101120
}
102121

103122
h2 {
@@ -159,12 +178,13 @@ h6 {
159178
}
160179

161180
pre {
162-
padding: 2em 1.6em 2em 1.2em;
181+
padding: 1em 1.6em 1em 1.2em;
163182
vertical-align: top;
164183
background: #f8f8f8;
165184
border: 1px solid #e8e8e8;
166185
border-width: 1px 1px 1px 6px;
167186
margin: -0.5em 0 1.1em;
187+
overflow-x:auto;
168188
}
169189

170190
pre + h3 {
@@ -175,28 +195,27 @@ code.pre {
175195
white-space: pre;
176196
}
177197

178-
#container {
179-
position: relative;
180-
padding: 6em;
181-
max-width: 50em;
182-
text-align: left;
198+
#intro {
199+
width: 775px;
200+
margin: 0 auto;
201+
text-align: center;
202+
color: #d2d8ba;
203+
204+
/* preload platform-icons.png */
205+
background-image: url(platform-icons.png);
206+
background-repeat: no-repeat;
207+
background-position: -1000px -1000px;
183208
}
184209

185-
#container header {
186-
margin: 1.25em -0.5em 1.3em;
187-
padding: 0 0.5em 0.225em;
210+
#intro.interior #logo {
211+
margin-left: -130px;
188212
}
189213

190214
hr {
191215
background: none;
192216
border: medium none;
193217
border-bottom: 1px solid #ccc;
194-
margin: 5em 0 2em;
195-
}
196-
197-
#container header hr {
198-
margin: 0;
199-
padding: 0;
218+
margin: 2em 0 2em;
200219
}
201220

202221
#toc {
@@ -242,3 +261,174 @@ a.octothorpe {
242261
h6:hover > a.octothorpe {
243262
opacity: 1;
244263
}
264+
#content {
265+
width: 800px;
266+
margin: 0 auto;
267+
overflow: visible;
268+
clear: both;
269+
display: block;
270+
}
271+
272+
#column1.interior {
273+
width: 590px;
274+
float: right;
275+
padding-top: 20px;
276+
}
277+
278+
#column2.interior {
279+
width: 160px;
280+
float: left;
281+
margin-top: -50px;
282+
overflow: visible;
283+
}
284+
285+
#column2.interior ul {
286+
margin-left: 0;
287+
}
288+
289+
#column2.interior li {
290+
list-style-type: none;
291+
}
292+
293+
#column2.interior li a {
294+
display: block;
295+
padding: 0 0 0 40px;
296+
color: #878b78;
297+
text-transform: uppercase;
298+
text-decoration: none;
299+
font-size: 12px;
300+
line-height: 23px;
301+
}
302+
303+
#column2.interior li a.home { background: url(icons-interior.png) no-repeat -158px 3px; }
304+
#column2.interior li a.download { background: url(icons-interior.png) no-repeat -158px -21px; }
305+
#column2.interior li a.about { background: url(icons-interior.png) no-repeat -158px -44px; }
306+
#column2.interior li a.npm { background: url(icons-interior.png) no-repeat -158px -70px; }
307+
#column2.interior li a.docs { background: url(icons-interior.png) no-repeat -158px -93px; }
308+
#column2.interior li a.blog { background: url(icons-interior.png) no-repeat -158px -117px; }
309+
#column2.interior li a.community { background: url(icons-interior.png) no-repeat -158px -140px; }
310+
#column2.interior li a.logos { background: url(icons-interior.png) no-repeat -158px -164px; }
311+
#column2.interior li a.jobs { background: url(icons-interior.png) no-repeat -158px -189px; }
312+
313+
#column2.interior li a.home.current { background-position: left 3px; }
314+
#column2.interior li a.download.current { background-position: left -21px; }
315+
#column2.interior li a.about.current { background-position: left -44px; }
316+
#column2.interior li a.npm.current { background-position: left -70px; }
317+
#column2.interior li a.docs.current { background-position: left -93px; }
318+
#column2.interior li a.blog.current { background-position: left -117px; }
319+
#column2.interior li a.community.current { background-position: left -140px; }
320+
#column2.interior li a.logos.current { background-position: left -164px; }
321+
#column2.interior li a.jobs.current { background-position: left -189px; }
322+
#column2.interior li a.current { color: #8cc84b; font-weight: bold; }
323+
324+
#column2.interior li a.home:hover { background-position: -333px 3px; }
325+
#column2.interior li a.download:hover { background-position: -333px -21px; }
326+
#column2.interior li a.about:hover { background-position: -333px -44px; }
327+
#column2.interior li a.npm:hover { background-position: -333px -70px; }
328+
#column2.interior li a.docs:hover { background-position: -333px -93px; }
329+
#column2.interior li a.blog:hover { background-position: -333px -117px; }
330+
#column2.interior li a.community:hover { background-position: -333px -140px; }
331+
#column2.interior li a.logos:hover { background-position: -333px -164px; }
332+
#column2.interior li a.jobs:hover { background-position: -333px -189px; }
333+
#column2.interior li a:hover { color: #000000; text-decoration: none; }
334+
335+
#column2.interior li + li {
336+
border-top: 1px solid #c1c7ac;
337+
}
338+
#column2.interior p.twitter {
339+
padding-top: 20px;
340+
}
341+
342+
#column2.interior p.twitter a {
343+
background: url(twitter-bird.png) no-repeat 0 4px;
344+
padding-left: 37px;
345+
text-decoration: none;
346+
}
347+
348+
#column2.interior p.twitter a:hover {
349+
text-decoration: underline;
350+
}
351+
352+
a.totop {
353+
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
354+
font-weight: bold;
355+
text-indent: -9999999px;
356+
background: url(anchor.png) no-repeat top left;
357+
margin-right: 7px;
358+
display: block;
359+
width: 13px;
360+
border-bottom: 1px solid #cccccc;
361+
}
362+
363+
a.anchor {
364+
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
365+
font-weight: bold;
366+
text-indent: -9999999px;
367+
background: url(anchor.png) no-repeat top right;
368+
display: block;
369+
width: 13px;
370+
border-bottom: 1px solid #cccccc;
371+
}
372+
#footer {
373+
width: 775px;
374+
border-top: 1px solid #626557;
375+
margin: 50px auto 30px auto;
376+
padding-top: 15px;
377+
}
378+
379+
#footer p {
380+
color: #8BC84B;
381+
font-size: 10px;
382+
padding-left: 195px;
383+
color: #878b78;
384+
}
385+
386+
#footer p a {
387+
text-decoration: underline;
388+
color: #878b78;
389+
}
390+
391+
#footer ul {
392+
background: url(footer-logo-alt.png) left top no-repeat;
393+
padding-left: 195px;
394+
height: 26px;
395+
padding-top: 6px;
396+
margin-left: 0;
397+
}
398+
399+
#footer ul li {
400+
list-style-type: none;
401+
display: block;
402+
float: left;
403+
font-size: 12px;
404+
}
405+
406+
#footer ul li a {
407+
margin: 0;
408+
padding: 0;
409+
}
410+
411+
#footer ul li + li {
412+
height: 12px;
413+
margin-left: 3px;
414+
}
415+
416+
#footer ul li + li a {
417+
padding: 0 0 0 4px;
418+
border-left: 1px solid #878b78;
419+
}
420+
421+
#footer ul li a.twitter {
422+
background: url(twitter-bird.png) no-repeat 0 2px;
423+
padding-left: 19px;
424+
}
425+
426+
/* simpler clearfix */
427+
.clearfix:after {
428+
content: ".";
429+
display: block;
430+
height: 0;
431+
clear: both;
432+
visibility: hidden;
433+
}
434+

0 commit comments

Comments
 (0)