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

Added layout for extra large screen using rem sizes. Updated landing page. Refined docs layout.

Yuin Chien 6 years ago
parent
7fcd0f3b9a
commit
a95c74c7d7
12 changed files with 531 additions and 489 deletions
Unified View Show Diff Stats
  1. 12 11
      docs/index.html
  2. 119 80
      docs/page.css
  3. 2 2
      docs/prettify/threejs.css
  4. 8 32
      examples/index.html
  5. 1 1
      files/ic_arrow_drop_down_black_24dp.svg
  6. 1 1
      files/ic_close_black_24dp.svg
  7. 1 1
      files/ic_code_black_24dp.svg
  8. 0 15
      files/ic_github_black_24dp.svg
  9. 1 1
      files/ic_mode_edit_black_24dp.svg
  10. 1 1
      files/ic_search_black_24dp.svg
  11. 268 75
      files/main.css
  12. 117 269
      index.html

+ 12 - 11
docs/index.html
View File 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<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">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link rel="shortcut icon" href="../files/favicon.ico" />
 
 		<link rel="shortcut icon" href="../files/favicon.ico" />
 
 		<link rel="stylesheet" type="text/css" href="../files/main.css">
 
 		<link rel="stylesheet" type="text/css" href="../files/main.css">
 
@@ -31,7 +31,7 @@
 
 
 
 				<div id="sections">
 
 				<div id="sections">
 
 					<span class="selected">docs</span>
 
 					<span class="selected">docs</span>
 
-					<a href="../examples/">examples</a>
 
+					<a href="../examples/#webgl_animation_cloth">examples</a>
 
 				</div>
 
 				</div>
 
 
 
 				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
 				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
@@ -40,14 +40,14 @@
 
 			<div id="panelScrim"></div>
 
 			<div id="panelScrim"></div>
 
 
 
 			<div id="contentWrapper">
 
 			<div id="contentWrapper">
 
-				<input placeholder="Search" 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 id="inputWrapper">
 
+					<input placeholder="Search" 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 id="content"></div>
 
 			</div>
 
 			</div>
 
 
 
