big tidy up, footer work

This commit is contained in:
Effie 2025-10-12 21:41:53 +11:00
parent ed230f7236
commit 33dd0ac7e5
36 changed files with 1232 additions and 910 deletions

2
.gitignore vendored
View File

@ -1,2 +1,2 @@
.eslintcache .eslintcache
node_modules/ node_modules/

View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="16.058443mm"
height="16.000057mm"
viewBox="0 0 16.058443 16.000057"
version="1.1"
id="svg1"
xml:space="preserve"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs1" /><g
id="layer1"
transform="translate(-74.97078,-54.999744)"><image
width="16.058441"
height="15.936394"
preserveAspectRatio="none"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAyElEQVR4nN2XXQ6EIAyEu4l34grc&#10;Co7FFTiVu8k6LxjsgJpWv9dK0k5/XUQh57wKwe+7j0ywiDFdB9rIU0qisG7vhpQwV2DnLSLXIq61&#10;HtpLKYd2KOWnBthqByGEU3bZasZegTbnWm6vIsb4d0CM2TlA5I6C7RJ/CsDzWSXw/nlz4C603fAe&#10;BWbnh18FZrsB1c/eBX4UaPsXs1pT4uzu8HMR9e4BKKExmnvg7yYEoxcSS6uQvQJ3Rcry/m3Yw809&#10;oM4Blsf+HX8BkX1XTJHW0TkAAAAASUVORK5CYII=&#10;"
id="image1"
x="74.970779"
y="55" /></g><g
id="layer2"
transform="translate(-74.97078,-54.999744)"><path
id="rect20"
style="fill:#191919;fill-opacity:1;fill-rule:evenodd;stroke-width:1.19596;stroke-linecap:square;stroke-opacity:0.4"
d="m 78.999829,54.999744 v 1.000455 H 77.99989 v 0.999939 h 0.999939 0.999939 v -0.999939 h 4.000273 V 55.00026 h -4.000273 v -5.16e-4 z m 5.000212,1.000455 v 0.999939 h 0.999939 v -0.999939 z m -6.000151,0.999939 h -0.999939 v 0.999939 h -0.999939 v 0.999939 h 0.999939 0.999939 z m -1.999878,1.999878 h -0.999939 v 7.00009 h 0.999939 z m 0,7.00009 v 0.999939 h 1.999878 v 0.999939 h -2.999817 v 0.999939 0.999939 h 0.999939 v 0.999939 l 8.000029,-0.06356 v -0.936377 h 7.029028 V 68.999923 67.999984 H 89.000252 V 67.000045 H 84.99998 v -0.999939 h -0.999939 v 0.999939 H 78.999829 V 66.000106 H 77.99989 v -0.999939 h -0.999939 v 0.999939 z m 8.999968,0 h 0.999939 V 64.000228 H 84.99998 Z m 0.999939,-1.999878 h 0.999939 v -2.000395 h 3.000333 v -0.999939 h -4.000272 v 0.999939 z m 4.000272,-3.000334 h 0.999939 v -0.999939 h -0.999939 z m -4.000272,-3.999756 v 0.999939 h 4.000272 v -0.999939 z m 4.000272,0.999939 v 0.999939 h 0.999939 v -0.999939 z" /></g><g
id="layer3"
transform="translate(-74.97078,-54.999744)"><path
id="rect32"
style="fill:#777777;fill-opacity:1;fill-rule:evenodd;stroke-width:0.600001;stroke-linecap:square;stroke-opacity:0.4"
d="m 82.000163,57.000138 v 0.999939 h 3.999756 v -0.999939 z m -5.000212,1.999878 v 0.999939 h 0.999939 v -0.999939 z m 13.00024,0 v 0.999939 h 0.999939 v -0.999939 z m 0,0.999939 h -4.000272 v 0.999939 h 4.000272 z m -4.000272,0.999939 H 84.99998 v 1.999878 h -0.999939 v 2.000395 h -0.999939 v 0.999939 H 79.999768 V 65.000167 H 78.999829 V 64.000228 H 77.99989 v -3.000334 h -0.999939 v 4.000273 h 0.999939 v 0.999939 h 0.999939 v 0.999939 h 4.000273 0.999939 v -0.999939 h 0.999939 v -1.999878 h 0.999939 z m -8.999968,4.000273 h -0.999939 v 0.999939 h 0.999939 z" /></g><g
id="layer4"
transform="translate(-74.97078,-54.999744)"><path
id="rect42"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:0.600001;stroke-linecap:square;stroke-opacity:0.4"
d="m 79.999768,56.000199 v 0.999939 H 77.99989 v 2.999817 h -0.999939 v -0.999939 h -0.999939 v 6.000151 h 0.999939 v -4.000273 h 0.999939 v 3.000334 h 0.999939 v 0.999939 h 0.999939 v 0.999939 h 3.000334 v -0.999939 h 0.999939 v -2.000395 h 0.999939 v -1.999878 h 0.999939 v -0.999939 h 4.000272 V 58.000077 H 84.99998 82.000163 v -0.999939 h 1.999878 v -0.999939 z" /></g></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -8,7 +8,7 @@
--blue-5: oklch(0.62 0.14 270); --blue-5: oklch(0.62 0.14 270);
--blue-6: oklch(0.41 0.1 270); --blue-6: oklch(0.41 0.1 270);
--blue-7: oklch(0.3 0.07 270); --blue-7: oklch(0.3 0.07 270);
--gold-1: oklch(0.96 0.02 90); --gold-1: oklch(96.098% 0.02042 91.593);
--gold-2: oklch(0.92 0.04 90); --gold-2: oklch(0.92 0.04 90);
--gold-3: oklch(0.79 0.11 90); --gold-3: oklch(0.79 0.11 90);
--gold-4: oklch(0.71 0.16 90); --gold-4: oklch(0.71 0.16 90);

View File

