Updated docs and examples design.

7fcd0f3b · Mr.doob · 3c78bc33 · 3c78bc33 · 7fcd0f3b · 7fcd0f3b
20 changed file
--- a/docs/files/inconsolata.woff
+++ b/docs/files/inconsolata.woff
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,46 +4,52 @@
 		<meta charset="utf-8">
 		<title>three.js / documentation</title>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="index.css">
-		<link rel="shortcut icon" href="../favicon.ico" />
+		<link rel="shortcut icon" href="../files/favicon.ico" />
+		<link rel="stylesheet" type="text/css" href="../files/main.css">
+		<!-- console sandbox -->
+		<script src="../build/three.min.js" async defer></script>
 	</head>
 	<body>
 		<script type="text/javascript">

-		  var _gaq = _gaq || [];
-		  _gaq.push(['_setAccount', 'UA-86951-15']);
-		  _gaq.push(['_trackPageview']);
+			var _gaq = _gaq || [];
+			_gaq.push(['_setAccount', 'UA-86951-15']);
+			_gaq.push(['_trackPageview']);

-		  (function() {
-		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-		  })();
+			(function() {
+				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+			})();

 		</script>

-		<div id="panel" class="collapsed">
+		<div id="panel" class="">

-			<h1><a href="http://threejs.org">three.js</a> / docs</h1>
+			<div id="header">
+				<h1><a href="http://threejs.org">three.js</a></h1>

-			<a id="expandButton" href="#">
-				<span></span>
-				<span></span>
-				<span></span>
-			</a>
+				<div id="sections">
+					<span class="selected">docs</span>
+					<a href="../examples/">examples</a>
+				</div>

-			<div class="filterBlock" >
-				<input type="text" id="filterInput" placeholder="Type to filter" autocorrect="off" autocapitalize="off" spellcheck="false">
-				<a href="#" id="clearFilterButton">x</a>
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 			</div>

-			<div style="text-align:center">
-				<br />
-				<a href="javascript:setLanguage('en')">en</a> |
-				<a href="javascript:setLanguage('zh')">zh</a>
-			</div>
+			<div id="panelScrim"></div>
+
+			<div id="contentWrapper">
+				<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+				<div id="exitSearchButton"></div>

-			<div id="content"></div>
+				<select id="language">
+					<option value="en">en</option>
+					<option value="zh">zh</option>
+				</select>
+
+				<div id="content"></div>
+			</div>

 		</div>

@@ -79,9 +85,18 @@

 			//

+			var languageSelect = document.getElementById( 'language' );
+			languageSelect.value = language;
+			languageSelect.addEventListener( 'change', function ( event ) {
+
+				setLanguage( this.value );
+
+			} );
+
 			function setLanguage( value ) {

 				language = value;
+
 				createNavigation();
 				updateFilter();
 				autoChangeUrlLanguage( language );
@@ -90,9 +105,10 @@

 			var panel = document.getElementById( 'panel' );
 			var content = document.getElementById( 'content' );
-			var clearFilterButton = document.getElementById( 'clearFilterButton' );
 			var expandButton = document.getElementById( 'expandButton' );
-			var filterInput = document.getElementById( 'filterInput' );
+			var exitSearchButton = document.getElementById( 'exitSearchButton' );
+			var panelScrim = document.getElementById( 'panelScrim' );
+			var filterInput = document.getElementById( 'filter' );
 			var iframe = document.querySelector( 'iframe' );

 			var pageProperties = {};
@@ -107,28 +123,44 @@
 			expandButton.onclick = function ( event ) {

 				event.preventDefault();
-				panel.classList.toggle( 'collapsed' );
+				panel.classList.toggle( 'open' );

 			};

+			panelScrim.onclick = function ( event ) {

-			// Functionality for search/filter input field
+				event.preventDefault();
+				panel.classList.toggle( 'open' );

-			filterInput.oninput = function ( event ) {
+			};

-				updateFilter();

-			};
+			// Functionality for search/filter input field
+			filterInput.onfocus = function ( event ) {

+				panel.classList.add('searchFocused');

-			// Functionality for filter clear button
+			}

-			clearFilterButton.onclick = function ( event ) {
+			filterInput.onblur = function ( event ) {

-				event.preventDefault();
+				if(filterInput.value === '') {
+					panel.classList.remove('searchFocused');
+				}
+
+			}
+
+			exitSearchButton.onclick = function( event ) {

 				filterInput.value = '';
 				updateFilter();
+				panel.classList.remove('searchFocused');
+
+			}
+
+			filterInput.oninput = function ( event ) {
+
+				updateFilter();

 			};

@@ -154,7 +186,16 @@
 					if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;

 					window.location.hash = pageURL;
-					panel.classList.add( 'collapsed' );
+					panel.classList.remove( 'open' );
+
+
+					content.querySelectorAll( 'a' ).forEach( function ( item ) {
+
+						item.classList.remove( 'selected' );
+
+					} );
+
+					link.classList.add('selected');

 				} );