@@ -431,7 +431,7 @@
 
 				if(hash) {
 
 				if(hash) {
 
 
 
 					iframe.src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
 
 					iframe.src = splitHash[ 0 ] + '.html' + splitHash[ 1 ];
 
-					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' - ';
 
+					subtitle = titles[ splitHash[ 0 ] ] + splitHash[ 1 ] + ' – ';
 
 
 
 				} else {
 
 				} else {
 
 
 
@@ -443,6 +443,7 @@
 
 				document.body.replaceChild( iframe, oldIframe );
 
 				document.body.replaceChild( iframe, oldIframe );
 
 				document.title = subtitle + 'three.js docs';
 
 				document.title = subtitle + 'three.js docs';
 
 
 
+
 
 			}
 
 			}
 
 
 
 			function decomposePageName( pageName, oldDelimiter, newDelimiter ) {
 
 			function decomposePageName( pageName, oldDelimiter, newDelimiter ) {

+ 119 - 80
docs/page.css
View File 

@@ -1,15 +1,26 @@
 
 :root {
 
 :root {
 
 	--color-blue: #049EF4;
 
 	--color-blue: #049EF4;
 
 	--text-color: #444;
 
 	--text-color: #444;
 
-	--border-style: 1px solid #EEE;
 
-	--header-height: 56px;
 
+
 
+	--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-face {
 
 	font-family: 'Roboto Mono';
 
 	font-family: 'Roboto Mono';
 
-	src: local('Roboto Mono'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 
-	font-weight: normal;
 
+	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 
 	font-style: normal;
 
 	font-style: normal;
 
+	font-weight: 400;
 
 }
 
 }
 
 
 
 @font-face {
 
 @font-face {
 
@@ -19,15 +30,22 @@
 
 	font-style: normal;
 
 	font-style: normal;
 
 }
 
 }
 
 
 
+html {
 
+	font-size: var(--font-size);
 
+	line-height: var(--line-height);
 
+}
 
+
 
 body {
 
 body {
 
-	padding: 20px 24px 40px 24px;
 
-	margin: 0;
 
-	color: var(--text-color);
 
 	font-family: 'SF-Pro-Text', sans-serif;
 
 	font-family: 'SF-Pro-Text', sans-serif;
 
-	font-size: 16px;
 
-	line-height: 24px;
 
+	color: var(--text-color);
 
 	tab-size: 4;
 
 	tab-size: 4;
 
 	overflow: auto;
 
 	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 {
 
 a {
 
@@ -38,69 +56,76 @@ a {
 
 
 
 h1 {
 
 h1 {
 
 	color: var(--color-blue);
 
 	color: var(--color-blue);
 
-	font-size: 2.4em;
 
+	font-size: 2.8rem;
 
+	line-height: 3.4rem;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
-	line-height: 1.36em;
 
-	margin-top: 16px;
 
-	margin-bottom: -16px;
 
-	text-indent: -2px;
 
+	margin-top: 1rem;
 
+	margin-bottom: -0.4rem;
 
+	margin-left: -2px;
 
 }
 
 }
 
 
 
 h2 {
 
 h2 {
 
 	color: var(--color-blue);
 
 	color: var(--color-blue);
 
-	font-size: 1.8em;
 
-	line-height: 1.32em;
 
+	font-size: 2rem;
 
+	line-height: 2.6rem;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
-	margin-top: 40px;
 
-	margin-bottom: 12px;
 
-	text-indent: -1px;
 
+	margin-top: 2rem;
 
+	margin-bottom: -0.4rem;
 
 }
 
 }
 
 
 
 h3 {
 
 h3 {
 
-	font-size: 1.32em;
 
-	line-height: 1.48em;
 
+	color: var(--color-blue);
 
+	font-size: 1.32rem;
 
+	line-height: 1.48rem;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
-	text-indent: -1px;
 
-	margin-top: 24px;
 
-	margin-bottom: 12px;
 
+	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;
 
 }
 
 }
 
 
 
 p {
 
 p {
 
-	margin-top: 24px;
 
-	margin-bottom: 24px;
 
+	padding-right: 1rem;
 
 }
 
 }
 
+
 
 ul, ol {
 
 ul, ol {
 
 	box-sizing: border-box;
 
 	box-sizing: border-box;
 
-	padding-left: 20px;
 
+	padding-left: var(--page-padding);
 
 }
 
 }
 
 ul li,
 
 ul li,
 
 ol li {
 
 ol li {
 
-	padding-left: 4px;
 
-	margin-bottom: 4px;
 
+	padding-left: 0.25rem;
 
+	margin-bottom: 0.25rem;
 
 }
 
 }
 
 
 
 li ul,
 
 li ul,
 
 li ol {
 
 li ol {
 
-	margin-top: 4px;
 
+	margin-top: 0.25rem;
 
 }
 
 }
 
 
 
-body {
 
-	max-width: 760px;
 
-	margin-left: auto;
 
-	margin-right: auto;
 
-}
 
 
 
-table,
 
 pre,
 
 pre,
 
 code {
 
 code {
 
-	margin-left: -24px;
 
-	margin-right: -24px;
 
-	margin-top: 20px;
 
-	margin-bottom: 20px;
 
+	margin: 1.2rem calc(-1 * var(--page-padding));
 
 }
 
 }
 
 
 
-div {
 
-	margin-bottom: 20px;
 
+ol code,
 
+ul code {
 
+	margin: 1.2rem 0;
 
+}
 
+
 
+table {
 
+	width: 100%;
 
+	border-collapse: collapse;
 
 }
 
 }
 
 
 
 .desc {
 
 .desc {
 
@@ -111,23 +136,25 @@ br {
 
 	display: none;
 
 	display: none;
 
 }
 
 }
 
 
 
-table {
 
-	border-spacing: 24px 4px;
 
-}
 
-table,
 
-table tr,
 
+table th,
 
 table td {
 
 table td {
 
 	text-align: left;
 
 	text-align: left;
 
+	vertical-align: top;
 
+	padding: .6rem .4rem;
 
+	border-bottom: var(--border-style);
 
 }
 
 }
 
 
 
 table th {
 
 table th {
 
 	text-decoration: none;
 
 	text-decoration: none;
 
-	padding: 2px 0;
 
+}
 
+table th:first-child,
 
+table td:first-child {
 
+	padding-left: 0;
 
 }
 
 }
 
 
 
 code {
 
 code {
 
 	display: block;
 
 	display: block;
 
-	padding: 20px 24px;
 
+	padding: 1.32rem var(--page-padding);
 
 	white-space: pre-wrap;
 
 	white-space: pre-wrap;
 
 	overflow: auto;
 
 	overflow: auto;
 
 	box-sizing: border-box;
 
 	box-sizing: border-box;
 
@@ -139,17 +166,8 @@ iframe {
 
 	border:0;
 
 	border:0;
 
 }
 
 }
 
 
 
-th {
 
-	padding: 10px;
 
-	text-decoration: underline;
 
-}
 
-
 
-td {
 
-	text-align: center;
 
-}
 
-
 
 table code {
 
 table code {
 
-	padding: 2px;
 
+	padding: 0px;
 
 	margin: 0px;
 
 	margin: 0px;
 
 	width: auto;
 
 	width: auto;
 
 }
 
 }
 
@@ -159,32 +177,36 @@ strong {
 
 	font-weight: normal;
 
 	font-weight: normal;
 
 }
 
 }
 
 
 
+
 
+/* TODO: Duplicate styles in main.css. Needed here cause button is inside the iframe */
 
 #button {
 
 #button {
 
 	position: fixed;
 
 	position: fixed;
 
-	bottom: 12px;
 
-	right: 12px;
 
+	bottom: 1rem;
 
+	right: 1rem;
 
 
 
-	padding: 8px;
 
-	border-radius: 50%;
 
+	padding: 0.5rem;
 
+	border-radius: 2rem;
 
 	margin-bottom: 0px;
 
 	margin-bottom: 0px;
 
 
 
-	background-color: #E5E5E5;
 
+	background-color: #FFF;
 
 	opacity: .9;
 
 	opacity: .9;
 
-}
 
+	z-index: 999;
 
 
 
+	box-shadow: 0 0 4px rgba(0,0,0,.15);
 
+}
 
 	#button:hover {
 
 	#button:hover {
 
 		cursor: pointer;
 
 		cursor: pointer;
 
 		opacity: 1;
 
 		opacity: 1;
 
 	}
 
 	}
 
-
 
 	#button img {
 
 	#button img {
 
 		display: block;
 
 		display: block;
 
-		width: 20px;
 
+		width: var(--icon-size)
 
 	}
 
 	}
 
 
 
 a.permalink {
 
 a.permalink {
 
 	float: right;
 
 	float: right;
 
 	margin-left: 5px;
 
 	margin-left: 5px;
 
+	display: none;
 
 }
 
 }
 
 
 
 a.param,
 
 a.param,
 
@@ -193,35 +215,52 @@ span.param {
 
 }
 
 }
 
 
 
 a.param:hover {
 
 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: 1500px ) {
 
+	:root {
 
+		--panel-width: 360px;
 
+		--font-size: 18px;
 
+		--line-height: 30px;
 
+		--header-height: 60px;
 
+		--max-width: 960px;
 
+	}
 
 }
 
 }
 
 
 
-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 */
 
 /* mobile */
 
 
 
 @media all and ( max-width: 640px ) {
 
 @media all and ( max-width: 640px ) {
 
+	:root {
 
+		--page-padding: var(--panel-padding);
 
+	}
 
+
 
 	body {
 
 	body {
 
-		padding: 16px 20px;
 
+		padding: var(--page-padding);
 
 	}
 
 	}
 
 
 
 	h1 {
 
 	h1 {
 
+		font-size: 2rem;
 
+		line-height: 2.6rem;
 
+		padding-right: 2rem;
 
 		margin-top: 0;
 
 		margin-top: 0;
 
-		font-size: 26px;
 
 	}
 
 	}
 
 
 
 	h2 {
 
 	h2 {
 
-		margin-top: 20px;
 
-		font-size: 18px;
 
-		line-height: 25px;
 
+    font-size: 1.6rem;
 
+    line-height: 2.2rem;
 
+		margin-top: 1.6rem;
 
 	}
 
 	}
 
 }
 
 }

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

@@ -12,6 +12,6 @@ pre .dec, code .dec { color: #22c0c4; } /* decimal */
 
 pre.prettyprint, code.prettyprint {
 
 pre.prettyprint, code.prettyprint {
 
 	background-color: #F5F5F5;
 
 	background-color: #F5F5F5;
 
 	font-family: 'Roboto Mono', monospace;
 
 	font-family: 'Roboto Mono', monospace;
 
-	font-size: 14px;
 
-	line-height: 24px;
 
+	font-size: var(--font-size);
 
+	line-height: var(--line-height);
 
 }
 
 }

+ 8 - 32
examples/index.html
View File 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
-		<title>three.js / examples</title>
 
+		<title>three.js examples</title>
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link rel="shortcut icon" href="../files/favicon.ico" />
 
 		<link rel="shortcut icon" href="../files/favicon.ico" />
 
 		<link rel="stylesheet" type="text/css" href="../files/main.css">
 
 		<link rel="stylesheet" type="text/css" href="../files/main.css">
 
@@ -10,28 +10,6 @@
 
 			#panel #content .link {
 
 			#panel #content .link {
 
 				display: block;
 
 				display: block;
 
 			}
 
 			}
 
-			#button {
 
-				position: fixed;
 
-				bottom: 12px;
 
-				right: 12px;
 
-
 
-				padding: 8px;
 
-				border-radius: 50%;
 
-				margin-bottom: 0px; /* TODO div sets it to 20px */
 
-
 
-				background-color: #E5E5E5;
 
-				opacity: .9;
 
-			}
 
