Moar styling

Author: mikejolley

source/layouts/layout.erb

@@ -20,7 +20,6 @@ under the License.
 		<meta charset="utf-8">
 		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-		<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 		<title><%= current_page.data.title || "API Documentation" %></title>
 
 		<%= stylesheet_link_tag :screen, media: :screen %>

source/stylesheets/_syntax.scss.erb

@@ -22,6 +22,6 @@ under the License.
   color: #909090;
 }
 
-.highlight, .highlight .w {
+.highlight code, .highlight .w {
   background-color: $code-bg;
-}
+}

source/stylesheets/_variables.scss

@@ -25,16 +25,15 @@ under the License.
 ////////////////////
 $nav-bg: #f7f7f7;
 $examples-bg: #393939;
-$code-bg: #3c3c3c;
-$code-annotation-bg: #1c1c1c;
+$code-bg: #292929;
 $nav-subitem-bg: #f7f7f7;
-$nav-active-bg: #f7f7f7;
+$nav-active-bg: #9B5C8F;
 $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: #ffffff;
-$aside-notice-bg: #8fbcd4;
+$aside-notice-bg: #9B5C8F;
 $aside-warning-bg: #c97a7e;
 $aside-success-bg: #6ac174;
 $search-notice-bg: #c97a7e;
@@ -45,7 +44,7 @@ $link-color: #804877;
 ////////////////////
 $main-text: #333; // main content text color
 $nav-text: #3c3c3c;
-$nav-active-text: #804877;
+$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
@@ -59,7 +58,6 @@ $logo-margin: 20px; // margin between nav items and logo, ignored if search is a
 $main-padding: 28px; // padding to left and right of content & examples
 $nav-padding: 20px; // padding to left and right of navbar
 $nav-v-padding: 10px; // padding used vertically around search boxes and results
-$code-annotation-padding: 20px; // padding inside code annotations
 $h1-margin-bottom: 21px; // padding under the largest header tags
 $tablet-width: 930px; // min width before reverting to tablet size
 $phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size
@@ -68,7 +66,7 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
 // FONTS
 ////////////////////
 %default-font {
-  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
   font-size: 13px;
 }
 

source/stylesheets/screen.css.scss

@@ -76,7 +76,7 @@ html, body {
 	// This is the logo at the top of the ToC
 	.logo-wrapper {
 		padding: 10px 20px;
-		margin: 0 0 10px;
+		margin: 0;
 		display: block;
 		border-bottom: 1px solid #ddd;
 
@@ -91,7 +91,8 @@ html, body {
 	}
 
 	.tocify-item>a, .toc-footer li {
-		padding: 0 $nav-padding 0 $nav-padding;
+		padding: 10px $nav-padding;
+		line-height: 1;
 		display: block;
 		overflow-x: hidden;
 		white-space: nowrap;
@@ -115,11 +116,18 @@ html, body {
 		transition-duration: 230ms;
 	}
 
+	a:hover {
+		text-decoration: underline;
+	}
+
 	// This is the currently selected ToC entry
 	.tocify-focus {
-		box-shadow: 0px 1px 0px $nav-active-shadow;
+		//box-shadow: 0px 1px 0px $nav-active-shadow;
 		background-color: $nav-active-bg;
 		color: $nav-active-text;
+		a:hover {
+			text-decoration: none;
+		}
 	}
 
 	// Subheaders are the submenus that slide open
@@ -140,9 +148,9 @@ html, body {
 	}
 
 	.toc-footer {
-		padding: 1em 0;
-		margin-top: 1em;
-		border-top: 1px dashed $nav-footer-border-color;
+		padding: 10px 0;
+		margin-top: 10px;
+		border-top: 1px solid #ddd;
 
 		li,a {
 			color: $nav-text;
@@ -155,7 +163,6 @@ html, body {
 
 		li {
 			font-size: 0.8em;
-			line-height: 28px;
 			text-decoration: none;
 		}
 	}
@@ -239,18 +246,21 @@ html, body {
 		float:left;
 		color: $lang-select-text;
 		text-decoration: none;
-		padding: 0 10px;
-		line-height: 30px;
+		padding: 10px 20px;
+		line-height: 40px;
 		outline: 0;
+		border-top: 4px solid $lang-select-bg;;
 
 		&:active, &:focus {
 			background-color: $lang-select-pressed-bg;
 			color: $lang-select-pressed-text;
+			border-top-color: #9B5C8F;
 		}
 
 		&.active {
 			background-color: $lang-select-active-bg;
 			color: $lang-select-active-text;
+			border-top-color: #9B5C8F;
 		}
 	}
 
@@ -270,7 +280,7 @@ html, body {
 	// to place content above the dark box
 	position: relative;
 	z-index: 30;
-	padding-top: 44px;
+	padding-top: 40px;
 
 	&:after {
 		content: '';
@@ -298,7 +308,7 @@ html, body {
 
 	h1 {
 		@extend %header-font;
-		font-size: 26px;
+		font-size: 30px;
 		margin-top: 4em;
 		margin-bottom: 20px;
 		padding-top: 20px;
@@ -314,8 +324,9 @@ html, body {
 	h2 {
 		@extend %header-font;
 		font-size: 20px;
-		margin-top: 4em;
-		margin-bottom: 0;
+		margin-top: 40px;
+		padding-top: 40px;
+		margin-bottom: 20px;
 	}
 
 	// h2s right after h1s should bump right up
@@ -407,20 +418,23 @@ html, body {
 	aside {
 		padding-top: 1em;
 		padding-bottom: 1em;
-		@include text-shadow(0 1px 0 lighten($aside-notice-bg, 15%));
+		@include text-shadow(0 1px 0 darken($aside-notice-bg, 15%));
 		margin-top: 1.5em;
 		margin-bottom: 1.5em;
 		background: $aside-notice-bg;
 		line-height: 1.6;
+		color: lighten($aside-notice-bg, 80%);
 
 		&.warning {
 			background-color: $aside-warning-bg;
 			@include text-shadow(0 1px 0 lighten($aside-warning-bg, 15%));
+			color: #333;
 		}
 
 		&.success {
 			background-color: $aside-success-bg;
 			@include text-shadow(0 1px 0 lighten($aside-success-bg, 15%));
+			color: #333;
 		}
 	}
 
@@ -459,20 +473,14 @@ html, body {
 
 .content {
 	pre, blockquote {
-		background-color: $code-bg;
 		color: #fff;
-
-		padding: 2em $main-padding;
-		margin: 0;
-		width: $examples-width;
-
+		margin: 0 0 20px;
+		@extend %right-col;
+		box-sizing: border-box;
 		float:right;
 		clear:right;
-
-		box-sizing: border-box;
-		@include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
-
-		@extend %right-col;
+		width: $examples-width;
+		padding: 0 20px;
 
 		&>p { margin: 0; }
 
@@ -485,16 +493,13 @@ html, body {
 
 	pre {
 		@extend %code-font;
-	}
+		background: $examples-bg;
 
-	blockquote {
-		&>p {
-			background-color: $code-annotation-bg;
+		code {
+			padding: 20px;
 			border-radius: 5px;
-			padding: $code-annotation-padding;
-			color: #ccc;
-			border-top: 1px solid #000;
-			border-bottom: 1px solid #404040;
+			display: block;
+			background-color: $code-bg;
 		}
 	}
 }