finalizing site layout, starting on page layout

i18n/en.json

@@ -1,10 +1,10 @@
 {
 	"@metadata": {
 		"authors": [
-			"..."
+			"Esby"
 		]
 	},
 	"skinname-crystal": "Crystal",
-	"crystal-skin-desc": "A skin for Final Fantasy fansites, by Esby.",
+	"crystal-skin-desc": "A skin for Final Fantasy fansites.",
 	"crystal-no-categories": "No categories."
 }

resources/colors.less

@@ -1,25 +1,51 @@
-:root {
+// There's a site color, a page color, and an accent. In light mode, brightness increases from a black 8 -> to a white 0, and in dark mode, brightness increases from 0 -> 8
-  --black: oklch(0 0 0);
+// I would recommend avoiding --8 and --0 if possible, but sometimes you just need black or white! It is what it is.
-  --white: oklch(1 0 0);
+// I would also recommend sticking to these colors as much as you can, and if you add anything else, make sure to check it in both light and dark mode.
-  --blue-1: oklch(0.96 0.02 270);
+
-  --blue-2: oklch(0.92 0.04 270);
+  :root {
-  --blue-3: oklch(0.79 0.11 270);
+    --8: oklch(0 0 0);
-  --blue-4: oklch(0.71 0.16 270);
+    --0: oklch(1 0 0);
-  --blue-5: oklch(0.62 0.14 270);
+    --blue-1: oklch(0.96 0.02 270);
-  --blue-6: oklch(0.41 0.1 270);
+    --blue-2: oklch(0.92 0.04 270);
-  --blue-7: oklch(0.3 0.07 270);
+    --blue-3: oklch(0.79 0.11 270);
-  --gold-1: oklch(96.098% 0.02042 91.593);
+    --blue-4: oklch(0.71 0.16 270);
-  --gold-2: oklch(0.92 0.04 90);
+    --blue-5: oklch(0.62 0.14 270);
-  --gold-3: oklch(0.79 0.11 90);
+    --blue-6: oklch(0.41 0.1 270);
-  --gold-4: oklch(0.71 0.16 90);
+    --blue-7: oklch(0.3 0.07 270);
-  --gold-5: oklch(0.61 0.14 90);
+    --gold-1: oklch(96.098% 0.02042 91.593);
-  --gold-6: oklch(0.41 0.1 90);
+    --gold-2: oklch(0.92 0.04 90);
-  --gold-7: oklch(0.3 0.07 90);
+    --gold-3: oklch(0.79 0.11 90);
-  --pink-1: oklch(0.97 0.02 330);
+    --gold-4: oklch(0.71 0.16 90);
-  --pink-2: oklch(0.92 0.04 330);
+    --gold-5: oklch(0.61 0.14 90);
-  --pink-3: oklch(0.8 0.11 330);
+    --gold-6: oklch(0.41 0.1 90);
-  --pink-4: oklch(0.73 0.16 330);
+    --gold-7: oklch(0.3 0.07 90);
-  --pink-5: oklch(0.63 0.14 330);
+    --pink-1: oklch(0.97 0.02 330);
-  --pink-6: oklch(0.42 0.1 330);
+    --pink-2: oklch(0.92 0.04 330);
-  --pink-7: oklch(0.31 0.07 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);
+  }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --8: oklch(1 0 0);
+    --0: oklch(0 0 0);
+    --blue-7: oklch(0.96 0.02 270);
+    --blue-6: oklch(0.92 0.04 270);
+    --blue-5: oklch(0.79 0.11 270);
+    --blue-4: oklch(0.71 0.16 270);
+    --blue-3: oklch(0.62 0.14 270);
+    --blue-2: oklch(0.41 0.1 270);
+    --blue-1: oklch(0.3 0.07 270);
+    --pink-7: oklch(0.97 0.02 330);
+    --pink-6: oklch(0.92 0.04 330);
+    --pink-5: oklch(0.8 0.11 330);
+    --pink-4: oklch(0.73 0.16 330);
+    --pink-3: oklch(0.63 0.14 330);
+    --pink-2: oklch(0.42 0.1 330);
+    --pink-1: oklch(0.31 0.07 330);
+  }
+}
+

resources/main.js

@@ -1,5 +1,101 @@
 // This is the skin's only javascript file. If you want to add more JS files, you need to include them in skin.json's ResourceModules section, the way this one is.
 