-
 
-			#button:hover {
 
-				cursor: pointer;
 
-				opacity: 1;
 
-			}
 
-
 
-			#button img {
 
-				display: block;
 
-				width: 20px;
 
-			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
@@ -48,14 +26,14 @@
 
 			})();
 
 			})();
 
 
 
 		</script>
 
 		</script>
 
-		
+
 
 		<div id="panel">
 
 		<div id="panel">
 
 
 
 			<div id="header">
 
 			<div id="header">
 
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
 				<h1><a href="http://threejs.org">three.js</a></h1>
 
 
 
 				<div id="sections">
 
 				<div id="sections">
 
-					<a href="../docs/">docs</a>
 
+					<a href="../docs/index.html#manual/introduction/Creating-a-scene">docs</a>
 
 					<span class="selected">examples</span>
 
 					<span class="selected">examples</span>
 
 				</div>
 
 				</div>
 
 
 
@@ -65,13 +43,11 @@
 
 			<div id="panelScrim"></div>
 
 			<div id="panelScrim"></div>
 
 
 
 			<div id="contentWrapper">
 
 			<div id="contentWrapper">
 
-				<input placeholder="Search" 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 id="inputWrapper">
 
+					<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
 
+					<div id="exitSearchButton"></div>
 
+				</div>
 
 
 
 				<div id="content"></div>
 
 				<div id="content"></div>
 
 			</div>
 
 			</div>
 