@ -1,175 +0,0 @@
:root {
--sidebar-width: calc(10.2em + calc(.3vw * 9));
}
#grid {
display: grid;
grid-template-columns: 10.2em calc(.3vw * 9) 1fr auto var(--sidebar-width);
grid-template-rows:
[topstart] auto
[sitenotice] auto
[title] auto
[pageheader] auto
[pagebody] auto
[bottomstart] auto
;
column-gap: var(--space);
height: 100%;
max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
margin: auto;
padding: calc(var(--space) * 2);
}
#page {
margin-top: calc(0.3vw * 9);
grid-column: 3 / 5;
grid-row: title / bottomstart ;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
#topbar {
column-gap: var(--space);
grid-column: 1 / 6;
grid-row: topstart / bottomstart;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
#top-logo {
grid-row: 1;
}
#nav-search, #nav-search-bar {
grid-column: 3 / 4;
width: 100%;
position: relative;
}
#user-menu {
margin-left: calc(var(--space) * 3);
grid-column: 4 / 5;
}
#localNotice {
grid-row: sitenotice;
grid-column: 3 / 5;
}
#versions {
align-items: center;
}
#sidebar-nav {
grid-column: 1;
grid-row: pagebody / -1;
display: flex;
flex-direction: column;
gap: calc(var(--space) * 2);
width: 100%;
}
.nav-menu {
border-radius: calc(var(--space) / 2);
}
.nav-show {
display: none;
}
.mw-list-item {
display: flex;
}
.mw-heading {
align-items: baseline;
justify-content: space-between;
}
.nav-sticky {
position: sticky;
top: calc(var(--space) * 2);
}
.site-links > a:not(.nav-backtotop):hover::before, #nav-toc > .site-links > li:hover::before {
background-image: url(/resources/assets/cursor-test.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
content: '';
width: 1em;
}
.page-link-list {
display: flex;
flex-direction: column;
gap: calc(var(--space) / 2);
}
#user-menu-list {
right: 0;
}
.sidebar-page-mouse {
grid-column: 5;
grid-row: topstart;
}
#page-menu {
// position: sticky;
// top: calc(var(--space) * 2);
position: relative;
min-height: 100%;
width: 100%;
}
#page-menu-button {
height: 100%;
text-align: left;
}
#user-menu-button:hover, #page-menu-button:hover {
box-shadow: inset 0 0 3px 3px var(--blue-3);
}
#page-menu > * {
padding-left: var(--space);
}
.sidebar-page-touch {
display: none;
}
#page-menu-list {
flex-direction: column;
gap: calc(var(--space) * 4);
}
#titleblock {
grid-column: 1 / 3;
grid-row: title;
}
#mw-content-text {
grid-column: 1 / 3;
grid-row: pagebody / bottomstart;
}
#pagebody {
grid-row: pagebody
}
#mw-content-text:has(> .mw-parser-output > #pagebody-header), .mw-parser-output:has(> #pagebody-header) {
display: grid;
grid-template-rows: subgrid;
grid-row: pageheader / bottomstart;
}
#bottombar {
grid-column: 3 / 4;
grid-row: bottomstart;
bottom: 0;
height: 6em;
}

View File

@ -1,177 +0,0 @@
:root {
--touch-whitespace: 1.2vw;
}
#grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: var(--space);
}
p {
padding-left: var(--space);
padding-right: var(--space);
}
.mw-heading {
justify-content: center;
position: relative;
margin-left: var(--space);
margin-right: var(--space);
}
.mw-heading > .mw-editsection {
position: absolute;
right: 0;
}
#topbar {
grid-column: 1;
grid-row: 1;
column-gap: var(--space);
grid-template-columns: auto minmax(min-content, 1fr) min-content;
grid-template-rows: 3.6em 3.6em;
row-gap: var(--space);
}
#top-logo {
grid-column: 1;
grid-row: 1;
align-items: flex-start;
}
#top-logo a {
top: var(--space);
left: 50%;
transform: translate(-50%);
}
#nav-search {
position: sticky;
top: var(--space);
grid-column: 1 / 4;
grid-row: 2;
width: 100%;
}
#nav-search-bar {
width: 100%;
}
#sidebar-nav {
grid-row: -1;
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
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-y: hidden;
padding-top: 1em;
margin-top: -1em;
}
.nav-menu {
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-mouse {
display: none;
}
.sidebar-page-touch {
grid-row: 1;
grid-column: 3;
}
#user-menu {
margin-left: auto;
}
#page-menu {
width: fit-content;
position: relative;
}
#page-menu-button {
height: 100%;
width: 100%;
}
#user-menu-list {
right: 0;
}
#page-menu-list {
grid-row: unset;
right: 0;
gap: calc(var(--space) * 3);
// box-shadow: 0 0 2px 1px var(--gold-7), inset 0 0 6px 3px var(--gold-1);
z-index: 1;
}
.site-links {
border-top: 1px solid var(--gold-1);
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;
}
details.page-links {
display: flex;
flex-direction: column;
text-align: center;
}
#page {
grid-column: 1;
grid-row: 3 / 5;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
#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;
}
}

View File

@ -1 +1,24 @@
$(document).ready(console.log("page is fully loaded")); // 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.
// 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'
] ).then( () => {
// This gets the user's current username, and puts it the user menu button.
const username = mw.user.getName();
const button = document.getElementById('site-header-user').children[0];
if (username) {
button.textContent = username;
} else {
button.textContent = mw.message( 'login' ).text();
}
// This replaces the text of the print link with the current 'print' system message.
const print = document.getElementById('page-action-print').children[0];
print.textContent = mw.message( 'print' ).text();
const toctitle = document.getElementById('site-nav-toc').children[0];
toctitle.textContent = mw.message( 'toc' ).text();
}
)

View File

@ -1,66 +0,0 @@
.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 var(--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;
}

View File

