effie/mediawiki-skin-crystal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code tidying, small changes

Browse Source
This commit is contained in:
Effie 2025-10-27 15:59:12 +11:00
parent 7905f8b3fe
commit 4dd440c2a8
20 changed files with 330 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/colors.less
View File

@ -9,9 +9,9 @@
--blue-2: oklch(0.92 0.04 270); --blue-2: oklch(0.92 0.04 270);
--blue-3: oklch(0.79 0.11 270); --blue-3: oklch(0.79 0.11 270);
--blue-4: oklch(0.71 0.16 270); --blue-4: oklch(0.71 0.16 270);
--blue-5: oklch(0.62 0.14 270); --blue-5: oklch(0.5 0.14 270);
--blue-6: oklch(0.41 0.1 270); --blue-6: oklch(0.3 0.1 270);
--blue-7: oklch(0.3 0.07 270); --blue-7: oklch(0.15 0.07 270);
--gold-1: oklch(96.098% 0.02042 91.593); --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);
@ -36,9 +36,9 @@
--blue-6: oklch(0.92 0.04 270); --blue-6: oklch(0.92 0.04 270);
--blue-5: oklch(0.79 0.11 270); --blue-5: oklch(0.79 0.11 270);
--blue-4: oklch(0.71 0.16 270); --blue-4: oklch(0.71 0.16 270);
--blue-3: oklch(0.62 0.14 270); --blue-3: oklch(0.5 0.14 270);
--blue-2: oklch(0.41 0.1 270); --blue-2: oklch(0.3 0.1 270);
--blue-1: oklch(0.3 0.07 270); --blue-1: oklch(0.15 0.07 270);
--pink-7: oklch(0.97 0.02 330); --pink-7: oklch(0.97 0.02 330);
--pink-6: oklch(0.92 0.04 330); --pink-6: oklch(0.92 0.04 330);
--pink-5: oklch(0.8 0.11 330); --pink-5: oklch(0.8 0.11 330);

141
resources/parts/-portableinfobox.less
View File

@ -1,141 +0,0 @@
.portable-infobox {
--pi-item-spacing: calc(var(--space));
margin-left: calc(var(--space) * 2);
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;
}
.portable-infobox > * {
width: 100%;
box-sizing: border-box;
}
// .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;
// 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);
}
.portable-infobox .pi-title, .portable-infobox .pi-header {
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: ' ';
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: right;
}
@media (min-width: 1201px) {
.portable-infobox {
margin-right: calc(var(--space) * 20 * -1);
}
}
@media (min-width: 1200px) {
}
@media (max-width: 720px) {
.portable-infobox {
// background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
margin-right: var(--space);
margin-left: var(--space);
}
.pi-title:first-child {
display: none;
}
}

60
resources/parts/images.less
View File