@@ -293,7 +269,7 @@
 
 
 
 			var name = file.split( '_' );
 
 			var name = file.split( '_' );
 
 			name.shift();
 
 			name.shift();
 
-			return name.join( ' / ' );
 
+			return name.join( '<span class="spacer">/</span>' );
 
 
 
 		}
 
 		}

+ 1 - 1
files/ic_arrow_drop_down_black_24dp.svg
View File 

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

+ 1 - 1
files/ic_close_black_24dp.svg
View File 

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

+ 1 - 1
files/ic_code_black_24dp.svg
View File 

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

+ 0 - 15
files/ic_github_black_24dp.svg
View File 

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

+ 1 - 1
files/ic_mode_edit_black_24dp.svg
View File 

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

+ 1 - 1
files/ic_search_black_24dp.svg
View File 

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

+ 268 - 75
files/main.css
View File 

@@ -1,34 +1,50 @@
 
 :root {
 
 :root {
 
 	--color-blue: #049EF4;
 
 	--color-blue: #049EF4;
 
 	--text-color: #444;
 
 	--text-color: #444;
 
-	--border-style: 1px solid #EEE;
 
+	--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;
 
 	--header-height: 48px;
 
-	--panel-padding: 16px;
 
+	--panel-width: 300px;
 
+	--panel-padding: 1.143rem;
 
+	--page-padding: 1.5rem;
 
+	--max-width: 760px;
 
+	--icon-size: 1.428rem;
 
+
 
+	--thumbnail-width: 200px;
 
 }
 
 }
 
 
 
 @font-face {
 
 @font-face {
 
 	font-family: 'Roboto Mono';
 
 	font-family: 'Roboto Mono';
 
-	src: local('Roboto Mono'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 
-	font-weight: normal;
 
+	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../files/RobotoMono-Regular.woff2') format('woff2');
 
 	font-style: normal;
 
 	font-style: normal;
 
+	font-weight: 400;
 
 }
 
 }
 
 
 
 * {
 
 * {
 
-	box-sizing: border-box; /* don't let padding modify width */
 
+	box-sizing: border-box;
 
 }
 
 }
 
 
 
 html, body {
 
 html, body {
 
 	height: 100%;
 
 	height: 100%;
 
 }
 
 }
 
 
 
+html {
 
+	font-size: var(--font-size);
 
+	line-height: var(--line-height);
 
+}
 
+
 
 body {
 
 body {
 
+	font-family: 'Roboto Mono', monospace;
 
 	margin: 0px;
 
 	margin: 0px;
 
 	overflow: hidden;
 
 	overflow: hidden;
 
-	font-family: 'Roboto Mono', monospace;
 
-	font-size: 14px;
 
-	line-height: 24px;
 
-	background-color: #ffffff;
 
 	color: var(--text-color);
 
 	color: var(--text-color);
 
+	background-color: #ffffff;
 
 }
 
 }
 
 
 
 a {
 
 a {
 
@@ -36,25 +52,26 @@ a {
 
 }
 
 }
 
 
 
 h1 {
 
 h1 {
 
-	font-size: 18px;
 
-	font-weight: 500;
 
+	font-weight: normal;
 
+	font-size: 1.28rem;
 
+	line-height: 1.6rem;
 
 }
 
 }
 
 
 
 h2 {
 
 h2 {
 
-	padding: 8px 0;
 
-	margin: 6px 0 12px 0;
 
-	font-size: 14px;
 
+	padding: 0;
 
+	margin: 1rem 0;
 
+	font-size: 1rem;
 
+	line-height: 1.52rem;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
 	color: var(--color-blue);
 
 	color: var(--color-blue);
 
 }
 
 }
 
 
 
 h3 {
 
 h3 {
 
-	margin: 4px 0;
 
-	font-size: 14px;
 
-	line-height: 23px;
 
-	font-weight: 500;
 
-	text-transform: uppercase;
 
-	color: #9E9E9E;
 
+	margin: 0.25rem 0;
 
+	font-weight: normal;
 
+	font-size: 1rem;
 
+	line-height: 1.52rem;
 
+	color: var(--secondary-text-color);
 
 }
 
 }
 
 
 
 h1 a {
 
 h1 a {
 
@@ -63,19 +80,34 @@ h1 a {
 
 
 
 #header {
 
 #header {
 
 	display: flex;
 
 	display: flex;
 
-	height: 48px;
 
+	height: var(--header-height);
 
 	border-bottom: var(--border-style);
 
 	border-bottom: var(--border-style);
 
 	align-items: center;
 
 	align-items: center;
 
 }
 
 }
 
 #header h1 {
 
 #header h1 {
 
-	margin-left: 15px;
 
+	padding-left: var(--panel-padding);
 
 	flex: 1;
 
 	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: .3rem;
 
+	margin-left: .64rem;
 
+	margin-top: 2px;
 
+	font-size: .86rem;
 
+	line-height: .86rem;
 
+	font-weight: bold;
 
+	padding: 1px 3px 2px 3px;
 
 }
 
 }
 
 
 
 #panel {
 
 #panel {
 
 	position: fixed;
 
 	position: fixed;
 
+	z-index: 100;
 
 	left: 0px;
 
 	left: 0px;
 
-	width: 300px;
 
+	width: var(--panel-width);
 
 	height: 100%;
 
 	height: 100%;
 
 	overflow: auto;
 
 	overflow: auto;
 
 	border-right: var(--border-style);
 
 	border-right: var(--border-style);
 
@@ -85,18 +117,15 @@ h1 a {
 
 }
 
 }
 
 
 
 	#panel #exitSearchButton {
 
 	#panel #exitSearchButton {
 
