Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #16456 from mrdoob/design-update

Homepage design update
Mr.doob 6 years ago
parent
3c78bc33fe 11fbb3930c
commit
b0ab514b50
24 changed files with 1015 additions and 635 deletions
Split View Show Diff Stats
  1. BIN
      docs/files/inconsolata.woff
  2. 1 0
      docs/index.css
  3. 81 42
      docs/index.html
  4. 1 1
      docs/manual/en/introduction/Creating-a-scene.html
  5. 1 1
      docs/manual/en/introduction/Import-via-modules.html
  6. 183 65
      docs/page.css
  7. 1 2
      docs/page.js
  8. 4 2
      docs/prettify/threejs.css
  9. BIN
      examples/files/inconsolata.woff
  10. 75 253
      examples/index.html
  11. BIN
      files/RobotoMono-Medium.woff2
  12. BIN
      files/RobotoMono-Regular.woff2
  13. BIN
      files/SF-Pro-Text-Regular.otf
  14. BIN
      files/editor.png
  15. BIN
      files/favicon.ico
  16. 4 0
      files/ic_arrow_drop_down_black_24dp.svg
  17. 4 0
      files/ic_close_black_24dp.svg
  18. 4 0
      files/ic_code_black_24dp.svg
  19. 4 0
      files/ic_menu_black_24dp.svg
  20. 4 0
      files/ic_mode_edit_black_24dp.svg
  21. 4 0
      files/ic_search_black_24dp.svg
  22. BIN
      files/inconsolata.woff
  23. 527 0
      files/main.css
  24. 117 269
      index.html

BIN
docs/files/inconsolata.woff
View File


+ 1 - 0
docs/index.css
View File 

@@ -133,6 +133,7 @@ iframe {
 
 	top: 12px;
 
 	width: 32px;
 
 	height: 32px;
 
+	background-image: url(files/ic_menu_black_24dp.svg);
 
 }
 
 
 #expandButton span {

+ 81 - 42
docs/index.html
View File 

@@ -2,49 +2,55 @@
 
 <html lang="en">
 
 	<head>
 
 		<meta charset="utf-8">
 
-		<title>three.js / documentation</title>
 
+		<title>three.js docs</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/#webgl_animation_cloth">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>
 
+				<div id="expandButton"></div>
 
 			</div>
 
 
-			<div style="text-align:center">
 
-				<br />
 
-				<a href="javascript:setLanguage('en')">en</a> |
 
-				<a href="javascript:setLanguage('zh')">zh</a>
 
+			<div id="panelScrim"></div>
 
+
 
+			<div id="contentWrapper">
 
+				<div id="inputWrapper">
 
+					<input placeholder="" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
 
+					<div id="exitSearchButton"></div>
 
+					<select id="language">
 
+						<option value="en">en</option>
 
+						<option value="zh">zh</option>
 
+					</select>
 
+				</div>
 
+				<div id="content"></div>
 
 			</div>
 
 
-			<div id="content"></div>
 
-
 
 		</div>
 
 
 		<iframe name="viewer"></iframe>
 
@@ -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');
 
 
 				} );
 
 
@@ -390,7 +431,7 @@
 
 				if(hash) {
 
 
 					iframe.src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
 
-					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' - ';
 
+					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' – ';
 
 
 				} else {
 
 
@@ -402,6 +443,7 @@
 
 				document.body.replaceChild( iframe, oldIframe );
 
 				document.title = subtitle + 'three.js docs';
 
 
+
 
 			}
 
 
 			function decomposePageName( pageName, oldDelimiter, newDelimiter ) {
 
@@ -447,9 +489,6 @@
 
 
 		</script>
 
 
-		<!-- console sandbox -->
 
-		<script src="../build/three.min.js"></script>
 
-
 
 	</body>
 
 
 </html>

+ 1 - 1
docs/manual/en/introduction/Creating-a-scene.html
View File 

@@ -8,7 +8,7 @@
 
 		<link type="text/css" rel="stylesheet" href="page.css" />
 
 	</head>
 
 	<body>
 
-		<h1>[name]</h1><br />
 
+		<h1>[name]</h1>
 
 
 		<p>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</p>

+ 1 - 1
docs/manual/en/introduction/Import-via-modules.html
View File 

@@ -8,7 +8,7 @@
 
 		<link type="text/css" rel="stylesheet" href="page.css" />
 
 	</head>
 
 	<body>
 
-		<h1>[name]</h1><br />
 
+		<h1>[name]</h1>
 
 
 		<p>
 
 			While importing three.js via script tags is a great way to get up and running fast, it has a few drawbacks for longer lived projects, for example:

+ 183 - 65
docs/page.css
View File 

@@ -1,79 +1,159 @@
 
+:root {
 
+	--color-blue: #049EF4;
 
+	--text-color: #444;
 
+
 
+	--font-size: 14px;
 
+	--line-height: 24px;
 
+	--font-size-sanserif: 1.128rem;
 
+	--line-height-sanserif: 1.74rem;
 
+
 
+	--border-style: 1px solid #E8E8E8;
 
+	--header-height: 48px;
 
+	--panel-width: 300px;
 
+	--panel-padding: 1.143rem;
 
+	--page-padding: 1.5rem;
 
+	--max-width: 760px;
 
+	--icon-size: 1.428rem;
 
+}
 
+
 
+@font-face {
 
+	font-family: 'Roboto Mono';
 
+	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 
+	font-style: normal;
 
+	font-weight: 400;
 
+}
 
+
 
 @font-face {
 
-	font-family: 'inconsolata';
 
-	src: url('files/inconsolata.woff') format('woff');
 
+	font-family: 'SF-Pro-Text';
 
+	src: local('SF-Pro-Text'), url('../files/SF-Pro-Text-Regular.otf');
 
 	font-weight: normal;
 
 	font-style: normal;
 
 }
 
 
+html {
 
+	font-size: var(--font-size);
 
+	line-height: var(--line-height);
 
+}
 
+
 
 body {
 
-	margin: 30px 20px;
 
-	color: #555;
 
-	font-family: 'inconsolata';
 
-	font-size: 15px;
 
-	line-height: 18px;
 
+	font-family: 'SF-Pro-Text', sans-serif;
 
+	color: var(--text-color);
 
 	tab-size: 4;
 
 	overflow: auto;
 
+	max-width: var(--max-width);
 
+	margin: 0 auto;
 
+	padding-top: var(--page-padding);
 
+	padding-bottom: var(--page-padding);
 
+	padding-right: var(--page-padding);
 
+	padding-left: calc(var(--page-padding) + var(--panel-width));
 
 }
 
 
 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.8rem;
 
+	line-height: 3.4rem;
 
 	font-weight: normal;
 
-
 
-	margin-top: 10px;
 
+	margin-top: 1rem;
 
+	margin-bottom: -0.4rem;
 
+	margin-left: -2px;
 
 }
 
 
 h2 {
 
-	color: #4B0;
 
-	font-size: 18px;
 
+	color: var(--color-blue);
 
+	font-size: 2rem;
 
+	line-height: 2.6rem;
 
 	font-weight: normal;
 
-
 
-	margin-top: 40px;
 
+	margin-top: 2rem;
 
+	margin-bottom: -0.4rem;
 
 }
 
 
 h3 {
 
-	color: #000;
 
-	font-size: 16px;
 
+	color: var(--color-blue);
 
+	font-size: 1.32rem;
 
+	line-height: 2rem;
 
 	font-weight: normal;
 
+	margin-top: 1.8rem;
 
+	margin-bottom: 1rem;
 
+}
 
