Menu colors, non-page text styling, more layout work

resources/colors.less

@@ -0,0 +1,23 @@
+:root {
+  --blue-1: oklch(0.96 0.02 270);
+  --blue-2: oklch(0.92 0.04 270);
+  --blue-3: oklch(0.79 0.11 270);
+  --blue-4: oklch(0.71 0.16 270);
+  --blue-5: oklch(0.62 0.14 270);
+  --blue-6: oklch(0.41 0.1 270);
+  --blue-7: oklch(0.3 0.07 270);
+  --gold-1: oklch(0.96 0.02 90);
+  --gold-2: oklch(0.92 0.04 90);
+  --gold-3: oklch(0.79 0.11 90);
+  --gold-4: oklch(0.71 0.16 90);
+  --gold-5: oklch(0.61 0.14 90);
+  --gold-6: oklch(0.41 0.1 90);
+  --gold-7: oklch(0.3 0.07 90);
+  --pink-1: oklch(0.97 0.02 330);
+  --pink-2: oklch(0.92 0.04 330);
+  --pink-3: oklch(0.8 0.11 330);
+  --pink-4: oklch(0.73 0.16 330);
+  --pink-5: oklch(0.63 0.14 330);
+  --pink-6: oklch(0.42 0.1 330);
+  --pink-7: oklch(0.31 0.07 330);
+}

resources/layout-mouse.less

@@ -1,5 +1,5 @@
 :root {
-    --sidebar-width: calc(3em + 9vw);
+    --sidebar-width: calc(4.2em + 9vw);
 }
 
 #grid {
@@ -20,10 +20,19 @@
     padding-right: calc(var(--space) * 2);
 }
 
+#page {
+    margin-top: calc(var(--space) * 6);
+}
+
 #topbar {
+    column-gap: var(--space);
     grid-column: 2;
     grid-row: topstart ;
-    margin-bottom: calc(var(--space) * 6);
+    grid-template-columns: 1fr 4fr 1fr;
+}
+
+#nav-search, #nav-search-bar {
+    width: 100%;
 }
 
 #versions {
@@ -36,6 +45,20 @@
     display: flex;
     flex-direction: column;
     gap: calc(var(--space) * 2);
+    width: calc(var(--space) * 18);
+}
+
+.nav-menu {
+    border-radius: var(--space);
+    margin-right: var(--space);
+}
+
+.nav-show {
+    display: none;
+}
+
+.mw-list-item {
+    display: flex;
 }
 
 .mw-heading {
@@ -43,26 +66,34 @@
     justify-content: space-between;
 }
 
-.nav-menu {
-    max-width: 12em;
-}
-
 .nav-sticky {
     position: sticky;
     top: calc(var(--space) * 2);
 }
 
-#sidebar-page {
+.site-links > a:not(.nav-backtotop):hover::before, #nav-toc > .site-links > li:hover::before {
-    grid-column: 3;
+    content: '☞';
-    grid-row: pagebody / -1;
+    color: var(--gold-1);
 }
 
-.sidebar-page-menu {
+.page-link-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--space) / 2);
+}
+
+#sidebar-page-mouse {
+    grid-column: 3;
+    grid-row: pagebody / -1;
     display: flex;
     flex-direction: column;
     gap: calc(var(--space) * 2);
 }
 
+#sidebar-page-touch {
+    display: none;
+}
+
 #page {
     grid-column: 2;
     grid-row: title / bottomstart ;
@@ -74,8 +105,6 @@
 #titleblock {
     grid-column: 1;
     grid-row: title;
-    display: flex;  
-    justify-content: space-between;
 }
 
 #mw-content-text {

resources/layout-touch.less

@@ -29,37 +29,117 @@ p {
 
 #topbar {
     grid-row: 1;
-    margin-bottom: calc(var(--space));
+    grid-template-columns: 1fr 1fr;
+    margin-left: var(--space);
+    margin-right: var(--space);
+}
+
+#top-logo {
+    grid-column: 1;
+}
+
+#user-menu {
+    grid-column: 2;
+}
+
+#nav-search {
+    grid-column: 1 / 3;
+    grid-row: 2;
+    width: 100%;
+}
+
+#nav-search-bar {
+    width: 100%;
 }
 
 #sidebar-nav {
+    grid-row: -1;
     position: fixed;
     bottom: 0;
     left: 50%;
-    width: 50px;
+    transform: translate(-50%);
-    height: 50px;
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    // flex-direction: row-reverse;
+    direction: rtl;
+    align-items: end;
+    z-index: 1;
+    gap: var(--space);
+    justify-content: center;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    padding-top: 1em;
+    margin-top: -1em;
 }
 
