webapps: better style

[factor.git] / extra / websites / concatenative / page.css

diff --git a/extra/websites/concatenative/page.css b/extra/websites/concatenative/page.css
index dc0c57b7d5ca6417bce4d7a0432813a70af96fe7..7512004f96a63adc6d017b9046ee1ba6137504cd 100644 (file)
--- a/extra/websites/concatenative/page.css
+++ b/extra/websites/concatenative/page.css
@@ -1,78 +1,102 @@
-body, button {
-       font:9pt "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
-       color:#444;
+html {
+    box-sizing: border-box;
 }
 
-.link-button {
-       padding: 0px;
-       background: none;
-       border: none;
+*, *:before, *:after {
+    box-sizing: inherit;
 }
 
-a:link, a:visited, .link {
-       color: #222;
-       border-bottom:1px dotted #666;
-       text-decoration:none;
+html, body {
+    margin: 0;
+    padding: 0;
 }
 
-a:hover, .link:hover {
-       border-bottom:1px solid #66a;
+body, button {
+    font-size: 12pt;
+    font-family: sans-serif;
 }
 
-.error { color: #a00; }
-
-.errors li { color: #a00; }
-
-.field-label {
-       text-align: right;
+textarea {
+    font-size: 12pt;
 }
 
-.inline {
-       display: inline;
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
 }
 
-.navbar {
-       background-color: #eeeee0;
-       padding: 5px;
-       border: 1px solid #ccc;
+pre {
+    overflow: auto;
+    font-size: smaller;
+    line-height: 125%;
 }
 
-.big-field-label {
-       vertical-align: top;
+.link-button {
+    padding: 0;
+    background: none;
+    border: none;
 }
 
-.description {
-       padding: 5px;
-       color: #000;
+a, .link { color: #2A5DB0; }
+a:link, a:visited, a:active, .link { text-decoration: none; }
+a:hover, .link:hover { text-decoration: underline; }
+
+.error { color: #a00; }
+
+.errors li { color: #a00; }
+
+.field-label {
+    text-align: right;
 }
 
-.description pre {
-       border: 1px dashed #ccc;
-       background-color: #f5f5f5;
+.inline {
+    display: inline;
 }
 
-.description p:first-child {
-       margin-top: 0px;
+nav {
+    border-bottom: 1px solid #d5d5d5;
+    background-color: #f5f5f5;
+    padding: 10px;
+    padding-left: calc(max(50% - 500px, 0px) + 15px);
+    padding-right: calc(max(50% - 500px, 0px) + 15px);
 }
 
-.description p:last-child {
-       margin-bottom: 0px;
+nav a, nav .link {
+    margin-right: 10px;
 }
 
-.description table, .description td {
-    border-color: #666;
-    border-style: solid;
+nav img {
+    vertical-align: middle;
 }
 
-.description table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+.page {
+    max-width: 1000px;
+    position: relative;
+    left: calc(max(-500px,-50%) + 50%);
+    padding: 15px;
 }
 
-.description td {
-    margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
+.big-field-label {
+    vertical-align: top;
 }
 
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #202124;
+        color: #bdc1c6;
+    }
+
+    title, h1, h2, h3, h4, h5, h6 {
+        color: white;
+    }
+
+    a, .link {
+        color: #8ab4f8;
+    }
+
+    nav {
+        background-color: #373e48;
+        border-bottom: 1px solid #666;
+    }
+}