Skip to content

Commit 8a1750e

Browse files
teesloaneteesloane
authored
Merge pull request circleci#4482 from circleci/tjs/slate-styling
Slate API styling.
2 parents f76918d + d974fb0 commit 8a1750e

File tree

9 files changed

+150
-28
lines changed

9 files changed

+150
-28
lines changed

‎jekyll/_sass/_variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
$body-text-color: #555;
33
$heading-color: #333;
44
$nav-bg-color: #FBFBFB;
5+
$nav-search-res-bg-color: darken($nav-bg-color, 10%);
56
$nav-border-color: #CCC;
67
$link-text-color: #27A0B6;
78
$link-hover-color: #36D4ED;
@@ -56,4 +57,4 @@ $font-size-h5: 18px;
5657
// Font Weights
5758
$font-weight-base: 400;
5859
$font-weight-thin: 100;
59-
$font-weight-bold: 600;
60+
$font-weight-bold: 600;

‎src-api/source/images/circle-logo-api.svg

+34
Loading

‎src-api/source/images/favicon.ico

97.7 KB
Binary file not shown.

‎src-api/source/images/logo.png

20.2 KB
Loading

‎src-api/source/images/new-window.svg

+11
Loading

‎src-api/source/layouts/layout.erb

+13-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ under the License.
2929
<meta charset="utf-8">
3030
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
3131
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
32+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
3233
<title><%= current_page.data.title || "API Documentation" %></title>
33-
<%= favicon_tag 'favicon.ico.png' %>
34+
<%= favicon_tag 'favicon.ico' %>
3435

3536
<style>
3637
<%= Rouge::Themes::MonokaiSublime.render(:scope => '.highlight') %>
@@ -58,7 +59,7 @@ under the License.
5859
</a>
5960
<div class="toc-wrapper">
6061
<a href="https://circleci.com/docs/">
61-
<%= image_tag "logo.png", class: 'logo' %>
62+
<%= image_tag "logo.png", width: '90%', class: 'logo' %>
6263
</a>
6364
<% if language_tabs.any? %>
6465
<div class="lang-selector">
@@ -104,6 +105,16 @@ under the License.
104105
<div class="page-wrapper">
105106
<div class="dark-box"></div>
106107
<div class="content">
108+
<div class="header-links">
109+
<a class="content-link" href="https://circleci.com/docs/2.0">
110+
Documentation
111+
<%= image_tag "new-window.svg", width: '90%', class: 'new-window' %>
112+
</a>
113+
<a class="content-link" href="https://circleci.com">
114+
circleci.com
115+
<%= image_tag "new-window.svg", width: '90%', class: 'new-window' %>
116+
</a>
117+
</div>
107118
<%= page_content %>
108119
</div>
109120
<div class="dark-box">

‎src-api/source/stylesheets/_variables.scss

+14-10
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,23 @@ under the License.
2121
// Use these settings to help adjust the appearance of Slate
2222

2323