@@ -447,9 +488,6 @@

 		</script>

-		<!-- console sandbox -->
-		<script src="../build/three.min.js"></script>
-
 	</body>

 </html>
--- a/docs/page.css
+++ b/docs/page.css
+:root {
+	--color-blue: #049EF4;
+	--text-color: #444;
+	--border-style: 1px solid #EEE;
+	--header-height: 56px;
+}
+
 @font-face {
-	font-family: 'inconsolata';
-	src: url('files/inconsolata.woff') format('woff');
+	font-family: 'Roboto Mono';
+	src: local('Roboto Mono'), url('../files/RobotoMono-Regular.woff2') format('woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'SF-Pro-Text';
+	src: local('SF-Pro-Text'), url('../files/SF-Pro-Text-Regular.otf');
 	font-weight: normal;
 	font-style: normal;
 }

 body {
-	margin: 30px 20px;
-	color: #555;
-	font-family: 'inconsolata';
-	font-size: 15px;
-	line-height: 18px;
+	padding: 20px 24px 40px 24px;
+	margin: 0;
+	color: var(--text-color);
+	font-family: 'SF-Pro-Text', sans-serif;
+	font-size: 16px;
+	line-height: 24px;
 	tab-size: 4;
 	overflow: auto;
 }

 a {
-	color: #1184CE;
+	color: var(--color-blue);
 	cursor: pointer;
-	text-decoration: underline;
+	text-decoration: none;
 }

 h1 {
-	color: #333;
-	font-size: 25px;
+	color: var(--color-blue);
+	font-size: 2.4em;
 	font-weight: normal;
-
-	margin-top: 10px;
+	line-height: 1.36em;
+	margin-top: 16px;
+	margin-bottom: -16px;
+	text-indent: -2px;
 }

 h2 {
-	color: #4B0;
-	font-size: 18px;
+	color: var(--color-blue);
+	font-size: 1.8em;
+	line-height: 1.32em;
 	font-weight: normal;
-
 	margin-top: 40px;
+	margin-bottom: 12px;
+	text-indent: -1px;
 }

 h3 {
-	color: #000;
-	font-size: 16px;
+	font-size: 1.32em;
+	line-height: 1.48em;
 	font-weight: normal;
+	text-indent: -1px;
+	margin-top: 24px;
+	margin-bottom: 12px;
+}

-	margin-top: 40px;
+p {
+	margin-top: 24px;
+	margin-bottom: 24px;
+}
+ul, ol {
+	box-sizing: border-box;
+	padding-left: 20px;
+}
+ul li,
+ol li {
+	padding-left: 4px;
+	margin-bottom: 4px;
+}
+
+li ul,
+li ol {
+	margin-top: 4px;
 }

-p, ul, ol {
-	margin-top: 0;
+body {
+	max-width: 760px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+table,
+pre,
+code {
+	margin-left: -24px;
+	margin-right: -24px;
+	margin-top: 20px;
 	margin-bottom: 20px;
-	max-width: 780px;
 }

 div {
-	/* padding-left: 30px; */
 	margin-bottom: 20px;
 }

@@ -60,20 +107,30 @@ div {
 	padding-left: 0px;
 }

-pre, code {
-	margin-top: 20px;
-	margin-bottom: 20px;
+br {
+	display: none;
+}
+
+table {
+	border-spacing: 24px 4px;
+}
+table,
+table tr,
+table td {
+	text-align: left;
+}
+
+table th {
+	text-decoration: none;
+	padding: 2px 0;
 }

 code {
 	display: block;
-	width: -webkit-calc( 100% - 40px );
-	width: -moz-calc( 100% - 40px );
-	width: calc( 100% - 40px );
-	padding: 20px;
+	padding: 20px 24px;
 	white-space: pre-wrap;
-	background-color: #f9f9f9;
 	overflow: auto;
+	box-sizing: border-box;
 }

 iframe {
@@ -104,19 +161,27 @@ strong {

 #button {
 	position: fixed;
-	top: 20px;
-	right: 20px;
+	bottom: 12px;
+	right: 12px;
+
 	padding: 8px;
-	color: #fff;
-	background-color: #555;
-	opacity: 0.5;
-}
+	border-radius: 50%;
+	margin-bottom: 0px;

-#button:hover {
-	cursor: pointer;
-	opacity: 1;
+	background-color: #E5E5E5;
+	opacity: .9;
 }

+	#button:hover {
+		cursor: pointer;
+		opacity: 1;
+	}
+
+	#button img {
+		display: block;
+		width: 20px;
+	}
+
 a.permalink {
 	float: right;
 	margin-left: 5px;
@@ -141,3 +206,22 @@ sup, sub {
 sub {
 	top: 0.4em;
 }
+
+/* mobile */
+
+@media all and ( max-width: 640px ) {
+	body {
+		padding: 16px 20px;
+	}
+
+	h1 {
+		margin-top: 0;
+		font-size: 26px;
+	}
+
+	h2 {
+		margin-top: 20px;
+		font-size: 18px;
+		line-height: 25px;
+	}
+}
--- a/docs/page.js
+++ b/docs/page.js
@@ -97,8 +97,7 @@ function onDocumentLoad( event ) {

 	var button = document.createElement( 'div' );
 	button.id = 'button';
-	button.textContent = 'Edit';
-
+	button.innerHTML = '<img src="../files/ic_mode_edit_black_24dp.svg">';
 	button.addEventListener( 'click', function ( event ) {

 		window.open( 'https://github.com/mrdoob/three.js/blob/dev/docs/' + section + '/' + localizedPath + '.html' );

--- a/docs/prettify/threejs.css
+++ b/docs/prettify/threejs.css
@@ -10,6 +10,8 @@ pre .dec, code .dec { color: #22c0c4; } /* decimal */


 pre.prettyprint, code.prettyprint {
-	background-color: #f9f9f9;
-	font-family: 'inconsolata';
+	background-color: #F5F5F5;
+	font-family: 'Roboto Mono', monospace;
+	font-size: 14px;
+	line-height: 24px;
 }
--- a/examples/files/inconsolata.woff
+++ b/examples/files/inconsolata.woff
--- a/examples/index.html
+++ b/examples/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js / examples</title>
 		<meta charset="utf-8">
+		<title>three.js / examples</title>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link rel="shortcut icon" href="../favicon.ico" />
+		<link rel="shortcut icon" href="../files/favicon.ico" />
+		<link rel="stylesheet" type="text/css" href="../files/main.css">
 		<style>
-
-			@font-face {
-				font-family: 'inconsolata';
-				src: url('files/inconsolata.woff') format('woff');
-				font-weight: normal;
-				font-style: normal;
-			}
-
-			* {
-				box-sizing: border-box;
-			}
-
-			html {
-				height: 100%;
-			}
-
-			body {
-				background-color: #ffffff;
-				margin: 0px;
-				height: 100%;
-				color: #555;
-				font-family: 'inconsolata';
-				font-size: 15px;
-				line-height: 18px;
-				overflow: hidden;
-			}
-
-			h1 {
-				margin-top: 30px;
-				margin-bottom: 40px;
-				margin-left: 20px;
-				font-size: 25px;
-				font-weight: normal;
-			}
-
-			h2 {
-				font-size: 20px;
-				font-weight: normal;
-			}
-
-			a {
-				color: #2194CE;
-				text-decoration: none;
-			}
-
-			#panel {
-				position: fixed;
-				left: 0px;
-				width: 310px;
-				height: 100%;
-				overflow: auto;
-				background: #fafafa;
-			}
-
-			#panel #content {
-				padding: 0px 20px 20px 20px;
-			}
-
 			#panel #content .link {
-				color: #2194CE;
-				text-decoration: none;
-				cursor: pointer;
 				display: block;
 			}
-
-			#panel #content .selected {
-				color: #ff0000;
-			}
-
-			#panel #content .link:hover {
-				text-decoration: underline;
-			}
-
-			#viewer {
-				position: absolute;
-				border: 0px;
-				left: 310px;
-				width: calc(100% - 310px);
-				height: 100%;
-				overflow: auto;
-			}
-
-			#viewSrcButton {
+			#button {
 				position: fixed;
-				bottom: 20px;
-				right: 20px;
-				padding: 8px;
-				color: #fff;
-				background-color: #555;
-				opacity: 0.7;
-			}
-
-			#viewSrcButton:hover {
-				cursor: pointer;
-				opacity: 1;
-			}
+				bottom: 12px;
+				right: 12px;