+// This all is for the color scheme toggle. Javascript is only truly necessary for the user's choice to persist. Without the toggle, the CSS will still respect the browser-level preference.
+function getPreferredColorScheme(){
+    let systemScheme = 'light';
+
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches){
+        systemScheme = 'dark';
+    }
+
+    let chosenScheme = systemScheme;
+
+    if (localStorage.getItem('scheme')) {
+        chosenScheme = localStorage.getItem('scheme');
+    }
+
+    if (systemScheme === chosenScheme) {
+        localStorage.removeItem('scheme')
+    }
+
+    return chosenScheme;
+}
+
+function savePreferredColorScheme(scheme) {
+    let systemScheme = 'light';
+
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        systemScheme = 'dark';
+    };
+
+    if (systemScheme === scheme) {
+        localStorage.removeItem('scheme');
+    } else {
+        localStorage.setItem('scheme', scheme);
+    };
+}
+
+function toggleColorScheme() {
+    let newScheme = 'light';
+
+    let scheme = getPreferredColorScheme();
+
+    if (scheme === 'light') {
+        newScheme = 'dark';
+    }
+
+    applyPreferredColorScheme(newScheme);
+    savePreferredColorScheme(newScheme);
+
+}
+
+function applyPreferredColorScheme(scheme) {
+    for (var s = 0; s < document.styleSheets.length; s++) {
+
+        for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
+            rule = document.styleSheets[s].cssRules[i];
+
+            if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
+
+                switch (scheme) {
+                    case "light":
+                        rule.media.appendMedium("original-prefers-color-scheme");
+                        if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
+                        if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
+                        break;
+                    case "dark":
+                        rule.media.appendMedium("(prefers-color-scheme: light)");
+                        rule.media.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
+                        break;
+                    default:
+                        rule.media.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
+                        if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
+                        break;
+                }
+            }
+        }
+
+    }
+
+    if (scheme === "dark") {
+        document.getElementById("toggle-to-light").style.display = 'block';
+        document.getElementById("toggle-to-dark").style.display = 'none';
+    } else {
+        document.getElementById("toggle-to-dark").style.display = 'block';
+        document.getElementById("toggle-to-light").style.display = 'none';
+    }
+}
+
+applyPreferredColorScheme(getPreferredColorScheme());
+
+const toggles = document.getElementsByClassName('color-scheme-toggle');
+for (const toggle of toggles) {
+    console.log(toggle)
+    toggle.addEventListener('click', toggleColorScheme);
+};
+
 // The wrapper function is needed to make sure all of the mediawiki JS is loaded before the page's is, and load relevant parts for use here.
 mw.loader.using( [
     'mediawiki.jqueryMsg' 

resources/parts/dropmenu.less

@@ -1,7 +1,7 @@
 #site-header-search-bar, .site-nav-menu {
     border-radius: calc(var(--space) / 2);
     background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%);
-    box-shadow: inset 0 0 6px 1px var(--blue-3), 0 0 3px .1px var(--blue-7);
+    box-shadow: inset 0 0 3px .5px var(--blue-3), 0 0 3px .1px var(--blue-7);
     border-top: 2px solid var(--blue-3);
 }
 
@@ -19,6 +19,24 @@
     border: 2px solid var(--blue-3);
 }
 
+@media (prefers-color-scheme: dark) {
+    
+    #site-header-search-bar, .site-nav-menu {
+    border-radius: calc(var(--space) / 2);
+    background: linear-gradient(120deg, var(--blue-3), var(--blue-2) 80%);
+    border-top: 2px solid var(--blue-4);
+    }
+
+    .site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
+        background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
+    }
+
+    #site-header-user-links, #page-header-options-links {
+        box-shadow: 0 0 3px 1px var(--blue-1);
+        border: 2px solid var(--blue-2);
+    }
+}
+
 .site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
     display: flex;
 }
@@ -31,7 +49,7 @@
     width: max-content;
 }
 
-.drop-link-list a {
+.drop-link-list a:link, .drop-link-list a:visited  {
     color: var(--blue-7);
     text-shadow: 0 0 3px var(--blue-1);
 }

resources/parts/page-body.less

@@ -1,28 +1,53 @@
 #page {
     grid-row: title / bottomstart;
+
+    @media (prefers-color-scheme: dark) {
+        color: var(--gold-1);
+    }
 }
 
-#pagebody-header {
+a:link {
-    grid-row: toc;
-}
-
-#pagebody a:link {
     color: var(--blue-6);
 }
 
-#pagebody a.new {
+a.new, p a.new:visited {
     color: red;
     text-decoration: underline wavy;
 }
 
