Skip to content

Commit 6bae5f9

Browse files
knollearyknolleary
committed
New design
1 parent 58ecf51 commit 6bae5f9

25 files changed

+652
-301
lines changed

‎_includes/footer.html

-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
<div class="container">
2-
<div class="footer">
3-
<p>
4-
<a href="http://github.com/node-red/node-red"><i class="icon-github icon-3x"></i></a>
5-
&nbsp;&nbsp;&nbsp;
6-
<a href="http://twitter.com/nodered"><i class="icon-twitter icon-3x"></i></a>
7-
&nbsp;&nbsp;&nbsp;
8-
<a href="https://groups.google.com/forum/#!forum/node-red"><i class="icon-envelope icon-3x"></i></a>
9-
&nbsp;&nbsp;&nbsp;
10-
<a href="http://blog.nodered.org/rss"><i class="icon-rss icon-3x"></i></a>
11-
</p>
12-
<p>&copy; IBM Corp. 2013</p>
13-
</div>
14-
</div>
15-
<script src="/jquery/js/jquery-1.9.1.js"></script>
16-
<script src="/bootstrap/js/bootstrap.min.js"></script>
171
<script>
182
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
193
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

‎_includes/header.html

+18-23
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,29 @@
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Node-RED{% if page.title %} : {{ page.title }}{% endif %}</title>
7+
78
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100' rel='stylesheet' type='text/css'>
8-
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
9-
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
10-
<link href="/bootstrap/css/bootstrap.slate.min.css" rel="stylesheet" media="screen">
11-
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
9+
<link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
1210
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
1311

12+
<link href="/css/simplegrid.css" rel="stylesheet" media="screen">
1413
<link href="/css/style.css" rel="stylesheet" media="screen">
14+
<link href="/css/front.css" rel="stylesheet" media="screen">
15+
<link href="/css/docs.css" rel="stylesheet" media="screen">
16+
<link href="/css/blog.css" rel="stylesheet" media="screen">
1517
</head>
1618
<body>
17-
<div class="navbar navbar-inverse navbar-fixed-top shadow">
18-
<div class="navbar-inner">
19-
<div class="container">
20-
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
21-
<span class="icon-bar"></span>
22-
<span class="icon-bar"></span>
23-
<span class="icon-bar"></span>
24-
</button>
25-
<a class="brand" href="/"><img src="/node-red.png"> Node-RED</a>
26-
<div class="nav-collapse collapse pull-right">
27-
<ul class="nav">
28-
<li{% if page.url == "/index.html" %} class="current"{% endif %}><a href="http://nodered.org">home</a></li>
29-
<li><a href="http://blog.nodered.org">blog</a></li>
30-
<li{% if page.url contains "/docs/" %} class="current"{% endif %}><a href="http://nodered.org/docs/">documentation</a></li>
31-
<li><a href="http://flows.nodered.org">flows</a></li>
19+
20+
<div class="header">
21+
<div class="header-content">
22+
<div class="brand"><a href="/"><img class="logo" src="/node-red.png" /> Node-RED</a></div>
23+
<ul class="navigation">
24+
<li {% if page.url == "/index.html" %}class="current"{% endif %}><a href="/">home</a></li>
25+
<li><a href="http://blog.nodered.org/">blog</a></li>
26+
<li {% if page.url contains '/docs/' %}class="current"{% endif %}><a href="/docs/">documentation</a></li>
27+
<li><a href="http://flows.nodered.org/">flows</a></li>
3228
<li><a href="http://github.com/node-red/node-red">github</a></li>
33-
</ul>
34-
</div>
35-
</div>
29+
</ul>
3630
</div>
37-
</div>
31+
</div>
32+

‎_layouts/default.html