-		position: absolute;
 
-		width: 40px;
 
-		height: 40px;
 
-		top: 4px;
 
-		right: calc(var(--panel-padding) - 12px);
 
-		z-index: 1000;
 
+		width: 3rem;
 
+		height: 3rem;
 
 		display: none;
 
 		display: none;
 
-		background-size: 20px 20px;
 
+		background-size: var(--icon-size);
 
 		background-position: 50% 50%;
 
 		background-position: 50% 50%;
 
 		background-repeat: no-repeat;
 
 		background-repeat: no-repeat;
 
 		background-image: url(../files/ic_close_black_24dp.svg);
 
 		background-image: url(../files/ic_close_black_24dp.svg);
 
 		cursor: pointer;
 
 		cursor: pointer;
 
+		margin-right: 2px;
 
 	}
 
 	}
 
 
 
 	#panel.searchFocused #exitSearchButton {
 
 	#panel.searchFocused #exitSearchButton {
 
@@ -109,17 +138,16 @@ h1 a {
 
 
 
 	#panel.searchFocused #filter {
 
 	#panel.searchFocused #filter {
 
 		background-image: none;
 
 		background-image: none;
 
-		padding-left: var(--panel-padding);
 
+		padding-left: 0;
 
 	}
 
 	}
 
 
 
 	#panel #expandButton {
 
 	#panel #expandButton {
 
 		margin-right: 14px;
 
 		margin-right: 14px;
 
