Clean up playground CSS and design
- Move the version to the header. Saves some vertical space. - Use system font. - Simplify CSS. - Better header alignment.
This commit is contained in:
Simon Lydell committed
1 parent
cf9d52e9f3
commit
323941bfd8
1 file changed
+51
-80
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user