+
 
+p,
 
+div,
 
+table,
 
+ol,
 
+ul {
 
+	font-size: var(--font-size-sanserif);
 
+	line-height: var(--line-height-sanserif);
 
+	margin-top: .8rem;
 
+	margin-bottom: .8rem;
 
+}
 
 
-	margin-top: 40px;
 
+p {
 
+	padding-right: 1rem;
 
 }
 
 
-p, ul, ol {
 
-	margin-top: 0;
 
-	margin-bottom: 20px;
 
-	max-width: 780px;
 
+ul, ol {
 
+	box-sizing: border-box;
 
+	padding-left: 24px;
 
+}
 
+ul li,
 
+ol li {
 
+	padding-left: 0.25rem;
 
+	margin-bottom: 0.25rem;
 
 }
 
 
-div {
 
-	/* padding-left: 30px; */
 
-	margin-bottom: 20px;
 
+li ul,
 
+li ol {
 
+	margin-top: 0.25rem;
 
+}
 
+
 
+
 
+pre,
 
+code {
 
+	margin: 1.2rem calc(-1 * var(--page-padding));
 
+}
 
+
 
+ol code,
 
+ul code {
 
+	margin: 1.2rem 0;
 
+}
 
+
 
+table {
 
+	width: 100%;
 
+	border-collapse: collapse;
 
 }
 
 
 .desc {
 
 	padding-left: 0px;
 
 }
 
 
-pre, code {
 
-	margin-top: 20px;
 
-	margin-bottom: 20px;
 
+table th,
 
+table td {
 
+	text-align: left;
 
+	vertical-align: top;
 
+	padding: .6rem .4rem;
 
+	border-bottom: var(--border-style);
 
+}
 
+
 
+table th {
 
+	text-decoration: none;
 
+}
 
+table th:first-child,
 
+table td:first-child {
 
+	padding-left: 0;
 
 }
 
 
 code {
 
 	display: block;
 
-	width: -webkit-calc( 100% - 40px );
 
-	width: -moz-calc( 100% - 40px );
 
-	width: calc( 100% - 40px );
 
-	padding: 20px;
 
+	padding: 1.32rem var(--page-padding);
 
 	white-space: pre-wrap;
 
-	background-color: #f9f9f9;
 
 	overflow: auto;
 
+	box-sizing: border-box;
 
 }
 
 
 iframe {
 
@@ -82,44 +162,46 @@ iframe {
 
 	border:0;
 
 }
 
 
-th {
 
-	padding: 10px;
 
-	text-decoration: underline;
 
-}
 
-
 
-td {
 
-	text-align: center;
 
-}
 
-
 
 table code {
 
-	padding: 2px;
 
+	padding: 0px;
 
 	margin: 0px;
 
 	width: auto;
 
 }
 
 
 strong {
 
-	color: #000;
 
-	font-weight: normal;
 
+	font-weight: bold;
 
 }
 
 
+
 
+/* TODO: Duplicate styles in main.css. Needed here cause button is inside the iframe */
 
 #button {
 
 	position: fixed;
 
-	top: 20px;
 
-	right: 20px;
 
-	padding: 8px;
 
-	color: #fff;
 
-	background-color: #555;
 
-	opacity: 0.5;
 
-}
 
+	bottom: 1rem;
 
+	right: 1rem;
 
 
-#button:hover {
 
-	cursor: pointer;
 
-	opacity: 1;
 
+	padding: 0.75rem;
 
+	border-radius: 2rem;
 
+	margin-bottom: 0px;
 
+
 
+	background-color: #FFF;
 
+	opacity: .9;
 
+	z-index: 999;
 
+
 
+	box-shadow: 0 0 4px rgba(0,0,0,.15);
 
 }
 
+	#button:hover {
 
+		cursor: pointer;
 
+		opacity: 1;
 
+	}
 
+	#button img {
 
+		display: block;
 
+		width: calc(1.125 * var(--icon-size));
 
+	}
 
 
 a.permalink {
 
 	float: right;
 
 	margin-left: 5px;
 
+	display: none;
 
 }
 
 
 a.param,
 