-			.filterBlock{
-				margin: 20px;
-				position: relative;
-			}
-
-			.filterBlock p {
-				margin: 0;
-			}
-
-			#filterInput {
-				width: 100%;
-				padding: 5px;
-				font-family: inherit;
-				font-size: 15px;
-				outline: none;
-				border: 1px solid #dedede;
-			}
-
-			#filterInput:focus{
-				border: 1px solid #2194CE;
-			}
+				padding: 8px;
+				border-radius: 50%;
+				margin-bottom: 0px; /* TODO div sets it to 20px */

-			#clearFilterButton {
-				position: absolute;
-				right: 6px;
-				top: 50%;
-				margin-top: -8px;
-				width: 16px;
-				height: 16px;
-				font-size: 14px;
-				color: grey;
-				text-align: center;
-				line-height: 0;
-				padding-top: 7px;
-				opacity: .5;
+				background-color: #E5E5E5;
+				opacity: .9;
 			}

-			#clearFilterButton:hover {
+			#button:hover {
+				cursor: pointer;
 				opacity: 1;
 			}

-			.filtered {
-				display: none !important;
-			}
-
-			#panel li b {
-				font-weight: bold;
+			#button img {
+				display: block;
+				width: 20px;
 			}
+		</style>
+	</head>
+	<body>
+		<script type="text/javascript">

