Skip to content

Commit 7da299d

Browse files
mikejolleymikejolley
committed
New styles and logo
1 parent 6fbf88f commit 7da299d

File tree

5 files changed

+34
-97
lines changed

5 files changed

+34
-97
lines changed

‎source/images/logo.png

1008 Bytes
Loading

‎source/index.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ toc_footers:
1414
- <a href="https://github.com/woothemes/woocommerce/issues?labels=API&amp;page=1&amp;state=open">REST API Issues</a>
1515
- <a href="https://docs.woothemes.com/documentation/plugins/woocommerce/">WooCommerce Documentation</a>
1616
- <a href="https://github.com/woothemes/woocommerce">WooCommerce Repository</a>
17-
- <a href="https://github.com/tripit/slate">Documentation Powered by Slate</a>
1817

1918
includes:
2019
- wp-api-v1/introduction

‎source/layouts/layout.erb

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ under the License.
2020
<meta charset="utf-8">
2121
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
2222
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
23+
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
2324
<title><%= current_page.data.title || "API Documentation" %></title>
2425

2526
<%= stylesheet_link_tag :screen, media: :screen %>
@@ -48,7 +49,9 @@ under the License.
4849
</span>
4950
</a>
5051
<div class="tocify-wrapper">
51-
<%= image_tag "logo.png" %>
52+
<a href="#introduction" class="logo-wrapper">
53+
<%= image_tag "logo.png" %>
54+
</a>
5255
<% if language_tabs %>
5356
<div class="lang-selector">
5457
<% language_tabs.each do |lang| %>

‎source/stylesheets/_variables.scss

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,29 @@ under the License.
2323

2424
// BACKGROUND COLORS
2525
////////////////////
26-
$nav-bg: #393939;
26+
$nav-bg: #f7f7f7;
2727
$examples-bg: #393939;
28-
$code-bg: #292929;
28+
$code-bg: #3c3c3c;
2929
$code-annotation-bg: #1c1c1c;
30-
$nav-subitem-bg: #262626;
31-
$nav-active-bg: #2467af;
30+
$nav-subitem-bg: #f7f7f7;
31+
$nav-active-bg: #f7f7f7;
3232
$lang-select-border: #000;
3333
$lang-select-bg: #222;
3434
$lang-select-active-bg: $examples-bg; // feel free to change this to blue or something
3535
$lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed
36-
$main-bg: #eaf2f6;
36+
$main-bg: #ffffff;
3737
$aside-notice-bg: #8fbcd4;
3838
$aside-warning-bg: #c97a7e;
3939
$aside-success-bg: #6ac174;
4040
$search-notice-bg: #c97a7e;
41-
$link-color: #255a8c;
41+
$link-color: #804877;
4242

4343

4444
// TEXT COLORS
4545
////////////////////
4646
$main-text: #333; // main content text color
47-
$nav-text: #fff;
48-
$nav-active-text: #fff;
47+
$nav-text: #3c3c3c;
48+
$nav-active-text: #804877;
4949
$lang-select-text: #fff; // color of unselected language tab text
5050
$lang-select-active-text: #fff; // color of selected language tab text
5151
$lang-select-pressed-text: #fff; // color of language tab text when mouse is pressed
@@ -57,10 +57,9 @@ $nav-width: 230px; // width of the navbar
5757
$examples-width: 50%; // portion of the screen taken up by code examples
5858
$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
5959
$main-padding: 28px; // padding to left and right of content & examples
60-
$nav-padding: 15px; // padding to left and right of navbar
60+
$nav-padding: 20px; // padding to left and right of navbar
6161
$nav-v-padding: 10px; // padding used vertically around search boxes and results
62-
$nav-indent: 10px; // extra padding for ToC subitems
63-
$code-annotation-padding: 13px; // padding inside code annotations
62+
$code-annotation-padding: 20px; // padding inside code annotations
6463
$h1-margin-bottom: 21px; // padding under the largest header tags
6564
$tablet-width: 930px; // min width before reverting to tablet size
6665
$phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size
@@ -69,7 +68,7 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
6968
// FONTS
7069
////////////////////
7170
%default-font {
72-
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
71+
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
7372
font-size: 13px;
7473
}
7574

@@ -87,7 +86,7 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
8786

8887
// OTHER
8988
////////////////////
90-
$nav-active-shadow: #000;
89+
$nav-active-shadow: #f7f7f7;
9190
$nav-footer-border-color: #666;
9291
$nav-embossed-border-top: #000;
9392
$nav-embossed-border-bottom: #939393;

‎source/stylesheets/screen.css.scss

Lines changed: 18 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,6 @@ html, body {
4848
width: 20px;
4949
}
5050

