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 b506fcc8c835e84a81a67112824229bc50b2987d..7512004f96a63adc6d017b9046ee1ba6137504cd 100644 (file)
--- a/extra/websites/concatenative/page.css
+++ b/extra/websites/concatenative/page.css
@@ -6,8 +6,9 @@ html {
     box-sizing: inherit;
 }
 
-body {
+html, body {
     margin: 0;
+    padding: 0;
 }
 
 body, button {
@@ -40,10 +41,6 @@ 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; }
@@ -55,21 +52,21 @@ a:hover, .link:hover { text-decoration: underline; }
 .inline {
     display: inline;
 }
-.navbar {
-    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);
 }
 
-.navrow {
-    max-width: 1000px;
-    position: relative;
-    left: calc(max(-500px,-50%) + 50%);
-    margin: 0;
-    padding: 10px 15px 10px 15px;
+nav a, nav .link {
+    margin-right: 10px;
 }
 
-.navrow a, .navrow .link {
-    margin-right: 10px;
+nav img {
+    vertical-align: middle;
 }
 
 .page {
@@ -82,3 +79,24 @@ a:hover, .link:hover { text-decoration: underline; }
 .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;
+    }
+}