From 323941bfd88cd0df6e02ad215e0bec25e98c0431 Mon Sep 17 00:00:00 2001
From: Simon Lydell <simon.lydell@gmail.com>
Date: Wed, 13 Sep 2017 20:58:33 +0200
Subject: [PATCH] Clean up playground CSS and design

- Move the version to the header. Saves some vertical space.
- Use system font.
- Simplify CSS.
- Better header alignment.
---
 website/pages/playground/index.html | 131 +++++++++++-----------------
 1 file changed, 51 insertions(+), 80 deletions(-)

diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html
index 6f8aa834a..1834486ff 100644
--- a/website/pages/playground/index.html
+++ b/website/pages/playground/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@@ -11,8 +11,8 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="application-name" content="Prettier">
   <meta name="apple-mobile-web-app-title" content="Prettier">
-  <meta name="theme-color" content="#1A2B34">
-  <meta name="msapplication-navbutton-color" content="#1A2B34">
+  <meta name="theme-color" content="#1a2b34">
+  <meta name="msapplication-navbutton-color" content="#1a2b34">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="msapplication-starturl" content="/">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -37,83 +37,66 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
 
   <style type="text/css">
-    html,
-    body {
-      font-family: "Helvetica Neue", "Open Sans", sans-serif;
-      font-size: 11.7px;
-      margin: 0;
-      padding: 0;
-      background-color: #FAFAFA;
-      color: #6A6A6A;
+    html {
+      background-color: #fafafa;
+      color: #6a6a6a;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-size: 12px;
+      line-height: 1.25;
     }
 
     body {
       display: flex;
       flex-direction: column;
       height: 100vh;
-    }
-
-    .options-summary {
-      font-size: 1.4em;
-      margin-top: 8px;
-      text-align: center;
+      margin: 0;
     }
 
     header {
-      height: 30px;
-      padding: 10px 10px;
       display: flex;
-      flex-flow: row nowrap;
-      position: relative;
-      text-align: left;
+      flex-wrap: nowrap;
       justify-content: space-between;
       align-items: center;
-      background-color: #1A2B34;
+      height: 30px;
+      padding: 10px 27px;
+      background-color: #1a2b34;
       color: #e0e0e0;
     }
 
-    @media (max-width: 500px) {
-      .tagline {
-        display: none;
+    @media (max-width: 400px) {
+      header {
+        padding: 10px;
       }
     }
 
-    header a {
-      height: 34px;
-      display: flex;
-      text-decoration: none;
-    }
-
     header a,
-    header a:visited {
-      color: #fff;
-    }
-
+    header a:visited,
     header a:focus,
     header a:active,
     header a:hover {
-      color: #fff;
+      color: white;
+      text-decoration: none;
+    }
+
+    .logo-wrapper {
+      display: flex;
+      align-items: center;
     }
 
     .logo {
-      height: 100%;
-      margin-left: 10px;
+      height: 34px;
       margin-right: 10px;
     }
 
-    header h2 {
-      display: block;
-      font-family: "Helvetica Neue", Arial, sans-serif;
-      font-weight: 400;
-      line-height: 8px;
-      position: relative;
-      z-index: 9999;
+    header h1 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: normal;
     }
 
     .links {
       display: flex;
-      font-size: 1.3em;
-      margin-right: 30px;
+      font-size: 16px;
     }
     .links > * + * {
       margin-left: 15px;
@@ -125,7 +108,7 @@
 
     .editors-container {
       display: flex;
-      flex-grow: 1;
+      flex: 1;
     }
 
     .editors {
@@ -137,8 +120,7 @@
     .editor {
       box-sizing: border-box;
       display: flex;
-      flex: 1;
-      flex-basis: 100%;
+      flex: 1 1 100%;
       position: relative;
       border-bottom: 1px solid #ddd;
     }
@@ -159,11 +141,6 @@
       }
     }
 
-    .arrow {
-      align-self: center;
-      font-size: 1.2em;
-    }
-
     .CodeMirror {
       height: auto;
       position: absolute;
@@ -171,9 +148,16 @@
       left: 0;
       right: 0;
       bottom: 0;
-      font-family: Menlo, monospace;
-      font-size: 11.05px;
-      line-height: 17.68px;
+      line-height: 1.6;
+    }
+
+    .options-details {
+      padding: 8px 0;
+    }
+
+    .options-summary {
+      font-size: 1.4em;
+      text-align: center;
     }
 
     .options-container {
@@ -183,11 +167,11 @@
     }
 
     .options {
-      padding: 0 10px;
-      display: flex;
       flex-flow: column wrap;
-      flex-grow: 1;
+      flex: 1;
+      display: flex;
       justify-content: space-around;
+      padding: 0 10px;
       margin: 5px;
       margin-bottom: 0;
       min-width: 150px;
@@ -214,10 +198,6 @@
       max-width: 40px;
     }
 
-    footer {
-      text-align: center;
-    }
-
     /* Copied from the GitHub button styling. */
     .btn {
       box-sizing: content-box;
@@ -231,7 +211,7 @@
       font-size: 11px;
       line-height: 18px;
       font-weight: 600;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-family: inherit;
       cursor: pointer;
       outline: none;
       position: relative;
@@ -248,7 +228,7 @@
       background-color: #e9ecef;
       background-image: none;
       border-color: #afb1b2;
-      box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
+      box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
     }
 
     .tooltip {
@@ -279,9 +259,9 @@
 
 <body>
   <header>
-    <a href="/">
+    <a href="/" class="logo-wrapper">
       <img class="logo" src="/icon.png" alt="">
-      <h2>Prettier</h2>
+      <h1>Prettier <span class="version"></span></h1>
     </a>
 
     <span class="links">
@@ -316,7 +296,7 @@
   </div>
 
   <div>
-    <details>
+    <details class="options-details">
       <summary class="options-summary">Options</summary>
 
       <div class="options-container">
@@ -342,15 +322,6 @@
     </details>
   </div>
 
-  <footer>
-    <p class="version-link">
-      <a href="https://github.com/prettier/prettier">
-        Prettier
-        <span class="version"></span>
-      </a>
-    </p>
-  </footer>
-
   <script src="/install-service-worker.js"></script>
 
   <script async defer src="https://buttons.github.io/buttons.js"></script>