51-
@mixin embossed-bg {
52-
background:
53-
linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0) 8px),
54-
linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px),
55-
linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
56-
linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
57-
$nav-subitem-bg;
58-
}
59-
6051
.tocify-wrapper {
6152
transition: left 0.3s ease-in-out;
6253

@@ -71,6 +62,7 @@ html, body {
7162
background-color: $nav-bg;
7263
font-size: 13px;
7364
font-weight: bold;
65+
border-right: 1px solid #ddd;
7466

7567
// language selector for mobile devices
7668
.lang-selector {
@@ -82,71 +74,22 @@ html, body {
8274
}
8375

8476
// This is the logo at the top of the ToC
85-
&>img {
77+
.logo-wrapper {
78+
padding: 10px 20px;
79+
margin: 0 0 10px;
8680
display: block;
87-
}
88-
89-
&>.search {
90-
position: relative;
91-
92-
input {
93-
background: $nav-bg;
94-
border-width: 0 0 1px 0;
95-
border-color: $search-box-border-color;
96-
padding: 6px 0 6px 20px;
97-
box-sizing: border-box;
98-
margin: $nav-v-padding $nav-padding;
99-
width: $nav-width - 30;
100-
outline: none;
101-
color: $nav-text;
102-
border-radius: 0; /* ios has a default border radius */
103-
}
81+
border-bottom: 1px solid #ddd;
10482

105-
&:before {
106-
position: absolute;
107-
top: 17px;
108-
left: $nav-padding;
109-
color: $nav-text;
110-
@extend %icon-search;
83+
img {
84+
display: block;
85+
width: 100%;
11186
}
11287
}
11388

11489
img+.tocify {
11590
margin-top: $logo-margin;
11691
}
11792

118-
.search-results {
119-
margin-top: 0;
120-
box-sizing: border-box;
121-
height: 0;
122-
overflow-y: auto;
123-
overflow-x: hidden;
124-
transition-property: height, margin;
125-
transition-duration: 180ms;
126-
transition-timing-function: ease-in-out;
127-
&.visible {
128-
height: 30%;
129-
margin-bottom: 1em;
130-
}
131-
132-
@include embossed-bg;
133-
134-
li {
135-
margin: 1em $nav-padding;
136-
line-height: 1;
137-
}
138-
139-
a {
140-
color: $nav-text;
141-
text-decoration: none;
142-
143-
&:hover {
144-
text-decoration: underline;
145-
}
146-
}
147-
}
148-
149-
15093
.tocify-item>a, .toc-footer li {
15194
padding: 0 $nav-padding 0 $nav-padding;
15295
display: block;
@@ -185,13 +128,12 @@ html, body {
185128
display: none; // tocify will override this when needed
186129
background-color: $nav-subitem-bg;
187130
font-weight: 500;
131+
188132
.tocify-item>a {
189-
padding-left: $nav-padding + $nav-indent;
133+
padding-left: $nav-padding + 10;
190134
font-size: 12px;
191135
}
192136

193-
// for embossed look:
194-
@include embossed-bg;
195137
&>li:last-child {
196138
box-shadow: none; // otherwise it'll overflow out of the subheader
197139
}
@@ -213,7 +155,7 @@ html, body {
213155

214156
li {
215157
font-size: 0.8em;
216-
line-height: 1.7;
158+
line-height: 28px;
217159
text-decoration: none;
218160
}
219161
}
@@ -328,6 +270,7 @@ html, body {
328270
// to place content above the dark box
329271
position: relative;
330272
z-index: 30;
273+
padding-top: 44px;
331274

332275
&:after {
333276
content: '';
@@ -340,9 +283,8 @@ html, body {
340283
padding: 0 $main-padding;
341284
box-sizing: border-box;
342285
display: block;
343-
@include text-shadow($main-embossed-text-shadow);
344-
345286
@extend %left-col;
287+
font-weight: normal;
346288
}
347289

348290
&>ul, &>ol {
@@ -356,30 +298,24 @@ html, body {
356298

357299
h1 {
358300
@extend %header-font;
359-
font-size: 30px;
360-
padding-top: 0.5em;
361-
padding-bottom: 0.5em;
362-
border-bottom: 1px solid #ccc;
363-
margin-bottom: $h1-margin-bottom;
364-
margin-top: 2em;
301+
font-size: 26px;
302+
margin-top: 4em;
303+
margin-bottom: 20px;
304+
padding-top: 20px;
365305
border-top: 1px solid #ddd;
366-
background-image: linear-gradient(to bottom, #fff, #f9f9f9);
367306
}
368307

369308
h1:first-child, div:first-child + h1 {
370309
border-top-width: 0;
371310
margin-top: 0;
311+
border-top: 0;
372312
}
373313

374314
h2 {
375315
@extend %header-font;
376316
font-size: 20px;
377317
margin-top: 4em;
378318
margin-bottom: 0;
379-
border-top: 1px solid #ccc;
380-
padding-top: 1.2em;
381-
padding-bottom: 1.2em;
382-
background-image: linear-gradient(to bottom, rgba(#fff, 0.4), rgba(#fff, 0));
383319
}
384320

385321
// h2s right after h1s should bump right up

0 commit comments

Comments
 (0)