+22-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
11
{% include header.html %}
2-
<div class="banner">
3-
<div class="container main-content">
4-
<div class="row-fluid">
5-
<div class="span3">
6-
<ul class="toc">
2+
<div class="docs">
3+
<div class="grid">
4+
<div class="col-3-12">
5+
<ul class="toc">
76
{% include docs-toc.html %}
8-
</ul>
9-
</div>
10-
<div class="span9">
11-
<!-- <h3 class="pagetitle">{{ page.title }}</h3> -->
12-
<div class="main-content-content">
7+
</ul>
8+
</div>
9+
<div class="col-9-12">
10+
<div class="docs-content">
1311
{{ content }}
14-
</div>
1512
</div>
1613
</div>
1714
</div>
1815
</div>
16+
17+
<div class="footer">
18+
<div class="grid">
19+
<div class="content">
20+
<a class="link-icon" href="http://github.com/node-red/node-red"><i class="icon-github icon-2x"></i></a>
21+
<a class="link-icon" href="http://twitter.com/nodered"><i class="icon-twitter icon-2x"></i></a>
22+
<a class="link-icon" href="https://groups.google.com/forum/#!forum/node-red"><i class="icon-envelope icon-2x"></i></a>
23+
<a class="link-icon" href="http://blog.nodered.org/rss"><i class="icon-rss icon-2x"></i></a>
24+
<div class="ets-link"><a href="http://ibm.com/blogs/et">Node-RED is a creation of IBM Emerging Technology</a></div>
25+
<div class="ets-link"><a href="http://ibm.com/blogs/et"><img class="ets-globe" src="/images/ets-globe.png" /> </a></div>
26+
</div>
27+
</div>
28+
</div>
29+
1930
{% include footer.html %}

‎css/blog.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.post-header h2 {
2+
margin-bottom: 10px;
3+
}
4+
5+
.sidebar a.icon {
6+
margin: 0 10px;
7+
font-size: 20px;
8+
}
9+
.sidebar h4 {
10+
margin-bottom: 5px;
11+
}
12+
.sidebar p {
13+
margin: 5px 0;
14+
}
15+
16+
.pagination {
17+
padding: 25px 0;
18+
text-align: center;
19+
}
20+
21+
.page-number {
22+
display: inline-block;
23+
width: 200px;
24+
}
25+
.sidebar {
26+
margin-top: 30px;
27+
}

‎css/docs.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.docs {
2+
background: #eee;
3+
font-size: 16px;
4+
}
5+
.docs .grid {
6+
background: #fff;
7+
padding: 0 30px;
8+
min-height: 730px;
9+
}
10+
ul.toc {
11+
/* border-radius: 5px; */
12+
overflow: hidden;
13+
list-style-type: none;
14+
margin: 18px 0 20px 0;
15+
padding: 0;
16+
/*border: 1px solid #ccc;*/
17+
border-right: 1px solid #ddd;
18+
}
19+
ul.toc > li:first-child {
20+
border-bottom: 1px solid #ddd;
21+
}
22+
ul.toc > li {
23+
/*border-bottom: 1px solid #ccc;*/
24+
background: /*#eee;*/ #fff;
25+
}
26+
ul.toc > li:last-child {
27+
border-bottom: none;
28+
}
29+
ul.toc li a {
30+
padding: 8px 10px;
31+
display: block;
32+
width: 100%;
33+
height: 100%;
34+
color: /*#272b30;*/ #999;
35+
}
36+
ul.toc li a:hover {
37+
text-decoration:none;
38+
background: /*#ddd;*/ #eee;
39+
}
40+
ul.toc > li > ul {
41+
margin: 0;
42+
padding:0;
43+
list-style-type: none;
44+
}
45+
46+
ul.toc > li > ul > li {
47+
/*border-top: 1px solid #dadada;*/
48+
}
49+
ul.toc > li > ul > li a {
50+
padding: 6px 6px 6px 30px;
51+
}
52+
53+
54+
ul.toc > li a.active {
55+
color: /*#fff;*/ #333;
56+
background: /*#a8a8a8;*/ #ddd;
57+
}
58+
59+
60+
.docs-content a {
61+
color: #aa6767;
62+
}
63+
64+
.docs-content img {
65+
max-width: 100%;
66+
}
67+
.docs-content pre {
68+
padding: 4px 10px;
69+
background: #444;
70+
color: #FFF7BB;
71+
border-radius: 3px;
72+
}
73+
pre,code {
74+
font-family: 'PT Mono', Monospace;
75+
}
76+
code {
77+
font-size: 0.95em;
78+
}
79+
80+
pre {
81+
white-space: pre-wrap;
82+
white-space: -moz-pre-wrap;
83+
white-space: -pre-wrap;
84+
white-space: -o-pre-wrap;
85+
word-wrap: break-word;
86+
}