@@ -128,16 +210,52 @@ span.param {
 
 }
 
 
 a.param:hover {
 
-	color: #777;
 
+	color: var(--text-color);
 
 }
 
 
-sup, sub {
 
-	/* prevent superscript and subscript elements from affecting line-height */
 
-	vertical-align: baseline;
 
-	position: relative;
 
-	top: -0.4em;
 
+
 
+@media all and ( min-width: 1700px ) {
 
+	:root {
 
+		--panel-width: 360px;
 
+		--font-size: 18px;
 
+		--line-height: 30px;
 
+		--header-height: 60px;
 
+		--max-width: 1160px;
 
+	}
 
 }
 
 
-sub {
 
-	top: 0.4em;
 
+
 
+/* @media all and ( min-width: 2400px ) {
 
+	:root {
 
+		--panel-width: 480px;
 
+		--font-size: 24px;
 
+		--line-height: 38px;
 
+		--header-height: 72px;
 
+		--max-width: 1280px;
 
+	}
 
+} */
 
+
 
+/* mobile */
 
+
 
+@media all and ( max-width: 640px ) {
 
+	:root {
 
+		--page-padding: var(--panel-padding);
 
+	}
 
+
 
+	body {
 
+		padding: var(--page-padding);
 
+	}
 
+
 
+	h1 {
 
+		font-size: 2rem;
 
+		line-height: 2.6rem;
 
+		padding-right: 2rem;
 
+		margin-top: 0;
 
+	}
 
+
 
+	h2 {
 
+    font-size: 1.6rem;
 
+    line-height: 2.2rem;
 
+		margin-top: 1.6rem;
 
+	}
 
 }

+ 1 - 2
docs/page.js
View File 

@@ -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' );

+ 4 - 2
docs/prettify/threejs.css
View File 

@@ -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: var(--font-size);
 
+	line-height: var(--line-height);
 
 }

BIN
examples/files/inconsolata.woff
View File


+ 75 - 253
examples/index.html
View File 

@@ -1,258 +1,63 @@
 
 <!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;
 
 			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<script type="text/javascript">
 
 
-			#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 {
 
-				position: fixed;
 
-				bottom: 20px;
 
-				right: 20px;
 
-				padding: 8px;
 
-				color: #fff;
 
-				background-color: #555;
 
-				opacity: 0.7;
 
-			}
 
-
 
-			#viewSrcButton:hover {
 
-				cursor: pointer;
 
-				opacity: 1;
 
-			}
 
-
 
-			.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;
 
-			}
 
-
 
-			#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;
 
-			}
 
-
 
-			#clearFilterButton:hover {
 
-				opacity: 1;
 
-			}
 
-
 
-			.filtered {
 
-				display: none !important;
 
-			}
 
-
 
-			#panel li b {
 
-				font-weight: bold;
 
-			}
 
-
 
