better styling on render page

now solarized dark
9 years ago · fd1e5d5735
parent a718f89e08
commit fd1e5d5735
2 changed files with 125 additions and 14 deletions
--- a/www/common/render-sd.css
+++ b/www/common/render-sd.css
@ -0,0 +1,120 @@
 html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
 }
 a:focus {
  outline: thin dotted;
 }
 a:active,
 a:hover {
  outline: 0;
 }
 h1 {
  font-size: 2em;
 }
 b,
 strong {
  font-weight: bold;
 }
 code,
 pre {
  font-family: monospace, serif;
  font-size: 1em;
 }
 pre {
  white-space: pre-wrap;
  word-wrap: break-word;
 }
 q {
  quotes: "\201C" "\201D" "\2018" "\2019";
 }
 img {
  border: 0;
 }
 svg:not(:root) {
  overflow: hidden;
 }
 table {
  border-collapse: collapse;
  border-spacing: 0;
 }
 html {
  font-family: 'PT Sans', sans-serif;
 }
 pre,
 code {
  font-family: 'Inconsolata', sans-serif;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 700;
 }
 html {
  background-color: #073642;
  color: #839496;
  margin: 1em;
 }
 body {
  background-color: #002b36;
  margin: 0 auto;
  max-width: 23cm;
  border: 1pt solid #586e75;
  padding: 1em;
 }
 code {
  background-color: #073642;
  padding: 2px;
 }
 a {
  color: #b58900;
 }
 a:visited {
  color: #cb4b16;
 }
 a:hover {
  color: #cb4b16;
 }
 h1 {
  color: #d33682;
 }
 h2,
 h3,
 h4,
 h5,
 h6 {
  color: #859900;
 }
 pre {
  background-color: #002b36;
  color: #839496;
  border: 1pt solid #586e75;
  padding: 1em;
  box-shadow: 5pt 5pt 8pt #073642;
 }
 pre code {
  background-color: #002b36;
 }
 h1 {
  font-size: 2.8em;
 }
 h2 {
  font-size: 2.4em;
 }
 h3 {
  font-size: 1.8em;
 }
 h4 {
  font-size: 1.4em;
 }
 h5 {
  font-size: 1.3em;
 }
 h6 {
  font-size: 1.15em;
 }
--- a/www/render/index.html
+++ b/www/render/index.html
@ -2,40 +2,31 @@
 <html>
 <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <link rel="stylesheet" href="/common/render-sd.css"></link>
    <script data-main="main" src="/bower_components/requirejs/require.js"></script>
    <style>
-        *{
+        html, body {
            padding: 0px;
            margin: 0px;
        }
-
+        #target {
        .full {
            position: fixed;
            box-sizing: border-box;
            border: 1px solid blue;
            width: 100%;
            height: 100vh;
            font-size: 15px;
            background-color: #222;
            color: #CCC;
            top: 0px;
        }
        textarea{
            left: 0px;
-            display: none;
+            z-index: 10;
        }
        #target {
            right: 0px;
            overflow: scroll;
        }
    </style>
 </head>
 <body>
    <textarea class="half"></textarea>
    <div id="target" class="full">
        <div id="inner"></div> 
    </div>
    <textarea style="display: none;"></textarea>
 </body>
 </html>