preliminary layout

resources/layout-mouse.less

@@ -0,0 +1,80 @@
+:root {
+    --sidebar-width: calc(3em + 9vw);
+}
+
+#grid {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) auto var(--sidebar-width);
+    grid-template-rows:
+        [topstart] auto
+        [title] auto
+        [pageheader] auto
+        [pagebody] auto
+        [bottomstart] auto
+    ;
+    column-gap: .6em;
+    height: 100%;
+    max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
+    margin: auto;
+    padding-left: .6em;
+    padding-right: .6em;
+}
+
+#topbar {
+    grid-column: 2;
+    grid-row: topstart ;
+}
+
+#sidebar-nav {
+    grid-column: 1;
+    grid-row: pagebody / -1;
+}
+
+.nav-menu {
+    max-width: 12em;
+    margin: auto;
+    position: sticky;
+    top: 1.2em;
+}
+
+#sidebar-pageview {
+    grid-column: 3;
+    grid-row: pagebody / -1;
+}
+
+.sidebar-pageview-menu {
+    width: 4em;
+}
+
+#page {
+    grid-column: 2;
+    grid-row: title / bottomstart ;
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-template-columns: subgrid;
+}
+
+#titleblock {
+    grid-column: 1;
+    grid-row: title;
+}
+
+#mw-content-text {
+    grid-column: 1;
+    grid-row: pagebody / bottomstart;
+}
+
+#pagebody {
+    grid-row: pagebody
+}
+
+#mw-content-text:has(> .mw-parser-output), .mw-parser-output {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: pageheader / bottomstart;
+}
+
+#bottombar {
+    grid-column: 2;
+    grid-row: bottomstart;
+}

resources/layout-touch.less

@@ -0,0 +1,46 @@
+:root {
+    --touch-whitespace: calc(18vw - 132px);
+}
+
+#grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 12em 12em 12em auto 12em;
+    padding-left: var(--touch-whitespace);
+    padding-right: var(--touch-whitespace);
+}
+
+#topbar {
+    grid-row: 1;
+}
+
+#sidebar-nav {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    width: 50px;
+    height: 50px;
+}
+
+#sidebar-pageview {
+    grid-row: 2;
+}
+
+#page {
+    grid-row: 3 / 5;
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-template-columns: subgrid;
+}
+
+#titleblock {
+    grid-row: 1;
+}
+
+#pagebody {
+    grid-row: 2;
+}
+
+#bottombar {
+    grid-row: 5;
+}

resources/skin.js

@@ -0,0 +1,6 @@
+var divs = document.getElementById("pagebody-header");
+console.log("divs")
+
+window.onload = (event) => {
+  console.log("page is fully loaded");
+};

resources/skin.less

@@ -0,0 +1,88 @@
+@media (max-width: 1080px) {
+    @import 'layout-touch.less';
+}
+
+@media (min-width: 1081px) {
+    @import 'layout-mouse.less';
+}
+
+
+
+
+.mediawiki {
+
+}
+
+#topbar {
+    background-color: yellow;
+
+}
+
+#sidebar-nav {
+
+}
+
+
+.nav-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: .6em;
+}
+
+.nav-links {
+    background-color: blue;
+}
+
+.mw-list-item a, .mw-list-item a {
+    color: white;
+}
+
+#sidebar-pageview {
+
+}
+
+.sidebar-pageview-menu {
+    background-color: purple;
+}
+
+#titleblock, #pagebody-header {
+    background-color: green;
+}
+
+#mw-content-text {
+    background-color: red;
+}
+
+#bottombar {
+    background-color: pink;
+}
+
+
+
+
+li {
+    list-style: none;
+}
+ 
+a {
+    color: unset;
+}
+
+h1 {
+    margin: unset;
+    border: unset;
+    font-size: unset;
+    font-weight: unset;
+}
+
+h2 {
+    margin: unset;
+    border: unset;
+    padding: 0;
+}
+
+p {
+    margin: unset;
+}

skin.json

@@ -30,7 +30,9 @@
 						"codex-styles",
 						"skins.crystal.styles"
 					],
-					"scripts": []
+					"scripts": [
+						"skin.js"
+					]
 				}
 			]
 		}

templates/skin.mustache

@@ -0,0 +1,59 @@
+<div id="grid">
+
+    <header id="topbar">
+        {{#data-portlets}}
+            {{#data-user-menu}}
+                {{{html-items}}}
+            {{/data-user-menu}}
+        {{/data-portlets}}
+        <div id="nav-search">
+            {{#data-search-box}}
+                {{{html-input}}}
+            {{/data-search-box}}
+        </div>
+    </header>
+
+    <div id="sidebar-nav">
+        <nav class="nav-menu">
+
+            <div class="nav-links">
+                {{#data-portlets-sidebar}}
+                    {{#data-portlets-first}}
+                        {{{html-items}}}
+                    {{/data-portlets-first}}
+                {{/data-portlets-sidebar}}
+            </div>
+        </nav>
+    </div>
+
+    <div id="sidebar-pageview">
+        <nav class="sidebar-pageview-menu">
+            {{#data-portlets}}
+                {{#data-views}}
+                    {{{html-items}}}
+                {{/data-views}}
+                {{#data-associated-pages}}
+                    {{{html-items}}}
+                {{/data-associated-pages}}
+                {{#data-actions}}
+                    {{{html-items}}}
+                {{/data-actions}}
+            {{/data-portlets}}
+        </nav>
+    </div>
+
+    <main id="page">
+        <div id="titleblock">
+            <div id="pagetitle">
+                {{{html-title-heading}}}
+            </div>
+            <div id="categories"></div>
+        </div>
+
+            {{{html-body-content}}}
+
+    </main>
+
+    <footer id="bottombar"></footer>
+
+</div>