@ -1,18 +1,7 @@
.mw-halign-right { // This file handles image layout and their containing boxes.
float: right;
margin-left: var(--space);
}
.mw-halign-left { .info-image,
float: left; .mw-default-size {
margin-right: var(--space);
}
.mw-halign-none, .mw-halign-center {
margin: auto;
}
.info-image, .mw-default-size {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -23,56 +12,75 @@
padding-right: calc(var(--space)); padding-right: calc(var(--space));
padding-top: calc(var(--space)); padding-top: calc(var(--space));
margin-bottom: var(--space);
border: 3px solid; border: 3px solid;
border-image: linear-gradient(90deg, var(--gold-3), transparent 30%, transparent 70%, var(--gold-3)) 30; border-image: linear-gradient(90deg, var(--gold-3), transparent 30%, transparent 70%, var(--gold-3)) 30;
background-clip: padding-box;
background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--gold-2) 50% 75%); background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--gold-2) 50% 75%);
@media (prefers-color-scheme: dark) {
background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--blue-2) 50% 75%);
}
background-clip: padding-box;
background-size: 18px 18px; background-size: 18px 18px;
background-position: 50% 100%; background-position: 50% 100%;
box-sizing: border-box; box-sizing: border-box;
@media (prefers-color-scheme: dark) {
background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--0) 50% 75%);
}
margin-bottom: var(--space);
} }
.info-image figcaption, .mw-default-size figcaption { .info-image figcaption,
.mw-default-size figcaption {
text-align: center; text-align: center;
font-style: italic; font-style: italic;
padding-bottom: var(--space); padding-bottom: var(--space);
font-family: 'Shippori Mincho'; font-family: 'Shippori Mincho';
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: var(--gold-1); color: var(--gold-1);
} }
} }
.info-image img, .mw-default-size img { .info-image img,
.mw-default-size img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
.mw-halign-right {
float: right;
margin-left: var(--space);
}
.mw-halign-left {
float: left;
margin-right: var(--space);
}
.mw-halign-none,
.mw-halign-center {
margin: auto;
}
@media (min-width: 1201px) { @media (min-width: 1201px) {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.mw-default-size, .info-image { .mw-default-size,
.info-image {
max-width: 360px; max-width: 360px;
} }
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.mw-default-size, .info-image { .mw-default-size,
.info-image {
max-width: unset; max-width: unset;
width: auto; width: auto;
float: unset; float: unset;
margin-right: 0; margin-right: 0;
} }
.info-image img, .mw-default-size img {
}
} }

33
resources/parts/infobox.less
View File

@ -1,3 +1,5 @@
// This file handles infobox alignment, layout and styling.
.info-wrapper { .info-wrapper {
float: right; float: right;
max-width: 360px; max-width: 360px;
@ -13,11 +15,13 @@
margin-top: calc(var(--space) / 2 * -1); margin-top: calc(var(--space) / 2 * -1);
padding-bottom: var(--space); padding-bottom: var(--space);
border-bottom: 2px solid var(--gold-4); border-bottom: 2px solid var(--gold-3);
} }
.info-title, .info-image, .info-datablock { .info-title,
.info-image,
.info-datablock {
grid-column: 1 / 4; grid-column: 1 / 4;
} }
@ -34,7 +38,9 @@ dt.infobox {
line-height: 1em; line-height: 1em;
} }
dt.infobox.info-title, dd.infobox.info-data, dt.infobox.info-label { dt.infobox.info-title,
dd.infobox.info-data,
dt.infobox.info-label {
margin: unset; margin: unset;
} }
@ -53,11 +59,12 @@ dt.infobox.info-label {
font-size: 1.5em; font-size: 1.5em;
} }
.info-title, .info-label { .info-title,
.info-label {
color: var(--gold-7);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: var(--gold-2); color: var(--gold-2);
} }
color: var(--gold-7);
} }
.info-title { .info-title {
@ -79,32 +86,27 @@ dt.infobox.info-label {
} }
.info-title::after { .info-title::after {
background-image: linear-gradient(90deg, transparent, var(--gold-4)); background-image: linear-gradient(90deg, transparent, var(--gold-3));
} }
.info-title::before { .info-title::before {
background-image: linear-gradient(270deg, transparent, var(--gold-4)); background-image: linear-gradient(270deg, transparent, var(--gold-3));
} }
// border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
// border: 2px solid transparent;
@media (min-width: 1201px) { @media (min-width: 1201px) {
.info-wrapper { .info-wrapper {
margin-right: calc(var(--space) * 18 * -1); margin-right: calc(var(--space) * 18 * -1);
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.info-wrapper {
}
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.info-wrapper { .info-wrapper {
float: unset; float: unset;
width: auto; width: auto;
@ -116,4 +118,5 @@ dt.infobox.info-label {
.info-title:first-child { .info-title:first-child {
display: none; display: none;
} }
} }

148
resources/parts/page-body.less
View File

@ -1,25 +1,34 @@
// This file handles the various elements in a Mediawiki generated page that do not belong to a discrete component. May need to be split into multiple files if it becomes too unwieldy.
#page { #page {
grid-row: title / bottomstart; grid-row: title / bottomstart;
@media (prefers-color-scheme: dark) {
color: var(--gold-1);
}
line-height: calc(var(--space) * 3); line-height: calc(var(--space) * 3);
margin-left: var(--space); margin-left: var(--space);
margin-right: var(--space); margin-right: var(--space);
text-wrap: pretty;
@media (prefers-color-scheme: dark) {
color: var(--gold-1);
}
} }
// Link styling.
a:link { a:link {
color: var(--blue-6); color: var(--blue-6);
} }
a.new, p a.new:visited {
color: red; a.new,
p a.new:visited {
color: #ff0000;
text-decoration: underline wavy; text-decoration: underline wavy;
} }
a:not(.new):visited { a:not(.new):visited {
color: var(--pink-6); color: var(--pink-6);
} }
a:hover , a:visited:hover {
a:hover,
a:visited:hover {
color: var(--blue-4); color: var(--blue-4);
} }
@ -35,6 +44,55 @@ a:hover , a:visited:hover {
} }
} }
// Heading elements.
.mw-heading {
margin-top: calc(var(--space) * 2);
position: relative;
display: flex;
margin-bottom: calc(var(--space) * 2);
}
.mw-heading h2{
margin-left: calc(var(--space) * 2);
margin-bottom: calc(var(--space) / 2);
font-family: 'Libre Caslon', serif;
font-weight: normal;
}
.mw-heading2 {
border-bottom: 1px solid;
margin-bottom: calc(var(--space));
margin-top: calc(var(--space) * 6);
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-heading3 {
margin-top: calc(var(--space) * 4);
gap: var(--space);
}
.mw-heading h3 {
font-family: 'Libre Caslon', serif;
font-weight: normal;
}
.mw-heading h4 {
margin-bottom: 0;
margin-top: var(--space);
}
.mw-heading3 .mw-editsection,
.mw-heading4 .mw-editsection {
display: none;
}
// Styles the collapsible section toggles.
.mw-collapsible-toggle .mw-collapsible-text.mw-collapsible-text { .mw-collapsible-toggle .mw-collapsible-text.mw-collapsible-text {
color: var(--8); color: var(--8);
text-decoration: underline; text-decoration: underline;
@ -45,18 +103,21 @@ a:hover , a:visited:hover {
text-decoration: underline; text-decoration: underline;
} }
.mw-collapsible-toggle-default::before, .mw-collapsible-toggle-default::after { .mw-collapsible-toggle-default::before,
.mw-collapsible-toggle-default::after {
display: none; display: none;
} }
#pagebody-header { #pagebody-header {
grid-row: toc; grid-row: toc;
} }
.pagebody p, .pagebody dl, .pagebody ul { .pagebody p,
.pagebody dl,
.pagebody ul {
margin-bottom: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 2);
// margin-left: calc(var(--space) * 2);
} }
.pagebody ol li { .pagebody ol li {
@ -90,63 +151,12 @@ pre {
text-wrap: wrap; text-wrap: wrap;
} }
.mw-heading {
margin-top: calc(var(--space) * 2);
position: relative;
display: flex;
margin-bottom: calc(var(--space) * 1.5);
}
.mw-heading h2{
margin-left: calc(var(--space) * 1);
margin-bottom: calc(var(--space) / 2);
font-family: 'Libre Caslon', serif;
font-weight: normal;
}
.mw-heading2 {
border-bottom: 1px solid;
margin-bottom: calc(var(--space));
margin-top: calc(var(--space) * 6);
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-heading3 {
margin-top: calc(var(--space) * 4);
gap: var(--space);
}
.mw-heading h3 {
// margin-left: calc(var(--space) * 1);
font-family: 'Libre Caslon', serif;
font-weight: normal;
}
// .mw-heading3::before {
// content: '▬';
// font-size: var(--space);
// }
.mw-heading h4 {
margin-left: calc(var(--space) * 2);
margin-bottom: 0;
margin-top: var(--space);
// font-weight: normal;
// font-family: 'Libre Caslon';
}
.mw-heading3 .mw-editsection, .mw-heading4 .mw-editsection {
display: none;
}
.mw-editsection-bracket { .mw-editsection-bracket {
display: none; display: none;
} }
.mw-editsection.mw-editsection a:link, .mw-editsection.mw-editsection a:visited { .mw-editsection.mw-editsection a:link,
.mw-editsection.mw-editsection a:visited {
color: var(--blue-7); color: var(--blue-7);
} }
@ -159,6 +169,7 @@ pre {
} }
@media (min-width: 1201px) { @media (min-width: 1201px) {
#page { #page {
margin-top: calc(var(--space) * 6); margin-top: calc(var(--space) * 6);
grid-column: pagestart / pageend ; grid-column: pagestart / pageend ;
@ -181,6 +192,7 @@ pre {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
#page { #page {
grid-column: 1; grid-column: 1;
@ -194,16 +206,6 @@ pre {
grid-row: 2; grid-row: 2;
} }
#mw-content-text p {
// margin-left: var(--space);
// margin-right: var(--space);
}
.mw-heading {
// margin-left: var(--space);
// margin-right: var(--space);
}
.mw-heading > .mw-editsection { .mw-heading > .mw-editsection {
position: absolute; position: absolute;
right: 0; right: 0;

22
resources/parts/page-header.less
View File

@ -1,3 +1,5 @@
// This file handles the page header, which pretty much means everything above the lower border of the title.
#page-header { #page-header {
display: flex; display: flex;
align-items: end; align-items: end;
@ -12,10 +14,6 @@
line-height: 2.4em; line-height: 2.4em;
} }
#page-title-background {
}
#page-header-views { #page-header-views {
margin-bottom: calc(var(--space) / 2); margin-bottom: calc(var(--space) / 2);
display: flex; display: flex;
@ -23,11 +21,14 @@
text-wrap: nowrap; text-wrap: nowrap;
} }
#page-header-views > * > a:link, #page-header-views#page-header-views a:visited { #page-header-views > * > a:link,
#page-header-views#page-header-views a:visited {
// The double id selector is to beat base Mediawiki specificity.
color: var(--8); color: var(--8);
} }
#page-header-views > * > a:link:hover, #page-header-views#page-header-views a:visited:hover { #page-header-views > * > a:link:hover,
#page-header-views#page-header-views a:visited:hover {
color: var(--blue-5); color: var(--blue-5);
} }
@ -50,19 +51,12 @@
color: var(--blue-5); color: var(--blue-5);
} }
#firstHeading { #firstHeading {
margin-bottom: .2em; margin-bottom: .2em;
color: var(--8); color: var(--8);
} @media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
#firstHeading {
text-shadow: 0 0 6px var(--0); text-shadow: 0 0 6px var(--0);
} }
}
#firstHeading {
font-family: 'Libre Caslon', serif; font-family: 'Libre Caslon', serif;
text-wrap: balance; text-wrap: balance;
} }

