webapps.wiki: more style

[factor.git] / extra / webapps / wiki / wiki.css

diff --git a/extra/webapps/wiki/wiki.css b/extra/webapps/wiki/wiki.css
index 98284b88167ace8339e90cfe38fd3c31e4a96e49..40d999b022ada3e90dd070004970520be6b703ea 100644 (file)
--- a/extra/webapps/wiki/wiki.css
+++ b/extra/webapps/wiki/wiki.css
@@ -41,9 +41,8 @@
 .contents {
     font-size: 90%;
     margin: 0;
-    padding: 0;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding: 15px;
+    padding-top: 0px;
     line-height: 130%;
 }
 
@@ -54,17 +53,20 @@
 }
 
 .page {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 15px;
+    padding: 15px;
+    padding-top: 0px;
+    width: calc(100vw - 200px);
     max-width: 800px;
 }
 
 .page nav {
-    margin-left: -15px;
-    margin-right: -15px;
-    margin-bottom: -15px;
-    border-top: 1px solid #ccc;
+    margin: -15px;
+    margin-top: 0px;
+    border-top: 1px dashed #ccc;
+    border-bottom: 1px dashed #ccc;
+    width: calc(100vw - 200px);
+    max-width: 800px;
+    background: none;
 }
 
 .page img {
@@ -117,66 +119,70 @@ footer {
 }
 
 #left {
-    float: left;
+    position: absolute;
+    top: 0;
+    left: calc(min(100vw - 200px, 800px));
     width: 200px;
     z-index: 99;
-    border-right: 1px solid #ccc;
-    background: #f3f2ea;
+    border: none;
+    border-left: 1px dashed #ccc;
 }
 
 #right {
-    margin-left: 200px;
-    width: calc(100% - 200px);
-}
-
-nav {
-    padding-left: 15px;
+    width: 100%;
+    max-width: calc(min(100vw - 230px, 770px));
 }
 
 nav img {
-    margin: -15px;
-    margin-top: -19px;
-    margin-right: 0px;
-    padding: 15px;
-    padding-top: 13px;
-    padding-bottom: 11px;
     vertical-align: middle;
     display: none;
 }
 
-.page {
+.page nav {
+    width: calc(100vw - 200px);
     max-width: 800px;
     left: 0;
+    border-top: 1px dashed #ccc;
+    border-bottom: 1px dashed #ccc;
 }
 
-.page nav {
-    position: relative;
-    width: calc(100vw - 200px);
-    left: 0;
+.page footer {
+    padding-left: 0;
+    padding-right: 0;
 }
 
 @media screen and (max-width: 600px) {
     #left {
         position: absolute;
-        margin-top: 32px;
         display: none;
+        left: 0;
+        top: 0;
+        background: #f5f5f5;
+        border: none;
+        border-right: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        padding-top: 0px;
+        box-shadow: 5px 5px 10px #aaa;
     }
 
     #right {
-        margin-left: 0;
-        width: 100vw;
+        width: 100%;
+        max-width: 100%;
     }
 
     nav img {
         display: inline;
     }
 
+    .page {
+        width: 100%;
+    }
+
     .page nav {
         width: 100vw;
     }
 }
 
-
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
     nav img {
@@ -184,11 +190,27 @@ nav img {
     }
 
     #left {
-        background-color: #373e48;
-        border-right: 1px solid #666;
+        border: none;
+        border-left: 1px dashed #666;
     }
 
     .description pre {
         color: black;
     }
+
+    .page nav {
+        border-top: 1px dashed #666;
+        border-bottom: 1px dashed #666;
+    }
+}
+
+@media screen and (max-width: 600px) and (prefers-color-scheme: dark) {
+
+    #left {
+        background-color: #373e48;
+        border: none;
+        border-right: 1px solid #666;
+        border-bottom: 1px solid #666;
+        box-shadow: 5px 5px 10px #333;
+    }
 }