‎css/front.css

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
.title, .intro, .nodes {
2+
background: #eee;
3+
}
4+
5+
.features {
6+
background: #fff;
7+
}
8+
9+
.links {
10+
background: #666;
11+
}
12+
13+
.links .grid {
14+
color: #eee;
15+
padding-top: 80px;
16+
padding-bottom: 80px;
17+
font-family: Arial;
18+
}
19+
20+
.links a {
21+
color: #eee;
22+
23+
}
24+
.links .content {
25+
font-size: 20px;
26+
}
27+
.link-icon {
28+
display: inline-block;
29+
vertical-align: middle;
30+
width: 50px;
31+
}
32+
.link-icon:hover {
33+
text-decoration: none;
34+
}
35+
36+
.links .content {
37+
height: auto;
38+
min-height: 0;
39+
margin: 20px auto;
40+
}
41+
42+
.links .col-1-2 .content {
43+
width: 350px;
44+
}
45+
.links .headline {
46+
margin: 0 auto 80px auto;
47+
}
48+
49+
.content {
50+
min-height: 250px;
51+
margin: 80px 0;
52+
}
53+
54+
.blurb p {
55+
margin-top: 0;
56+
}
57+
.blurb h3, .nodes h3 {
58+
margin-top: 0;
59+
margin-bottom: 0.5em;
60+
}
61+
.feature {
62+
max-width: 485px;
63+
margin-left: auto;
64+
margin-right: auto;
65+
text-align: center;
66+
}
67+
68+
.feature img {
69+
max-width: 445px;
70+
width: 100%;
71+
}
72+
.title .content {
73+
margin: 80px 0 0px 0;
74+
height: 280px;
75+
text-align: center;
76+
}
77+
.title h1 {
78+
margin-bottom: 10px;
79+
color: #676767;
80+
}
81+
.title h2 {
82+
margin-top: 0px;
83+
font-size: 20px;
84+
font-family: "Roboto Slab";
85+
font-weight: normal;
86+
color: #555;
87+
}
88+
.title img {
89+
margin: auto;
90+
max-width: 769px;
91+
width: 100%;
92+
}
93+
94+
.nodes .content {
95+
height: auto;
96+
min-height: 0;
97+
margin: 40px auto;
98+
}
99+
.nodes .col-1-2 .content {
100+
width: 290px;
101+
}
102+
103+
.nodes .grid {
104+
padding-top: 40px;
105+
padding-bottom: 40px;
106+
}
107+
.node-image {
108+
width: 100px;
109+
vertical-align: top;
110+
display: inline-block;
111+
}
112+
.node-block {
113+
vertical-align: top;
114+
display: inline-block;
115+
margin-left: 10px;
116+
}
117+
118+
.headline h3 {
119+
text-align: center;
120+
}
121+
.nodes h4 {
122+
font-family: "Arial";
123+
font-weight: normal;
124+
margin-top: 3px;
125+
height: 50px;
126+
font-size: 16px;
127+
}
128+
129+
.helplink {
130+
text-align: center;
131+
font-size: 14px;
132+
}
133+
.helplink a {
134+
color: #aa6767;
135+
}
136+

0 commit comments

Comments
 (0)