25
resources/parts/page-toc.less
View File

@ -1,14 +1,11 @@
.tocnumber, .toctitle { // This styles the Table of Contents under the page heading. It does not style the smaller ToC in the navigation sidebar, that is handled by 'site-nav.less'
.tocnumber,
.toctitle {
display: none; display: none;
} }
#toc { #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;
// margin-top: calc(var(--space) * 2);
margin-bottom: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 2);
line-height: calc(var(--space) * 3); line-height: calc(var(--space) * 3);
@ -31,12 +28,14 @@
flex-basis: 6em; flex-basis: 6em;
} }
.toclevel-1 > a:link, .toclevel-1 > a:visited { .toclevel-1 > a:link,
.toclevel-1 > a:visited {
font-size: 1.2em; font-size: 1.2em;
color: var(--8); color: var(--8);
} }
.toclevel-2 > a:link, .toclevel-2 > a:visited { .toclevel-2 > a:link,
.toclevel-2 > a:visited {
color: var(--blue-6); color: var(--blue-6);
} }
@ -46,7 +45,8 @@
} }
} }
.toclevel-1 ul, .toclevel-1 { .toclevel-1 ul,
.toclevel-1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(var(--space) / 2); gap: calc(var(--space) / 2);
@ -62,7 +62,8 @@ a:has(> .toctext):hover {
color: var(--blue-4); color: var(--blue-4);
} }
#mw-content-text:has(> .mw-parser-output > #pagebody-header), .mw-parser-output:has(> #pagebody-header) { #mw-content-text:has(> .mw-parser-output > #pagebody-header),
.mw-parser-output:has(> #pagebody-header) {
display: grid; display: grid;
grid-template-rows: subgrid; grid-template-rows: subgrid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
@ -86,7 +87,7 @@ a:has(> .toctext):hover {
} }
#toc { #toc {
line-height: calc(var(--space) * 2.5); line-height: calc(var(--space) * 2.5);
} }
} }