-#pagebody a:not(.new):visited {
+a:not(.new):visited {
     color: var(--pink-6);
 }
 
-#pagebody a:hover , #pagebody a:visited:hover {
+a:hover , a:visited:hover {
     color: var(--blue-4);
 }
 
+@media (prefers-color-scheme: dark) {
+
+    a:link {
+        color: var(--blue-5);
+    }
+
+    a.new, p a.new:visited {
+        color: red;
+        text-decoration: underline wavy;
+    }
+
+    a:not(.new):visited {
+        color: var(--pink-5);
+    }
+
+    a:hover , a:visited:hover {
+        color: var(--blue-4);
+    }
+
+}
+
+#pagebody-header {
+    grid-row: toc;
+}
+
 .mw-heading {
     display: flex;
     margin-bottom: calc(var(--space));
@@ -39,19 +64,22 @@
 }
 
 .mw-heading h2{
-    margin-left: calc(var(--space) / 2);
+    margin-left: calc(var(--space) * 3);
-    margin-bottom: calc(var(--space) / 2);
+    margin-bottom: calc(var(--space));
 }
 
 .mw-heading2 {
     border-bottom: 2px solid;
     margin-bottom: calc(var(--space));
     margin-top: calc(var(--space) * 3);
-    border-image: linear-gradient(90deg, var(--gold-7), transparent 90%) 30;
+    border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-7) 6%, transparent 90%) 30;
+    @media (prefers-color-scheme: dark) {
+        border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-1) 6%, transparent 90%) 30;
+    }
 }
 
 .mw-heading h3 {
-    margin-left: calc(var(--space) *4);
+    margin-left: calc(var(--space) * 4);
     margin-top: calc(var(--space));
 }
 
@@ -63,7 +91,15 @@
     display: none;
 }
 
-@media (min-width: 1081px) {
+.mw-editsection-bracket {
+    display: none;
+}
+
+.mw-editsection.mw-editsection a:link, .mw-editsection.mw-editsection a:visited {
+    color: var(--blue-7);
+}
+
+@media (min-width: 1201px) {
     #page {
         margin-top: calc(var(--space) * 6);
         grid-column: pagestart / pageend ;
@@ -79,13 +115,13 @@
 
 
     .mw-heading {
-        align-items: baseline;
+        align-items: end;
         justify-content: space-between;
     }
 
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
     #page {
         grid-column: 1;
 
@@ -99,7 +135,7 @@
         grid-row: 2;
     }
 
-    #pagebody p {
+    #mw-content-text p {
         margin-left: var(--space);
         margin-right: var(--space);
     }

resources/parts/page-header.less

@@ -2,11 +2,16 @@
     display: flex;
     align-items: end;
     justify-content: space-between;
-    border-bottom: 3px solid var(--black);
+    border-bottom: 3px solid var(--8);
 }
 
 #page-title {
     display: flex;
+    position: relative;
+}
+
+#page-title-background {
+
 }
 
 #page-header-views {
@@ -16,7 +21,7 @@
 }
 
 #page-header-views > * > a:link, #page-header-views#page-header-views a:visited {
-    color: var(--black);
+    color: var(--8);
 }
 
 #page-header-views > * > a:link:hover, #page-header-views#page-header-views a:visited:hover {
@@ -35,6 +40,7 @@
 
 #page-header-options button {
     text-decoration: underline;
+    color: var(--8);
 }
 
 #page-header-options button:hover {
@@ -50,6 +56,13 @@
 
 #firstHeading {
     margin-bottom: .1em;
+    color: var(--8);
+}
+
+@media (prefers-color-scheme: dark) {
+    #firstHeading {
+        text-shadow: 0 0 6px var(--0);
+    }
 }
 
 #firstHeading, .mw-heading h2 {
@@ -66,35 +79,45 @@
     gap: var(--space);
 }
 
-@media (min-width: 1081px) {
+#mw-indicator-mw-helplink {
-    #site-header-container {
+    height: fit-content;
-        grid-column: pagestart;
+    align-self: center;
-        display: flex;
-        gap: var(--space);
-    }
 }
 
-@media (max-width: 1080px) {
+@media (min-width: 1201px) {
-    #page-title{
+
-        flex-direction: column-reverse;
+}
-    }
+
+@media (max-width: 1200px) {
 
     #page-header {
         margin-left: var(--space);
         margin-right: var(--space);
     }
 