-#sidebar-page {
+.nav-menu {
-    grid-row: 2;
+    border-left: 0;
+    border-right: 0;
+    border-top-left-radius: var(--space);
+    border-top-right-radius: var(--space);
+    height: fit-content;
+    min-width: fit-content;
+    align-items: center;
+}
+
+.nav-menu:not(:focus-within) {
+    height: calc(var(--space) * 3);
+}
+
+#sidebar-page-touch {
+    width: 100%;
+    height: fit-content;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    margin-bottom: calc(var(--space) * 3);
+    justify-items: center;
+}
+
+#sidebar-page-mouse {
+    display: none;
 }
 
 .sidebar-page-menu {
-    display: flex;
+    text-align: center;
-    justify-content: space-between;
 }
 
-.sidebar-page-menu > * {
+#page-main {
-    flex-basis: 12em;
+    grid-row: 2;
-    margin-bottom: calc(var(--space) * 2);
+    grid-column: 1 / 3;
-    margin: calc(var(--space));
-    
 }
 
-.sidebar-page-menu > .page-link-list {
+#page-main .page-link-list {
     display: flex;
     gap: var(--space);
-    margin-bottom: auto;
+}
+
+#page-main .page-link-list li {
+    text-align: center;
+}
+
+.page-view-details .page-link-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.site-links {
+    border-top: 1px solid white;
+    padding-top: calc(var(--space));
+    margin-left: var(--space);
+    margin-right: var(--space);
+    box-sizing: border-box;
+    width: fit-content;
+    align-items: center;
+}
+
+.site-links a {
+    text-align: center;
+}
+
+.page-link-list {
+    font-size: .9em;
 }
 
 details.page-links {
@@ -75,43 +155,35 @@ details.page-links {
     grid-template-columns: subgrid;
 }
 
-// #titleblock {
-//     grid-row: 1;
-//     padding: var(--space);
-//     display: grid;
-//     grid-template-columns: 1fr auto 1fr;
-//     align-items: end;
-// }
-
-// #pagetitle {
-//     grid-column: 2;
-//     text-align: center;
-// }
-
-// #versions {
-//     grid-column: 3;
-//     justify-content: flex-end;
-//     align-items: baseline;
-// }
-
-#titleblock {
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: center;
-    margin-left: var(--space);
-    margin-right: var(--space);
-}
-
 #pagebody {
     grid-row: 2;
 }
 
 #bottombar {
     grid-row: 5;
+    margin-bottom: calc(var(--space) * 5);
+}
+
+#sidebar-nav > * {
+    flex-shrink: 0;
 }
 
 @media (max-width: 720px) {
     .pi-title:first-child {
         display: none;
     }
+    #titleblock {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        margin-left: var(--space);
+        margin-right: var(--space);
+    }
+    #sidebar-nav {
+        justify-content: space-around;
+    }
+    .sidebar-page-menu {
+    width: max-content;
+    flex-wrap: wrap;
+}
 }

resources/navmenu.less

@@ -0,0 +1,66 @@
+.nav-menu {
+    background-color: var(--blue-4);
+    box-shadow: 0 0 1px 1px var(--gold-3), inset 0 0 6px 3px var(--blue-3);
+    border: 1px outset var(--gold-1);
+}
+
+.site-links {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--space) / 2);
+    padding: var(--space);
+}
+
+.site-links > a, #nav-toc > .site-links, .nav-show {
+    text-shadow: 0 0 2px black;
+    font-weight: bold;
+    font-size: .9em;
+    font-family: 'Libre Caslon', serif;
+}
+
+.site-links > a {
+    display: flex;
+    gap: var(--space);
+}
+
+#nav-toc:not(:has(ul > .nav-toclevel1)) {
+    display: none;
+}
+
+.nav-menu a {
+    color: var(--gold-1);
+}
+
+.nav-menu a:hover {
+    color: var(--blue-2);
+}
+
+.nav-menu {
+    display: flex;
+    flex-direction: column;
+}
+
+#nav-toc {
+    margin-top: calc(var(--space) * 6);
+}
+
+.nav-backtotop {
+    display: flex;
+    justify-content: center;
+    gap: calc(var(--space) / 2);
+    align-items: center;
+}
+
+.nav-show {
+    border: none;
+    background: none;
+    padding: .6em;
+    text-align: center;
+    color: var(--gold-1);
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.nav-external:last-of-type {
+    display: none;
+}

resources/skin.less

@@ -1,4 +1,5 @@
 @import 'unset.less';
+@import 'colors.less';
 
 @media (max-width: 1080px) {
     @import 'layout-touch.less';
@@ -10,6 +11,7 @@
 
 @import 'topbar.less';
 @import 'toc.less';
+@import 'navmenu.less';
 
 @import 'mediawiki.skin.variables.less';
 
@@ -18,12 +20,45 @@
     src: url('/resources/assets/Libre_Caslon_Text/LibreCaslonText-Regular.ttf');
 }
 
+body {
+    margin: 0;
+}
+
 :root {
     --space: .6em;
 }
 
-body {
+button {
-    margin: 0;
+    cursor: pointer;
+}
+
+fieldset {
+    margin-top: calc(var(--space) * 3);
+}
+
+#page a:link {
+    color: var(--blue-6);
+}
+
+#page a.new, #page a.new {
+    color: red;
+    text-decoration: underline wavy;
+}
+
+#page a:not(.new):visited {
+    color: var(--pink-6);
+}
+
+#page a:hover , #page a:visited:hover {
+    color: var(--blue-4);
+}
+
+.pi-title {
+    background-color: var(--gold-4);
+}
+
+#pagetitle {
+    position: relative;
 }
 
 #firstHeading {