@ -0,0 +1,35 @@
#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);
border-top: 2px solid var(--blue-3);
}
#site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
}
#site-header-user-links, #page-header-options-links {
display: none;
position: absolute;
margin-top: var(--space);
box-shadow: 0 0 3px 1px var(--blue-7);
z-index: 12;
right: 0;
}
#site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
display: flex;
}
.drop-link-list {
display: flex;
gap: var(--space);
flex-direction: column;
padding: var(--space);
width: max-content;
}
.drop-link-list a {
color: var(--blue-7);
}

View File

@ -0,0 +1,122 @@
#page {
grid-row: title / bottomstart;
}
#pagebody-header {
grid-row: toc;
}
#pagebody a:link {
color: var(--blue-6);
}
#pagebody a.new {
color: red;
text-decoration: underline wavy;
}
#pagebody a:not(.new):visited {
color: var(--pink-6);
}
#pagebody a:hover , #pagebody a:visited:hover {
color: var(--blue-4);
}
.mw-heading {
display: flex;
margin-bottom: calc(var(--space));
}
#page p {
margin-bottom: calc(var(--space) * 2);
line-height: calc(var(--space) * 3);
text-wrap: pretty;
}
#mw-content-text {
grid-row: toc / bottomstart;
}
.mw-heading h2{
margin-left: calc(var(--space) / 2);
margin-bottom: calc(var(--space) / 2);
}
.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;
}
.mw-heading h3 {
margin-left: calc(var(--space) *4);
margin-top: calc(var(--space));
}
.mw-heading h4 {
margin-left: calc(var(--space) * 8);
}
.mw-heading3 .mw-editsection, .mw-heading4 .mw-editsection {
display: none;
}
@media (min-width: 1081px) {
#page {
margin-top: calc(var(--space) * 6);
grid-column: pagestart / pageend ;
grid-row: title / bottomstart ;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: 1fr;
}
#pagebody {
grid-row: pagebody
}
.mw-heading {
align-items: baseline;
justify-content: space-between;
}
}
@media (max-width: 1080px) {
#page {
grid-column: 1;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
margin-top: calc(var(--space) * 4);
}
#pagebody {
grid-row: 2;
}
#pagebody p {
margin-left: var(--space);
margin-right: var(--space);
}
.mw-heading {
margin-left: var(--space);
margin-right: var(--space);
}
.mw-heading > .mw-editsection {
position: absolute;
right: var(--space);
}
}
@media (max-width: 720px) {
}

View File

@ -0,0 +1,85 @@
#page-header {
display: flex;
align-items: end;
justify-content: space-between;
border-bottom: 3px solid var(--black);
}
#page-title {
display: flex;
}
#page-header-views {
margin-bottom: calc(var(--space) / 2);
display: flex;
gap: var(--space);
}
#page-header-views > * > a:link, #page-header-views#page-header-views a:visited {
color: var(--black);
}
#page-header-views > * > a:link:hover, #page-header-views#page-header-views a:visited:hover {
color: var(--blue-5);
}
#page-header-options {
position: relative;
}
#page-header-options button {
text-decoration: underline;
}
#page-header-options button:hover {
color: var(--blue-5);
}
#page-title-versions {
display: flex;
flex-wrap: wrap;
gap: var(--space);
margin-left: 2vw;
}
#firstHeading {
margin-bottom: .1em;
}
#firstHeading, .mw-heading h2 {
font-family: 'Libre Caslon', serif;
text-wrap: balance;
}
#page-header {
grid-row: title;
}
#page-header-links {
display: flex;
gap: var(--space);
}
@media (min-width: 1081px) {
}
@media (max-width: 1080px) {
#page-title{
flex-direction: column-reverse;
}
#page-header {
margin-left: var(--space);
margin-right: var(--space);
}
}
@media (max-width: 720px) {
#page-header-links {
flex-direction: column;
align-items: end;
}
}

View File

@ -0,0 +1,83 @@
.tocnumber, .toctitle {
display: none;
}
#toc {
// margin-top: calc(var(--space) * 2);
// margin-bottom: calc(var(--space) * 2);
background-image: linear-gradient(100deg, transparent 0%, #ecf2ff 20%, #ecf2ff 80%, transparent);
box-shadow: inset 0 0 12px 12px white;
padding-top: calc(var(--space) * 2);
padding-bottom: calc(var(--space) * 2);
}
.toctitle > h2 {
text-align: center;
}
#toc > ul {
display: flex;
justify-content: center;
column-gap: calc(var(--space) * 2);
row-gap: calc(var(--space));
flex-wrap: wrap;
padding-bottom: var(--space);
}
.toclevel-1 {
flex-basis: 6em;
}
.toclevel-1 > a {
font-size: 1.2em;
// font-weight: bold;
color: var(--black);
// background-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.toclevel-2 > a {
color: var(--blue-6);
}
.toclevel-1 ul, .toclevel-1 {
display: flex;
flex-direction: column;
gap: calc(var(--space) / 2);
align-items: center;
}
.toctext {
text-wrap: nowrap;
font-family: 'Libre Caslon';
}
a:has(> .toctext):hover {
color: var(--blue-4);
}
#mw-content-text:has(> .mw-parser-output > #pagebody-header), .mw-parser-output:has(> #pagebody-header) {
display: grid;
grid-template-rows: subgrid;
grid-row: toc / bottomstart;
}
@media (min-width: 1081px) {
}
@media (max-width: 1080px) {
.toctext {
font-size: 0.9em;
}
#toc > ul {
column-gap: calc(var(--space) / 2);
}
.toclevel-1, .toclevel-1 ul {
row-gap: 0;
}
}

View File