6
resources/parts/site-footer.less
View File

@ -1,3 +1,5 @@
// This file styles the footer at the bottom of the page.
#site-footer { #site-footer {
grid-row: bottomstart; grid-row: bottomstart;
display: flex; display: flex;
@ -33,9 +35,6 @@
@media (min-width: 1201px) { @media (min-width: 1201px) {
#site-footer { #site-footer {
grid-column: pagestart / pageend; 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-right-radius: var(--space);
border-top-left-radius: var(--space); border-top-left-radius: var(--space);
} }
@ -56,7 +55,6 @@
@media (max-width: 720px) { @media (max-width: 720px) {
#site-footer { #site-footer {
padding-bottom: calc(var(--space) * 6); padding-bottom: calc(var(--space) * 6);
} }

75
resources/parts/site-header.less
View File

@ -1,11 +1,15 @@
// This styles the header at the top of the page, which includes the site's icon, search bar, and user menu. Some elements are styled in 'site-menus.less', however.
#site-header { #site-header {
display: grid; display: grid;
} }
// Icon and wordmark.
#site-header-marks { #site-header-marks {
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%; width: fit-content;
justify-content: start; justify-content: start;
position: relative; position: relative;
gap: var(--space); gap: var(--space);
@ -14,6 +18,7 @@
#site-header-marks a { #site-header-marks a {
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%;
// Note that the wordmark's underline is drawn here, and is not a part of the SVG file. // Note that the wordmark's underline is drawn here, and is not a part of the SVG file.
border-bottom: 3px solid var(--8); border-bottom: 3px solid var(--8);
box-sizing: border-box; box-sizing: border-box;
@ -27,20 +32,21 @@
} }
#site-header-icon { #site-header-icon {
display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
z-index: -6; z-index: -6;
filter: opacity(0.5);
max-height: 18em; max-height: 18em;
top: 3.6em; top: 3.6em;
} }
// Search bar.
.searchButton { .searchButton {
position: absolute; position: absolute;
right: var(--space); right: var(--space);
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
background: none; background: none;
cursor: pointer; cursor: pointer;
padding: var(--space); padding: var(--space);
@ -57,6 +63,7 @@
position: absolute; position: absolute;
top: calc(var(--space) * 1.5); top: calc(var(--space) * 1.5);
right: var(--space); right: var(--space);
color: var(--0); color: var(--0);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: var(--8); color: var(--8);
@ -64,11 +71,39 @@
} }
#site-header-search-bar { #site-header-search-bar {
color: var(--0);
@media (prefers-color-scheme: dark) {
color: var(--8);
}
padding: var(--space); padding: var(--space);
height: 100%; height: 100%;
width: 100%;
font-size: calc(var(--space) * 2); font-size: calc(var(--space) * 2);
border-bottom: 3px solid var(--8); border-bottom: 3px solid var(--8);
width: 100%; }
#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 {
color: var(--8);
outline: 3px solid var(--blue-6);
background-color: var(--0);
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) {
color: var(--0);
outline: 3px solid var(--blue-4);
background-color: var(--8);
background-image: none;
}
}
#site-header-search-bar:focus:hover {
box-shadow: inset 0 0 6px 1px var(--blue-5);
} }
#site-header-search-bar::placeholder { #site-header-search-bar::placeholder {
@ -84,27 +119,8 @@
color: var(--blue-4); 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 { // User menu.
outline: 3px solid var(--blue-6);
background-color: var(--0);
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 {
box-shadow: inset 0 0 6px 1px var(--blue-5);
}
.site-header-user { .site-header-user {
position: relative; position: relative;
@ -140,8 +156,11 @@
color: var(--blue-7); color: var(--blue-7);
} }
// Color scheme toggle button.
.color-scheme-toggle { .color-scheme-toggle {
display: none; display: none;
// Currently hidden due to its dubious usability.
padding: var(--space); padding: var(--space);
width: calc(var(--space) * 3); width: calc(var(--space) * 3);
text-align: center; text-align: center;
@ -179,7 +198,8 @@
grid-row: 1; grid-row: 1;
} }
#site-header-search, #site-header-search-bar { #site-header-search,
#site-header-search-bar {
grid-column: pagestart / menugap; grid-column: pagestart / menugap;
width: 100%; width: 100%;
position: relative; position: relative;
@ -242,7 +262,8 @@
#site-header-icon { #site-header-icon {
position: unset; position: unset;
width: fit-content; width: unset;
} }
} }