@@ -45,24 +80,6 @@ p {
     line-height: calc(var(--space) * 3);
 }
 
-.nav-menu {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space);
-}
-
-.nav-links {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.nav-toc {
-    position: sticky;
-    top: calc(var(--space) * 2);
-}
-
 .mw-list-item.selected {
     display: none;
 }
@@ -70,6 +87,8 @@ p {
 #titleblock {
     border-bottom: 3px solid black;
     margin-bottom: calc(var(--space) * 2);
+    display: flex;  
+    justify-content: space-between;
 }
 
 #versions {
@@ -80,34 +99,4 @@ p {
 
 #t-print, #t-upload {
     display: none;
-}
+}
-
-// #topbar {
-//     background-color: yellow;
-
-// }
-
-// .nav-links {
-//     background-color: blue;
-// }
-
-// .mw-list-item a, .mw-list-item a {
-//     color: white;
-// }
-
-
-// .sidebar-page-menu {
-//     background-color: purple;
-// }
-
-// #titleblock, #pagebody-header {
-//     background-color: green;
-// }
-
-// #mw-content-text {
-//     background-color: red;
-// }
-
-// #bottombar {
-//     background-color: pink;
-// }

resources/toc.less

@@ -22,7 +22,7 @@
 }
 
 .toclevel-1 > a {
-    font-size: calc(var(--space) * 2);
+    font-size: 1.2em;
 }
 
 .toclevel-1 ul, .toclevel-1 {

resources/topbar.less

@@ -1,21 +1,91 @@
 #topbar {
-    border-right: solid 1px black;
+    display: grid;
-    border-bottom: solid 1px black;
+    padding-top: var(--space);
-    border-left: solid 1px black;
+    row-gap: var(--space);
+}
 
+#top-logo {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
+}
+
+#top-logo a {
+    width: fit-content;
+}
+
+#top-logo img{
+    max-width: 100%;
+    max-height: calc(var(--space) * 4);
+}
+
+.searchButton {
+    position: absolute;
+    right: var(--space);
+    top: 50%;
+    transform: translate(0, -50%);
+    border: none;
+    background: none;
+    border-left: 1px solid black;
+    cursor: pointer;
+    padding: var(--space);
+    box-sizing: border-box;
+}
+
+#nav-search {
+    position: relative;
+    height: fit-content;
+    justify-self: center;
+}
+
+#nav-search-bar {
+    border-radius: var(--space);
+    background-color: var(--blue-1);
+    box-shadow: 0 0 2px 1px var(--gold-7);
+    border-bottom: 3px solid var(--blue-7);
+    font-size: calc(var(--space) *2);
+    padding: var(--space);
+}
+
+#nav-search-bar:focus {
+    outline: 3px solid var(--blue-7);
+    box-shadow: inset 0 0 3px 3px var(--blue-3);
+    background-color: white;
+    border-bottom: 3px inset var(--blue-7);
+}
+
+#nav-search-label {
+    position: absolute;
+    left: var(--space);
+    top: 50%;
+    transform: translate(0, -50%);
+    opacity: 0.6;
+    font-size: 1.2em;
+}
+
+#user-menu-button {
+    font-size: 1em;
+    height: 100%;
+    background-color: var(--blue-4);
+    box-shadow: 0 0 1px 1px var(--gold-3), inset 0 0 6px 2px var(--blue-3);
+    border: 1px outset var(--gold-1);
+    border-radius: var(--space);
+    color: white;
 }
 
 #user-menu-list {
     display: none;
     flex-direction: column;
