Moved pg

Playground/css/index.css

@@ -1,5 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
-@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
 html,
 body {
     width: 100%;
@@ -7,7 +6,7 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    font-family: sans-serif;
+    font-family: "acumin-pro";
 }
 #waitDiv {
     position: absolute;
@@ -147,8 +146,7 @@ body {
     border-right: 1px solid #efefef;
 }
 #exampleList #exampleBanner {
-    background-image: url("../css/pattern_ban_1.png");
-    background-repeat: repeat;
+    background-color: #E0684B;
     text-align: center;
     padding: 10px 0;
     margin-left: 2px;
@@ -156,7 +154,7 @@ body {
 #exampleList #exampleBanner h1 {
     text-align: center;
     font-weight: 700;
-    color: #00aeef;
+    color: #BB464B;
     font-size: 2em;
     margin: .67em 0;
 }
@@ -164,7 +162,6 @@ body {
     width: 80%;
     height: 0;
     display: block;
-    border-top: 1px solid #00aeef;
     margin: 0 auto 20px auto;
 }
 #exampleList #filterBar {
@@ -230,7 +227,7 @@ body {
     bottom: 20px;
     font-size: 15px;
     text-decoration: underline;
-    color: #00aeef;
+    color: #BB464B;
 }
 #exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
     display: none;
@@ -240,7 +237,7 @@ body {
     text-align: right;
     font-size: 15px;
     text-decoration: underline;
-    color: #00aeef;
+    color: #BB464B;
 }
 
 .wrapper #jsEditor {
@@ -270,18 +267,16 @@ body {
     top: 50px;
     cursor: default;
     z-index:10;
-    background-color: #7283a0;
+    background-color: #E0684B;
     color:white;
     padding:5px;
     border-radius: 3px;
-    font-family: 'Montserrat';
     pointer-events: none;
     user-select: none;
 }
 .navbar {
     height: 40px;
     width: 100%;
-    font-family: "Montserrat";
     font-weight: 400;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -302,13 +297,13 @@ body {
 .navbar .title {
     height: 40px;
     padding-left: 10px;
-    color: #15A4FA;
+    color: #BB464B;
     display: inline-block;
 }
 .navbar .version {
     height: 40px;
     display: inline-block;
-    color: #7283a0;
+    color: #E0684B;
     margin-right: 20px;
 }
 .navbar .category {
@@ -324,9 +319,9 @@ body {
 .button {
     display: inline-block;
     height: 25px;
-    line-height: 25px;
+    line-height: 23px;
     color: white;
-    background-color: #7283a0;
+    background-color: #E0684B;
     margin: 0 2px 0 2px;
     padding: 0 10px 0 10px;
     font-size: 0.85em;
@@ -338,12 +333,12 @@ body {
 }
 .button:hover {
     cursor: pointer;
-    background-color: #15A4FA;
+    background-color: #BB464B;
 }
 .navbar .button.run {
     height: 30px;
-    line-height: 30px;
-    background-color: #15A4FA;
+    line-height: 28px;
+    background-color: #BB464B;
     font-size: 1.0em;
 }
 .navbar .select {
@@ -358,7 +353,7 @@ body {
     content: "\00a0 \00a0 \00a0 \f078";
 }
 .navbar .select .toDisplay {
-    border: 1px solid #7283a0;
+    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
     left: 0;
@@ -369,7 +364,7 @@ body {
 }
 
 .navbar .select .subSelect .toDisplaySub {
-    border: 1px solid #7283a0;
+    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
     left: 100%;
@@ -399,7 +394,7 @@ body {
 }
 .navbar .select .toDisplay .option.light {
     background-color: white;
-    color: #7283a0;
+    color: #E0684B;
 }
 .navbar .select .toDisplay .option.dark:hover {
     cursor: pointer;
@@ -407,7 +402,7 @@ body {
 }
 
 .navbar .select .toDisplayBig {
-    border: 1px solid #7283a0;
+    border: 1px solid #E0684B;
     border-radius: 5px;
     position: absolute;
     z-index: 10;
@@ -424,7 +419,7 @@ body {
 
 .navbar .select .toDisplayBig.light {
     background-color: white;    
-    color: #15A4FA;
+    color: #BB464B;
 }
 
 .navbar .select .toDisplayBig.dark {
@@ -463,7 +458,7 @@ body {
 }
 
 .navbar .select .toDisplayBig a.light {
-    color: #7283a0;
+    color: #E0684B;
 }
 
 
@@ -512,7 +507,6 @@ body {
     width:100%;
     line-height:30px;
     position:relative;
-    font-family: 'Montserrat';
 }
 .navbarBottom.dark {
     background-color: #333;
@@ -582,7 +576,6 @@ body {
     background-color: rgba(27, 27, 27, 0.75);
     border-color: #252525;
     color: white;
-    font-family: "Montserrat";
     font-size: 14px;
 }
 .save-layer .save-form .separator {
@@ -597,7 +590,6 @@ body {
     width: 350px;
     margin:auto;
     margin-bottom: 20px;
-    font-family: "Montserrat";
     padding:5px;
 }
 

Playground/index-local.html

@@ -7,6 +7,8 @@
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>
 

Playground/index.html

@@ -7,6 +7,8 @@
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
 
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
     <script src="js/libs/pep.min.js"></script>
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>

Playground/indexStable.html

@@ -15,7 +15,8 @@
     <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
     <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
     <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="192x192"
+        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
     <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
@@ -24,6 +25,7 @@
     <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
     <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
@@ -401,7 +403,8 @@
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <span class="label" id="fpsLabel">FPS</span>
@@ -473,4 +476,4 @@
     </script>
 </body>
 
-</html>
+</html>