@ -0,0 +1,57 @@
.portable-infobox {
--pi-item-spacing: calc(var(--space));
margin-left: var(--space);
color: var(--gold-7);
}
.pi-title.pi-title, .pi-header.pi-header {
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;
}
.pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
background: var(--white) border-box;
}
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
border: none;
}
.pi-data-label {
text-align: center;
}
@media (min-width: 1081px) {
.portable-infobox {
margin-right: calc(var(--space) * 20 * -1);
}
}
@media (min-width: 721px) {
.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%);
margin-left: 0;
margin-right: 0;
}
.pi-title:first-child {
display: none;
}
}

View File

@ -0,0 +1,63 @@
#site-footer {
grid-row: bottomstart;
display: flex;
padding: var(--space);
align-items: center;
border-top: 2px solid var(--blue-7);
}
#site-footer a:link {
color: var(--blue-7);
}
#footerblock {
display: flex;
justify-content: space-between;
width: 100%;
}
.footer-links {
display: flex;
gap: var(--space);
align-items: center;
font-size: calc(var(--space) * 1.5);
}
@media (min-width: 1081px) {
#site-footer {
grid-column: pagestart / pageend;
// border-left: 1px solid var(--blue-7);
// border-right: 1px solid var(--blue-7);
border-top-right-radius: var(--space);
border-top-left-radius: var(--space);
}
#site-lastedit.layout-touch {
display: none;
}
}
@media (max-width: 1080px) {
#site-footer {
gap: var(--space);
grid-column: 1;
flex-direction: column;
padding-bottom: calc(var(--space) * 4);
}
}
@media (max-width: 720px) {
#site-footer {
padding-bottom: calc(var(--space) * 6);
}
#footerblock {
flex-direction: column;
align-items: center;
gap: var(--space);
}
}

View File

@ -0,0 +1,162 @@
#site-header {
display: grid;
}
#site-header-marks a {
display: flex;
height: 100%;
max-width: 12em;
}
#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%;
}
.searchButton {
position: absolute;
right: var(--space);
top: 50%;
transform: translate(0, -50%);
background: none;
border-left: 1px solid var(--white);
cursor: pointer;
padding: var(--space);
}
#site-header-search-bar {
padding: var(--space);
height: 100%;
font-size: calc(var(--space) * 2);
border-bottom: 3px solid var(--black);
width: 100%;
}
#site-header-search-bar::placeholder {
color: white;
font-weight: bold;
font-family: 'Libre Caslon';
}
#site-header-search-bar:focus::placeholder {
color: var(--blue-4);
}
#site-header-search-bar:hover {
box-shadow: inset 0 0 6px 1px var(--blue-6), 0 0 3px .1px var(--blue-7);
border-top: 2px solid var(--blue-6);
}
#site-header-search-bar:focus {
outline: 3px solid var(--blue-6);
background-color: var(--white);
background-image: linear-gradient(90deg, var(--white), var(--blue-1) 80%);
border-top: 2px solid var(--blue-7);
box-shadow: none;
}
#site-header-search-bar:focus:hover {
box-shadow: inset 0 0 6px 1px var(--blue-5);
}
#site-header-user {
position: relative;
margin-left: auto;
}
#site-header-user button {
display: block;
height: calc(100% - 3px);
text-wrap: nowrap;
padding-left: var(--space);
padding-right: var(--space);
border-bottom: 3px solid var(--black);
}
#site-header-user button:hover {
box-shadow: inset 0 0 3px 3px var(--blue-5);
}
#site-header-user:focus-within button {
background-image: none;
background-color: var(--blue-4);
box-shadow: 0 0 2px .5px var(--blue-7);
}
#site-header-user-links ul > .mw-list-item a {
color: var(--blue-7);
}
@media (min-width: 1081px) {
#site-header {
grid-column: navstart / -1;
grid-row: topstart;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
margin-top: var(--space);
}
#site-header-search form {
height: 100%;
}
#site-header-marks {
grid-column: 1;
grid-row: 1;
align-items: flex-start;
}
#site-header-marks {
grid-row: 1;
}
#site-header-search, #site-header-search-bar {
grid-column: pagestart / menustart;
width: 100%;
position: relative;
overflow: visible;
}
#site-header-user {
// margin-left: calc(var(--space) * 3);
grid-column: menustart / pageend;
}
}
@media (max-width: 1080px) {
#site-header {
grid-column: 1;
grid-row: topstart / -1;
grid-template-columns:
[marks] auto
[menu] 1fr
;
grid-template-rows: 3em auto;
row-gap: var(--space);
column-gap: var(--space);
margin: var(--space);
}
#site-header-search {
grid-column: marks / -1;
}
#site-header-search form {
position: sticky;
align-self: flex-start;
top: var(--space);
z-index: 6;
}
#site-header-search {
top: var(--space);
grid-row: 2;
}
}

View File