43
resources/parts/dropmenu.less → resources/parts/site-menus.less
View File

@ -1,15 +1,31 @@
#site-header-search-bar, .site-nav-menu { // Handles the unified rules for the search and nav menus, as well as the footer, user options and page options.
#site-header-search-bar,
.site-nav-menu {
border-radius: calc(var(--space) / 2); border-radius: calc(var(--space) / 2);
background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%); background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%);
box-shadow: inset 0 0 3px .5px 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); border-top: 2px solid var(--blue-3);
@media (prefers-color-scheme: dark) {
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 { .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)); background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
@media (prefers-color-scheme: dark) {
background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
}
} }
#site-header-user-links, #page-header-options-links { #site-header-user-links,
#page-header-options-links {
display: none; display: none;
position: absolute; position: absolute;
margin-top: calc(var(--space) / 2); margin-top: calc(var(--space) / 2);
@ -17,27 +33,15 @@
z-index: 12; z-index: 12;
right: 0; right: 0;
border: 2px solid var(--blue-3); border: 2px solid var(--blue-3);
}
@media (prefers-color-scheme: dark) { @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); box-shadow: 0 0 3px 1px var(--blue-1);
border: 2px solid var(--blue-2); border: 2px solid var(--blue-2);
} }
} }
.site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links { .site-header-user:focus-within #site-header-user-links,
#page-header-options:focus-within #page-header-options-links {
display: flex; display: flex;
} }
@ -49,7 +53,8 @@
width: max-content; width: max-content;
} }
.drop-link-list a:link, .drop-link-list a:visited { .drop-link-list a:link,
.drop-link-list a:visited {
color: var(--blue-7); color: var(--blue-7);
text-shadow: 0 0 3px var(--blue-1); text-shadow: 0 0 3px var(--blue-1);
} }