-		margin-left: 4px;
 
+		margin-left: 2px;
 
 		display: none;
 
 		display: none;
 
 	}
 
 	}
 
 
 
 	#panel #sections {
 
 	#panel #sections {
 
-		font-weight: 500;
 
 		display: flex;
 
 		display: flex;
 
 		justify-content: center;
 
 		justify-content: center;
 
 		z-index: 1000;
 
 		z-index: 1000;
 
@@ -128,57 +156,74 @@ h1 a {
 
 		align-items: center;
 
 		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 #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);
 
+	}
 
+
 
+#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 {
 
 	#panel #filter {
 
+		flex: 1;
 
 		width: 100%;
 
 		width: 100%;
 
-		height: 48px;
 
-		padding: 0px 44px;
 
-		font-weight: 500;
 
-		font-size: 14px;
 
+		padding: 0 2.2rem;
 
+		font-size: 1rem;
 
 		color: var(--text-color);
 
 		color: var(--text-color);
 
 		outline: none;
 
 		outline: none;
 
 		border: 0px;
 
 		border: 0px;
 
-		border-bottom: var(--border-style);
 
-		background-size: 20px 20px;
 
+		background-size: var(--icon-size);
 
 		background-image: url(../files/ic_search_black_24dp.svg);
 
 		background-image: url(../files/ic_search_black_24dp.svg);
 
-		background-position: 14px 50%;
 
+		background-position: 0 50%;
 
 		background-repeat: no-repeat;
 
 		background-repeat: no-repeat;
 
+		font-family: 'Roboto Mono', monospace;
 
 	}
 
 	}
 
 
 
 	#panel #language {
 
 	#panel #language {
 
 		font-family: 'Roboto Mono', monospace;
 
 		font-family: 'Roboto Mono', monospace;
 
-		position: absolute;
 
-		top: 9px;
 
-		right: 8px;
 
+		font-size: 1rem;
 
+		line-height: 1rem;
 
+		color: #444;
 
 		border: 0px;
 
 		border: 0px;
 