-    #site-header-container {
-        grid-row: 2;
-        grid-column: 1 / 3;
-    }
-
 }
 
 @media (max-width: 720px) {
     
+    #page-header-views {
+        flex-direction: column;
+        margin-bottom: 0;
+    }
+
+    #page-header-links {
+        margin-bottom: calc(var(--space) / 2);
+    }
+
+    #page-title{
+        flex-direction: column-reverse;
+    }
+
     #page-header-links {
         flex-direction: column;
         align-items: end;
     }
+
+    #page-title-versions {
+        align-self: end;
+    }
 }

resources/parts/page-toc.less

@@ -6,8 +6,8 @@
     // margin-top: calc(var(--space) * 2);
     // margin-bottom: calc(var(--space) * 2);
 
-    background-image: linear-gradient(100deg, transparent 0%, #ecf2ff 20%, #ecf2ff 80%, transparent);
+    // background-image: linear-gradient(100deg, transparent 0%, #ecf2ff 20%, #ecf2ff 80%, transparent);
-    box-shadow: inset 0 0 12px 12px white;
+    // box-shadow: inset 0 0 12px 12px white;
     padding-top: calc(var(--space) * 2);
     padding-bottom: calc(var(--space) * 2);
 
@@ -30,16 +30,19 @@
     flex-basis: 6em;
 }
 