-			/* 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>
 
 
-			#expandButton span:nth-child(1) {
 
-				top: 16px;
 
-			}
 
+		<div id="panel">
 
 
-			#expandButton span:nth-child(2) {
 
-				top: 22px;
 
-			}
 
+			<div id="header">
 
+				<h1><a href="http://threejs.org">three.js</a></h1>
 
 
-			@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;
 
-				}
 
-			}
 
+				<div id="sections">
 
+					<a href="../docs/index.html#manual/introduction/Creating-a-scene">docs</a>
 
+					<span class="selected">examples</span>
 
+				</div>
 
 
-		</style>
 
-	</head>
 
-	<body>
 
-		<script type="text/javascript">
 
+				<div id="expandButton"></div>
 
+			</div>
 
 
-		  var _gaq = _gaq || [];
 
-		  _gaq.push(['_setAccount', 'UA-86951-15']);
 
-		  _gaq.push(['_trackPageview']);
 
+			<div id="panelScrim"></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);
 
-		  })();
 
+			<div id="contentWrapper">
 
 
-		</script>
 
+				<div id="inputWrapper">
 
+					<input placeholder="" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
 
+					<div id="exitSearchButton"></div>
 
+				</div>
 
 
-		<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 +74,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 +104,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 +167,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 +185,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 +249,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 +259,7 @@
 
 
 			} else {
 
 
-				link.classList.add( 'filtered' );
 
+				link.classList.add( 'hidden' );
 
 				link.innerHTML = name;
 
 
 			}
 
@@ -447,7 +269,7 @@
 
 
 			var name = file.split( '_' );
 
 			name.shift();
 
-			return name.join( ' / ' );
 
+			return name.join( '<span class="spacer">/</span>' );
 
 
 		}
 
 
@@ -463,7 +285,7 @@
 
 
 					var file = section[ i ];
 
 
-					if( !links[ file ].classList.contains( 'filtered' ) ){
 
+					if ( links[ file ].classList.contains( 'hidden' ) === false ){
 
 
 						collapsed = false;
 
 						break;
 
@@ -474,13 +296,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' );
 
 
 				}

BIN
files/RobotoMono-Medium.woff2
View File


BIN
files/RobotoMono-Regular.woff2
View File


BIN
files/SF-Pro-Text-Regular.otf
View File


BIN
files/editor.png
View File


BIN
files/favicon.ico
View File


+ 4 - 0
files/ic_arrow_drop_down_black_24dp.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#444444">
 
+    <path d="M7 10l5 5 5-5z"/>
 
+    <path d="M0 0h24v24H0z" fill="none"/>
 
+</svg>

+ 4 - 0
files/ic_close_black_24dp.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#444444">
 
+    <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>

+ 4 - 0
files/ic_code_black_24dp.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#444444">
 
+    <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>

+ 4 - 0
files/ic_menu_black_24dp.svg
View File 

@@ -0,0 +1,4 @@
 
+<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>

+ 4 - 0
files/ic_mode_edit_black_24dp.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#444444">
 
+    <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>

+ 4 - 0
files/ic_search_black_24dp.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#444444">
 
+    <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>

BIN
files/inconsolata.woff
View File


+ 527 - 0
files/main.css
View File 

@@ -0,0 +1,527 @@
 
+:root {
 
+	--color-blue: #049EF4;
 
+	--text-color: #444;
 
+	--secondary-text-color: #9e9e9e;
 
+
 
+	--font-size: 14px;
 
+	--line-height: 24px;
 
+	--font-size-sanserif: 1.128rem;
 
+	--line-height-sanserif: 1.74rem;
 
+
 
+	--border-style: 1px solid #E8E8E8;
 
+	--header-height: 48px;
 
+	--panel-width: 300px;
 
+	--panel-padding: 1.143rem;
 
+	--page-padding: 1.5rem;
 
+	--max-width: 760px;
 
+	--icon-size: 20px;
 
+
 
+	--thumbnail-width: 200px;
 
+}
 
+
 
+@font-face {
 
+	font-family: 'Roboto Mono';
 
+	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 
+	font-style: normal;
 
+	font-weight: 400;
 
+}
 
+@font-face {
 
+  font-family: 'Roboto Mono';
 
+  src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url('../files/RobotoMono-Medium.woff2') format('woff2');
 
+	font-style: normal;
 
+  font-weight: 500;
 
+}
 
+
 
+* {
 
+	box-sizing: border-box;
 
+	-webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+html, body {
 
+	height: 100%;
 
+}
 
+
 
+html {
 
+	font-size: var(--font-size);
 
+	line-height: var(--line-height);
 
+}
 
+
 
+body {
 
+	font-family: 'Roboto Mono', monospace;
 
+	margin: 0px;
 
+	overflow: hidden;
 
+	color: var(--text-color);
 
+	background-color: #ffffff;
 
+}
 
+
 
+a {
 
+	text-decoration: none;
 
+}
 
+
 
+h1 {
 
+	font-size: 1.28rem;
 
+	line-height: 1.6rem;
 
+	font-weight: 500;
 
+}
 
+
 
+h2 {
 
+	padding: 0;
 
+	margin: 1rem 0;
 
+	font-size: 1rem;
 
+	line-height: 1.52rem;
 
+	font-weight: 500;
 
+	color: var(--color-blue);
 
+}
 
+
 
+h3 {
 
+	margin: 0.25rem 0;
 
+	font-weight: 500;
 
+	font-size: 1rem;
 
+	line-height: 1.52rem;
 
+	color: var(--secondary-text-color);
 
+}
 
+
 
+h1 a {
 
+	color: var(--color-blue);
 
+}
 
+
 
+#header {
 
+	display: flex;
 
+	height: var(--header-height);
 
+	border-bottom: var(--border-style);
 
+	align-items: center;
 
+}
 
+#header h1 {
 
+	padding-left: var(--panel-padding);
 
+	flex: 1;
 
+	display: flex;
 
+	align-items: center;
 
+	color: var(--color-blue);
 
+}
 
+#header #version {
 
+	border: 1px solid var(--color-blue);
 
+	color: var(--color-blue);
 
+	border-radius: 0.25rem;
 
+	line-height: 1.2rem;
 
+	padding: 0px 2px;
 
+	margin-left: 6px;
 
+	font-size: .9rem;
 
+}
 
+
 
+#panel {
 
+	position: fixed;
 
+	z-index: 100;
 
+	left: 0px;
 
+	width: var(--panel-width);
 
+	height: 100%;
 
+	overflow: auto;
 
+	border-right: var(--border-style);
 
+	display: flex;
 
+	flex-direction: column;
 
+	transition: 0s 0s height;
 
+}
 
+
 
+	#panel #exitSearchButton {
 
+		width: 3rem;
 
+		height: 3rem;
 
+		display: none;
 
+		background-size: var(--icon-size);
 
+		background-position: 50% 50%;
 
+		background-repeat: no-repeat;
 
+		background-image: url(../files/ic_close_black_24dp.svg);
 
+		cursor: pointer;
 
+		margin-right: 2px;
 
+	}
 
+
 
+	#panel.searchFocused #exitSearchButton {
 
+		display: block;
 
+	}
 
+
 
+	#panel.searchFocused #language {
 
+		display: none;
 
+	}
 
+
 
+	#panel.searchFocused #filter {
 
+		background-image: none;
 
+		padding-left: 0;
 
+	}
 
+
 
+	#panel #expandButton {
 
+		width: 3rem;
 
+		height: 3rem;
 
+		margin-right: 4px;
 
+		margin-left: 4px;
 
+		display: none;
 
+		cursor: pointer;
 
+		background-size: var(--icon-size);
 
+		background-position: 50% 50%;
 
+		background-repeat: no-repeat;
 
+		background-image: url(../files/ic_menu_black_24dp.svg);
 
+	}
 
+
 
+	#panel #sections {
 
+		display: flex;
 
+		justify-content: center;
 
+		z-index: 1000;
 
+		position: relative;
 
+		height: 100%;
 
+		align-items: center;
 
+		font-weight: 500;
 
+	}
 
+
 
+	#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 var(--text-color);
 
+	}
 
+	#panel #sections a {
 
+		color: var(--secondary-text-color);
 
+	}
 
+
 
+	body.home #panel #sections {
 
+		display: none;
 
+	}
 
+
 
+#panel #inputWrapper {
 
+	display: flex;
 
+	align-items: center;
 
+	height: var(--header-height);
 
+	padding: 0 0 0 var(--panel-padding);
 
+	position: relative;
 
+	background: white;
 
+}
 
+#panel #inputWrapper:after {
 
+	position: absolute;
 
+	left: 0;
 
+	right: 0;
 
+	bottom: 0;
 
+	border-bottom: var(--border-style);
 
+	content: "";
 
+}
 
+
 
+	#panel #filter {
 
+		flex: 1;
 
+		width: 100%;
 
+		padding: 0 2.2rem;
 
+		font-size: 1rem;
 
+		font-weight: 500;
 
+		color: var(--text-color);
 
+		outline: none;
 
+		border: 0px;
 
+		background-size: var(--icon-size);
 
+		background-image: url(../files/ic_search_black_24dp.svg);
 
+		background-position: 0 50%;
 
+		background-repeat: no-repeat;
 
+		font-family: 'Roboto Mono', monospace;
 
+	}
 
+
 
+	#panel #language {
 
+		font-family: 'Roboto Mono', monospace;
 
+		font-size: 1rem;
 
+		line-height: 1rem;
 
+		font-weight: 500;
 
+		color: #444;
 
+		border: 0px;
 
+		background-image: url(ic_arrow_drop_down_black_24dp.svg);
 
+		background-size: var(--icon-size);
 
+		background-repeat: no-repeat;
 
+		background-position: right center;
 
+		background-color: white;
 
+		padding: 4px 1.72rem;
 
+		-webkit-appearance: none;
 
+		-moz-appearance: none;
 
+		appearance: none;
 
+		margin-right: 10px;
 
+	}
 
+
 
+		#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-y: scroll;
 
+		overflow-x: hidden;
 
+		padding: 0 var(--panel-padding) 1rem var(--panel-padding);
 
+	}
 
+
 
+		#panel #content ul {
 
+			list-style-type: none;
 
+			padding: 0px;
 
+			margin: 0px 0 1.2rem 0;
 
+		}
 
+		#panel #content ul li {
 
+			margin: 1px 0;
 
+		}
 
+
 
+		#panel #content h2 {
 
+			margin-top: 2rem;
 
+			border-top: var(--border-style);
 
+	    padding-top: .8rem;
 
+		}
 
+
 
+		#panel #content h2:first-child {
 
+			margin-top: 1rem !important;
 
+			border-top: none;
 
+			padding-top: 0;
 
+		}
 
+
 
+		#panel #content a {
 
+			color: var(--text-color);
 
+		}
 
+
 
+		#panel #content a:hover,
 
+		#panel #content a:hover .spacer,
 
+		#panel #content .selected {
 
+			color: var(--color-blue);
 
+		}
 
+
 
+		#panel #content .selected {
 
+			text-decoration: underline;
 
+		}
 
+
 
+		#panel #content .hidden {
 
+			display: none !important;
 
+		}
 
+
 
+		body.home #panel #content h2 {
 
+			margin-bottom: 2px;
 
+			padding-bottom: 0px;
 
+			margin-top: 1.2rem;
 
+			border-top: none;
 
+			padding-top: .4rem;
 
+		}
 
+
 
+.spacer {
 
+	color: var(--secondary-text-color);
 
+	margin-left: 2px;
 
+	padding-right: 2px;
 
+}
 
+
 
+#viewer,
 
+iframe {
 
+	position: absolute;
 
+	border: 0px;
 
+	left: 0;
 
+	right: 0;
 
+	width: 100%;
 
+	height: 100%;
 
+	overflow: auto;
 
+}
 
+
 
+#viewer {
 
+	padding-left: var(--panel-width);
 
+}
 
+
 
+#button {
 
+	position: fixed;
 
+	bottom: 1rem;
 
+	right: 1rem;
 
+	padding: 0.75rem;
 
+	border-radius: 2rem;
 
+	margin-bottom: 0px;
 
+	background-color: #FFF;
 
+	opacity: .9;
 
+	z-index: 999;
 
+	box-shadow: 0 0 4px rgba(0,0,0,.15);
 
+}
 
+
 
+	#button:hover {
 
+		cursor: pointer;
 
+		opacity: 1;
 
+	}
 
+
 
+	#button img {
 
+		display: block;
 
+		width:  calc(1.125 * var(--icon-size));
 
+	}
 
+
 
+	#button.text {
 
+		padding-right: 1.2rem;
 
+    padding-left: 1.2rem;
 
+		color: var(--color-blue);
 
+		opacity: 1;
 
+	}
 
+
 
+
 
+#projects {
 
+	display: grid;
 
+	grid-template-columns: repeat(6, 1fr);
 
+	line-height: 0;
 
+}
 
+#projects a {
 
+	overflow: hidden;
 
+}
 
+#projects a img {
 
+	width: 100%;
 
+	transform: scale(1.0);
 
+	transition: 0.15s transform;
 
+}
 
+#projects a:hover img {
 
+	transform: scale(1.08);
 
+}
 
+
 
+
 
+
 
+@media all and ( min-width: 1500px ) {
 
+	#projects {
 
+		grid-template-columns: repeat(7, 1fr);
 
+	}
 
+}
 
+
 
+@media all and ( min-width: 1700px ) {
 
+	:root {
 
+		--panel-width: 360px;
 
+		--font-size: 18px;
 
+		--line-height: 30px;
 
+		--header-height: 60px;
 
+	}
 
+	#projects {
 
+		grid-template-columns: repeat(8, 1fr);
 
+	}
 
+}
 
+
 
+@media all and ( min-width: 1900px ) {
 
+
 
+	#projects {
 
+		grid-template-columns: repeat(9, 1fr);
 
+	}
 
+
 
+}
 
+
 
+/* @media all and ( min-width: 2400px ) {
 
+	:root {
 
+		--panel-width: 480px;
 
+		--font-size: 24px;
 
+		--line-height: 38px;
 
+		--header-height: 72px;
 
+		--max-width: 1280px;
 
+		--icon-size: 34px;
 
+	}
 
+} */
 
