code tidying, small changes
This commit is contained in:
parent
7905f8b3fe
commit
4dd440c2a8
@ -9,9 +9,9 @@
|
||||
--blue-2: oklch(0.92 0.04 270);
|
||||
--blue-3: oklch(0.79 0.11 270);
|
||||
--blue-4: oklch(0.71 0.16 270);
|
||||
--blue-5: oklch(0.62 0.14 270);
|
||||
--blue-6: oklch(0.41 0.1 270);
|
||||
--blue-7: oklch(0.3 0.07 270);
|
||||
--blue-5: oklch(0.5 0.14 270);
|
||||
--blue-6: oklch(0.3 0.1 270);
|
||||
--blue-7: oklch(0.15 0.07 270);
|
||||
--gold-1: oklch(96.098% 0.02042 91.593);
|
||||
--gold-2: oklch(0.92 0.04 90);
|
||||
--gold-3: oklch(0.79 0.11 90);
|
||||
@ -36,9 +36,9 @@
|
||||
--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);
|
||||
--blue-3: oklch(0.5 0.14 270);
|
||||
--blue-2: oklch(0.3 0.1 270);
|
||||
--blue-1: oklch(0.15 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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,7 @@
|
||||
.mw-halign-right {
|
||||
float: right;
|
||||
margin-left: var(--space);
|
||||
}
|
||||
// This file handles image layout and their containing boxes.
|
||||
|
||||
.mw-halign-left {
|
||||
float: left;
|
||||
margin-right: var(--space);
|
||||
}
|
||||
|
||||
.mw-halign-none, .mw-halign-center {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.info-image, .mw-default-size {
|
||||
.info-image,
|
||||
.mw-default-size {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -23,56 +12,75 @@
|
||||
padding-right: calc(var(--space));
|
||||
padding-top: calc(var(--space));
|
||||
|
||||
margin-bottom: var(--space);
|
||||
|
||||
border: 3px solid;
|
||||
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%);
|
||||
@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-position: 50% 100%;
|
||||
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;
|
||||
font-style: italic;
|
||||
padding-bottom: var(--space);
|
||||
font-family: 'Shippori Mincho';
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--gold-1);
|
||||
}
|
||||
}
|
||||
|
||||
.info-image img, .mw-default-size img {
|
||||
.info-image img,
|
||||
.mw-default-size img {
|
||||
max-width: 100%;
|
||||
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 (max-width: 1200px) {
|
||||
.mw-default-size, .info-image {
|
||||
.mw-default-size,
|
||||
.info-image {
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
.mw-default-size, .info-image {
|
||||
.mw-default-size,
|
||||
.info-image {
|
||||
max-width: unset;
|
||||
width: auto;
|
||||
float: unset;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.info-image img, .mw-default-size img {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
// This file handles infobox alignment, layout and styling.
|
||||
|
||||
.info-wrapper {
|
||||
float: right;
|
||||
max-width: 360px;
|
||||
@ -13,11 +15,13 @@
|
||||
margin-top: calc(var(--space) / 2 * -1);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -34,7 +38,9 @@ dt.infobox {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -53,11 +59,12 @@ dt.infobox.info-label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.info-title, .info-label {
|
||||
.info-title,
|
||||
.info-label {
|
||||
color: var(--gold-7);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--gold-2);
|
||||
}
|
||||
color: var(--gold-7);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
@ -79,32 +86,27 @@ dt.infobox.info-label {
|
||||
}
|
||||
|
||||
.info-title::after {
|
||||
background-image: linear-gradient(90deg, transparent, var(--gold-4));
|
||||
background-image: linear-gradient(90deg, transparent, var(--gold-3));
|
||||
}
|
||||
|
||||
.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) {
|
||||
|
||||
.info-wrapper {
|
||||
margin-right: calc(var(--space) * 18 * -1);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.info-wrapper {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
.info-wrapper {
|
||||
float: unset;
|
||||
width: auto;
|
||||
@ -116,4 +118,5 @@ dt.infobox.info-label {
|
||||
.info-title:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 {
|
||||
grid-row: title / bottomstart;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--gold-1);
|
||||
}
|
||||
line-height: calc(var(--space) * 3);
|
||||
margin-left: var(--space);
|
||||
margin-right: var(--space);
|
||||
text-wrap: pretty;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--gold-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Link styling.
|
||||
|
||||
a:link {
|
||||
color: var(--blue-6);
|
||||
}
|
||||
a.new, p a.new:visited {
|
||||
color: red;
|
||||
|
||||
a.new,
|
||||
p a.new:visited {
|
||||
color: #ff0000;
|
||||
text-decoration: underline wavy;
|
||||
}
|
||||
|
||||
a:not(.new):visited {
|
||||
color: var(--pink-6);
|
||||
}
|
||||
a:hover , a:visited:hover {
|
||||
|
||||
a:hover,
|
||||
a:visited:hover {
|
||||
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 {
|
||||
color: var(--8);
|
||||
text-decoration: underline;
|
||||
@ -45,18 +103,21 @@ a:hover , a:visited:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#pagebody-header {
|
||||
grid-row: toc;
|
||||
}
|
||||
|
||||
.pagebody p, .pagebody dl, .pagebody ul {
|
||||
.pagebody p,
|
||||
.pagebody dl,
|
||||
.pagebody ul {
|
||||
margin-bottom: calc(var(--space) * 2);
|
||||
// margin-left: calc(var(--space) * 2);
|
||||
}
|
||||
|
||||
.pagebody ol li {
|
||||
@ -90,63 +151,12 @@ pre {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
@ -159,6 +169,7 @@ pre {
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
#page {
|
||||
margin-top: calc(var(--space) * 6);
|
||||
grid-column: pagestart / pageend ;
|
||||
@ -181,6 +192,7 @@ pre {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
#page {
|
||||
grid-column: 1;
|
||||
|
||||
@ -194,16 +206,6 @@ pre {
|
||||
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 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// This file handles the page header, which pretty much means everything above the lower border of the title.
|
||||
|
||||
#page-header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
@ -12,10 +14,6 @@
|
||||
line-height: 2.4em;
|
||||
}
|
||||
|
||||
#page-title-background {
|
||||
|
||||
}
|
||||
|
||||
#page-header-views {
|
||||
margin-bottom: calc(var(--space) / 2);
|
||||
display: flex;
|
||||
@ -23,11 +21,14 @@
|
||||
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);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
@ -50,19 +51,12 @@
|
||||
color: var(--blue-5);
|
||||
}
|
||||
|
||||
|
||||
#firstHeading {
|
||||
margin-bottom: .2em;
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#firstHeading {
|
||||
text-shadow: 0 0 6px var(--0);
|
||||
}
|
||||
}
|
||||
|
||||
#firstHeading {
|
||||
font-family: 'Libre Caslon', serif;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
#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);
|
||||
line-height: calc(var(--space) * 3);
|
||||
|
||||
@ -31,12 +28,14 @@
|
||||
flex-basis: 6em;
|
||||
}
|
||||
|
||||
.toclevel-1 > a:link, .toclevel-1 > a:visited {
|
||||
.toclevel-1 > a:link,
|
||||
.toclevel-1 > a:visited {
|
||||
font-size: 1.2em;
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
.toclevel-2 > a:link, .toclevel-2 > a:visited {
|
||||
.toclevel-2 > a:link,
|
||||
.toclevel-2 > a:visited {
|
||||
color: var(--blue-6);
|
||||
}
|
||||
|
||||
@ -46,7 +45,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.toclevel-1 ul, .toclevel-1 {
|
||||
.toclevel-1 ul,
|
||||
.toclevel-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--space) / 2);
|
||||
@ -62,7 +62,8 @@ a:has(> .toctext):hover {
|
||||
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;
|
||||
grid-template-rows: subgrid;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// This file styles the footer at the bottom of the page.
|
||||
|
||||
#site-footer {
|
||||
grid-row: bottomstart;
|
||||
display: flex;
|
||||
@ -33,9 +35,6 @@
|
||||
@media (min-width: 1201px) {
|
||||
#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);
|
||||
}
|
||||
@ -56,7 +55,6 @@
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#site-footer {
|
||||
|
||||
padding-bottom: calc(var(--space) * 6);
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
// Icon and wordmark.
|
||||
|
||||
#site-header-marks {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
gap: var(--space);
|
||||
@ -14,6 +18,7 @@
|
||||
#site-header-marks a {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// 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;
|
||||
@ -27,20 +32,21 @@
|
||||
}
|
||||
|
||||
#site-header-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -6;
|
||||
filter: opacity(0.5);
|
||||
max-height: 18em;
|
||||
top: 3.6em;
|
||||
}
|
||||
|
||||
// Search bar.
|
||||
|
||||
.searchButton {
|
||||
position: absolute;
|
||||
right: var(--space);
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space);
|
||||
@ -57,6 +63,7 @@
|
||||
position: absolute;
|
||||
top: calc(var(--space) * 1.5);
|
||||
right: var(--space);
|
||||
|
||||
color: var(--0);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--8);
|
||||
@ -64,11 +71,39 @@
|
||||
}
|
||||
|
||||
#site-header-search-bar {
|
||||
color: var(--0);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--8);
|
||||
}
|
||||
padding: var(--space);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: calc(var(--space) * 2);
|
||||
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 {
|
||||
@ -84,27 +119,8 @@
|
||||
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(--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);
|
||||
}
|
||||
// User menu.
|
||||
|
||||
.site-header-user {
|
||||
position: relative;
|
||||
@ -140,8 +156,11 @@
|
||||
color: var(--blue-7);
|
||||
}
|
||||
|
||||
// Color scheme toggle button.
|
||||
|
||||
.color-scheme-toggle {
|
||||
display: none;
|
||||
// Currently hidden due to its dubious usability.
|
||||
padding: var(--space);
|
||||
width: calc(var(--space) * 3);
|
||||
text-align: center;
|
||||
@ -179,7 +198,8 @@
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#site-header-search, #site-header-search-bar {
|
||||
#site-header-search,
|
||||
#site-header-search-bar {
|
||||
grid-column: pagestart / menugap;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@ -242,7 +262,8 @@
|
||||
|
||||
#site-header-icon {
|
||||
position: unset;
|
||||
width: fit-content;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
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);
|
||||
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));
|
||||
|
||||
@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;
|
||||
position: absolute;
|
||||
margin-top: calc(var(--space) / 2);
|
||||
@ -17,27 +33,15 @@
|
||||
z-index: 12;
|
||||
right: 0;
|
||||
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 {
|
||||
.site-header-user:focus-within #site-header-user-links,
|
||||
#page-header-options:focus-within #page-header-options-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -49,7 +53,8 @@
|
||||
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);
|
||||
text-shadow: 0 0 3px var(--blue-1);
|
||||
}
|
||||
@ -12,7 +12,9 @@
|
||||
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);
|
||||
font-weight: bold;
|
||||
font-size: .9em;
|
||||
@ -96,7 +98,8 @@
|
||||
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-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@ -187,22 +190,10 @@
|
||||
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 {
|
||||
width: calc(100vw - 2.4em);
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
// #site-nav-wrapper > div::before {
|
||||
// content: '';
|
||||
// padding: 1px;
|
||||
// }
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
// This file handles the site notice element.
|
||||
|
||||
#localNotice {
|
||||
// width: max-content;
|
||||
box-shadow: inset 0 0 6px 6px var(--gold-2);
|
||||
background-image: linear-gradient(90deg, var(--gold-1), var(--gold-2) 90%);
|
||||
border: 2px solid var(--gold-3);
|
||||
@ -27,7 +28,8 @@
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
.mw-dismissable-notice, #localNotice {
|
||||
.mw-dismissable-notice,
|
||||
#localNotice {
|
||||
grid-row: sitenotice;
|
||||
grid-column: pagestart / pageend;
|
||||
margin-top: var(--space);
|
||||
@ -57,16 +59,8 @@
|
||||
bottom: calc(var(--space) * 1);
|
||||
}
|
||||
|
||||
// @media (prefers-color-scheme: dark){
|
||||
// .mw-dismissable-notice-close {
|
||||
// color: var(--8);
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
// This handles any administrative or editing-related pages, such as the edit page.
|
||||
|
||||
.mw-changeslist-legend {
|
||||
float: none;
|
||||
margin-right: var(--space);
|
||||
@ -33,7 +35,8 @@ fieldset {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// This file handles the 'version' element, currently using the indicators feature.
|
||||
|
||||
#page-title-versions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -59,6 +61,16 @@
|
||||
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 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@ -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 'colors.less';
|
||||
|
||||
@ -9,7 +11,7 @@
|
||||
@import 'parts/page-toc.less';
|
||||
@import 'parts/infobox.less';
|
||||
@import 'parts/sitenotice.less';
|
||||
@import 'parts/dropmenu.less';
|
||||
@import 'parts/site-menus.less';
|
||||
@import 'parts/specialpage.less';
|
||||
@import 'parts/table.less';
|
||||
@import 'parts/images.less';
|
||||
@ -25,11 +27,7 @@
|
||||
src: url('assets/fonts/ShipporiMincho-Regular.ttf');
|
||||
}
|
||||
|
||||
|
||||
#grid {
|
||||
margin-bottom: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
// The site layout breakpoints are below: >1201px, <1200px and <700px.
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
@ -77,7 +75,6 @@
|
||||
[pagebody] 1fr
|
||||
[bottomstart] auto
|
||||
;
|
||||
// padding: var(--space);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -89,27 +86,27 @@
|
||||
:root {
|
||||
--sidebar-width: 12em;
|
||||
--space: .6em;
|
||||
--pi-width: 24em;
|
||||
}
|
||||
|
||||
#grid {
|
||||
margin-bottom: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--0);
|
||||
background:
|
||||
linear-gradient(100deg, transparent 70%, var(--blue-2)),
|
||||
radial-gradient(circle farthest-corner at 100% 100%, var(--0) 80%, var(--blue-2) 100%)
|
||||
linear-gradient(100deg, transparent 70%, var(--blue-1)),
|
||||
radial-gradient(circle farthest-corner at 160% 100%, var(--0) 90%, var(--blue-1) 120%)
|
||||
;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,14 +118,6 @@ button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-top: calc(var(--space) * 3);
|
||||
}
|
||||
|
||||
.mw-list-item.selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#t-print, #t-upload {
|
||||
display: none;
|
||||
}
|
||||
@ -137,97 +126,17 @@ fieldset {
|
||||
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;
|
||||
}
|
||||
|
||||
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 30%, var(--gold-7) 70%, transparent 95%) 30;
|
||||
// @media (prefers-color-scheme: dark) {
|
||||
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 30%, var(--gold-3) 70%, transparent 95%) 30;
|
||||
// }
|
||||
fieldset {
|
||||
margin-top: calc(var(--space) * 3);
|
||||
}
|
||||
|
||||
// border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
|
||||
// border-bottom: 2px solid;
|
||||
// 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%)
|
||||
// }
|
||||
.mw-list-item.selected {
|
||||
display: none;
|
||||
}
|
||||
@ -18,6 +18,7 @@
|
||||
<div id="page-header-links">
|
||||
|
||||
<ul id="page-header-views">
|
||||
|
||||
{{#data-portlets}}
|
||||
{{#data-associated-pages}}
|
||||
{{{html-items}}}
|
||||
@ -25,28 +26,36 @@
|
||||
{{{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">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -60,9 +60,9 @@
|
||||
</style>
|
||||
</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-dark" class="color-scheme-toggle">🌙</button>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</nav>
|
||||
{{/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}}
|
||||
<div class="site-nav-menu nav-external">
|
||||
@ -34,12 +34,15 @@
|
||||
{{#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.}}
|
||||
<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}}}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{{#array-sections}}
|
||||
<li class="mw-list-item">
|
||||
<a href="#{{{linkAnchor}}}" class="site-nav-toc-level nav-toclevel-{{{toclevel}}}">
|
||||
@ -47,7 +50,9 @@
|
||||
</a>
|
||||
</li>
|
||||
{{/array-sections}}
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
{{/data-toc}}
|
||||
|
||||
@ -57,6 +62,5 @@
|
||||
</p>
|
||||
{{/data-footer.data-info.array-items.0}}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -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"/>
|
||||
|
||||
<div id="grid" class="mw-parser-output">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user