[docs] Update site nav
Ben Alpert committed
Mar 26, 2015 at 10:06 UTC
ca663994022415897358e0fa1eb60003d737b268
2 files changed
+23
-13
docs/_layouts/default.html
+10
-6
@@ -45,12 +45,16 @@
45
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
46
React
47
</a>
48
- <ul class="nav-site">
49
- <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>docs</a></li>
50
- <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li>
51
- <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li>
52
- <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li>
53
- <li><a href="https://github.com/facebook/react">github</a>
48
+ <ul class="nav-site nav-site-internal">
49
+ <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>Docs</a></li>
50
+ <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
51
+ <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
52
+ <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
53
+ </ul>
54
+
55
+ <ul class="nav-site nav-site-external">
56
+ <li><a href="https://github.com/facebook/react">GitHub</a>
57
+ <li><a href="http://facebook.github.io/react-native/">React Native</a>
58
</ul>
59
</div>
60
</div>
docs/css/react.scss
+13
-7
@@ -111,25 +111,30 @@ h1, h2, h3, h4, h5, h6 {
111
text-decoration: none;
112
}
113
114
- .nav-site {
114
+ .nav-site-internal {
115
+ margin: 0 0 0 20px;
116
+ }
117
+
118
+ .nav-site-external {
119
float: right;
120
margin: 0;
121
+ }
122
123
+ .nav-site {
124
li {
125
margin: 0;
126
}
127
128
a {
123
- padding: 0 8px;
124
- text-transform: uppercase;
125
- letter-spacing: 1px;
129
+ box-sizing: content-box;
130
+ padding: 0 10px;
131
line-height: $navHeight;
132
display: inline-block;
133
height: $navHeight;
129
- color: $mediumTextColor;
134
+ color: #ddd;
135
136
&:hover {
132
- color: $lightTextColor;
137
+ color: #fff;
138
}
139
140
&.active {
@@ -154,7 +159,8 @@ h1, h2, h3, h4, h5, h6 {
159
}
160
161
ul {
157
- display: inline;
162
+ display: inline-block;
163
+ vertical-align: top;
164
}
165
166
li {