-		font-size: 14px;
 
-		font-weight: 500;
 
-		background: url(ic_arrow_drop_down_black_24dp.svg) no-repeat;
 
+		background-image: url(ic_arrow_drop_down_black_24dp.svg);
 
+		background-size: var(--icon-size);
 
+		background-repeat: no-repeat;
 
 		background-position: right center;
 
 		background-position: right center;
 
 		background-color: white;
 
 		background-color: white;
 
-		padding: 4px 24px 4px 8px;
 
+		padding: 4px 1.6rem;
 
 		-webkit-appearance: none;
 
 		-webkit-appearance: none;
 
 		-moz-appearance: none;
 
 		-moz-appearance: none;
 
 		appearance: none;
 
 		appearance: none;
 
+		margin-right: 8px;
 
 	}
 
 	}
 
 
 
 		#panel #language:focus {
 
 		#panel #language:focus {
 
@@ -194,17 +239,26 @@ h1 a {
 
 	}
 
 	}
 
 	#panel #content {
 
 	#panel #content {
 
 		flex: 1;
 
 		flex: 1;
 
-		overflow: scroll;
 
-		padding: 0 var(--panel-padding) 24px var(--panel-padding);
 
+		overflow-y: scroll;
 
+		overflow-x: hidden;
 
+		padding: 0 var(--panel-padding) 1rem var(--panel-padding);
 
 	}
 
 	}
 
 
 
 		#panel #content ul {
 
 		#panel #content ul {
 
 			list-style-type: none;
 
 			list-style-type: none;
 
 			padding: 0px;
 
 			padding: 0px;
 
-			margin: 0px 0 24px 0;
 
+			margin: 0px 0 1.2rem 0;
 
 		}
 
 		}
 
 		#panel #content ul li {
 
 		#panel #content ul li {
 
-			margin: 2px 0;
 
+			margin: 1px 0;
 
+		}
 
+
 
+		#panel #content h2 {
 
+			margin-top: 2rem;
 
+		}
 
+
 
+		#panel #content h2:first-child {
 
+			margin-top: 1rem !important;
 
 		}
 
 		}
 
 
 
 		#panel #content a {
 
 		#panel #content a {
 
@@ -212,6 +266,7 @@ h1 a {
 
 		}
 
 		}
 
 
 
 		#panel #content a:hover,
 
 		#panel #content a:hover,
 
+		#panel #content a:hover .spacer,
 
 		#panel #content .selected {
 
 		#panel #content .selected {
 
 			color: var(--color-blue);
 
 			color: var(--color-blue);
 
 		}
 
 		}
 
@@ -224,18 +279,154 @@ h1 a {
 
 			display: none !important;
 
 			display: none !important;
 
 		}
 
 		}
 
 
 
+		body.home #panel #content h2 {
 
+			margin-bottom: 2px;
 
+			padding-bottom: 0px;
 
+			margin-top: 1.2rem;
 
+		}
 
+
 
+		body.home #panel #sections {
 
+			display: none;
 
+		}
 
+
 
+.spacer {
 
+	color: var(--secondary-text-color);
 
+	margin-left: 2px;
 
+	padding-right: 2px;
 
+}
 
+
 
+#viewer,
 
 iframe {
 
 iframe {
 
 	position: absolute;
 
 	position: absolute;
 
 	border: 0px;
 
 	border: 0px;
 
-	left: 300px;
 
-	width: calc(100% - 300px);
 
+	left: 0;
 
+	right: 0;
 
+	width: 100%;
 
 	height: 100%;
 
 	height: 100%;
 
 	overflow: auto;
 
 	overflow: auto;
 
 }
 
 }
 
 
 
+#viewer {
 
+	padding-left: var(--panel-width);
 
+}
 
+
 
+#button {
 
+	position: fixed;
 
+	bottom: 1rem;
 
+	right: 1rem;
 
+	padding: 0.5rem;
 
+	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: var(--icon-size)
 
+	}
 
+
 
+	#button.text {
 
+		padding-right: 1rem;
 
+		padding-left: 1rem;
 
+		color: var(--color-blue);
 
+	}
 
+
 
+
 