-.toclevel-1 > a {
+.toclevel-1 > a:link, .toclevel-1 > a:visited {
     font-size: 1.2em;
-    // font-weight: bold;
+    color: var(--8);
-    color: var(--black);
-    // background-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
 }
 
 .toclevel-2 > a {
     color: var(--blue-6);
+}
 
+@media (prefers-color-scheme: dark) {
+    .toclevel-2 > a {
+        color: var(--blue-5);
+    }
 }
 
 .toclevel-1 ul, .toclevel-1 {
@@ -64,11 +67,11 @@ a:has(> .toctext):hover {
     grid-row: toc / bottomstart;
 }
 
-@media (min-width: 1081px) {
+@media (min-width: 1201px) {
 
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
     .toctext {
         font-size: 0.9em;
     }

resources/parts/portableinfobox.less

@@ -1,54 +1,139 @@
 .portable-infobox {
     --pi-item-spacing: calc(var(--space));
-    margin-left: var(--space);
+    margin-left: calc(var(--space) * 2);
-    color: var(--gold-7);
+    font-family: 'Shippori Mincho', serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 1 0;
+//     background: conic-gradient(from 42deg at 12em -24em, var(--gold-3) 30%, var(--gold-1) 40%, var(--gold-3) 50%) padding-box;
 }
 
-.pi-title.pi-title, .pi-header.pi-header {
+.portable-infobox > * {
-    border-bottom: 2px solid;
+    width: 100%;
-    border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
+    box-sizing: border-box;
-    font-family: 'Libre Caslon';
-    line-height: 1em;
-    padding-bottom: .5em;
 }
 
-.pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
+// .pi-title.pi-title, .pi-header.pi-header {
-    background: var(--white) border-box;
+//     border-bottom: 2px solid;
+//     border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
+//     font-family: 'Libre Caslon';
+//     line-height: 1em;
+//     padding-bottom: .5em;
+//     color: var(--gold-7);
+// }
+
+// @media (prefers-color-scheme: dark) {
+
+//     .portable-infobox {
+//         background: conic-gradient(from 42deg at 12em -24em, var(--gold-4) 30%, var(--gold-2) 40%, var(--gold-4) 50%) padding-box;
+//     }
+
+//     .pi-title.pi-title, .pi-header.pi-header {
+//         border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
+//     }
+// }
+
+// .pi-font, .pi-secondary-font {
+//     color: var(--8);
+// }
+
+// .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
+//     background: var(--0) border-box;
+// }
+
+// @media (prefers-color-scheme: dark) {
+//     .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
+//         background: #666666 border-box;
+//     }
+// }
+
+// .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
+//     border: none;
+// }
+
+.portable-infobox .pi-media {
+    border: 1px solid var(--gold-5);
+    padding-top: var(--pi-item-spacing);
+    // background: repeating-conic-gradient(
+    //     var(--0) 0% 25%,
+    //     transparent 0 50%)
+    //     50% / 20px 20px;
+    background: black;
+    // width: fit-content;
+    margin-bottom: var(--pi-item-spacing);
 }
 
-.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
+.portable-infobox .pi-title, .portable-infobox .pi-header {
-    border: none;
+    padding: 0;
+    padding-bottom: var(--pi-item-spacing);
+    // display: flex;
+    width: fit-content;
+    // text-wrap: nowrap;
+    gap: calc(var(--pi-item-spacing) / 2);
+    flex-shrink: 0;
+}
+
+.portable-infobox .pi-title::before,
+.portable-infobox .pi-title::after,
+.portable-infobox .pi-header::before,
+.portable-infobox .pi-header::after {
+    display: block;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+    background-position-y: 50%;
+    content: ' ';
+    flex-grow: 1;
+    min-width: calc(var(--pi-item-spacing) * 2);
+}
+
+.portable-infobox .pi-title::before,
+.portable-infobox .pi-header:not(caption)::before {
+    background-image: linear-gradient(90deg, transparent, var(--gold-1));
+}
+
+.portable-infobox .pi-title::after,
+.portable-infobox .pi-header:not(caption)::after {
+    background-image: linear-gradient(270deg, transparent, var(--gold-1));
+}
+
+.pi-media * {
+    width: fit-content;
+}
+
+.pi-caption {
+    color: var(--gold-1);
+}
+
+.pi-collapse.pi-collapse h2.pi-header.pi-header {
+    padding-right: var(--pi-item-spacing);
+}
+
+.pi-header.pi-header, .pi-title.pi-title {
+    text-align: center;
+    // background: var(--gold-3);
+    // color: var(--gold-7);
 }
 
 .pi-data-label {
-    text-align: center;
+    // text-align: right;
 }
 
-@media (min-width: 1081px) {
+@media (min-width: 1201px) {
     .portable-infobox {
         margin-right: calc(var(--space) * 20 * -1);
     }
 }
 
-@media (min-width: 721px) {
+@media (min-width: 1200px) {
-    .portable-infobox {
+
-        background: linear-gradient(80deg, var(--gold-3) 0%, var(--white) 40% 0%, var(--gold-1) 60%, transparent 80%);
-            // conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40%, var(--white) 44%, var(--gold-4) 50%) padding-box;
-    // background: var(--gold-4)
-    // background: conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40% 0%, var(--white) 44% 0%, var(--gold-4) 50%);
-    // background: conic-gradient(
-    //     from 339deg at 20% -60%,
-    //     var(--gold-3) 40%, var(--white) 47% 0%, var(--gold-2) 49%,
-    //     var(--white) 51% 0%, var(--white) 51% 0%, var(--gold-3) 52%,
-    //     var(--gold-3) 53%, var(--white) 54% 0%, var(--white) 55% 0%, var(--gold-3) 56%)
-    }
 }
 
 @media (max-width: 720px) {
     .portable-infobox {
-        background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
+        // background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
-        margin-left: 0;
+        margin-right: var(--space);
-        margin-right: 0;
+        margin-left: var(--space);
     }
 
     .pi-title:first-child {

resources/parts/site-footer.less

@@ -25,7 +25,7 @@
 
 
 
-@media (min-width: 1081px) {
+@media (min-width: 1201px) {
     #site-footer {
         grid-column: pagestart / pageend;
 
@@ -40,7 +40,7 @@
     }
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
     #site-footer {
         gap: var(--space);
         grid-column: 1;

resources/parts/site-header.less

@@ -2,17 +2,27 @@
     display: grid;
 }
 
+#site-header-marks {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: start;
+}
+
 #site-header-marks a {
     display: flex;
     height: 100%;
-    max-width: 12em;
+
-    margin: auto;
+    // Note that the wordmark's underline is drawn here, and is not a part of the SVG file.
+    border-bottom: 3px solid var(--8);
+    box-sizing: border-box;
 }
 
 #site-header-wordmark {
-    // Note that the wordmark's underline is drawn here, and is not a part of the SVG file.
-    border-bottom: 3px solid var(--black);
     width: 100%;
+    @media (prefers-color-scheme: dark) {
+        filter: invert(1);
+    }
 }
 
 .searchButton {
@@ -20,12 +30,15 @@
     right: var(--space);
     top: 50%;
     transform: translate(0, -50%);
-    border-left: 1px solid var(--blue-1);
     background: none;
     cursor: pointer;
     padding: var(--space);
     width: calc(var(--space) * 4);
     z-index: 6;
+    border-left: 1px solid var(--blue-1);
+    @media (prefers-color-scheme: dark) {
+        border-left: 1px solid var(--blue-7);
+    }
 }
 
 #site-header-search-icon {
@@ -33,14 +46,17 @@
     position: absolute;
     top: calc(var(--space) * 1.5);
     right: var(--space);
-    color: var(--white);
+    color: var(--0);
+    @media (prefers-color-scheme: dark) {
+        color: var(--8);
+    }
 }
 
 #site-header-search-bar {
     padding: var(--space);
     height: 100%;
     font-size: calc(var(--space) * 2);
-    border-bottom: 3px solid var(--black);
+    border-bottom: 3px solid var(--8);
     width: 100%;
 }
 
@@ -48,6 +64,9 @@
     color: var(--blue-1);
     font-weight: bold;
     font-family: 'Libre Caslon';
+    @media (prefers-color-scheme: dark) {
+        color: var(--blue-7);
+    }
 }
 
 #site-header-search-bar:focus::placeholder {
@@ -61,10 +80,15 @@
 
 #site-header-search-bar:focus {
     outline: 3px solid var(--blue-6);
-    background-color: var(--white);
+    background-color: var(--0);
-    background-image: linear-gradient(90deg, var(--white), var(--blue-1) 80%);
+    background-image: linear-gradient(90deg, var(--0), var(--blue-1) 80%);
     border-top: 2px solid var(--blue-7);
     box-shadow: none;
+    @media (prefers-color-scheme: dark) {
+        outline: 3px solid var(--blue-4);
+        background-color: var(--8);
+        background-image: none;
+    }
 }
 
 #site-header-search-bar:focus:hover {
@@ -82,7 +106,8 @@
     text-wrap: nowrap;
     padding-left: var(--space);
     padding-right: var(--space);
-    border-bottom: 3px solid var(--black);
+    border-bottom: 3px solid var(--8);
+    color: var(--8);
 }
 
 .site-header-user button:hover {
@@ -93,16 +118,32 @@
     background-image: none;
     background-color: var(--blue-4);
     box-shadow: 0 0 2px .5px var(--blue-7);
+    @media (prefers-color-scheme: dark) {
+        box-shadow: 0 0 2px .5px var(--0);
+        background-color: var(--blue-3);
+    }
+        
 }
 
 #site-header-user-links ul > .mw-list-item a {
     color: var(--blue-7);
 }
 