24+
$circle-blue: #19639A;
25+
2426
// BACKGROUND COLORS
2527
////////////////////
26-
$nav-bg: #2E3336 !default;
28+
29+
$nav-bg: #F3F3F3 !default;
30+
$nav-subitem-bg: darken($nav-bg, 3%) !default;
31+
$nav-active-parent-bg: #F3F3F3 !default; // parent links of the current section
32+
$nav-active-bg: #F3F3F3 !default;
2733
$examples-bg: #2E3336 !default;
2834
$code-bg: #1E2224 !default;
2935
$code-annotation-bg: #191D1F !default;
30-
$nav-subitem-bg: #1E2224 !default;
31-
$nav-active-bg: #0F75D4 !default;
32-
$nav-active-parent-bg: #1E2224 !default; // parent links of the current section
3336
$lang-select-border: #000 !default;
3437
$lang-select-bg: #1E2224 !default;
3538
$lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
3639
$lang-select-pressed-bg: #111 !default; // color of language tab bg when mouse is pressed
37-
$main-bg: #F3F7F9 !default;
40+
$main-bg: #FDFDFD !default;
3841
$aside-notice-bg: #8fbcd4 !default;
3942
$aside-warning-bg: #c97a7e !default;
4043
$aside-success-bg: #6ac174 !default;
@@ -44,17 +47,17 @@ $search-notice-bg: #c97a7e !default;
4447
// TEXT COLORS
4548
////////////////////
4649
$main-text: #333 !default; // main content text color
47-
$nav-text: #fff !default;
48-
$nav-active-text: #fff !default;
49-
$nav-active-parent-text: #fff !default; // parent links of the current section
50+
$nav-text: #000000 !default;
51+
$nav-active-text: $circle-blue !default;
52+
$nav-active-parent-text: #19639A !default; // parent links of the current section
5053
$lang-select-text: #fff !default; // color of unselected language tab text
5154
$lang-select-active-text: #fff !default; // color of selected language tab text
5255
$lang-select-pressed-text: #fff !default; // color of language tab text when mouse is pressed
5356

5457

5558
// SIZES
5659
////////////////////
57-
$nav-width: 250px !default; // width of the navbar
60+
$nav-width: 260px !default; // width of the navbar
5861
$examples-width: 50% !default; // portion of the screen taken up by code examples
5962
$logo-margin: 0px !default; // margin below logo
6063
$main-padding: 28px !default; // padding to left and right of content & examples
@@ -65,12 +68,13 @@ $code-annotation-padding: 13px !default; // padding inside code annotations
6568
$h1-margin-bottom: 21px !default; // padding under the largest header tags
6669
$tablet-width: 930px !default; // min width before reverting to tablet size
6770
$phone-width: $tablet-width - $nav-width !default; // min width before reverting to mobile size
71+
$toc-h2-size: 14px;
6872

6973

7074
// FONTS
7175
////////////////////
7276
%default-font {
73-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
77+
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7478
font-size: 14px;
7579
}
7680

‎src-api/source/stylesheets/screen.css.scss