19
resources/parts/site-nav.less
View File

@ -12,7 +12,9 @@
padding-top: calc(var(--space) - 2px); padding-top: calc(var(--space) - 2px);
} }
.site-nav-menu-links .mw-list-item a:link, .site-nav-menu-links .mw-list-item a:visited, .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(--8); text-shadow: 0 0 2px var(--8);
font-weight: bold; font-weight: bold;
font-size: .9em; font-size: .9em;
@ -96,7 +98,8 @@
display: none; display: none;
} }
.site-nav-menu-links > li:not(#site-nav-toc-title):hover::before, .site-nav-menu-links > li:not(#site-nav-toc-title):has(a:focus)::before { .site-nav-menu-links > li:not(#site-nav-toc-title):hover::before,
.site-nav-menu-links > li:not(#site-nav-toc-title):has(a:focus)::before {
background-image: url(assets/cursor-right.svg); background-image: url(assets/cursor-right.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -187,22 +190,10 @@
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
} }
// .site-nav-menu:last-of-type {
// margin-left: calc(var(--space) * 3);
// }
// .site-nav-menu:first-of-type {
// margin-right: calc(var(--space) * 3);
// }
.site-nav-menu { .site-nav-menu {
width: calc(100vw - 2.4em); width: calc(100vw - 2.4em);
flex-shrink: 0; flex-shrink: 0;
scroll-snap-align: center; scroll-snap-align: center;
} }
// #site-nav-wrapper > div::before {
// content: '';
// padding: 1px;
// }
} }

14
resources/parts/sitenotice.less
View File

@ -1,5 +1,6 @@
// This file handles the site notice element.
#localNotice { #localNotice {
// width: max-content;
box-shadow: inset 0 0 6px 6px var(--gold-2); box-shadow: inset 0 0 6px 6px var(--gold-2);
background-image: linear-gradient(90deg, var(--gold-1), var(--gold-2) 90%); background-image: linear-gradient(90deg, var(--gold-1), var(--gold-2) 90%);
border: 2px solid var(--gold-3); border: 2px solid var(--gold-3);
@ -27,7 +28,8 @@
} }
@media (min-width: 1201px) { @media (min-width: 1201px) {
.mw-dismissable-notice, #localNotice { .mw-dismissable-notice,
#localNotice {
grid-row: sitenotice; grid-row: sitenotice;
grid-column: pagestart / pageend; grid-column: pagestart / pageend;
margin-top: var(--space); margin-top: var(--space);
@ -57,16 +59,8 @@
bottom: calc(var(--space) * 1); bottom: calc(var(--space) * 1);
} }
// @media (prefers-color-scheme: dark){
// .mw-dismissable-notice-close {
// color: var(--8);
// }
// }
} }
@media (max-width: 720px) { @media (max-width: 720px) {
} }

5
resources/parts/specialpage.less
View File

@ -1,3 +1,5 @@
// This handles any administrative or editing-related pages, such as the edit page.
.mw-changeslist-legend { .mw-changeslist-legend {
float: none; float: none;
margin-right: var(--space); margin-right: var(--space);
@ -33,7 +35,8 @@ fieldset {
margin-bottom: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 2);
} }
.mw-number-text, .mw-number-text.mw-number-text span { .mw-number-text,
.mw-number-text.mw-number-text span {
color: var(--8); color: var(--8);
} }

12
resources/parts/versions.less
View File

@ -1,3 +1,5 @@
// This file handles the 'version' element, currently using the indicators feature.
#page-title-versions { #page-title-versions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -59,6 +61,16 @@
display: none; display: none;
} }
#mw-indicator-mw-helplink#mw-indicator-mw-helplink {
display: none;
}
#mw-indicator-mw-helplink + .mw-helplink.mw-helplink {
display: none;
}
// There needs to be at least one of these for each version present on a given page.
body:has(#mw-indicator-1:checked) .vdiff-1 { body:has(#mw-indicator-1:checked) .vdiff-1 {
display: inline; display: inline;
} }

137
resources/skin.less
View File