-@media (min-width: 1081px) {
+.color-scheme-toggle {
+    padding: var(--space);
+    width: calc(var(--space) * 3);
+
+    filter: saturate(0%) brightness(0) contrast(10);
+
+    @media (prefers-color-scheme: dark) {
+        filter: saturate(0%) brightness(1) contrast(10);
+    }
+}
+
+@media (min-width: 1201px) {
 
     #site-header {
-        grid-column: navstart / -3;
+        grid-column: navstart / -2;
         grid-row: topstart;
         grid-template-columns: subgrid;
         grid-template-rows: subgrid;
@@ -134,16 +175,23 @@
         grid-column: menustart / pageend;
     }
 
+    #site-header-container {
+        grid-column: pagestart;
+        display: flex;
+        gap: calc(var(--space) * 2);
+    }
+
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
 
     #site-header {
         grid-column: 1;
         grid-row: topstart / -1;
         grid-template-columns:
-            [marks] auto
+            [marks] 1fr
-            [menu] 1fr
+            [toggle] auto
+            [menu] auto
         ;
         grid-template-rows: 3em auto;
         row-gap: var(--space);
@@ -152,11 +200,21 @@
     }
 
 
-    #site-header-search {
+    #site-header-container {
-        grid-column: marks / -1;
+        grid-row: 2;
+        grid-column: 1 / -1;
     }
 
-    #site-header-search form {
+    .site-header-user {
+        grid-column: 3;
+        grid-row: 1;
+    }
+
+    #color-scheme-toggle {
+        grid-column: 2;
+    }
+
+    #site-header-search {
         position: sticky;
         align-self: flex-start;
         top: var(--space);

resources/parts/site-nav.less

@@ -11,12 +11,17 @@
     padding-top: calc(var(--space) - 2px);
 }
 