@ -0,0 +1,170 @@
.site-nav-menu {
display: flex;
flex-direction: column;
}
.site-nav-menu-links {
display: flex;
flex-direction: column;
gap: calc(var(--space) / 2);
padding: var(--space);
padding-top: calc(var(--space) - 2px);
}
.site-nav-menu-links a, .site-nav-menu button{
text-shadow: 0 0 2px var(--black);
font-weight: bold;
font-size: .9em;
font-family: 'Libre Caslon', serif;
color: var(--gold-1);
}
.site-nav-menu button {
padding: calc(var(--space) / 2);
margin-left: var(--space);
margin-right: var(--space);
text-align: center;
box-sizing: border-box;
border-bottom: 1px solid var(--gold-1);
}
.site-nav-menu-links a:hover {
color: var(--blue-2);
}
.mw-list-item {
display: flex;
gap: calc(var(--space));
overflow: clip;
}
#site-lastedit.layout-mouse {
text-align: center;
font-size: .9em;
color: var(--blue-5);
padding-left: var(--space);
padding-right: var(--space);
}
#site-nav-toc-title {
justify-content: center;
}
#site-nav-wrapper {
width: 100%;
}
#site-nav-wrapper > div {
display: flex;
}
.nav-external:last-of-type {
display: none;
}
@media (min-width: 1081px) {
#site-nav-wrapper {
grid-column: navstart;
grid-row: pagebody / -1;
}
#site-lastedit.layout-touch {
display: none;
}
.site-nav-menu-links > li:not(#site-nav-toc-title):hover::before {
background-image: url(assets/cursor-right.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
content: '';
width: 1em;
flex-shrink: 0;
margin-right: -.3em;
}
#site-nav-wrapper > div {
flex-direction: column;
gap: calc(var(--space) * 2);
height: 100%;
}
.site-nav-menu button {
display: none;
}
.site-nav-sticky {
position: sticky;
top: calc(var(--space));
}
}
@media (max-width: 1080px) {
#site-lastedit.layout-mouse {
display: none;
}
#site-nav-wrapper .site-nav-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#site-nav-wrapper {
position: fixed;
bottom: 0;
z-index: 6;
}
#site-nav-wrapper > div {
flex-direction: row-reverse;
height: fit-content;
justify-content: center;
gap: var(--space);
align-items: end;
}
.site-nav-menu {
overflow-y: hidden;
}
.site-nav-menu-links {
align-self: center;
align-items: center;
padding-top: calc(var(--space));
}
.site-nav-menu:not(:focus-within) {
height: calc(var(--space) * 3);
}
}
@media (max-width: 720px) {
#site-nav-wrapper > div {
width: fit-content;
}
#site-nav-wrapper {
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.site-nav-menu:last-child {
margin-left: .6em;
}
.site-nav-menu {
width: 90vw;
flex-shrink: 0;
scroll-snap-align: center;
}
#site-nav-wrapper > div::before {
content: '';
padding: 1px;
}
}

View File

@ -0,0 +1,51 @@
#localNotice {
// width: max-content;
box-shadow: inset 0 0 6px 12px white;
background: var(--gold-2);
}
.mw-dismissable-notice {
text-align: center;
position: relative;
}
.mw-dismissable-notice-close {
position: absolute;
bottom: calc(var(--space) * 2);
right: calc(var(--space) * 2);
}
.mw-dismissable-notice-body {
text-wrap: balance;
}
@media (min-width: 1081px) {
.mw-dismissable-notice, #localNotice {
grid-row: sitenotice;
grid-column: pagestart / pageend;
margin-top: var(--space);
}
#localNotice {
padding: 2.4em;
}
}
@media (max-width: 1080px) {
#localNotice {
font-size: .9em;
padding: calc(var(--space) * 1.5);
}
.mw-dismissable-notice {
padding-bottom: calc(var(--space) * 4);
grid-column: 1;
grid-row: sitenotice;
// margin-top: calc(var(--space) * 1);
}
}
@media (max-width: 720px) {
}

View File

