- <%= image_tag "logo.png" %>
+
<%= image_tag "logo.png" %>
<% if language_tabs %>
<% language_tabs.each do |lang| %>
diff --git a/source/stylesheets/_icon-font.scss b/source/stylesheets/_icon-font.scss
index b5994839881..23456f18a22 100644
--- a/source/stylesheets/_icon-font.scss
+++ b/source/stylesheets/_icon-font.scss
@@ -1,11 +1,65 @@
+$fontPath: "../fonts";
+$fontLatoPath: $fontPath + "/lato";
+
+// Lato Light/Light Italic
+// --------------------------------------------------
+@font-face {
+ font-family: "Lato";
+ font-weight: 300;
+ font-style: normal;
+ src: url($fontLatoPath + '/lato-lig-webfont-g.eot');
+ src: url($fontLatoPath + '/lato-lig-webfont-g.eot?#iefix') format('embedded-opentype'), url($fontLatoPath + '/lato-lig-webfont-g.woff') format('woff'),url($fontLatoPath + '/lato-lig-webfont-g.ttf') format('truetype'),url($fontLatoPath + '/lato-lig-webfont.svg#latolight') format('svg');
+}
+@font-face {
+ font-family: "Lato";
+ font-weight: 300;
+ font-style: italic;
+ src: url($fontLatoPath + '/lato-ligita-webfont-g.eot');
+ src: url($fontLatoPath + '/lato-ligita-webfont-g.eot?#iefix') format('embedded-opentype'), url($fontLatoPath + '/lato-ligita-webfont-g.woff') format('woff'),url($fontLatoPath + '/lato-ligita-webfont-g.ttf') format('truetype'),url($fontLatoPath + '/lato-ligita-webfont.svg#latolight_italic') format('svg');
+}
+
+// Lato Normal/Normal Italic
+// --------------------------------------------------
+@font-face {
+ font-family: "Lato";
+ font-weight: normal;
+ font-style: normal;
+ src: url($fontLatoPath + '/lato-reg-webfont-g.eot');
+ src: url($fontLatoPath + '/lato-reg-webfont-g.eot?#iefix') format('embedded-opentype'), url($fontLatoPath + "/lato-reg-webfont-g.woff") format('woff'), url($fontLatoPath + '/lato-reg-webfont-g.ttf') format('truetype'),url($fontLatoPath + '/lato-reg-webfont.svg#latoregular') format('svg');
+}
+@font-face {
+ font-family: "Lato";
+ font-weight: normal;
+ font-style: italic;
+ src: url($fontLatoPath + '/lato-regita-webfont-g.eot');
+ src: url($fontLatoPath + '/lato-regita-webfont-g.eot?#iefix') format('embedded-opentype'),url($fontLatoPath + '/lato-regita-webfont-g.woff') format('woff'),url($fontLatoPath + '/lato-regita-webfont-g.ttf') format('truetype'),url($fontLatoPath + '/lato-regita-webfont.svg#latoitalic') format('svg');
+}
+
+// Lato Bold/Bold Italic
+// --------------------------------------------------
+@font-face {
+ font-family: "Lato";
+ font-weight: 700;
+ font-style: normal;
+ src: url($fontLatoPath + '/lato-bol-webfont-g.eot');
+ src: url($fontLatoPath + '/lato-bol-webfont-g.eot?#iefix') format('embedded-opentype'), url($fontLatoPath + "/lato-bol-webfont-g.woff") format('woff'), url($fontLatoPath + '/lato-bol-webfont-g.ttf') format('truetype'),url($fontLatoPath + '/lato-bol-webfont.svg#latobold') format('svg');
+}
+@font-face {
+ font-family: "Lato";
+ font-weight: 700;
+ font-style: italic;
+ src: url($fontLatoPath + '/lato-bolita-webfont-g.eot');
+ src: url($fontLatoPath + '/lato-bolita-webfont-g.eot?#iefix') format('embedded-opentype'),url($fontLatoPath + '/lato-bolita-webfont-g.woff') format('woff'),url($fontLatoPath + '/lato-bolita-webfont-g.ttf') format('truetype'),url($fontLatoPath + '/lato-bolita-webfont.svg#latobold_italic') format('svg');
+}
+
@font-face {
font-family: 'slate';
src:font-url('slate.eot?-syv14m');
src:font-url('slate.eot?#iefix-syv14m') format('embedded-opentype'),
- font-url('slate.woff2?-syv14m') format('woff2'),
- font-url('slate.woff?-syv14m') format('woff'),
- font-url('slate.ttf?-syv14m') format('truetype'),
- font-url('slate.svg?-syv14m#slate') format('svg');
+ font-url('slate.woff2?-syv14m') format('woff2'),
+ font-url('slate.woff?-syv14m') format('woff'),
+ font-url('slate.ttf?-syv14m') format('truetype'),
+ font-url('slate.svg?-syv14m#slate') format('svg');
font-weight: normal;
font-style: normal;
}
@@ -18,6 +72,8 @@
font-variant: normal;
text-transform: none;
line-height: 1;
+ position: relative;
+ top: -2px;
}
%icon-exclamation-sign {
diff --git a/source/stylesheets/_syntax.scss.erb b/source/stylesheets/_syntax.scss.erb
index dfeb0c15240..19f1280b4e8 100644
--- a/source/stylesheets/_syntax.scss.erb
+++ b/source/stylesheets/_syntax.scss.erb
@@ -19,9 +19,57 @@ under the License.
<%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %>
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
- color: #909090;
+ color: #a9a9a9;
}
.highlight, .highlight .w {
background-color: $code-bg;
+}
+.highlight .kd {
+ color: #ff8800;
+}
+.highlight .nx {
+ color: #0073ae;
+}
+.highlight .o {
+ color: #1f1f1f;
+}
+.highlight .s1 {
+ color: #585858;
+}
+.highlight .k {
+ color: #ee0000;
+}
+.highlight .na {
+ color: #34AC2F;
+}
+.highlight .p {
+ color: #1f1f1f;
+}
+.highlight .mi {
+ color: #eb6321;
+}
+.highlight .kc {
+ color: #8100d3;
+}
+.highlight .err {
+ background-color: transparent;
+}
+.highlight .nf {
+ color: #ff8800;
+}
+.highlight .nn {
+ color: #0073ae;
+}
+.highlight .s {
+ color: #1f1f1f;
+}
+.highlight .m {
+ color: #1f1f1f;
+}
+.highlight .nt {
+ color: #ff8800;
+}
+.highlight .s2 {
+ color: #585858;
}
\ No newline at end of file
diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss
index 5fe64b1f302..15bba39ead3 100644
--- a/source/stylesheets/_variables.scss
+++ b/source/stylesheets/_variables.scss
@@ -23,36 +23,38 @@ under the License.
// BACKGROUND COLORS
////////////////////
-$nav-bg: #393939;
-$examples-bg: #393939;
-$code-bg: #292929;
-$code-annotation-bg: #1c1c1c;
-$nav-subitem-bg: #262626;
-$nav-active-bg: #2467af;
+$nav-bg: #f5f5f5;
+$examples-bg: #fff;
+$code-bg: #f5f5f5;
+$code-annotation-bg: #f6f6d5;
+$nav-subitem-bg: #f5f5f5;
+$nav-active-bg: #ebebeb;
$lang-select-border: #000;
-$lang-select-bg: #222;
-$lang-select-active-bg: $examples-bg; // feel free to change this to blue or something
-$lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed
-$main-bg: #eaf2f6;
-$aside-notice-bg: #8fbcd4;
-$aside-warning-bg: #c97a7e;
-$aside-success-bg: #6ac174;
-$search-notice-bg: #c97a7e;
+$lang-select-bg: #fff;
+$lang-select-active-bg: #fff; // feel free to change this to blue or something
+$lang-select-pressed-bg: #fff; // color of language tab bg when mouse is pressed
+$main-bg: #fff;
+$aside-notice-bg: #d8f4ff;
+$aside-warning-bg: #ffccce;
+$aside-success-bg: #d7f0db;
+$search-notice-bg: #a9a9a9;
// TEXT COLORS
////////////////////
-$main-text: #333; // main content text color
-$nav-text: #fff;
-$nav-active-text: #fff;
-$lang-select-text: #fff; // color of unselected language tab text
-$lang-select-active-text: #fff; // color of selected language tab text
-$lang-select-pressed-text: #fff; // color of language tab text when mouse is pressed
+$main-text: #585858; // main content text color
+$nav-text: #585858;
+$nav-link-text: #0073ae;
+$nav-active-text: #ff8800;
+$lang-select-text: $main-text; // color of unselected language tab text
+$lang-select-active-text: #585858; // color of selected language tab text
+$lang-select-pressed-text: #585858; // color of language tab text when mouse is pressed
+$content-header-color: #0073ae;
// SIZES
////////////////////
-$nav-width: 230px; // width of the navbar
+$nav-width: 280px; // width of the navbar
$examples-width: 50%; // portion of the screen taken up by code examples
$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
$main-padding: 28px; // padding to left and right of content & examples
@@ -68,7 +70,7 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
// FONTS
////////////////////
%default-font {
- font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
+ font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
font-size: 13px;
}
@@ -79,7 +81,7 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
%code-font {
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
- font-size: 12px;
+ font-size: 14px;
line-height: 1.5;
}
@@ -91,7 +93,9 @@ $nav-footer-border-color: #666;
$nav-embossed-border-top: #000;
$nav-embossed-border-bottom: #939393;
$main-embossed-text-shadow: 0px 1px 0px #fff;
-$search-box-border-color: #666;
+$search-box-border-color: #a9a9a9;
+$content-border-color: #dcdcdc;
+$lang-border-color: #0073ae;
////////////////////////////////////////////////////////////////////////////////
@@ -100,10 +104,10 @@ $search-box-border-color: #666;
// These settings are probably best left alone.
%break-words {
- word-break: break-all;
+ word-break: break-all;
- /* Non standard for webkit */
- word-break: break-word;
+ /* Non standard for webkit */
+ word-break: break-word;
- hyphens: auto;
+ hyphens: auto;
}
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index e4b3ef82b22..23e10fb7476 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -50,11 +50,11 @@ html, body {
@mixin embossed-bg {
background:
- linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0) 8px),
- linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px),
- linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
- linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
- $nav-subitem-bg;
+ linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0) 8px),
+ linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px),
+ linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
+ linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
+ $nav-subitem-bg;
}
.tocify-wrapper {
@@ -65,7 +65,6 @@ html, body {
position: fixed;
z-index: 30;
top: 0;
- left: 0;
bottom: 0;
width: $nav-width;
background-color: $nav-bg;
@@ -81,9 +80,16 @@ html, body {
}
}
+ .logo {
+ display: block;
+ width: 100%;
+ padding: 15px 0;
+ }
+
// This is the logo at the top of the ToC
- &>img {
+ img {
display: block;
+ margin: 0 auto;
}
&>.search {
@@ -106,7 +112,7 @@ html, body {
position: absolute;
top: 17px;
left: $nav-padding;
- color: $nav-text;
+ color: #a9a9a9;
@extend %icon-search;
}
}
@@ -129,8 +135,6 @@ html, body {
margin-bottom: 1em;
}
- @include embossed-bg;
-
li {
margin: 1em $nav-padding;
line-height: 1;
@@ -155,6 +159,10 @@ html, body {
text-overflow: ellipsis;
}
+ .tocify-item.tocify-focus>a {
+ padding-left: 10px;
+ }
+
// The Table of Contents is composed of multiple nested
// unordered lists. These styles remove the default
// styling of an unordered list because it is ugly.
@@ -174,9 +182,13 @@ html, body {
// This is the currently selected ToC entry
.tocify-focus {
- box-shadow: 0px 1px 0px $nav-active-shadow;
- background-color: $nav-active-bg;
color: $nav-active-text;
+ border-left: 5px solid $nav-active-text;
+ }
+
+ .tocify-hover {
+ color: $nav-active-text;
+ background-color: $nav-active-bg;
}
// Subheaders are the submenus that slide open
@@ -189,9 +201,10 @@ html, body {
padding-left: $nav-padding + $nav-indent;
font-size: 12px;
}
+ .tocify-item.tocify-focus>a {
+ padding-left: 20px;
+ }
- // for embossed look:
- @include embossed-bg;
&>li:last-child {
box-shadow: none; // otherwise it'll overflow out of the subheader
}
@@ -200,11 +213,11 @@ html, body {
.toc-footer {
padding: 1em 0;
margin-top: 1em;
- border-top: 1px dashed $nav-footer-border-color;
li,a {
- color: $nav-text;
- text-decoration: none;
+ color: $nav-link-text;
+ text-decoration: underline;
+ font-size: 12px;
}
a:hover {
@@ -212,9 +225,11 @@ html, body {
}
li {
- font-size: 0.8em;
+ font-size: 12px;
line-height: 1.7;
text-decoration: none;
+ color: #585858;
+ white-space: normal;
}
}
@@ -279,19 +294,20 @@ html, body {
right: 0;
top: 0;
bottom: 0;
+ border-left: 1px solid $content-border-color;
}
.lang-selector {
position: fixed;
z-index: 50;
- border-bottom: 5px solid $lang-select-active-bg;
+ border-bottom: 1px solid $lang-border-color;
}
}
.lang-selector {
background-color: $lang-select-bg;
- width: 100%;
font-weight: bold;
+ width: 100%;
a {
display: block;
float:left;
@@ -303,12 +319,14 @@ html, body {
&:active, &:focus {
background-color: $lang-select-pressed-bg;
+ border-bottom: 5px solid $lang-border-color;
color: $lang-select-pressed-text;
}
&.active {
background-color: $lang-select-active-bg;
color: $lang-select-active-text;
+ border-bottom: 5px solid $lang-border-color;
}
}
@@ -329,6 +347,11 @@ html, body {
position: relative;
z-index: 30;
+ a {
+ color: $nav-link-text;
+ text-decoration: underline;
+ }
+
&:after {
content: '';
display: block;
@@ -357,35 +380,34 @@ html, body {
h1 {
@extend %header-font;
font-size: 30px;
- padding-top: 0.5em;
- padding-bottom: 0.5em;
- border-bottom: 1px solid #ccc;
- margin-bottom: $h1-margin-bottom;
- margin-top: 2em;
- border-top: 1px solid #ddd;
- background-image: linear-gradient(to bottom, #fff, #f9f9f9);
+ padding: 1em 0 0 $main-padding;
+ margin: 2em 50% 1em 0;
+ border-top: 1px solid $content-border-color;
+ color: $content-header-color;
+ font-weight: 200;
}
h1:first-child, div:first-child + h1 {
border-top-width: 0;
- margin-top: 0;
+ margin: 0 50% 1em 0;
}
h2 {
@extend %header-font;
font-size: 20px;
- margin-top: 4em;
- margin-bottom: 0;
- border-top: 1px solid #ccc;
- padding-top: 1.2em;
- padding-bottom: 1.2em;
+ border-top: 1px solid $content-border-color;
+ padding: 0.8em 0;
+ margin-left: $main-padding;
+ margin-right: calc(50% + 28px);
+ margin-right: -webkit-calc(50% + 28px);
+ margin-right: -moz-calc(50% + 28px);
background-image: linear-gradient(to bottom, rgba(#fff, 0.4), rgba(#fff, 0));
}
// h2s right after h1s should bump right up
// against the h1s.
h1 + h2, h1 + div + h2 {
- margin-top: $h1-margin-bottom * -1;
+ margin-top: 0;
border-top: none;
}
@@ -402,7 +424,7 @@ html, body {
hr {
margin: 2em 0;
- border-top: 2px solid $examples-bg;
+ border-top: 2px solid $content-border-color;
border-bottom: 2px solid $main-bg;
}
@@ -419,10 +441,12 @@ html, body {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
vertical-align: bottom;
+ min-width: 70px;
}
td {
- padding: 10px;
+ padding: 0 10px;
+ line-height: 30px;
}
tr:last-child {
@@ -430,11 +454,11 @@ html, body {
}
tr:nth-child(odd)>td {
- background-color: lighten($main-bg,4.2%);
+ background-color: white;
}
tr:nth-child(even)>td {
- background-color: lighten($main-bg,2.4%);
+ background-color: #f6f6f6;
}
}
@@ -456,8 +480,8 @@ html, body {
}
code {
- background-color: rgba(0,0,0,0.05);
- padding: 3px;
+ background-color: #eaeaea;
+ padding: 2px 3px;
border-radius: 3px;
@extend %break-words;
@extend %code-font;
@@ -510,9 +534,7 @@ html, body {
padding: 2px;
margin: -2px;
border-radius: 4px;
- border: 1px solid #F7E633;
- @include text-shadow(1px 1px 0 #666);
- background: linear-gradient(to top left, #F7E633 0%, #F1D32F 100%);
+ background-color: #fff200;
}
}
@@ -524,9 +546,9 @@ html, body {
.content {
pre, blockquote {
background-color: $code-bg;
- color: #fff;
+ color: #0073ae;
- padding: 2em $main-padding;
+ padding: 1.2em 0;
margin: 0;
width: $examples-width;
@@ -534,7 +556,6 @@ html, body {
clear:right;
box-sizing: border-box;
- @include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
@extend %right-col;
@@ -549,16 +570,16 @@ html, body {
pre {
@extend %code-font;
+ padding-left: 28px;
+ padding-right: 28px;
}
blockquote {
&>p {
background-color: $code-annotation-bg;
- border-radius: 5px;
- padding: $code-annotation-padding;
- color: #ccc;
- border-top: 1px solid #000;
- border-bottom: 1px solid #404040;
+ padding: 0 $code-annotation-padding;
+ color: #585858;
+ line-height: 28px;
}
}
}
diff --git a/start.sh b/start.sh
new file mode 100644
index 00000000000..05371492548
--- /dev/null
+++ b/start.sh
@@ -0,0 +1 @@
+bundle exec middleman server