-.site-nav-menu-links a, .site-nav-menu button{
+.site-nav-menu-links .mw-list-item a:link, .site-nav-menu-links .mw-list-item a:visited, .site-nav-menu button{
-    text-shadow: 0 0 2px var(--black);
+    text-shadow: 0 0 2px var(--8);
     font-weight: bold;
     font-size: .9em;
     font-family: 'Libre Caslon', serif;
-    color: var(--gold-1);
+    color: var(--blue-1);
+
+    @media (prefers-color-scheme: dark) {
+        color: var(--blue-7);
+        text-shadow: 0 0 2px var(--0);
+    }
 }
 
 .site-nav-menu button {
@@ -61,7 +66,25 @@
     display: none;
 }
 
-@media (min-width: 1081px) {
+#site-nav-toc-title {
+    justify-content: center;
+    border-bottom: 1px solid;
+    padding-bottom: .3em;
+
+    border-image: linear-gradient(90deg, transparent 5%, var(--blue-1) 50%, transparent 95%) 1;
+
+    @media (prefers-color-scheme: dark) {
+        border-image: linear-gradient(90deg, transparent 5%, var(--blue-7) 50%, transparent 95%) 1;
+    }
+}
+
+
+
+#site-nav-toc-title a {
+    text-decoration: none;
+}
+
+@media (min-width: 1201px) {
 
     #site-nav-wrapper {
         grid-column: navstart;
@@ -100,7 +123,7 @@
 
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
 
     #site-lastedit.layout-mouse {
         display: none;
@@ -139,6 +162,14 @@
         height: calc(var(--space) * 3);
     }
 
+    #site-nav-toc-title {
+        border-bottom: 0;
+    }
+
+    #site-nav-toc-title a {
+        text-decoration: underline;
+    }
+
 }
 
 @media (max-width: 720px) {
@@ -153,17 +184,21 @@
     }
 
     .site-nav-menu:last-child {
-        margin-left: .6em;
+        margin-left: calc(var(--space) * 3);
+    }
+
+    .site-nav-menu:first-child {
+        margin-right: calc(var(--space) * 3);
     }
 
     .site-nav-menu {
-        width: 90vw;
+        width: calc(100vw - 2.4em);
         flex-shrink: 0;
         scroll-snap-align: center;
     }
 
-    #site-nav-wrapper > div::before {
+    // #site-nav-wrapper > div::before {
-        content: '';
+    //     content: '';
-        padding: 1px;
+    //     padding: 1px;
-    }
+    // }
 }

resources/parts/sitenotice.less

@@ -1,8 +1,8 @@
 #localNotice {
     // width: max-content;
-    box-shadow: inset 0 0 6px 12px white;
+    box-shadow: inset 0 0 6px 6px var(--gold-2);
-
+    background-image: linear-gradient(90deg, var(--gold-1), var(--gold-2) 90%);
-    background: var(--gold-2);
+    border: 2px solid var(--gold-3);
 }
 
 .mw-dismissable-notice {
@@ -12,15 +12,20 @@
 
 .mw-dismissable-notice-close {
     position: absolute;
-    bottom: calc(var(--space) * 2);
+    bottom: calc(var(--space) * 1);
     right: calc(var(--space) * 2);
+    color: var(--gold-7);
 }
 
 .mw-dismissable-notice-body {
-    text-wrap: balance;
+    text-wrap: pretty;
 }
 
-@media (min-width: 1081px) {
+.sitenotice p {
+    color: var(--gold-7);
+}
+
+@media (min-width: 1201px) {
     .mw-dismissable-notice, #localNotice {
         grid-row: sitenotice;
         grid-column: pagestart / pageend;
@@ -28,24 +33,39 @@
     }
 
     #localNotice {
-        padding: 2.4em;
+        padding: calc(var(--space) * 2);
     }
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
     #localNotice {
         font-size: .9em;
-        padding: calc(var(--space) * 1.5);
+        padding: calc(var(--space) * 1);
+        margin-left: var(--space);
+        margin-right: var(--space);
     }
 
     .mw-dismissable-notice {
         padding-bottom: calc(var(--space) * 4);
         grid-column: 1;
         grid-row: sitenotice;
-        // margin-top: calc(var(--space) * 1);
+        margin-top: calc(var(--space) * 1);
     }
+
+    .mw-dismissable-notice-close {
+        bottom: calc(var(--space) * 1);
+    }
+
+    // @media (prefers-color-scheme: dark){
+    //     .mw-dismissable-notice-close {
+    //         color: var(--8);
+    //     }
+    // }
+
 }
 
+
+
 @media (max-width: 720px) {
 
 }

resources/parts/specialpage.less

@@ -0,0 +1,46 @@
+.mw-changeslist-legend {
+    float: none;
+    margin-right: var(--space);
+    margin-left: var(--space);
+    background: var(--0);
+}
+
+.mw-htmlform-ooui-wrapper {
+    background-color: var(--0);
+    padding: var(--space);
+}
+
+fieldset {
+    background-color:
+    var(--0);
+}
+
+.mw-htmlform-submit-buttons {
+    display: flex;
+    justify-content: center;
+    padding: calc(var(--space) * 2 );
+}
+
+.mw-htmlform-submit {
+    padding: calc(var(--space));
+    font-size: calc(var(--space) * 2);
+    margin: auto;
+}
+
+.mw-ui-container {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: calc(var(--space) * 2);
+}
+
+.mw-number-text, .mw-number-text.mw-number-text span {
+    color: var(--8);
+}
+
+.oo-ui-dropdownWidget-handle.oo-ui-dropdownWidget-handle {
+    color: var(--8);
+}
+
+.mw-tempuserlink {
+    background: none;
+}