-			/* mobile */
+			var _gaq = _gaq || [];
+			_gaq.push(['_setAccount', 'UA-86951-15']);
+			_gaq.push(['_trackPageview']);

-			#expandButton {
-				display: none;
-				position: absolute;
-				right: 20px;
-				top: 12px;
-				width: 32px;
-				height: 32px;
-			}
+			(function() {
+				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+			})();

-			#expandButton span {
-				height: 2px;
-				background-color: #2194CE;
-				width: 16px;
-				position: absolute;
-				left: 8px;
-				top: 10px;
-			}
+		</script>
+		
+		<div id="panel">

-			#expandButton span:nth-child(1) {
-				top: 16px;
-			}
+			<div id="header">
+				<h1><a href="http://threejs.org">three.js</a></h1>

-			#expandButton span:nth-child(2) {
-				top: 22px;
-			}
+				<div id="sections">
+					<a href="../docs/">docs</a>
+					<span class="selected">examples</span>
+				</div>

-			@media all and ( max-width: 640px ) {
-				h1{
-					margin-top: 20px;
-					margin-bottom: 20px;
-				}
-				#panel{
-					position: absolute;
-					left: 0;
-					top: 0;
-					height: 480px;
-					width: 100%;
-					right: 0;
-					z-index: 100;
-					overflow: hidden;
-					border-bottom: 1px solid #dedede;
-				}
-				#content{
-					position: absolute;
-					left: 0;
-					top: 90px;
-					right: 0;
-					bottom: 0;
-					font-size: 17px;
-					line-height: 22px;
-					overflow: auto;
-				}
-				#viewer{
-					position: absolute;
-					left: 0;
-					top: 56px;
-					width: 100%;
-					height: calc(100% - 56px);
-				}
-				#expandButton{
-					display: block;
-				}
-				#panel.collapsed{
-					height: 56px;
-				}
-			}
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
+			</div>