+#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 ) {
 
+	:root {
 
+		--panel-width: 360px;
 
+		--font-size: 18px;
 
+		--line-height: 30px;
 
+		--header-height: 60px;
 
+	}
 
+	#projects {
 
+		grid-template-columns: repeat(7, 1fr);
 
+	}
 
+}
 
+
 
+@media all and ( min-width: 1700px ) {
 
+	#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;
 
+	}
 
+}
 
+
 
+
 
+@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 */
 
 /* mobile */
 
 
 
 @media all and ( max-width: 640px ) {
 
 @media all and ( max-width: 640px ) {
 
+
 
+	#projects {
 
+		grid-template-columns: repeat(2, 1fr);
 
+	}
 
+
 
 	#panel #expandButton {
 
 	#panel #expandButton {
 
 		display: block;
 
 		display: block;
 
 	}
 
 	}
 
@@ -245,7 +436,7 @@ iframe {
 
 		top: 0;
 
 		top: 0;
 
 		width: 100%;
 
 		width: 100%;
 
 		right: 0;
 
 		right: 0;
 
-		z-index: 100;
 
+		z-index: 1000;
 
 		overflow-x: hidden;
 
 		overflow-x: hidden;
 
 		transition: 0s 0s height;
 
 		transition: 0s 0s height;
 
 		border: none;
 
 		border: none;
 
@@ -291,12 +482,14 @@ iframe {
 
 	#panel.open #contentWrapper {
 
 	#panel.open #contentWrapper {
 
 		transform: translate3d(-380px, 0 ,0);
 
 		transform: translate3d(-380px, 0 ,0);
 
 	}
 
 	}
 
-
 
+	#viewer,
 
 	iframe {
 
 	iframe {
 
-		position: absolute;
 
 		left: 0;
 
 		left: 0;
 
 		top: var(--header-height);
 
 		top: var(--header-height);
 
 		width: 100%;
 
 		width: 100%;
 
 		height: calc(100% - var(--header-height));
 
 		height: calc(100% - var(--header-height));
 
 	}
 
 	}
 
+	#viewer {
 
+		padding-left: 0;
 
+	}
 
 }
 
 }

+ 117 - 269
index.html
View File 

@@ -2,210 +2,12 @@
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<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">
 
 		<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>
 
 	</head>
 
-	<body>
 
+	<body class="home">
 
 
 
 		<script src="//cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
 
 		<script src="//cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
 
 
 
@@ -223,52 +25,89 @@
 
 
 
 		</script>
 
 		</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">
 
+					<span class="selected">docs</span>
 
+					<a href="../examples/">examples</a>
 
 				</div>
 
 				</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>
 
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
+			</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>
 
+					</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>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>Tooling</h2>
 
+					<ul>
 
+						<li><a href="editor/">three editor</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>
 
 			</div>
 
 		</div>
 
 		</div>
 
@@ -276,18 +115,27 @@
 
 		<script>
 
 		<script>
 
 		var panel = document.getElementById( 'panel' );
 
 		var panel = document.getElementById( 'panel' );
 
 		var expandButton = document.getElementById( 'expandButton' );
 
 		var expandButton = document.getElementById( 'expandButton' );
 
+		var panelScrim = document.getElementById( 'panelScrim' );
 
+
 
 		expandButton.addEventListener( 'click', function ( event ) {
 
 		expandButton.addEventListener( 'click', function ( event ) {
 
 
 
-			panel.classList.toggle( 'collapsed' );
 
+			panel.classList.toggle( 'open' );
 
 			event.preventDefault();
 
 			event.preventDefault();
 
 
 
 		} );
 
 		} );
 
+
 
+		panelScrim.onclick = function ( event ) {
 
+
 
+			event.preventDefault();
 
+			panel.classList.toggle( 'open' );
 
+
 
+		};
 
+
 
 		</script>
 
 		</script>
 
 
 
 		<div id="viewer">
 
 		<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">
 
 			<div id="projects">
 
 
 
@@ -507,28 +355,28 @@
 
 
 
 			var projects = document.getElementById( 'projects' );
 
 			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>
 
 		</script>