resources/skin.less

@@ -10,19 +10,26 @@
 @import 'parts/portableinfobox.less';
 @import 'parts/sitenotice.less';
 @import 'parts/dropmenu.less';
+@import 'parts/specialpage.less';
+@import 'parts/tables.less';
 
 @font-face {
     font-family: "Libre Caslon";
     src: url('assets/fonts/LibreCaslonText-Regular.ttf');
 }
 
+@font-face {
+    font-family: "Shippori Mincho";
+    src: url('assets/fonts/ShipporiMincho-Regular.ttf');
+}
+
 
 #grid {
     margin-bottom: 0;
     min-height: 100vh;
 }
 
-@media (min-width: 1081px) {
+@media (min-width: 1201px) {
 
     .layout-touch {
         display: none;
@@ -32,10 +39,10 @@
         display: grid;
         grid-template-columns:
             [startgap] minmax(var(--space), 1.5fr)
-            [navstart] 12em
+            [navstart] var(--sidebar-width)
             [navgap] minmax(var(--space), .5fr)
             [pagestart] minmax(auto, 78em)
-            [pageend] 12em
+            [pageend] var(--sidebar-width)
             [endgap] minmax(var(--space), 2fr)
         ;
         grid-template-rows:
@@ -47,11 +54,11 @@
             [bottomstart] auto
         ;
         height: 100%;
-        flex-shrink: 1
+        margin-top: calc(6vw - 6vh);
     }
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1200px) {
 
     .layout-mouse {
         display: none;
@@ -79,16 +86,29 @@
 
 :root {
     --sidebar-width: 12em;
-    --gap-width: clamp(1em, 6vw, 12em);
     --space: .6em;
     --pi-width: 24em;
 }
 
 body {
     margin: 0;
-    background-image: linear-gradient(120deg, var(--blue-2), var(--white) 10vw);
+    background-color: var(--0);
-    background-repeat: no-repeat;
+    background:
-    // min-height: 100vh;
+        linear-gradient(100deg, transparent 70%, var(--blue-2)),
+        radial-gradient(circle farthest-corner at 100% 100%, var(--0) 80%, var(--blue-2) 100%)
+    ;
+    background-attachment: fixed, local;
+    color: var(--8);
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background:
+            linear-gradient(95deg, transparent 70%, var(--0) 140%),
+            radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
+        ;
+        background-attachment: fixed, local;
+    }
 }
 
 body::selection {

resources/unset.less

@@ -6,8 +6,6 @@ h1, h2, h3, p, ul, input {
     margin: unset;
     border: unset;
     padding: unset;
-//     font-size: unset;
-//     font-weight: unset;
 }
 
 button {

templates/page-header.mustache

@@ -16,6 +16,16 @@
 
     <div id="page-header-links">
 
+        <ul id="page-header-views">
+            {{#data-portlets}}
+                {{#data-associated-pages}}
+                    {{{html-items}}}
+                {{/data-associated-pages}}
+                {{{data-views.array-items.0.html-item}}}
+                {{{data-views.array-items.1.html-item}}}
+            {{/data-portlets}}
+        </ul>
+
         <div id="page-header-options">
             <button>Options</button>
             <div id="page-header-options-links">
@@ -39,16 +49,6 @@
             </div>
         </div>
 
-        <ul id="page-header-views">
-            {{#data-portlets}}
-                {{#data-associated-pages}}
-                    {{{html-items}}}
-                {{/data-associated-pages}}
-                {{{data-views.array-items.0.html-item}}}
-                {{{data-views.array-items.1.html-item}}}
-            {{/data-portlets}}
-        </ul>
-
     </div>
 
 </div>

templates/site-header.mustache

@@ -51,4 +51,17 @@
         </div>
     </div>
 
-</header>
+    <noscript>
+        <style>
+            .color-scheme-toggle {
+                display: none;
+            }
+        </style>
+    </noscript>
+
+    <button id="toggle-to-light" class="color-scheme-toggle">☀️</button>
+    <button id="toggle-to-dark" class="color-scheme-toggle">🌙</button>
+
+
+</header>
+