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 e72702b9871be4b8d505df40e5b9f0c4b56a9f5a..7512004f96a63adc6d017b9046ee1ba6137504cd 100644 (file)
--- a/extra/websites/concatenative/page.css
+++ b/extra/websites/concatenative/page.css
@@ -6,14 +6,14 @@ html {
     box-sizing: inherit;
 }
 
-body {
+html, body {
     margin: 0;
+    padding: 0;
 }
 
 body, button {
     font-size: 12pt;
     font-family: sans-serif;
-    line-height: 140%;
 }
 
 textarea {
@@ -25,20 +25,22 @@ table {
     border-collapse: collapse;
 }
 
+pre {
+    overflow: auto;
+    font-size: smaller;
+    line-height: 125%;
+}
+
 .link-button {
     padding: 0;
     background: none;
     border: none;
 }
 
-a, .link { color: #104e8b; }
+a, .link { color: #2A5DB0; }
 a:link, a:visited, a:active, .link { text-decoration: none; }
 a:hover, .link:hover { text-decoration: underline; }
 
-#container {
-    max-width: 1000px;
-}
-
 .error { color: #a00; }
 
 .errors li { color: #a00; }
@@ -51,50 +53,50 @@ a:hover, .link:hover { text-decoration: underline; }
     display: inline;
 }
 
-.navbar {
-    margin: 0;
-    padding: 15px;
-    border-bottom: 1px solid #ccc;
+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);
 }
 
-.navbar a, .navbar .link {
+nav a, nav .link {
     margin-right: 10px;
 }
 
-.big-field-label {
-    vertical-align: top;
+nav img {
+    vertical-align: middle;
 }
 
-.description pre {
-    padding: 5px;
-    border: 1px dashed #ccc;
-    background-color: #f5f5f5;
-    overflow: auto;
-    font-size: smaller;
+.page {
+    max-width: 1000px;
+    position: relative;
+    left: calc(max(-500px,-50%) + 50%);
+    padding: 15px;
 }
 
-.description h1 { font-size: 1.5em; }
-.description h2 { font-size: 1.17em; }
-.description h3 { font-size: 1.0em; }
-.description h4 { font-size: 0.83em; }
-.description h5 { font-size: 0.67em; }
+.big-field-label {
+    vertical-align: top;
+}
 
-.description p:first-child { margin-top: 0px; }
-.description p:last-child { margin-bottom: 0px; }
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #202124;
+        color: #bdc1c6;
+    }
 
-.description table, .description td {
-    border-color: #666;
-    border-style: solid;
-}
+    title, h1, h2, h3, h4, h5, h6 {
+        color: white;
+    }
 
-.description table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
-}
+    a, .link {
+        color: #8ab4f8;
+    }
 
-.description td {
-    margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
+    nav {
+        background-color: #373e48;
+        border-bottom: 1px solid #666;
+    }
 }