Style: with better highlight colors (shadows + backgrounds)

Author: Kronuz

_sass/_style.scss

@@ -657,17 +657,12 @@ li > code,
 li> pre,
 h5 > code,
 .note > code {
-	color: #cccccc;
-	margin: 0 0.2em;
 	max-width: 100%;
 	overflow-x: auto;
 	vertical-align: middle;
-	@include border-radius(5px);
-	@include box-shadow(inset 0 1px 10px rgba(0,0,0,.2),
-		0 1px 0 rgba(255,255,255,.1),
-		0 -1px 0 rgba(0,0,0,.5));
 }
 
+
 .language-sh code {
 	color: #f0e68c;
 	.sb {
@@ -688,10 +683,6 @@ h5 > code,
 	code { background: none; }
 }
 
-div.highlight,
-figure.highlight {
-	background-color: rgba(0,0,0,.1);
-}
 .highlight {
 	margin: 1em 0;
 	width: 100%;
@@ -705,6 +696,31 @@ pre.highlight { padding: 10px 0.5em; }
 	margin: 0;
 }
 
+
+div.highlight,
+figure.highlight {
+	background-color: rgba(0,0,0,.1);
+	@include border-radius(5px);
+	@include box-shadow(inset 0 1px 10px rgba(0,0,0,.1),
+		0 1px 0 rgba(255,255,255,.1),
+		0 -1px 0 rgba(0,0,0,.4));
+}
+
+pre.highlighter-rouge,
+code.highlighter-rouge {
+	display: inline;
+	padding: .15em .4em;
+	margin: 0 .1em;
+
+	color: #cccccc;
+	background-color: rgba(0,0,0,.03);
+	@include border-radius(5px);
+	@include box-shadow(inset 0 1px 5px rgba(0,0,0,.1),
+		0 1px 0 rgba(255,255,255,.05),
+		0 -1px 0 rgba(0,0,0,.2));
+}
+
+
 /* HTML Elements */
 
 h1, h2, h3, h4, h5, h6 { margin: 0; }
@@ -872,6 +888,13 @@ code.output {
 	background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
 	background-image: linear-gradient(to bottom, #7e6d42 0%,#5c4e35 100%);
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );
+	color: #ddd;
+	a {
+		color: #ddd;
+		&:hover {
+			color: #fff;
+		}
+	}
 }
 
 @media (max-width: 568px) {
@@ -932,20 +955,33 @@ code.output {
 .unreleased {
 	background-color: #cd9239;
 	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
-	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(205,146,57,1)), to(rgba(162,117,40,1)));
-	background-image: -webkit-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);
-	background-image: -moz-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);
-	background-image: -o-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);
-	background-image: linear-gradient(to bottom, rgba(205,146,57,1) 0%,rgba(162,117,40,1) 100%);
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#cd9239), to(#a27528));
+	background-image: -webkit-linear-gradient(top, #cd9239 0%, #a27528 100%);
+	background-image: -moz-linear-gradient(top, #cd9239 0%, #a27528 100%);
+	background-image: -o-linear-gradient(top, #cd9239 0%, #a27528 100%);
+	background-image: linear-gradient(to bottom, #cd9239 0%,#a27528 100%);
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 );
 }
 
+.construction {
+	background-color: #333;
+	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
+	background-image: -webkit-linear-gradient(top, #333 0%, #222 100%);
+	background-image: -moz-linear-gradient(top, #333 0%, #222 100%);
+	background-image: -o-linear-gradient(top, #333 0%, #222 100%);
+	background-image: linear-gradient(to bottom, #333 0%,#222 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#222',GradientType=0 );
+}
+
 .info:before { border-color: transparent #00617f #00617f transparent; }
 
 .warning:before { border-color: transparent #6f0d0d #6f0d0d transparent; }
 
 .unreleased:before { border-color: transparent #664719 #664719 transparent; }
 
+.construction:before { border-color: transparent #222 #222 transparent; }
+
 .info:after {
 	content: '\24D8';
 	position: absolute;
@@ -977,6 +1013,18 @@ code.output {
 	text-shadow: 0 1px 0 rgba(255,255,255,.25);
 }
 
+.construction:after {
+	// content: '\1F3D7';
+	content: '\1F6A7';
+	position: absolute;
+	top: 22px;
+	left: 10px;
+	font-size: 32px;
+	font-weight: 700;
+	// color: #2b2a12;
+	text-shadow: 0 1px 0 rgba(255,255,255,.25);
+}
+
 /* Version badge */
 
 .version-badge {