@ -1,36 +1,91 @@
@import 'unset.less'; @import 'unset.less';
@import 'colors.less'; @import 'colors.less';
@media (max-width: 1080px) { @import 'parts/site-header.less';
@import 'layout-touch.less'; @import 'parts/site-nav.less';
} @import 'parts/site-footer.less';
@import 'parts/page-header.less';
@media (min-width: 1081px) { @import 'parts/page-body.less';
@import 'layout-mouse.less'; @import 'parts/page-toc.less';
} @import 'parts/portableinfobox.less';
@import 'parts/sitenotice.less';
@import 'topbar.less'; @import 'parts/dropmenu.less';
@import 'toc.less';
@import 'navmenu.less';
@import 'mediawiki.skin.variables.less';
@font-face { @font-face {
font-family: "Libre Caslon"; font-family: "Libre Caslon";
src: url('/resources/assets/Libre_Caslon_Text/LibreCaslonText-Regular.ttf'); src: url('assets/fonts/LibreCaslonText-Regular.ttf');
}
#grid {
margin-bottom: 0;
min-height: 100vh;
}
@media (min-width: 1081px) {
#grid {
display: grid;
grid-template-columns:
[navstart] var(--sidebar-width)
// [navspacer] var(--navspace-width)
[pagestart] 1fr
[menustart] min-content
[pageend] calc(var(--sidebar-width))
// [userend]
;
grid-template-rows:
[topstart] 3.6em
[sitenotice] auto
[title] auto
[toc] auto
[pagebody] 1fr
[bottomstart] auto
;
column-gap: 1vw;
height: 100%;
max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
margin: auto;
padding-left: var(--space);
padding-right: var(--space);
}
}
@media (max-width: 1080px) {
#grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows:
[topstart] 7.8em
[sitenotice] auto
[title] auto
[toc] auto
[pagebody] 1fr
[bottomstart] auto
;
// padding: var(--space);
padding-bottom: 0;
}
}
@media (max-width: 720px) {
}
:root {
--sidebar-width: 12em;
--navspace-width: 1em;
--space: .6em;
--pi-width: 24em;
} }
body { body {
margin: 0; margin: 0;
background-image: linear-gradient(100deg, var(--blue-1), var(--white) 20%, var(--white)70%, var(--blue-1)) background-image: linear-gradient(120deg, var(--blue-2), var(--white) 10vw);
background-repeat: no-repeat;
// min-height: 100vh;
} }
body::selection { body::selection {
background-color: var(--blue-5); background-color: var(--blue-4);
}
:root {
--space: .6em;
} }
button { button {
@ -41,107 +96,75 @@ fieldset {
margin-top: calc(var(--space) * 3); margin-top: calc(var(--space) * 3);
} }
#title-views {
display: flex;
gap: var(--space);
align-items: center;
}
#site-icon {
position: absolute;
}
#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 {
margin-bottom: .1em;
margin-top: auto;
}
#firstHeading, .mw-heading h2 {
font-family: 'Libre Caslon', serif;
text-wrap: balance;
}
.mw-heading {
display: flex;
margin-bottom: calc(var(--space));
}
main p {
margin-bottom: calc(var(--space) * 2);
line-height: calc(var(--space) * 3);
}
.mw-list-item.selected { .mw-list-item.selected {
display: none; display: none;
} }
#titleblock {
border-bottom: 3px solid var(--black);
// margin-bottom: calc(var(--space) * 2);
display: flex;
align-items: end;
justify-content: space-between;
}
#pagetitle {
display: flex;
// align-items: center;
}
#title-views {
margin-left: auto;
margin-bottom: calc(var(--space) / 2);
}
#versions {
display: flex;
flex-wrap: wrap;
gap: var(--space);
margin-left: 2vw;
}
#t-print, #t-upload { #t-print, #t-upload {
display: none; display: none;
} }
#localNotice { // #site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
width: 100%; // font-size: 1em;
} // overflow: clip;
// text-overflow: ellipsis;
.sitenotice { // background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
display: flex; // // border-radius: calc(var(--space) / 2 );
padding: calc(var(--space) * 3); // // box-shadow: inset 0 0 3px 3px var(--blue-1);
justify-content: center; // color: var(--blue-7);
// background: linear-gradient(90deg, transparent, var(--blue-5) 20%, var(--blue-5) 70%, transparent); // gap: calc(var(--space) * 2);
color: var(--gold-1); // }
// #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
// padding: calc(var(--space));
// }
// #site-header-user-links {
// position: absolute;
// margin-top: calc(var(--space) / 2);
// display: none;
// z-index: 12;
// // border-top: 3px solid var(--blue-6);
// border-width: 3px 0 0 0;
// box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
// right: 0;
// }
// #site-header-user-links ul {
// display: flex;
// flex-direction: column;
// width: max-content;
// gap: var(--space);
// }
// background:
// linear-gradient(300deg, #9fb7ff 0% 40%, #ffffff 40% 100%),
// linear-gradient(330deg, #9fb7ff 0% 80%, #ffffff 80% 100%),
// linear-gradient(30deg, #9fb7ff 0% 50%, #ffffff 50% 100%),
// radial-gradient(circle farthest-corner at 50% 50%, #ecf2ff 0%, #dae4ff 93%);
// background-blend-mode: color-burn;
// display: flex;
// flex-direction: column-reverse;
// align-items: center;
//
// padding: 3em;
// // border-color: blue;
// justify-content: center;
// background: var(--blue-5);
// color: var(--gold-1);
// text-shadow: 0 0 2px var(--black);
// background:
// conic-gradient(from 251deg at 100% 0%, #000000 0% 30%, #667fda 51%, #000000 100% 30%),
// linear-gradient(to top, #ffffff 0% 0%, #333333 20%, #060606 40%, #060606 60%, #333333 80%, #ffffff 100% 0%),
// linear-gradient(to right, #ffffff 0% 0%, #151515 10%, #060606 50%, #151515 90%, #ffffff 100% 0%),
// radial-gradient(circle farthest-corner at 50% 50%, var(--blue-6) 60%, var(--blue-5) 91%, #000000 100% 0%);
// background-blend-mode: color-dodge;
background: linear-gradient(to top, #ffffffff 0%, #000000ff 20%, #000000ff 80%, #ffffffff 100%), linear-gradient(to right, #ffffffff 0%, #000000ff 20%, #000000ff 80%, #ffffffff 100%), linear-gradient(to top, #667fdaff 0% 100%, #0000ffff 100%);background-blend-mode: color-dodge;
}
// border-style: solid; // border-style: solid;

View File

@ -1,37 +0,0 @@
.tocnumber, .toctitle {
display: none;
}
.toc {
margin-bottom: 1.2em;
}
.toctitle > h2 {
text-align: center;
}
.toc > ul {
display: flex;
justify-content: center;
gap: calc(var(--space) * 2);
flex-wrap: wrap;
}
.toclevel-1 {
flex-basis: 6em;
}
.toclevel-1 > a {
font-size: 1.2em;
}
.toclevel-1 ul, .toclevel-1 {
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
}
.toctext {
text-wrap: nowrap;
}

View File

@ -1,115 +0,0 @@
#topbar {
display: grid;
}
#top-logo {
height: fit-content;
align-self: center;
width: 100%;
}
#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 {
height: 100%;
justify-self: center;
}
#nav-search-bar {
border-radius: calc(var(--space) / 2);
// background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1));
// background-color: var(--blue-2);
background-color: var(--white);
border: 1px solid var(--black);
border-bottom: 3px solid var(--black);
font-size: calc(var(--space) *2);
padding: var(--space);
height: 100%;
}
#nav-search-bar:hover {
box-shadow: inset 0 0 3px 3px var(--blue-3);
}
#nav-search-bar:focus {
outline: 3px solid var(--blue-7);
box-shadow: inset 0 0 3px 3px var(--blue-3);
background-color: var(--white);
border-bottom: 3px inset var(--blue-7);
background-image: none;
}
#nav-search form {
height: 100%;
}
#user-menu-button, #page-menu-button {
border-bottom: 3px solid var(--blue-6);
border-width: 0 0 3px 0;
}
#user-menu-button, #user-menu-list, #page-menu-button, #page-menu-list {
width: fit-content;
font-size: 1em;
overflow: clip;
text-overflow: ellipsis;
padding: var(--space);
background-color: var(--blue-2);
// border-radius: calc(var(--space) / 2 );
// box-shadow: inset 0 0 3px 3px var(--blue-1);
color: var(--blue-7);
}
#user-menu {
position: relative;
}
#user-menu-button {
height: 100%;
}
#page-menu-list, #user-menu-list {
position: absolute;
margin-top: calc(var(--space) / 2);
display: none;
z-index: 1;
// border-top: 3px solid var(--blue-6);
border-width: 3px 0 0 0;
box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
}
#page-actions, #page-views, #user-links {
display: flex;
flex-direction: column;
width: max-content;
gap: var(--space);
}
#user-menu:focus-within #user-menu-button, #page-menu:focus-within #page-menu-button {
background-color: var(--blue-3);
box-shadow: inset 0 0 3px 3px var(--blue-4), 0 0 2px .5px var(--blue-7);
}
#user-menu:focus-within #user-menu-list, #page-menu:focus-within #page-menu-list {
display: flex;
}
.page-link-list > .mw-list-item a {
color: var(--blue-7);
}

