From 39775d9a5cf290bbd866656d2e1498933f562acb Mon Sep 17 00:00:00 2001
From: John Benediktsson <mrjbq7@gmail.com>
Date: Sun, 7 Aug 2022 12:39:21 -0700
Subject: [PATCH] webapps.wiki: more style

---
 extra/webapps/wiki/wiki-common.xml    | 64 +++++++++---------
 extra/webapps/wiki/wiki.css           | 94 +++++++++++++++++----------
 extra/webapps/wiki/wiki.js            |  7 +-
 extra/websites/concatenative/page.css |  9 +--
 4 files changed, 94 insertions(+), 80 deletions(-)

diff --git a/extra/webapps/wiki/wiki-common.xml b/extra/webapps/wiki/wiki-common.xml
index 422d79d199..77c34f642c 100644
--- a/extra/webapps/wiki/wiki-common.xml
+++ b/extra/webapps/wiki/wiki-common.xml
@@ -8,55 +8,50 @@
 
 	<t:style t:include="resource:extra/webapps/wiki/wiki.css" />
 
-    <div id="left">
-
+    <nav>
         <t:if t:value="contents">
-
-            <t:script t:include="resource:extra/webapps/wiki/wiki.js" />
-
-            <div class="contents">
-                <t:bind t:name="contents">
-                    <h2>
-                        <t:a t:href="$wiki/view" t:rest="title">
-                            <t:label t:name="title" />
-                        </t:a>
-                    </h2>
-
-                    <t:farkup t:name="content" t:no-follow="true" />
-                </t:bind>
-            </div>
+            <img id="menu" onclick="toggleSidebar()" src="data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2724%27 viewBox=%270 0 100 100%27 fill=%27rgb(0,0,0)%27%3E%3Crect x=%2710%27 y=%2720%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2744%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2768%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3C/svg>" />
         </t:if>
 
-    </div>
+        <t:a t:href="$wiki">Front Page</t:a>
+        <t:a t:href="$wiki/articles">All Articles</t:a>
+        <t:a t:href="$wiki/changes">Recent Changes</t:a>
+        <t:a t:href="$wiki/random">Random Article</t:a>
 
-    <div id="right">
+        <t:if t:code="furnace.auth:logged-in?">
 
-        <nav>
-            <t:if t:value="contents">
-                <img id="menu" onclick="toggleSidebar()" src="data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2724%27 viewBox=%270 0 100 100%27 fill=%27rgb(0,0,0)%27%3E%3Crect x=%2710%27 y=%2720%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2744%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2768%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3C/svg>" />
+            <t:if t:code="furnace.auth.features.edit-profile:allow-edit-profile?">
+                <t:a t:href="$realm/edit-profile" t:aside="begin">Edit Profile</t:a>
             </t:if>
 
-            <t:a t:href="$wiki">Front Page</t:a>
-            <t:a t:href="$wiki/articles">All Articles</t:a>
-            <t:a t:href="$wiki/changes">Recent Changes</t:a>
-            <t:a t:href="$wiki/random">Random Article</t:a>
+            <t:button t:action="$login-realm/logout" t:aside="begin" class="link-button link">Logout</t:button>
 
-            <t:if t:code="furnace.auth:logged-in?">
+        </t:if>
+    </nav>
+
+    <div class="page">
+        <div id="left">
+            <t:if t:value="contents">
 
-                <t:if t:code="furnace.auth.features.edit-profile:allow-edit-profile?">
-                    <t:a t:href="$realm/edit-profile" t:aside="begin">Edit Profile</t:a>
-                </t:if>
+                <t:script t:include="resource:extra/webapps/wiki/wiki.js" />
 
-                <t:button t:action="$login-realm/logout" t:aside="begin" class="link-button link">Logout</t:button>
+                <div class="contents">
+                    <t:bind t:name="contents">
+                        <h2>
+                            <t:a t:href="$wiki/view" t:rest="title">
+                                <t:label t:name="title" />
+                            </t:a>
+                        </h2>
 
+                        <t:farkup t:name="content" t:no-follow="true" />
+                    </t:bind>
+                </div>
             </t:if>
-        </nav>
+        </div>
 
-        <div class="page">
+        <div id="right">
             <h1 class="title"><t:write-title /></h1>
-
             <t:call-next-template />
-
         </div>
 
         <t:if t:value="footer">
@@ -66,7 +61,6 @@
                 </t:bind>
             </footer>
         </t:if>
-
     </div>
 
     <span style="display:none"></span>
diff --git a/extra/webapps/wiki/wiki.css b/extra/webapps/wiki/wiki.css
index 98284b8816..40d999b022 100644
--- 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;
+    }
 }
diff --git a/extra/webapps/wiki/wiki.js b/extra/webapps/wiki/wiki.js
index 80112a9358..6fd0cb905f 100644
--- a/extra/webapps/wiki/wiki.js
+++ b/extra/webapps/wiki/wiki.js
@@ -3,12 +3,9 @@ function toggleSidebar() {
     var m = document.getElementById("menu");
     if (l.style.display === "") {
         l.style.display = "inline";
-        var darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (!darkMode) {
-            m.style.backgroundColor = "#f3f2ea";
-        }
+        m.src = "data:image/svg+xml;utf8,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2716%27 viewBox=%270 0 460.775 460.775%27%3E%3Cpath d=%27M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55 c-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55 c-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505 c-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55 l171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719 c6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z%27/%3E%3C/svg%3E";
     } else {
         l.style.display = "";
-        m.style.backgroundColor = "";
+        m.src = "data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2716%27 viewBox=%270 0 120 100%27 fill=%27rgb(0,0,0)%27%3E%3Crect y=%270%27 width=%27120%27 height=%2720%27 rx=%2710%27 /%3E%3Crect y=%2740%27 width=%27120%27 height=%2720%27 rx=%2710%27 /%3E%3Crect y=%2780%27 width=%27120%27 height=%2720%27 rx=%2710%27 /%3E%3C/svg%3E";
     }
 }
diff --git a/extra/websites/concatenative/page.css b/extra/websites/concatenative/page.css
index 90db76da38..cce75f8868 100644
--- a/extra/websites/concatenative/page.css
+++ b/extra/websites/concatenative/page.css
@@ -96,12 +96,13 @@ nav img {
         color: #8ab4f8;
     }
 
-    .page nav {
-        border-top: 1px solid #666;
-    }
-
     nav {
         background-color: #373e48;
         border-bottom: 1px solid #666;
     }
+
+    .page nav {
+        border-top: 1px solid #666;
+        background-color: transparent;
+    }
 }
-- 
2.34.1