@ -1,3 +1,5 @@
// This is the base .less file for the Crystal skin. Different components are split up into their own parts/ files, for ease of editing. CSS rules in here should only be for site wide elements.
@import 'unset.less'; @import 'unset.less';
@import 'colors.less'; @import 'colors.less';
@ -9,7 +11,7 @@
@import 'parts/page-toc.less'; @import 'parts/page-toc.less';
@import 'parts/infobox.less'; @import 'parts/infobox.less';
@import 'parts/sitenotice.less'; @import 'parts/sitenotice.less';
@import 'parts/dropmenu.less'; @import 'parts/site-menus.less';
@import 'parts/specialpage.less'; @import 'parts/specialpage.less';
@import 'parts/table.less'; @import 'parts/table.less';
@import 'parts/images.less'; @import 'parts/images.less';
@ -25,11 +27,7 @@
src: url('assets/fonts/ShipporiMincho-Regular.ttf'); src: url('assets/fonts/ShipporiMincho-Regular.ttf');
} }
// The site layout breakpoints are below: >1201px, <1200px and <700px.
#grid {
margin-bottom: 0;
min-height: 100vh;
}
@media (min-width: 1201px) { @media (min-width: 1201px) {
@ -77,7 +75,6 @@
[pagebody] 1fr [pagebody] 1fr
[bottomstart] auto [bottomstart] auto
; ;
// padding: var(--space);
padding-bottom: 0; padding-bottom: 0;
} }
} }
@ -89,27 +86,27 @@
:root { :root {
--sidebar-width: 12em; --sidebar-width: 12em;
--space: .6em; --space: .6em;
--pi-width: 24em; }
#grid {
margin-bottom: 0;
min-height: 100vh;
} }
body { body {
margin: 0; margin: 0;
background-color: var(--0); background-color: var(--0);
background: background:
linear-gradient(100deg, transparent 70%, var(--blue-2)), linear-gradient(100deg, transparent 70%, var(--blue-1)),
radial-gradient(circle farthest-corner at 100% 100%, var(--0) 80%, var(--blue-2) 100%) radial-gradient(circle farthest-corner at 160% 100%, var(--0) 90%, var(--blue-1) 120%)
; ;
background-attachment: fixed, local; background-attachment: fixed, local;
// color: var(--8);
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body {
background: background:
linear-gradient(95deg, transparent 70%, var(--0) 140%), linear-gradient(95deg, transparent 70% , var(--0) 140%),
radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%) radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
; ;
background-attachment: fixed, local;
} }
} }
@ -121,14 +118,6 @@ button {
cursor: pointer; cursor: pointer;
} }
fieldset {
margin-top: calc(var(--space) * 3);
}
.mw-list-item.selected {
display: none;
}
#t-print, #t-upload { #t-print, #t-upload {
display: none; display: none;
} }
@ -137,97 +126,17 @@ fieldset {
z-index: 60; z-index: 60;
} }
.mwe-popups-extract a:link, .mwe-popups-extract a:visited { // Stuff under here belongs to specific components, but has not been sorted into a /parts file yet.
.mwe-popups-extract a:link,
.mwe-popups-extract a:visited {
color: black; color: black;
} }
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 30%, var(--gold-7) 70%, transparent 95%) 30; fieldset {
// @media (prefers-color-scheme: dark) { margin-top: calc(var(--space) * 3);
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 30%, var(--gold-3) 70%, transparent 95%) 30; }
// }
// border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1; .mw-list-item.selected {
// border-bottom: 2px solid; display: none;
// border-left: 2px solid; }
// border-left: 2px solid;
// border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 40%, var(--gold-7) 60%, transparent 95%) 30;
// @media (prefers-color-scheme: dark) {
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 30;
// }
// .site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
// font-size: 1em;
// overflow: clip;
// text-overflow: ellipsis;
// background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
// // border-radius: calc(var(--space) / 2 );
// // box-shadow: inset 0 0 3px 3px var(--blue-1);
// color: var(--blue-7);
// gap: calc(var(--space) * 2);
// }
// #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;
// border-style: solid;
// border-image: linear-gradient(150deg, var(--blue-5), white 30%) 1;
// background-image: linear-gradient(150deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
// }
// #page-menu:focus-within {
// border-style: solid;
// border-image: linear-gradient(102deg, var(--blue-5),white 30%) 1;
// background-image: linear-gradient(102deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
// }

9
templates/page-header.mustache
View File