View File

@ -10,6 +10,10 @@ h1, h2, h3, p, ul, input {
// font-weight: unset; // font-weight: unset;
} }
button {
all: unset;
}
summary { summary {
list-style: none; list-style: none;
} }
@ -30,12 +34,14 @@ summary {
:is(.portable-infobox *) { :is(.portable-infobox *) {
background-color: unset; background-color: unset;
border-style: none;
border-color: unset;
padding: unset; padding: unset;
--pi-secondary-background: none; --pi-secondary-background: none;
} }
.pi-group, .pi-data {
border: unset;
}
.mw-body-content::after { .mw-body-content::after {
content: unset; content: unset;
} }
@ -45,4 +51,8 @@ input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { input[type="search"]::-webkit-search-results-decoration {
display: none; display: none;
}
.mw-dismissable-notice-body.mw-dismissable-notice-body {
margin: 0;
} }

View File

@ -1 +0,0 @@
@cdx-icon-full-screen: 150px;

View File

@ -9,7 +9,7 @@
"namemsg": "skinname-crystal", "namemsg": "skinname-crystal",
"type": "skin", "type": "skin",
"requires": { "requires": {
"MediaWiki": ">= 1.45.0" "MediaWiki": ">= 1.44.0"
}, },
"ValidSkinNames": { "ValidSkinNames": {
"crystal": { "crystal": {
@ -18,20 +18,14 @@
{ {
"name": "crystal", "name": "crystal",
"responsive": true, "responsive": true,
"supportsMwHeading": true,
"toc": true, "toc": true,
"messages": [
"crystal-no-categories",
"otherlanguages",
"sitetitle",
"search",
"tagline"
],
"styles": [ "styles": [
"codex-styles", "codex-styles",
"skins.crystal.styles" "skins.crystal.styles"
], ],
"scripts": [ "scripts": [
"skin.crystal.js" "skins.crystal.js"
] ]
} }
] ]
@ -47,12 +41,7 @@
"class": "MediaWiki\\ResourceLoader\\SkinModule", "class": "MediaWiki\\ResourceLoader\\SkinModule",
"features": { "features": {
"normalize": false, "normalize": false,
"elements": false,
"content-tables": true,
"content-links": true, "content-links": true,
"content-media": true,
"content-links-external": false,
"interface-category": true,
"toc": false "toc": false
}, },
"targets": [ "targets": [
@ -64,9 +53,16 @@
] ]
}, },
"skins.crystal.js": { "skins.crystal.js": {
"scripts": [ "packageFiles": [
"resources/main.js" "resources/main.js"
] ],
"messages": [
"login",
"sitetitle",
"print",
"lastmodifiedatby",
"toc"
]
} }
}, },
"ResourceFileModulePaths": { "ResourceFileModulePaths": {

View File

@ -0,0 +1,54 @@
{{! This header includes the page's title, version swap buttons, as well as page views and options.}}
<div id="page-header">
<div id="page-title">
<div id="page-title-background"></div>
{{{html-title-heading}}}
<div id="page-title-versions">
{{#array-indicators}}
<a href="?{{{id}}}">
<div id="{{{id}}}">{{{html}}}</div>
</a>
{{/array-indicators}}
</div>
</div>
<div id="page-header-links">
<div id="page-header-options">
<button>Options</button>
<div id="page-header-options-links">
<ul class="drop-link-list">
{{#data-portlets.data-actions}}
{{{html-items}}}
{{/data-portlets.data-actions}}
{{! This replaces the normal 'Print' list item, which is hidden from 'array-portlets-rest' with CSS. }}
<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> {{! This link's content is a placeholder, replaced with a system message via Javascript.}}
</li>
</ul>
<ul class="drop-link-list">
{{#data-portlets.data-views.array-items.2}}
{{{html-item}}}
{{/data-portlets.data-views.array-items.2}}
{{#data-portlets-sidebar.array-portlets-rest.2}}
{{{html-items}}}
{{/data-portlets-sidebar.array-portlets-rest.2}}
</ul>
</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>

View File

@ -1,29 +0,0 @@
<button id="page-menu-button">Page Options</button>
<div id="page-menu-list">
<ul id="page-views" class="page-link-list">
{{#data-portlets}}
{{#data-views}}
{{#array-items.2}}
{{{html-item}}}
{{/array-items.2}}
{{/data-views}}
{{/data-portlets}}
{{#data-portlets-sidebar}}
{{#array-portlets-rest.1}}
{{{html-items}}}
{{/array-portlets-rest.1}}
{{/data-portlets-sidebar}}
</ul>
<ul id="page-actions" class="page-link-list">
{{#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>
</div>

View File

@ -0,0 +1,27 @@
{{! This footer has a few project links and icons, as well as the 'last edit' system message when in touch layout.}}
<footer id="site-footer">
<div>
{{#data-footer.data-info.array-items.0}}
<p id="site-lastedit" class="layout-touch">{{{html}}}</p>
{{/data-footer.data-info.array-items.0}}
</div>
<div id="footerblock">
<div class="footer-links">
{{#data-footer.data-icons.array-items}}
{{{html}}}
{{/data-footer.data-icons.array-items}}
</div>
<div class="footer-links">
{{#data-footer.data-places.array-items}}
{{{html}}}
{{/data-footer.data-places.array-items}}
</div>
</div>
</footer>

View File

@ -0,0 +1,33 @@
{{! The header includes the site's logo, wordmark, search bar and user menu. }}
<header id="site-header">
<div id="site-header-marks">
<a href="https://phialfantasy.wiki">
{{#data-logos}}
<img id="site-header-wordmark" src="{{{wordmark.src}}}" />
{{/data-logos}}
</a>
</div>
<div id="site-header-search">
{{#data-search-box}}
<form action="{{{form-action}}}">
<input id="site-header-search-bar" {{{html-input-attributes}}}>
<input value="🔍" {{{html-button-go-attributes}}}>
</form>
{{/data-search-box}}
</div>
<div id="site-header-user">
<button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
<div id="site-header-user-links">
<ul class="drop-link-list">
{{#data-portlets.data-user-menu}}
{{{html-items}}}
{{/data-portlets.data-user-menu}}
</ul>
</div>
</div>
</header>

View File

@ -0,0 +1,61 @@
{{! The nav section appears as a sidebar in the mouse layout, and tabs along the bottom of the screen in the touch layout. }}
<div id="site-nav-wrapper">
<div> {{! This div is here to make sure the touch layout tabs can extend into the page without interrupting the layout at the base.}}
{{#data-portlets-sidebar}}
{{#data-portlets-first}}
<nav class="site-nav-menu">
<button>
{{{label}}}
</button>
<ul class="site-nav-menu-links">
{{{html-items}}}
</ul>
</nav>
{{/data-portlets-first}}
{{! The Tools menu generated below is hidden with CSS, as its functions are moved to Page and User Options.}}
{{#array-portlets-rest}}
<div class="site-nav-menu nav-external">
<button>
{{{label}}}
</button>
<ul class="site-nav-menu-links">
{{{html-items}}}
</ul>
</div>
{{/array-portlets-rest}}
{{/data-portlets-sidebar}}
{{#data-footer.data-info.array-items.0}}
<p id="site-lastedit" class="layout-mouse">
{{{html}}}
</p>
{{/data-footer.data-info.array-items.0}}
{{#data-toc}}
<nav id="site-nav-toc" class="site-nav-menu site-nav-sticky">
<button>Contents</button>
<ul class="site-nav-menu-links">
<li id="site-nav-toc-title" class="mw-list-item">
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop"> {{! This removes the empty # from the browser URL.}}
{{{html-title}}}
</a>
</li>
{{#array-sections}}
<li class="mw-list-item">
<a href="#{{{linkAnchor}}}" class="site-nav-toc-level nav-toclevel-{{{toclevel}}}">
{{{line}}}
</a>
</li>
{{/array-sections}}
</ul>
</nav>
{{/data-toc}}
</div>
</div>

View File

@ -2,191 +2,20 @@
<div id="grid" class="mw-parser-output"> <div id="grid" class="mw-parser-output">
<header id="topbar"> {{>site-header}}
<div id="top-logo">
<a href="https://phialfantasy.wiki">
{{#data-logos}}
<img id="site-icon" src="{{{icon}}}" />
<img id="site-wordmark" src="{{{wordmark.src}}}" />
{{/data-logos}}
</a>
</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-button">
{{{text}}}
</button>
{{/array-items.0.array-links.0}}
<div id="user-menu-list">
<ul id="user-links" class="page-link-list">
{{{html-items}}}
<li id="pt-print" class="mw-list-item">
<a href="/index.php/Special:Upload">
Upload a File
</a>
</li>
</ul>
</div>
{{/data-user-menu}}
{{/data-portlets}}
</div>
<div id="page-menu" class="sidebar-page-mouse">
{{>sidebar-page}}
</div>
<div id="page-menu" class="sidebar-page-touch">
<button id="page-menu-button">Page Options</button>
<div id="page-menu-list">
<ul id="page-actions" class="page-link-list">
{{#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>
<ul id="page-views" class="page-link-list">
{{#data-portlets}}
{{#data-views}}
{{#array-items.2}}
{{{html-item}}}
{{/array-items.2}}
{{/data-views}}
{{/data-portlets}}
{{#data-portlets-sidebar}}
{{#array-portlets-rest.1}}
{{{html-items}}}
{{/array-portlets-rest.1}}
{{/data-portlets-sidebar}}
</ul>
</div>
</div>
</header>
{{{html-site-notice}}} {{{html-site-notice}}}
<div id="sidebar-nav"> {{>site-nav}}
<nav id="nav-main" class="nav-menu">
<button class="nav-show">
Wiki Pages
</button>
<ul class="site-links">
{{#data-portlets-sidebar}}
{{#data-portlets-first}}
{{#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>
{{#data-portlets-sidebar}}
{{#array-portlets-rest}}
<div class="nav-menu nav-external">
<button class="nav-show">
{{{label}}}
</button>
<ul class="site-links">
{{#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">
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop">
<li>
{{{html-title}}}
</li>
</a>
{{#data-toc}}
{{#array-sections}}
<a href="#{{{linkAnchor}}}" class="nav-toclevel{{{toclevel}}}">
<li class="mw-list-item">
{{{line}}}
</li>
</a>
{{/array-sections}}
{{/data-toc}}
</ul>
</nav>
</div>
<main id="page"> <main id="page">
<div id="titleblock">
<div id="pagetitle"> {{>page-header}}
<div id="titlebg"></div>
{{{html-title-heading}}}
<div id="versions">
{{#array-indicators}}
<a href="?{{{id}}}">
<div id="{{{id}}}">{{{html}}}</div>
</a>
{{/array-indicators}}
</div>
</div>
<ul id="title-views"> {{{html-body-content}}}
{{#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>
{{{html-body-content}}}
</main> </main>
<footer id="bottombar"> {{>site-footer}}
{{#data-footer.data-icons.array-items}}
{{{html}}}
{{/data-footer.data-icons.array-items}}
</footer>
</div> </div>