From a5c23a25b65a9faa64b3c1a1d628edaed14161f4 Mon Sep 17 00:00:00 2001
From: Yuin Chien <yuin@google.com>
Date: Thu, 30 May 2019 10:08:27 -0700
Subject: [PATCH] Refined styles for large screen.

---
 docs/page.css             | 24 +++++++-----------------
 docs/prettify/threejs.css |  2 --
 files/main.css            | 17 +++--------------
 3 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/docs/page.css b/docs/page.css
index a71a119f72..a084d9aa0d 100644
--- a/docs/page.css
+++ b/docs/page.css
@@ -2,7 +2,7 @@
 	--color-blue: #049EF4;
 	--text-color: #444;
 
-	--font-size: 14px;
+	--font-size: 16px;
 	--line-height: 24px;
 	--font-size-sanserif: 1.128rem;
 	--line-height-sanserif: 1.74rem;
@@ -11,7 +11,7 @@
 	--header-height: 48px;
 	--panel-width: 300px;
 	--panel-padding: 1.143rem;
-	--page-padding: 1.5rem;
+	--page-padding: 1.75rem;
 	--max-width: 760px;
 	--icon-size: 1.428rem;
 }
@@ -112,10 +112,11 @@ li ol {
 	margin-top: 0.25rem;
 }
 
-
 pre,
 code {
 	margin: 1.2rem calc(-1 * var(--page-padding));
+	font-size: calc(var(--font-size) - 2px);
+	line-height: calc(var(--line-height) - 2px);
 }
 
 ol code,
@@ -150,7 +151,7 @@ table td:first-child {
 
 code {
 	display: block;
-	padding: 1.32rem var(--page-padding);
+	padding: 1.5rem var(--page-padding);
 	white-space: pre-wrap;
 	overflow: auto;
 	box-sizing: border-box;
@@ -218,23 +219,12 @@ a.param:hover {
 	:root {
 		--panel-width: 360px;
 		--font-size: 18px;
-		--line-height: 30px;
-		--header-height: 60px;
+		--line-height: 28px;
+		--header-height: 56px;
 		--max-width: 1160px;
 	}
 }
 
-
-/* @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 ) {
diff --git a/docs/prettify/threejs.css b/docs/prettify/threejs.css
index f82d7c60fa..d578acffcf 100644
--- a/docs/prettify/threejs.css
+++ b/docs/prettify/threejs.css
@@ -12,6 +12,4 @@ pre .dec, code .dec { color: #22c0c4; } /* decimal */
 pre.prettyprint, code.prettyprint {
 	background-color: #F5F5F5;
 	font-family: 'Roboto Mono', monospace;
-	font-size: 14px;
-	line-height: 24px;
 }
diff --git a/files/main.css b/files/main.css
index ed865d3a80..b5d8f58c27 100644
--- a/files/main.css
+++ b/files/main.css
@@ -360,6 +360,7 @@ iframe {
     padding-left: 1.2rem;
 		color: var(--color-blue);
 		opacity: 1;
+		font-weight: 500;
 	}
 
 
@@ -391,9 +392,9 @@ iframe {
 @media all and ( min-width: 1700px ) {
 	:root {
 		--panel-width: 360px;
-		--font-size: 18px;
+		--font-size: 16px;
 		--line-height: 30px;
-		--header-height: 60px;
+		--header-height: 56px;
 	}
 	#projects {
 		grid-template-columns: repeat(8, 1fr);
@@ -408,18 +409,6 @@ iframe {
 
 }
 
-/* @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);
-- 
GitLab