+
 
+
 
+@media all and ( max-width: 1300px ) {
 
+	#projects {
 
+		grid-template-columns: repeat(6, 1fr);
 
+	}
 
+}
 
+
 
+@media all and ( max-width: 1100px ) {
 
+	#projects {
 
+		grid-template-columns: repeat(5, 1fr);
 
+	}
 
+}
 
+
 
+@media all and ( max-width: 900px ) {
 
+	#projects {
 
+		grid-template-columns: repeat(4, 1fr);
 
+	}
 
+}
 
+
 
+@media all and ( max-width: 700px ) {
 
+	#projects {
 
+		grid-template-columns: repeat(3, 1fr);
 
+	}
 
+}
 
+
 
+
 
+/* mobile */
 
+
 
+@media all and ( max-width: 640px ) {
 
+
 
+	:root {
 
+		--header-height: 56px;
 
+		--icon-size: 24px;
 
+	}
 
+
 
+	#projects {
 
+		grid-template-columns: repeat(2, 1fr);
 
+	}
 
+
 
+	#panel #expandButton {
 
+		display: block;
 
+	}
 
+	#panel {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 0;
 
+		width: 100%;
 
+		right: 0;
 
+		z-index: 1000;
 
+		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;
 
+		line-height: 2rem;
 
+	}
 
