Browse Source

Merge pull request #16618 from mrdoob/large-screen

Refined styles for large screen.
Mr.doob 6 years ago
parent
commit
7fcd8bc4b9
3 changed files with 10 additions and 33 deletions
  1. 7 17
      docs/page.css
  2. 0 2
      docs/prettify/threejs.css
  3. 3 14
      files/main.css

+ 7 - 17
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 ) {

+ 0 - 2
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;
 }

+ 3 - 14
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);