+75-14
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ html, body {
7373

7474
// This is the logo at the top of the ToC
7575
.logo {
76-
display: block;
77-
width: 100%;
78-
max-width: 100%;
79-
margin-bottom: $logo-margin;
76+
align-self: center;
77+
max-width: 80%;
78+
text-align: center;
79+
display: flex;
8080
}
8181

8282
&>.search {
@@ -86,20 +86,22 @@ html, body {
8686
background: $nav-bg;
8787
border-width: 0 0 1px 0;
8888
border-color: $search-box-border-color;
89-
padding: 6px 0 6px 20px;
89+
padding: 6px 0 6px 24px;
9090
box-sizing: border-box;
9191
margin: $nav-v-padding $nav-padding;
9292
width: $nav-width - ($nav-padding*2);
9393
outline: none;
9494
color: $nav-text;
9595
border-radius: 0; /* ios has a default border radius */
96+
font-size: 16px;
9697
}
9798

9899
&:before {
99100
position: absolute;
100101
top: 17px;
101102
left: $nav-padding;
102103
color: $nav-text;
104+
font-size: 16px;
103105
@extend %icon-search;
104106
}
105107
}
@@ -113,10 +115,12 @@ html, body {
113115
transition-property: height, margin;
114116
transition-duration: 180ms;
115117
transition-timing-function: ease-in-out;
116-
background: $nav-subitem-bg;
118+
background: darken($nav-subitem-bg, 2%);
117119
&.visible {
118-
height: 30%;
120+
height: 20%;
119121
margin-bottom: 1em;
122+
border-bottom: 1px solid darken($nav-subitem-bg, 8%);
123+
border-top: 1px solid darken($nav-subitem-bg, 8%);
120124
}
121125

122126
li {
@@ -154,8 +158,9 @@ html, body {
154158

155159
// This is the currently selected ToC entry
156160
.toc-link.active {
157-
background-color: $nav-active-bg;
161+
// background-color: $nav-active-bg;
158162
color: $nav-active-text;
163+
border-left: 3px solid #19639A;
159164
}
160165

161166
// this is parent links of the currently selected ToC entry
@@ -164,15 +169,38 @@ html, body {
164169
color: $nav-active-parent-text;
165170
}
166171

172+
.toc-list-h1 {
173+
margin-top: 32px;
174+
}
175+
167176
.toc-list-h2 {
177+
padding: 8px 0;
168178
display: none;
169-
background-color: $nav-subitem-bg;
179+
// background-color: $nav-subitem-bg;
170180
font-weight: 500;
171181
}
172182

183+
.toc-h1 {
184+
padding-top: 6px;
185+
padding-bottom: 6px;
186+
display: flex;
187+
align-items: center;
188+
color: #000000;
189+
font-family: Roboto;
190+
font-weight: 500;
191+
font-size: 16px;
192+
font-weight: 500;
193+
letter-spacing: 0;
194+
line-height: 24px;
195+
}
196+
173197
.toc-h2 {
174-
padding-left: $nav-padding + $nav-indent;
175-
font-size: 12px;
198+
// padding-left: $nav-padding + $nav-indent;
199+
font-size: $toc-h2-size;
200+
201+
padding: 2px 0;
202+
padding-left: (($nav-padding + $nav-indent) / 2);
203+
margin-left: ($nav-padding + $nav-indent);
176204
}
177205

178206
.toc-footer {
@@ -197,6 +225,11 @@ html, body {
197225
}
198226
}
199227

228+
.toc-link {
229+
margin-left: 8px;
230+
border-left: 3px solid $nav-bg;
231+
}
232+
200233
.toc-link, .toc-footer li {
201234
padding: 0 $nav-padding 0 $nav-padding;
202235
display: block;
@@ -327,6 +360,34 @@ html, body {
327360
clear: both;
328361
}
329362

363+
364+
365+
.header-links, {
366+
margin-right: 50%;
367+
padding: 24px 28px;
368+
box-sizing: border-box;
369+
display: flex;
370+
371+
}
372+
.content-link {
373+
color: #7F7F7F;
374+
display: flex;
375+
text-decoration: none;
376+
font-family: Roboto;
377+
font-weight: bold;
378+
font-size: 14px;
379+
&:first-child {
380+
padding-right: 32px;
381+
}
382+
}
383+
384+
.new-window {
385+
color: grey;
386+
width: 12px;
387+
padding-left: 8px;
388+
}
389+
390+
330391
&>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
331392
margin-right: $examples-width;
332393
padding: 0 $main-padding;
@@ -352,8 +413,8 @@ html, body {
352413
padding-bottom: 0.5em;
353414
margin-bottom: $h1-margin-bottom;
354415
margin-top: 2em;
355-
border-top: 1px solid #ccc;
356-
border-bottom: 1px solid #ccc;
416+
border-top: 1px solid #efefef;
417+
border-bottom: 1px solid #efefef;
357418
background-color: #fdfdfd;
358419
}
359420

@@ -367,7 +428,7 @@ html, body {
367428
font-size: 19px;
368429
margin-top: 4em;
369430
margin-bottom: 0;
370-
border-top: 1px solid #ccc;
431+
border-top: 1px solid #efefef;
371432
padding-top: 1.2em;
372433
padding-bottom: 1.2em;
373434
background-image: linear-gradient(to bottom, rgba(#fff, 0.2), rgba(#fff, 0));

‎src-crg/source/layouts/layout.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ under the License.
5858
</a>
5959
<div class="toc-wrapper">
6060
<a href="https://circleci.com/docs/">
61-
<%= image_tag "logo.png", class: 'logo' %>
61+
<%= image_tag "circle-logo-api.svg", class: 'logo' %>
6262
</a>
6363
<% if language_tabs.any? %>
6464
<div class="lang-selector">

0 commit comments

Comments
 (0)