+	#panel.open #contentWrapper {
 
+		transform: translate3d(-380px, 0 ,0);
 
+	}
 
+	#viewer,
 
+	iframe {
 
+		left: 0;
 
+		top: var(--header-height);
 
+		width: 100%;
 
+		height: calc(100% - var(--header-height));
 
+	}
 
+	#viewer {
 
+		padding-left: 0;
 
+	}
 
+}

+ 117 - 269
index.html
View File 

@@ -2,210 +2,12 @@
 
 <html lang="en">
 
 	<head>
 
 		<meta charset="utf-8">
 
-		<title>three.js - Javascript 3D library</title>
 
+		<title>three.js – Javascript 3D library</title>
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-
 
-			@font-face {
 
-				font-family: 'inconsolata';
 
-				src: url('files/inconsolata.woff') format('woff');
 
-				font-weight: normal;
 
-				font-style: normal;
 
-			}
 
-
 
-			* {
 
-				box-sizing: border-box;
 
-			}
 
-
 
-			body {
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				font-family: 'inconsolata';
 
-				font-size: 15px;
 
-				line-height: 18px;
 
-				color: #555;
 
-			}
 
-
 
-			h1 {
 
-				margin-top: 30px;
 
-				margin-bottom: 30px;
 
-				margin-left: 20px;
 
-				font-size: 25px;
 
-				font-weight: normal;
 
-			}
 
-
 
-			h2 {
 
-				color: #999;
 
-				font-size: 18px;
 
-				font-weight: normal;
 
-
 
-				margin-top: 5px;
 
-				margin-bottom: 30px;
 
-			}
 
-
 
-			hr {
 
-				border: 0px;
 
-				height: 1px;
 
-				background-color: #ddd;
 
-				margin: 30px 0px;
 
-			}
 
-
 
-			sup {
 
-				position: relative;
 
-				margin-left: 5px;
 
-				font-size: 15px;
 
-				top: -0.5em;
 
-				vertical-align: top;
 
-			}
 
-
 
-			a {
 
-				color: #2194CE;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				text-decoration: underline;
 
-			}
 
-
 
-			#panel {
 
-				position: fixed;
 
-				left: 0px;
 
-				top: 0px;
 
-				bottom: 0px;
 
-				width: 180px;
 
-				background: #ffffff;
 
-			}
 
-
 
-				#panel #content {
 
-					padding: 0px 20px;
 
-				}
 
-
 
-				#panel img {
 
-					outline: 1px solid #ccc;
 
-					vertical-align: middle;
 
-				}
 
-
 
-				#panel #editor {
 
-					margin-top: 30px;
 
-					text-align: center;
 
-				}
 
-
 
-				#panel #resource {
 
-					text-align: center;
 
-				}
 
-
 
-				#panel #book {
 
-					margin-top: 20px;
 
-					text-align: center;
 
-				}
 
-
 
-			#viewer {
 
-				position: absolute;
 
-				top: 0px;
 
-				right: 0px;
 
-				left: 180px;
 
-				padding: 28px 20px;
 
-			}
 
-
 
-				#viewer #submit {
 
-					position: absolute;
 
-					top: 32px;
 
-					right: 20px;
 
-				}
 
-
 
-				#viewer #projects a {
 
-					display: block;
 
-					width: 200px;
 
-					height: 150px;
 
-					float: left;
 
-				}
 
-
 
-				#viewer #projects img {
 
-					width: 100%;
 
-					height: 100%;
 
-				}
 
-
 
-				#viewer #projects img:hover {
 
-					opacity: 0.75;
 
-				}
 
-
 
-			/* mobile */
 
-
 
-			#expandButton {
 
-				display: none;
 
-				position: absolute;
 
-				right: 20px;
 
-				top: 12px;
 
-				width: 32px;
 
-				height: 32px;
 
-			}
 
-
 
-				#expandButton span {
 
-					height: 2px;
 
-					background-color: #2194CE;
 
-					width: 16px;
 
-					position: absolute;
 
-					left: 8px;
 
-					top: 10px;
 
-				}
 
-
 
-				#expandButton span:nth-child(1) {
 
-					top: 16px;
 
-				}
 
-
 
-				#expandButton span:nth-child(2) {
 
-					top: 22px;
 
-				}
 
-
 