-		</style>
-	</head>
-	<body>
-		<script type="text/javascript">
+			<div id="panelScrim"></div>

-		  var _gaq = _gaq || [];
-		  _gaq.push(['_setAccount', 'UA-86951-15']);
-		  _gaq.push(['_trackPageview']);
+			<div id="contentWrapper">
+				<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+				<div id="exitSearchButton"></div>

-		  (function() {
-		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-		  })();
+				<select id="language">
+					<option value="en">en</option>
+					<option value="zh">zh</option>
+				</select>

-		</script>
-
-		<div id="panel">
-			<h1><a href="http://threejs.org">three.js</a> / examples</h1>
-			<a id="expandButton" href="#">
-				<span></span>
-				<span></span>
-				<span></span>
-			</a>
-			<div class="filterBlock" >
-				<input type="text" id="filterInput" placeholder="Type to filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-				<a href="#" id="clearFilterButton" >x</a>
+				<div id="content"></div>
 			</div>
-			<div id="content"></div>
+
 		</div>
+
 		<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>

+		<a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>
+
 		<script src="files.js"></script>

 		<script>
@@ -269,15 +98,23 @@
 		var content = document.getElementById( 'content' );
 		var viewer = document.getElementById( 'viewer' );

-		var filterInput = document.getElementById( 'filterInput' );
-		var clearFilterButton = document.getElementById( 'clearFilterButton' );
+		var filterInput = document.getElementById( 'filter' );
+		var exitSearchButton = document.getElementById( 'exitSearchButton' );

 		var expandButton = document.getElementById( 'expandButton' );
 		expandButton.addEventListener( 'click', function ( event ) {
 			event.preventDefault();
-			panel.classList.toggle( 'collapsed' );
+			panel.classList.toggle( 'open' );
 		} );

+		var panelScrim = document.getElementById( 'panelScrim' );
+		panelScrim.onclick = function ( event ) {
+
+			event.preventDefault();
+			panel.classList.toggle( 'open' );
+
+		};
+
 		// iOS iframe auto-resize workaround

 		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
@@ -291,12 +128,8 @@
 		var container = document.createElement( 'div' );
 		content.appendChild( container );

-		var viewSrcButton = document.createElement( 'a' );
-		viewSrcButton.id = 'viewSrcButton';
-		viewSrcButton.target = '_blank';
-		viewSrcButton.textContent = 'View source';
+		var viewSrcButton = document.getElementById( 'button' );
 		viewSrcButton.style.display = 'none';
-		document.body.appendChild( viewSrcButton );

 		var links = {};
 		var selected = null;
@@ -358,14 +191,14 @@
 			window.location.hash = file;
 			viewer.focus();