+    align-items: flex-end;
     position: absolute;
+    right: 0;
     background: white;
+    padding: 0;
 }
 
 #user-menu {
-    width: 6em;
+    gap: var(--space);
+    justify-self: right;
+    position: relative;
 }
 
 #user-menu:focus-within #user-menu-list {

resources/unset.less

@@ -1,12 +1,8 @@
 li {
     list-style: none;
 }
- 
-a {
-    color: unset;
-}
 
-h1, h2, h3, p, ul {
+h1, h2, h3, p, ul, input {
     margin: unset;
     border: unset;
     padding: unset;
@@ -42,4 +38,11 @@ summary {
 
 .mw-body-content::after {
     content: unset;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { 
+    display: none;
 }

templates/sidebar-page.mustache

@@ -1,64 +1,49 @@
-    <div id="sidebar-page">
+<div id="page-main" class="sidebar-page-menu">
-        <div class="sidebar-page-menu">
+    <ul class="page-link-list">
-            <ul class="page-link-list">
+        {{#data-portlets}}
-                {{#data-portlets}}
+            {{{data-views.array-items.0.html-item}}}
-                    {{#data-views}}
+            {{{data-views.array-items.1.html-item}}}
-                        {{#array-items.0}}
+            {{#data-associated-pages}}
-                            {{{html-item}}}
+                {{{html-items}}}
-                        {{/array-items.0}}
+            {{/data-associated-pages}}
-                        {{#array-items.1}}
+            {{#data-views}}
-                            {{{html-item}}}
+                {{#array-items.2}}
-                        {{/array-items.1}}
+                    {{{html-item}}}
-                    {{/data-views}}
+                {{/array-items.2}}
-                    {{#data-associated-pages}}
+            {{/data-views}}
-                        {{#array-items.1}}
+        {{/data-portlets}}
-                            {{{html-item}}}
+    </ul>
-                        {{/array-items.1}}
+</div>
-                    {{/data-associated-pages}}
+<div id="page-views" class="sidebar-page-menu">
-                {{/data-portlets}}
+    <details name="page-menu" class="page-view-details">
-            </ul>
+        <summary class="page-menu-heading">
-
+            Page Views
-            <details id="page-views" class="page-links">
+        </summary>
-                <summary class="page-menu-heading">
+        <ul class="page-link-list">
-                    Page Views
+        {{#data-portlets-sidebar}}
-                </summary>
+            {{#array-portlets-rest.1}}
-                <ul class="#page-link-list">
+                {{{html-items}}}
-                {{#data-portlets}}
+            {{/array-portlets-rest.1}}
-                    {{#data-associated-pages}}
+        {{/data-portlets-sidebar}}
-                        {{#array-items.0}}
+        </ul>
-                            {{{html-item}}}
+    </details>
-                        {{/array-items.0}}
+</div>
-                    {{/data-associated-pages}}
+<div id="page-actions" class="sidebar-page-menu">
-                    {{#data-views}}
+    <details name="page-menu" class="page-view-details">
-                        {{#array-items.2}}
+        <summary class="page-menu-heading">
-                            {{{html-item}}}
+            Page Actions
-                        {{/array-items.2}}
+        </summary>
-                    {{/data-views}}
+        <ul class="page-link-list">
-                {{/data-portlets}}
+        {{#data-portlets}}
-                {{#data-portlets-sidebar}}
+            {{#data-actions}}
-                    {{#array-portlets-rest.1}}
+                {{{html-items}}}
-                        {{{html-items}}}
+            {{/data-actions}}
-                    {{/array-portlets-rest.1}}
+        {{/data-portlets}}
-                {{/data-portlets-sidebar}}
+            <li id="page-action-print" class="mw-list-item">
-                </ul>
+                <a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">
-            </details>
+                    Print
-
+                </a>
-            <details id="page-actions" class="page-links">
+            </li>
-                <summary class="page-menu-heading">
+        </ul>
-                    Page Actions
+    </details>
-                </summary>
+</div>
-                <ul class="page-link-list mw-collapsible mw-collapsed">
-                {{#data-portlets}}
-                    {{#data-actions}}
-                        {{{html-items}}}
-                    {{/data-actions}}
-                {{/data-portlets}}
-                    <li id="page-action-print" class="mw-list-item">
-                        <a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">
-                            Print
-                        </a>
-                    </li>
-                </ul>
-            </details>
-        </div>
-    </div>

templates/skin.mustache

@@ -1,24 +1,36 @@
-<div id="grid">
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
+
+<div id="grid" class="mw-parser-output">
 
     <header id="topbar">
         <div id="top-logo">
-            Phial Fantasy
+            <a href="https://phialfantasy.wiki">
-        </div>
+                {{#data-logos}}
-        <div id="nav-search">
+                    <img src="{{{icon}}}" />
-            {{#data-search-box}}
+                {{/data-logos}}
-                {{{html-input}}}
+            </a>
-            {{/data-search-box}}
         </div>
+            <div id="nav-search">
+                {{#data-search-box}}
+                    <form action="{{{form-action}}}">
+                        <input id="nav-search-bar" {{{html-input-attributes}}}>
+                        <input value="🔍" {{{html-button-go-attributes}}}>
+                    </form>
+                {{/data-search-box}}
+            </div>
         <div id="user-menu">
             {{#data-portlets}}
                 {{#data-user-menu}}
                     {{#array-items.0.array-links.0}}
-                        <button id="user-menu-name">
+                        <button id="user-menu-button">
                             {{{text}}}
                         </button>
                     {{/array-items.0.array-links.0}}
                     <div id="user-menu-list">
                         {{{html-items}}}
+                        <a href="/index.php/Special:Upload">
+                            Upload a File
+                        </a>
                     </div>
                 {{/data-user-menu}}
             {{/data-portlets}}
@@ -27,46 +39,86 @@
 
     <div id="sidebar-nav">
 
-        <nav class="nav-menu">
+        <nav id="nav-main" class="nav-menu">
+            <button class="nav-show">
+                Wiki Pages
+            </button>
             <ul class="site-links">
                 {{#data-portlets-sidebar}}
                     {{#data-portlets-first}}
-                        {{{html-items}}}
+                        {{#array-items}}
+                            {{#array-links}}
+                                {{#array-attributes.0}}
+                                    <a href="{{{value}}}">
+                                {{/array-attributes.0}}
+                                <li class="mw-list-item">
+                                    {{{text}}}
+                                </li class="mw-list-item">
+                            </a>
+                            {{/array-links}}
+                        {{/array-items}}
                     {{/data-portlets-first}}
                 {{/data-portlets-sidebar}}
             </ul>
         </nav>
 
-        <div class="nav-menu">
+        {{#data-portlets-sidebar}}
-            <ul class="site-links">
+            {{#array-portlets-rest}}
-                {{#data-portlets-sidebar.array-portlets-rest.0}}
+            <div class="nav-menu nav-external">
-                    {{{html-items}}}
+                <button class="nav-show">
-                {{/data-portlets-sidebar.array-portlets-rest.0}}
+                    {{{label}}}
-            </ul>
+                </button>
-        </div>
+                <ul class="site-links">
 
-        <div class="nav-menu nav-toc">
+                            {{#array-items}}
+                                {{#array-links}}
+                                    {{#array-attributes.0}}
+                                        <a href="{{{value}}}">
+                                    {{/array-attributes.0}}
+                                    <li class="mw-list-item">
+                                        {{{text}}}
+                                    </li class="mw-list-item">
+                                </a>
+                                {{/array-links}}
+                            {{/array-items}}
+                </ul>
+            </div>
+            {{/array-portlets-rest}}
+        {{/data-portlets-sidebar}}
+
+        <nav id="nav-toc" class="nav-menu nav-sticky">
+            <button class="nav-show">
+                Page Contents
+            </button>
             <ul class="site-links">
-                        <li class="nav-backtotop">
+                <a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop">
-                            <a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" >Back to Top</a>
+                    <li>
-                        </li>
+                        {{{html-title}}}
+                    </li>
+                </a>
                 {{#data-toc}}
                     {{#array-sections}}
-                        <li class="nav-toclevel{{{toclevel}}}">
+                        <a href="#{{{linkAnchor}}}" class="nav-toclevel{{{toclevel}}}">
+                            <li class="mw-list-item">
                             {{{line}}}
-                        </li>
+                            </li>
+                        </a>
                     {{/array-sections}}
                 {{/data-toc}}
             </ul>
-        </div>
+        </nav>
 
     </div>
 
-    {{>sidebar-page}}
+    <div id="sidebar-page-mouse">{{>sidebar-page}}</div>
+    <div id="sidebar-page-touch">
+        <button class="page-show">Editor Pages</button>
+        {{>sidebar-page}}</div>
 
     <main id="page">
         <div id="titleblock">
             <div id="pagetitle">
+                <div id="titlebg"></div>
                 {{{html-title-heading}}}
             </div>
             <div id="versions">