-			@media all and ( max-width: 640px ) {
 
-				h1 {
 
-					margin-top: 20px;
 
-					margin-bottom: 20px;
 
-				}
 
-				h2 {
 
-					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: 60px;
 
-					right: 0;
 
-					bottom: 0;
 
-					font-size: 17px;
 
-					line-height: 22px;
 
-					text-align: center;
 
-					overflow: auto;
 
-				}
 
-				#viewer {
 
-					position: absolute;
 
-					left: 0;
 
-					top: 56px;
 
-					width: 100%;
 
-					height: calc(100% - 56px);
 
-					overflow: auto;
 
-				}
 
-				#expandButton {
 
-					display: block;
 
-				}
 
-				#panel.collapsed {
 
-					height: 56px;
 
-				}
 
-			}
 
-
 
-		</style>
 
+		<link rel="shortcut icon" href="files/favicon.ico" />
 
+		<link rel="stylesheet" type="text/css" href="files/main.css">
 
 	</head>
 
-	<body>
 
+	<body class="home">
 
 
 		<script src="//cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
 
 
@@ -223,52 +25,89 @@
 
 
 		</script>
 
 
-		<div id="panel" class="collapsed">
 
-			<h1>three.js<sup><a href="http://github.com/mrdoob/three.js/releases">r104</a></sup></h1>
 
-			<a id="expandButton" href="#">
 
-				<span></span>
 
-				<span></span>
 
-				<span></span>
 
-			</a>
 
-			<div id="content">
 
-				<a href="docs/index.html#manual/introduction/Creating-a-scene">documentation</a><br />
 
-				<a href="examples/">examples</a><br /><br />
 
-
 
-				<a href="https://github.com/mrdoob/three.js/archive/master.zip">download</a><br /><br />
 
-
 
-				<a href="https://github.com/mrdoob/three.js/">source code</a><br />
 
-				<a href="https://stackoverflow.com/questions/tagged/three.js">questions</a><br />
 
-				<a href="https://discourse.threejs.org/">forum</a><br />
 
-				<a href="http://webchat.freenode.net/?channels=three.js">irc</a><br />
 
-				<a href="https://threejs-slack.herokuapp.com">slack</a>
 
-
 
-				<div id="editor">
 
-					<a href="editor/"><img src="files/editor.png" width="127" height="89" /></a>
 
-				</div>
 
+		<div id="panel">
 
 
-				<hr />
 
+			<div id="header">
 
+				<h1><div>three.js</div><a id="version" href="http://github.com/mrdoob/three.js/releases">r104</a></h1>
 
 
-				<div id="resource">
 
-				<script>
 
-					var resources = [
 
-						'<a href="https://www.udacity.com/course/interactive-3d-graphics--cs291" target="_blank" rel="noopener"><img src="files/udacity.png" width="121" height="152" /></a>',
 
-						'<a href="http://davidscottlyons.com/threejs-intro/" target="_blank" rel="noopener"><img src="files/intro.png" width="121" height="106" /></a>'
 
-					];
 
-					document.write( resources[ Math.floor( Math.random() * resources.length ) ] );
 
-				</script>
 
+				<div id="sections">
 
+					<a href="docs/index.html#manual/introduction/Creating-a-scene">docs</a>
 
+					<a href="examples/#webgl_animation_cloth">examples</a>
 
 				</div>
 
 
-				<div id="book">
 
-				<script>
 
-					var books = [
 
-						'<a href="http://shop.oreilly.com/product/0636920024729.do" target="_blank" rel="noopener"><img src="files/books/webgl.png" width="100" height="132" /></a>',
 
-						'<a href="https://www.packtpub.com/web-development/learning-threejs-javascript-3d-library-webgl-second-edition" target="_blank" rel="noopener"><img src="files/books/learning-threejs-javascript-3d-library-webgl-second.png" width="100" height="123" /></a>',
 
-						'<a href="https://www.packtpub.com/game-development/game-development-threejs" target="_blank" rel="noopener"><img src="files/books/game-development-threejs.png" width="100" height="123" /></a>',
 
-						'<a href="https://www.packtpub.com/web-development/threejs-essentials" target="_blank" rel="noopener"><img src="files/books/threejs-essentials.png" width="100" height="124" /></a>',
 
-						'<a href="https://www.packtpub.com/web-development/threejs-cookbook" target="_blank" rel="noopener"><img src="files/books/threejs-cookbook.png" width="100" height="123" /></a>'
 
-					];
 
-					document.write( books[ Math.floor( Math.random() * books.length ) ] );
 
-				</script>
 
+				<div id="expandButton"></div>
 
+			</div>
 
+
 
+			<div id="panelScrim"></div>
 
+
 
+			<div id="contentWrapper">
 
+
 
+				<div id="content">
 
+
 
+					<h2>Learn</h2>
 
+					<ul>
 
+						<li><a href="docs/index.html#manual/introduction/Creating-a-scene">documentation</a></li>
 
+						<li><a href="examples/#webgl_animation_cloth">examples</a></li>
 
+						<li><a href="editor/">editor</a></li>
 
+					</ul>
 
+
 
+					<h2>Community</h2>
 
+					<ul>
 
+						<li><a href="https://stackoverflow.com/questions/tagged/three.js">questions</a></li>
 
+						<li><a href="https://discourse.threejs.org/">forum</a></li>
 
+						<li><a href="http://webchat.freenode.net/?channels=three.js">irc</a></li>
 
+						<li><a href="https://threejs-slack.herokuapp.com">slack</a></li>
 
+					</ul>
 
+
 
+					<h2>Code</h2>
 
+					<ul>
 
+						<li><a href="https://github.com/mrdoob/three.js/">github</a></li>
 
+						<li><a href="https://github.com/mrdoob/three.js/archive/master.zip">download</a></li>
 
+					</ul>
 
+
 
+					<h2>Online courses</h2>
 
+					<ul>
 
+						<li><a href="https://www.udacity.com/course/interactive-3d-graphics--cs291" target="_blank" rel="noopener">Interactive 3D Graphics</a></li>
 