-			panel.classList.add( 'collapsed' );
+			panel.classList.remove( 'open' );

 			selected = file;

 			// Reveal "View source" button and set attributes to this example
 			viewSrcButton.style.display = '';
 			viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
-			viewSrcButton.title = 'View source code for ' + getName(selected) + ' on GitHub';
+			viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';

 		}

@@ -376,18 +209,31 @@
 		}

 		// filter
+		filterInput.onfocus = function ( event ) {

-		filterInput.addEventListener( 'input', function( e ) {
+			panel.classList.add('searchFocused');

-			updateFilter();
+		}

-		} );
+		filterInput.onblur = function ( event ) {
+
+			if(filterInput.value === '') {
+				panel.classList.remove('searchFocused');
+			}

-		clearFilterButton.addEventListener( 'click', function( e ) {
+		}
+
+		exitSearchButton.onclick = function( event ) {

 			filterInput.value = '';
 			updateFilter();
-			e.preventDefault();
+			panel.classList.remove('searchFocused');
+
+		}
+
+		filterInput.addEventListener( 'input', function( e ) {
+
+			updateFilter();

 		} );

@@ -427,7 +273,7 @@

 			if ( res && res.length > 0 ) {

-				link.classList.remove( 'filtered' );
+				link.classList.remove( 'hidden' );

 				for( var i = 0; i < res.length; i++ ) {
 					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
@@ -437,7 +283,7 @@

 			} else {

-				link.classList.add( 'filtered' );
+				link.classList.add( 'hidden' );
 				link.innerHTML = name;

 			}
@@ -463,7 +309,7 @@

 					var file = section[ i ];

-					if( !links[ file ].classList.contains( 'filtered' ) ){
+					if ( links[ file ].classList.contains( 'hidden' ) === false ){

 						collapsed = false;
 						break;
@@ -474,13 +320,13 @@

 				var element = document.querySelector( 'h2[data-category="' + key + '"]' );

-				if( collapsed ){
+				if ( collapsed ) {

-					element.classList.add( 'filtered' );
+					element.classList.add( 'hidden' );

 				} else {

-					element.classList.remove( 'filtered' );
+					element.classList.remove( 'hidden' );

 				}


--- a/files/RobotoMono-Regular.woff2
+++ b/files/RobotoMono-Regular.woff2
--- a/files/SF-Pro-Text-Regular.otf
+++ b/files/SF-Pro-Text-Regular.otf
--- a/files/editor.png
+++ b/files/editor.png
--- a/files/favicon.ico
+++ b/files/favicon.ico
--- a/files/ic_arrow_drop_down_black_24dp.svg
+++ b/files/ic_arrow_drop_down_black_24dp.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M7 10l5 5 5-5z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
--- a/files/ic_close_black_24dp.svg
+++ b/files/ic_close_black_24dp.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
--- a/files/ic_code_black_24dp.svg
+++ b/files/ic_code_black_24dp.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+</svg>
--- a/files/ic_github_black_24dp.svg
+++ b/files/ic_github_black_24dp.svg
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000">
+<g id="XMLID_399_">
+	<path id="XMLID_290_" fill-rule="evenodd" clip-rule="evenodd" d="M12,2C6.48,2,2,6.59,2,12.25c0,4.53,2.87,8.37,6.84,9.73
+		c0.5,0.09,0.68-0.22,0.68-0.49c0-0.24-0.01-0.89-0.01-1.74c-2.78,0.62-3.37-1.37-3.37-1.37c-0.45-1.18-1.11-1.5-1.11-1.5
+		c-0.91-0.64,0.07-0.62,0.07-0.62c1,0.07,1.53,1.06,1.53,1.06c0.89,1.57,2.34,1.11,2.91,0.85c0.09-0.66,0.35-1.11,0.63-1.37
+		c-2.22-0.26-4.56-1.14-4.56-5.07c0-1.12,0.39-2.03,1.03-2.75c-0.1-0.26-0.45-1.3,0.1-2.71c0,0,0.84-0.28,2.75,1.05
+		c0.8-0.23,1.65-0.34,2.5-0.34c0.85,0,1.7,0.12,2.5,0.34c1.91-1.33,2.75-1.05,2.75-1.05c0.55,1.41,0.2,2.45,0.1,2.71
+		c0.64,0.72,1.03,1.63,1.03,2.75c0,3.94-2.34,4.81-4.57,5.06c0.36,0.32,0.68,0.94,0.68,1.9c0,1.37-0.01,2.48-0.01,2.81
+		c0,0.27,0.18,0.59,0.69,0.49c3.97-1.36,6.83-5.2,6.83-9.73C22,6.59,17.52,2,12,2"/>
+	<rect id="XMLID_289_" fill-rule="evenodd" clip-rule="evenodd" fill="none" width="24" height="24"/>
+</g>
+</svg>
--- a/files/ic_menu_black_24dp.svg
+++ b/files/ic_menu_black_24dp.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
--- a/files/ic_mode_edit_black_24dp.svg
+++ b/files/ic_mode_edit_black_24dp.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
--- a/files/ic_search_black_24dp.svg
+++ b/files/ic_search_black_24dp.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
--- a/files/inconsolata.woff
+++ b/files/inconsolata.woff
--- a/files/main.css
+++ b/files/main.css
+:root {
+	--color-blue: #049EF4;
+	--text-color: #444;
+	--border-style: 1px solid #EEE;
+	--header-height: 48px;
+	--panel-padding: 16px;
+}
+
+@font-face {
+	font-family: 'Roboto Mono';
+	src: local('Roboto Mono'), url('../files/RobotoMono-Regular.woff2') format('woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+
+* {
+	box-sizing: border-box; /* don't let padding modify width */
+}
+
+html, body {
+	height: 100%;
+}
+
+body {
+	margin: 0px;
+	overflow: hidden;
+	font-family: 'Roboto Mono', monospace;
+	font-size: 14px;
+	line-height: 24px;
+	background-color: #ffffff;
+	color: var(--text-color);
+}
+
+a {
+	text-decoration: none;
+}
+
+h1 {
+	font-size: 18px;
+	font-weight: 500;
+}
+
+h2 {
+	padding: 8px 0;
+	margin: 6px 0 12px 0;
+	font-size: 14px;
+	font-weight: normal;
+	color: var(--color-blue);
+}
+
+h3 {
+	margin: 4px 0;
+	font-size: 14px;
+	line-height: 23px;
+	font-weight: 500;
+	text-transform: uppercase;
+	color: #9E9E9E;
+}
+
+h1 a {
+	color: var(--color-blue);
+}
+
+#header {
+	display: flex;
+	height: 48px;
+	border-bottom: var(--border-style);
+	align-items: center;
+}
+#header h1 {
+	margin-left: 15px;
+	flex: 1;
+}
+
+#panel {
+	position: fixed;
+	left: 0px;
+	width: 300px;
+	height: 100%;
+	overflow: auto;
+	border-right: var(--border-style);
+	display: flex;
+	flex-direction: column;
+	transition: 0s 0s height;
+}
+
+	#panel #exitSearchButton {
+		position: absolute;
+		width: 40px;
+		height: 40px;
+		top: 4px;
+		right: calc(var(--panel-padding) - 12px);
+		z-index: 1000;
+		display: none;
+		background-size: 20px 20px;
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+		background-image: url(../files/ic_close_black_24dp.svg);
+		cursor: pointer;
+	}
+
+	#panel.searchFocused #exitSearchButton {
+		display: block;
+	}
+
+	#panel.searchFocused #language {
+		display: none;
+	}
+
+	#panel.searchFocused #filter {
+		background-image: none;
+		padding-left: var(--panel-padding);
+	}
+
+	#panel #expandButton {
+		margin-right: 14px;
+		margin-left: 4px;
+		display: none;
+	}
+
+	#panel #sections {
+		font-weight: 500;
+		display: flex;
+		justify-content: center;
+		z-index: 1000;
+		position: relative;
+		height: 100%;
+		align-items: center;
+	}
+
+		#panel #sections * {
+			padding: 0 var(--panel-padding);
+			height: 100%;
+			position: relative;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		#panel #sections .selected:after {
+			content: "";
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: -1px;
+			border-bottom: 1px solid black;
+		}
+		#panel #sections a {
+			color: #9E9E9E;
+		}
+
+	#panel #filter {
+		width: 100%;
+		height: 48px;
+		padding: 0px 44px;
+		font-weight: 500;
+		font-size: 14px;
+		color: var(--text-color);
+		outline: none;
+		border: 0px;
+		border-bottom: var(--border-style);
+		background-size: 20px 20px;
+		background-image: url(../files/ic_search_black_24dp.svg);
+		background-position: 14px 50%;
+		background-repeat: no-repeat;
+	}
+
+	#panel #language {
+		font-family: 'Roboto Mono', monospace;
+		position: absolute;
+		top: 9px;
+		right: 8px;
+		border: 0px;
+		font-size: 14px;
+		font-weight: 500;
+		background: url(ic_arrow_drop_down_black_24dp.svg) no-repeat;
+		background-position: right center;
+		background-color: white;
+		padding: 4px 24px 4px 8px;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+	}
+
+		#panel #language:focus {
+			outline: none;
+		}
+
+	#contentWrapper {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		transform: translate3d(0,0,0);
+	}
+	#panel #content {
+		flex: 1;
+		overflow: scroll;
+		padding: 0 var(--panel-padding) 24px var(--panel-padding);
+	}
+
+		#panel #content ul {
+			list-style-type: none;
+			padding: 0px;
+			margin: 0px 0 24px 0;
+		}
+		#panel #content ul li {
+			margin: 2px 0;
+		}
+
+		#panel #content a {
+			color: var(--text-color);
+		}
+
+		#panel #content a:hover,
+		#panel #content .selected {
+			color: var(--color-blue);
+		}
+
+		#panel #content .selected {
+			text-decoration: underline;
+		}
+
+		#panel #content .hidden {
+			display: none !important;
+		}
+
+iframe {
+	position: absolute;
+	border: 0px;
+	left: 300px;
+	width: calc(100% - 300px);
+	height: 100%;
+	overflow: auto;
+}
+
+/* mobile */
+
+@media all and ( max-width: 640px ) {
+	#panel #expandButton {
+		display: block;
+	}
+	#panel {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		right: 0;
+		z-index: 100;
+		overflow-x: hidden;
+		transition: 0s 0s height;
+		border: none;
+		height: var(--header-height);
+		transition: 0s 0.2s height;
+	}
+	#panel.open {
+		height: 100%;
+		transition: 0s 0s height;
+	}
+
+	#panelScrim {
+		pointer-events: none;
+		background-color: rgba(0,0,0,0);
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 1000;
+		pointer-events: none;
+		transition: .2s background-color;
+	}
+	#panel.open #panelScrim {
+		pointer-events: auto;
+		background-color: rgba(0,0,0,0.4);
+	}
+
+	#contentWrapper {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background: white;
+		box-shadow: 0 0 8px rgba(0,0,0,.1);
+		width: calc(100vw - 60px);
+		max-width: 360px;
+		z-index: 10000;
+		transition: .25s transform;
+		overflow-x: hidden;
+		margin-right: -380px;
+	}
+	#panel.open #contentWrapper {
+		transform: translate3d(-380px, 0 ,0);
+	}
+
+	iframe {
+		position: absolute;
+		left: 0;
+		top: var(--header-height);
+		width: 100%;
+		height: calc(100% - var(--header-height));
+	}
+}