@ -18,6 +18,7 @@
<div id="page-header-links"> <div id="page-header-links">
<ul id="page-header-views"> <ul id="page-header-views">
{{#data-portlets}} {{#data-portlets}}
{{#data-associated-pages}} {{#data-associated-pages}}
{{{html-items}}} {{{html-items}}}
@ -25,28 +26,36 @@
{{{data-views.array-items.0.html-item}}} {{{data-views.array-items.0.html-item}}}
{{{data-views.array-items.1.html-item}}} {{{data-views.array-items.1.html-item}}}
{{/data-portlets}} {{/data-portlets}}
</ul> </ul>
<div id="page-header-options"> <div id="page-header-options">
<button>Options</button> <button>Options</button>
<div id="page-header-options-links"> <div id="page-header-options-links">
<ul class="drop-link-list"> <ul class="drop-link-list">
{{#data-portlets.data-actions}} {{#data-portlets.data-actions}}
{{{html-items}}} {{{html-items}}}
{{/data-portlets.data-actions}} {{/data-portlets.data-actions}}
{{! This replaces the normal 'Print' list item, which is hidden from 'array-portlets-rest' with CSS. }} {{! 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"> <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.}} <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> </li>
</ul> </ul>
<ul class="drop-link-list"> <ul class="drop-link-list">
{{#data-portlets.data-views.array-items.2}} {{#data-portlets.data-views.array-items.2}}
{{{html-item}}} {{{html-item}}}
{{/data-portlets.data-views.array-items.2}} {{/data-portlets.data-views.array-items.2}}
{{#data-portlets-sidebar.array-portlets-rest.2}} {{#data-portlets-sidebar.array-portlets-rest.2}}
{{{html-items}}} {{{html-items}}}
{{/data-portlets-sidebar.array-portlets-rest.2}} {{/data-portlets-sidebar.array-portlets-rest.2}}
</ul> </ul>
</div> </div>
</div> </div>

44
templates/site-footer.mustache
View File

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

2
templates/site-header.mustache
View File

@ -60,9 +60,9 @@
</style> </style>
</noscript> </noscript>
{{! These buttons are for a possible on-site color scheme toggle, currently hidden with CSS. }}
<button id="toggle-to-light" class="color-scheme-toggle">☀️</button> <button id="toggle-to-light" class="color-scheme-toggle">☀️</button>
<button id="toggle-to-dark" class="color-scheme-toggle">🌙</button> <button id="toggle-to-dark" class="color-scheme-toggle">🌙</button>
</header> </header>

36
templates/site-nav.mustache
View File

@ -16,7 +16,7 @@
</nav> </nav>
{{/data-portlets-first}} {{/data-portlets-first}}
{{! The Tools menu generated below is hidden with CSS, as its functions are moved to Page and User Options.}} {{! The Tools menu generated as part of the templating section below is hidden with CSS, as its functions are moved to Page and User Options.}}
{{#array-portlets-rest}} {{#array-portlets-rest}}
<div class="site-nav-menu nav-external"> <div class="site-nav-menu nav-external">
@ -32,23 +32,28 @@
{{/data-portlets-sidebar}} {{/data-portlets-sidebar}}
{{#data-toc}} {{#data-toc}}
<nav id="site-nav-toc" class="site-nav-menu site-nav-sticky"> <nav id="site-nav-toc" class="site-nav-menu site-nav-sticky">
<button>Contents</button> <button>Contents</button>
<ul class="site-nav-menu-links">
<li id="site-nav-toc-title" class="mw-list-item"> <ul class="site-nav-menu-links">
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop"> {{! This removes the empty # from the browser URL.}}
<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 when the back-to-top button is clicked.}}
{{{html-title}}} {{{html-title}}}
</a>
</li>
{{#array-sections}}
<li class="mw-list-item">
<a href="#{{{linkAnchor}}}" class="site-nav-toc-level nav-toclevel-{{{toclevel}}}">
{{{line}}}
</a> </a>
</li> </li>
{{/array-sections}}
</ul> {{#array-sections}}
</nav> <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}} {{/data-toc}}
{{#data-footer.data-info.array-items.0}} {{#data-footer.data-info.array-items.0}}
@ -57,6 +62,5 @@
</p> </p>
{{/data-footer.data-info.array-items.0}} {{/data-footer.data-info.array-items.0}}
</div> </div>
</div> </div>

2
templates/skin.mustache
View File

@ -1,3 +1,5 @@
{{! This is the base page for Crystal, a Final Fantasy fansite Mediawiki skin. If you're editing this, you should probably know the basics off how Mustache templating works.}}
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
<div id="grid" class="mw-parser-output"> <div id="grid" class="mw-parser-output">