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;
        }
-
-        .full {
+        #target {
            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;
-        }
-        #target {
-            right: 0px;
-            overflow: scroll;
+            z-index: 10;
        }
    </style>
 </head>
 <body>
-    <textarea class="half"></textarea>
    <div id="target" class="full">
        <div id="inner"></div> 
    </div>
+    <textarea style="display: none;"></textarea>
 </body>
 </html>