+						<li><a href="http://davidscottlyons.com/threejs-intro/" target="_blank" rel="noopener">Intro to WebGL</a></li>
 
+					</ul>
 
+
 
+					<!--
 
+					<div id="resource">
 
+					<script>
 
+						var resources = [
 
+							'<a href="https://www.udacity.com/course/interactive-3d-graphics--cs291" target="_blank" rel="noopener"><img src="files/udacity.png" width="121" height="152" /></a>',
 
+							'<a href="http://davidscottlyons.com/threejs-intro/" target="_blank" rel="noopener"><img src="files/intro.png" width="121" height="106" /></a>'
 
+						];
 
+						document.write( resources[ Math.floor( Math.random() * resources.length ) ] );
 
+					</script>
 
+					</div>
 
+					-->
 
+
 
+					<h2>Books</h2>
 
+					<ul>
 
+						<li><a href="http://shop.oreilly.com/product/0636920024729.do" target="_blank" rel="noopener">WebGL: Up and Running</a></li>
 
+						<li><a href="https://www.packtpub.com/web-development/learning-threejs-javascript-3d-library-webgl-second-edition" target="_blank" rel="noopener">Learning Three.js</a></li>
 
+						<li><a href="https://www.packtpub.com/game-development/game-development-threejs" target="_blank" rel="noopener">Game Development <span style="display:none;">with Three.js</span></a></li>
 
+						<li><a href="https://www.packtpub.com/web-development/threejs-essentials" target="_blank" rel="noopener">Three.js Essentials</a></li>
 
+						<li><a href="https://www.packtpub.com/web-development/threejs-cookbook" target="_blank" rel="noopener">Three.js Cookbook</a></li>
 
+					</ul>
 
+
 
+
 
+					<!--
 
+					<div id="book">
 
+					<script>
 
+						var books = [
 
+							'<a href="http://shop.oreilly.com/product/0636920024729.do" target="_blank" rel="noopener"><img src="files/books/webgl.png" width="100" height="132" /></a>',
 
+							'<a href="https://www.packtpub.com/web-development/learning-threejs-javascript-3d-library-webgl-second-edition" target="_blank" rel="noopener"><img src="files/books/learning-threejs-javascript-3d-library-webgl-second.png" width="100" height="123" /></a>',
 
+							'<a href="https://www.packtpub.com/game-development/game-development-threejs" target="_blank" rel="noopener"><img src="files/books/game-development-threejs.png" width="100" height="123" /></a>',
 
+							'<a href="https://www.packtpub.com/web-development/threejs-essentials" target="_blank" rel="noopener"><img src="files/books/threejs-essentials.png" width="100" height="124" /></a>',
 
+							'<a href="https://www.packtpub.com/web-development/threejs-cookbook" target="_blank" rel="noopener"><img src="files/books/threejs-cookbook.png" width="100" height="123" /></a>'
 
+						];
 
+						document.write( books[ Math.floor( Math.random() * books.length ) ] );
 
+					</script>
 
+					</div>
 
+					-->
 
+
 
 				</div>
 
 			</div>
 
 		</div>
 
@@ -276,18 +115,27 @@
 
 		<script>
 
 		var panel = document.getElementById( 'panel' );
 
 		var expandButton = document.getElementById( 'expandButton' );
 
+		var panelScrim = document.getElementById( 'panelScrim' );
 
+
 
 		expandButton.addEventListener( 'click', function ( event ) {
 
 
-			panel.classList.toggle( 'collapsed' );
 
+			panel.classList.toggle( 'open' );
 
 			event.preventDefault();
 
 
 		} );
 
+
 
+		panelScrim.onclick = function ( event ) {
 
+
 
+			event.preventDefault();
 
+			panel.classList.toggle( 'open' );
 
+
 
+		};
 
+
 
 		</script>
 
 
 		<div id="viewer">
 
 
-			<h2>featured projects</h2>
 
-			<a id="submit" href="https://discourse.threejs.org/c/showcase">submit project</a>
 
+			<a id="button" class="text" href="https://discourse.threejs.org/c/showcase">submit project</a>
 
 
 			<div id="projects">
 
 
@@ -507,28 +355,28 @@
 
 
 			var projects = document.getElementById( 'projects' );
 
 
-			function resize() {
 
-
 
-				var baseWidth = 200;
 
-				var baseHeight = 150;
 
-
 
-				var fullWidth = projects.clientWidth;
 
-				var width = ( fullWidth / ( Math.ceil( fullWidth / baseWidth ) * baseWidth ) ) * baseWidth;
 
-				var height = ( width / baseWidth ) * baseHeight;
 
-
 
-				for ( var i = 0; i < projects.children.length; i ++ ) {
 
-
 
-					var child = projects.children[ i ];
 
-
 
-					child.style.width = width + 'px';
 
-					child.style.height = height + 'px';
 
-
 
-				}
 
-
 
-			}
 
-
 
-			window.addEventListener( 'resize', resize, false );
 
-			resize();
 
+			// function resize() {
 
+			//
 
+			// 	var baseWidth = 200;
 
+			// 	var baseHeight = 150;
 
+			//
 
+			// 	var fullWidth = projects.clientWidth;
 
+			// 	var width = ( fullWidth / ( Math.ceil( fullWidth / baseWidth ) * baseWidth ) ) * baseWidth;
 
+			// 	var height = ( width / baseWidth ) * baseHeight;
 
+			//
 
+			// 	for ( var i = 0; i < projects.children.length; i ++ ) {
 
+			//
 
+			// 		var child = projects.children[ i ];
 
+			//
 
+			// 		child.style.width = width + 'px';
 
+			// 		child.style.height = height + 'px';
 
+			//
 
+			// 	}
 
+			//
 
+			// }
 
+
 
+			// window.addEventListener( 'resize', resize, false );
 
+			// resize();
 
 
 		</script>