finalizing site layout, starting on page layout
This commit is contained in:
parent
38021e6a93
commit
6755bc8e22
@ -1,10 +1,10 @@
|
||||
{
|
||||
"@metadata": {
|
||||
"authors": [
|
||||
"..."
|
||||
"Esby"
|
||||
]
|
||||
},
|
||||
"skinname-crystal": "Crystal",
|
||||
"crystal-skin-desc": "A skin for Final Fantasy fansites, by Esby.",
|
||||
"crystal-skin-desc": "A skin for Final Fantasy fansites.",
|
||||
"crystal-no-categories": "No categories."
|
||||
}
|
||||
|
||||
@ -1,25 +1,51 @@
|
||||
:root {
|
||||
--black: oklch(0 0 0);
|
||||
--white: oklch(1 0 0);
|
||||
--blue-1: oklch(0.96 0.02 270);
|
||||
--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);
|
||||
--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);
|
||||
--gold-4: oklch(0.71 0.16 90);
|
||||
--gold-5: oklch(0.61 0.14 90);
|
||||
--gold-6: oklch(0.41 0.1 90);
|
||||
--gold-7: oklch(0.3 0.07 90);
|
||||
--pink-1: oklch(0.97 0.02 330);
|
||||
--pink-2: oklch(0.92 0.04 330);
|
||||
--pink-3: oklch(0.8 0.11 330);
|
||||
--pink-4: oklch(0.73 0.16 330);
|
||||
--pink-5: oklch(0.63 0.14 330);
|
||||
--pink-6: oklch(0.42 0.1 330);
|
||||
--pink-7: oklch(0.31 0.07 330);
|
||||
}
|
||||
// There's a site color, a page color, and an accent. In light mode, brightness increases from a black 8 -> to a white 0, and in dark mode, brightness increases from 0 -> 8
|
||||
// I would recommend avoiding --8 and --0 if possible, but sometimes you just need black or white! It is what it is.
|
||||
// I would also recommend sticking to these colors as much as you can, and if you add anything else, make sure to check it in both light and dark mode.
|
||||
|
||||
:root {
|
||||
--8: oklch(0 0 0);
|
||||
--0: oklch(1 0 0);
|
||||
--blue-1: oklch(0.96 0.02 270);
|
||||
--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);
|
||||
--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);
|
||||
--gold-4: oklch(0.71 0.16 90);
|
||||
--gold-5: oklch(0.61 0.14 90);
|
||||
--gold-6: oklch(0.41 0.1 90);
|
||||
--gold-7: oklch(0.3 0.07 90);
|
||||
--pink-1: oklch(0.97 0.02 330);
|
||||
--pink-2: oklch(0.92 0.04 330);
|
||||
--pink-3: oklch(0.8 0.11 330);
|
||||
--pink-4: oklch(0.73 0.16 330);
|
||||
--pink-5: oklch(0.63 0.14 330);
|
||||
--pink-6: oklch(0.42 0.1 330);
|
||||
--pink-7: oklch(0.31 0.07 330);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--8: oklch(1 0 0);
|
||||
--0: oklch(0 0 0);
|
||||
--blue-7: oklch(0.96 0.02 270);
|
||||
--blue-6: oklch(0.92 0.04 270);
|
||||
--blue-5: oklch(0.79 0.11 270);
|
||||
--blue-4: oklch(0.71 0.16 270);
|
||||
--blue-3: oklch(0.62 0.14 270);
|
||||
--blue-2: oklch(0.41 0.1 270);
|
||||
--blue-1: oklch(0.3 0.07 270);
|
||||
--pink-7: oklch(0.97 0.02 330);
|
||||
--pink-6: oklch(0.92 0.04 330);
|
||||
--pink-5: oklch(0.8 0.11 330);
|
||||
--pink-4: oklch(0.73 0.16 330);
|
||||
--pink-3: oklch(0.63 0.14 330);
|
||||
--pink-2: oklch(0.42 0.1 330);
|
||||
--pink-1: oklch(0.31 0.07 330);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,101 @@
|
||||
// This is the skin's only javascript file. If you want to add more JS files, you need to include them in skin.json's ResourceModules section, the way this one is.
|
||||
|
||||
// This all is for the color scheme toggle. Javascript is only truly necessary for the user's choice to persist. Without the toggle, the CSS will still respect the browser-level preference.
|
||||
function getPreferredColorScheme(){
|
||||
let systemScheme = 'light';
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches){
|
||||
systemScheme = 'dark';
|
||||
}
|
||||
|
||||
let chosenScheme = systemScheme;
|
||||
|
||||
if (localStorage.getItem('scheme')) {
|
||||
chosenScheme = localStorage.getItem('scheme');
|
||||
}
|
||||
|
||||
if (systemScheme === chosenScheme) {
|
||||
localStorage.removeItem('scheme')
|
||||
}
|
||||
|
||||
return chosenScheme;
|
||||
}
|
||||
|
||||
function savePreferredColorScheme(scheme) {
|
||||
let systemScheme = 'light';
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
systemScheme = 'dark';
|
||||
};
|
||||
|
||||
if (systemScheme === scheme) {
|
||||
localStorage.removeItem('scheme');
|
||||
} else {
|
||||
localStorage.setItem('scheme', scheme);
|
||||
};
|
||||
}
|
||||
|
||||
function toggleColorScheme() {
|
||||
let newScheme = 'light';
|
||||
|
||||
let scheme = getPreferredColorScheme();
|
||||
|
||||
if (scheme === 'light') {
|
||||
newScheme = 'dark';
|
||||
}
|
||||
|
||||
applyPreferredColorScheme(newScheme);
|
||||
savePreferredColorScheme(newScheme);
|
||||
|
||||
}
|
||||
|
||||
function applyPreferredColorScheme(scheme) {
|
||||
for (var s = 0; s < document.styleSheets.length; s++) {
|
||||
|
||||
for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
|
||||
rule = document.styleSheets[s].cssRules[i];
|
||||
|
||||
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
|
||||
|
||||
switch (scheme) {
|
||||
case "light":
|
||||
rule.media.appendMedium("original-prefers-color-scheme");
|
||||
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
|
||||
if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
|
||||
break;
|
||||
case "dark":
|
||||
rule.media.appendMedium("(prefers-color-scheme: light)");
|
||||
rule.media.appendMedium("(prefers-color-scheme: dark)");
|
||||
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
|
||||
break;
|
||||
default:
|
||||
rule.media.appendMedium("(prefers-color-scheme: dark)");
|
||||
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
|
||||
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (scheme === "dark") {
|
||||
document.getElementById("toggle-to-light").style.display = 'block';
|
||||
document.getElementById("toggle-to-dark").style.display = 'none';
|
||||
} else {
|
||||
document.getElementById("toggle-to-dark").style.display = 'block';
|
||||
document.getElementById("toggle-to-light").style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
applyPreferredColorScheme(getPreferredColorScheme());
|
||||
|
||||
const toggles = document.getElementsByClassName('color-scheme-toggle');
|
||||
for (const toggle of toggles) {
|
||||
console.log(toggle)
|
||||
toggle.addEventListener('click', toggleColorScheme);
|
||||
};
|
||||
|
||||
// The wrapper function is needed to make sure all of the mediawiki JS is loaded before the page's is, and load relevant parts for use here.
|
||||
mw.loader.using( [
|
||||
'mediawiki.jqueryMsg'
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
#site-header-search-bar, .site-nav-menu {
|
||||
border-radius: calc(var(--space) / 2);
|
||||
background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%);
|
||||
box-shadow: inset 0 0 6px 1px var(--blue-3), 0 0 3px .1px var(--blue-7);
|
||||
box-shadow: inset 0 0 3px .5px var(--blue-3), 0 0 3px .1px var(--blue-7);
|
||||
border-top: 2px solid var(--blue-3);
|
||||
}
|
||||
|
||||
@ -19,6 +19,24 @@
|
||||
border: 2px solid var(--blue-3);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
#site-header-search-bar, .site-nav-menu {
|
||||
border-radius: calc(var(--space) / 2);
|
||||
background: linear-gradient(120deg, var(--blue-3), var(--blue-2) 80%);
|
||||
border-top: 2px solid var(--blue-4);
|
||||
}
|
||||
|
||||
.site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
|
||||
background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
|
||||
}
|
||||
|
||||
#site-header-user-links, #page-header-options-links {
|
||||
box-shadow: 0 0 3px 1px var(--blue-1);
|
||||
border: 2px solid var(--blue-2);
|
||||
}
|
||||
}
|
||||
|
||||
.site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
|
||||
display: flex;
|
||||
}
|
||||
@ -31,7 +49,7 @@
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.drop-link-list a {
|
||||
.drop-link-list a:link, .drop-link-list a:visited {
|
||||
color: var(--blue-7);
|
||||
text-shadow: 0 0 3px var(--blue-1);
|
||||
}
|
||||
@ -1,28 +1,53 @@
|
||||
#page {
|
||||
grid-row: title / bottomstart;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--gold-1);
|
||||
}
|
||||
}
|
||||
|
||||
#pagebody-header {
|
||||
grid-row: toc;
|
||||
}
|
||||
|
||||
#pagebody a:link {
|
||||
a:link {
|
||||
color: var(--blue-6);
|
||||
}
|
||||
|
||||
#pagebody a.new {
|
||||
a.new, p a.new:visited {
|
||||
color: red;
|
||||
text-decoration: underline wavy;
|
||||
}
|
||||
|
||||
#pagebody a:not(.new):visited {
|
||||
a:not(.new):visited {
|
||||
color: var(--pink-6);
|
||||
}
|
||||
|
||||
#pagebody a:hover , #pagebody a:visited:hover {
|
||||
a:hover , a:visited:hover {
|
||||
color: var(--blue-4);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
a:link {
|
||||
color: var(--blue-5);
|
||||
}
|
||||
|
||||
a.new, p a.new:visited {
|
||||
color: red;
|
||||
text-decoration: underline wavy;
|
||||
}
|
||||
|
||||
a:not(.new):visited {
|
||||
color: var(--pink-5);
|
||||
}
|
||||
|
||||
a:hover , a:visited:hover {
|
||||
color: var(--blue-4);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#pagebody-header {
|
||||
grid-row: toc;
|
||||
}
|
||||
|
||||
.mw-heading {
|
||||
display: flex;
|
||||
margin-bottom: calc(var(--space));
|
||||
@ -39,19 +64,22 @@
|
||||
}
|
||||
|
||||
.mw-heading h2{
|
||||
margin-left: calc(var(--space) / 2);
|
||||
margin-bottom: calc(var(--space) / 2);
|
||||
margin-left: calc(var(--space) * 3);
|
||||
margin-bottom: calc(var(--space));
|
||||
}
|
||||
|
||||
.mw-heading2 {
|
||||
border-bottom: 2px solid;
|
||||
margin-bottom: calc(var(--space));
|
||||
margin-top: calc(var(--space) * 3);
|
||||
border-image: linear-gradient(90deg, var(--gold-7), transparent 90%) 30;
|
||||
border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-7) 6%, transparent 90%) 30;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-1) 6%, transparent 90%) 30;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-heading h3 {
|
||||
margin-left: calc(var(--space) *4);
|
||||
margin-left: calc(var(--space) * 4);
|
||||
margin-top: calc(var(--space));
|
||||
}
|
||||
|
||||
@ -63,7 +91,15 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
.mw-editsection-bracket {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mw-editsection.mw-editsection a:link, .mw-editsection.mw-editsection a:visited {
|
||||
color: var(--blue-7);
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
#page {
|
||||
margin-top: calc(var(--space) * 6);
|
||||
grid-column: pagestart / pageend ;
|
||||
@ -79,13 +115,13 @@
|
||||
|
||||
|
||||
.mw-heading {
|
||||
align-items: baseline;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
#page {
|
||||
grid-column: 1;
|
||||
|
||||
@ -99,7 +135,7 @@
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#pagebody p {
|
||||
#mw-content-text p {
|
||||
margin-left: var(--space);
|
||||
margin-right: var(--space);
|
||||
}
|
||||
|
||||
@ -2,11 +2,16 @@
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid var(--black);
|
||||
border-bottom: 3px solid var(--8);
|
||||
}
|
||||
|
||||
#page-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#page-title-background {
|
||||
|
||||
}
|
||||
|
||||
#page-header-views {
|
||||
@ -16,7 +21,7 @@
|
||||
}
|
||||
|
||||
#page-header-views > * > a:link, #page-header-views#page-header-views a:visited {
|
||||
color: var(--black);
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
#page-header-views > * > a:link:hover, #page-header-views#page-header-views a:visited:hover {
|
||||
@ -35,6 +40,7 @@
|
||||
|
||||
#page-header-options button {
|
||||
text-decoration: underline;
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
#page-header-options button:hover {
|
||||
@ -50,6 +56,13 @@
|
||||
|
||||
#firstHeading {
|
||||
margin-bottom: .1em;
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#firstHeading {
|
||||
text-shadow: 0 0 6px var(--0);
|
||||
}
|
||||
}
|
||||
|
||||
#firstHeading, .mw-heading h2 {
|
||||
@ -66,35 +79,45 @@
|
||||
gap: var(--space);
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
#site-header-container {
|
||||
grid-column: pagestart;
|
||||
display: flex;
|
||||
gap: var(--space);
|
||||
}
|
||||
#mw-indicator-mw-helplink {
|
||||
height: fit-content;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
#page-title{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
#page-header {
|
||||
margin-left: var(--space);
|
||||
margin-right: var(--space);
|
||||
}
|
||||
|
||||
#site-header-container {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
#page-header-views {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#page-header-links {
|
||||
margin-bottom: calc(var(--space) / 2);
|
||||
}
|
||||
|
||||
#page-title{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#page-header-links {
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
#page-title-versions {
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,8 @@
|
||||
// margin-top: calc(var(--space) * 2);
|
||||
// margin-bottom: calc(var(--space) * 2);
|
||||
|
||||
background-image: linear-gradient(100deg, transparent 0%, #ecf2ff 20%, #ecf2ff 80%, transparent);
|
||||
box-shadow: inset 0 0 12px 12px white;
|
||||
// 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);
|
||||
|
||||
@ -30,16 +30,19 @@
|
||||
flex-basis: 6em;
|
||||
}
|
||||
|
||||
.toclevel-1 > a {
|
||||
.toclevel-1 > a:link, .toclevel-1 > a:visited {
|
||||
font-size: 1.2em;
|
||||
// font-weight: bold;
|
||||
color: var(--black);
|
||||
// background-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
.toclevel-2 > a {
|
||||
color: var(--blue-6);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toclevel-2 > a {
|
||||
color: var(--blue-5);
|
||||
}
|
||||
}
|
||||
|
||||
.toclevel-1 ul, .toclevel-1 {
|
||||
@ -64,11 +67,11 @@ a:has(> .toctext):hover {
|
||||
grid-row: toc / bottomstart;
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
.toctext {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@ -1,54 +1,139 @@
|
||||
.portable-infobox {
|
||||
--pi-item-spacing: calc(var(--space));
|
||||
margin-left: var(--space);
|
||||
color: var(--gold-7);
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
.portable-infobox > * {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
|
||||
background: var(--white) 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);
|
||||
}
|
||||
|
||||
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
|
||||
border: none;
|
||||
.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: ' ';
|
||||
flex-grow: 1;
|
||||
min-width: calc(var(--pi-item-spacing) * 2);
|
||||
}
|
||||
|
||||
.portable-infobox .pi-title::before,
|
||||
.portable-infobox .pi-header:not(caption)::before {
|
||||
background-image: linear-gradient(90deg, transparent, var(--gold-1));
|
||||
}
|
||||
|
||||
.portable-infobox .pi-title::after,
|
||||
.portable-infobox .pi-header:not(caption)::after {
|
||||
background-image: linear-gradient(270deg, transparent, var(--gold-1));
|
||||
}
|
||||
|
||||
.pi-media * {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.pi-caption {
|
||||
color: var(--gold-1);
|
||||
}
|
||||
|
||||
.pi-collapse.pi-collapse h2.pi-header.pi-header {
|
||||
padding-right: var(--pi-item-spacing);
|
||||
}
|
||||
|
||||
.pi-header.pi-header, .pi-title.pi-title {
|
||||
text-align: center;
|
||||
// background: var(--gold-3);
|
||||
// color: var(--gold-7);
|
||||
}
|
||||
|
||||
.pi-data-label {
|
||||
text-align: center;
|
||||
// text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
@media (min-width: 1201px) {
|
||||
.portable-infobox {
|
||||
margin-right: calc(var(--space) * 20 * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
.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 (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-left: 0;
|
||||
margin-right: 0;
|
||||
// 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 {
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
@media (min-width: 1201px) {
|
||||
#site-footer {
|
||||
grid-column: pagestart / pageend;
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
#site-footer {
|
||||
gap: var(--space);
|
||||
grid-column: 1;
|
||||
|
||||
@ -2,17 +2,27 @@
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#site-header-marks {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
#site-header-marks a {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
max-width: 12em;
|
||||
margin: auto;
|
||||
|
||||
// Note that the wordmark's underline is drawn here, and is not a part of the SVG file.
|
||||
border-bottom: 3px solid var(--8);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#site-header-wordmark {
|
||||
// Note that the wordmark's underline is drawn here, and is not a part of the SVG file.
|
||||
border-bottom: 3px solid var(--black);
|
||||
width: 100%;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
@ -20,12 +30,15 @@
|
||||
right: var(--space);
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
border-left: 1px solid var(--blue-1);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space);
|
||||
width: calc(var(--space) * 4);
|
||||
z-index: 6;
|
||||
border-left: 1px solid var(--blue-1);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-left: 1px solid var(--blue-7);
|
||||
}
|
||||
}
|
||||
|
||||
#site-header-search-icon {
|
||||
@ -33,14 +46,17 @@
|
||||
position: absolute;
|
||||
top: calc(var(--space) * 1.5);
|
||||
right: var(--space);
|
||||
color: var(--white);
|
||||
color: var(--0);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--8);
|
||||
}
|
||||
}
|
||||
|
||||
#site-header-search-bar {
|
||||
padding: var(--space);
|
||||
height: 100%;
|
||||
font-size: calc(var(--space) * 2);
|
||||
border-bottom: 3px solid var(--black);
|
||||
border-bottom: 3px solid var(--8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -48,6 +64,9 @@
|
||||
color: var(--blue-1);
|
||||
font-weight: bold;
|
||||
font-family: 'Libre Caslon';
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--blue-7);
|
||||
}
|
||||
}
|
||||
|
||||
#site-header-search-bar:focus::placeholder {
|
||||
@ -61,10 +80,15 @@
|
||||
|
||||
#site-header-search-bar:focus {
|
||||
outline: 3px solid var(--blue-6);
|
||||
background-color: var(--white);
|
||||
background-image: linear-gradient(90deg, var(--white), var(--blue-1) 80%);
|
||||
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 {
|
||||
@ -82,7 +106,8 @@
|
||||
text-wrap: nowrap;
|
||||
padding-left: var(--space);
|
||||
padding-right: var(--space);
|
||||
border-bottom: 3px solid var(--black);
|
||||
border-bottom: 3px solid var(--8);
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
.site-header-user button:hover {
|
||||
@ -93,16 +118,32 @@
|
||||
background-image: none;
|
||||
background-color: var(--blue-4);
|
||||
box-shadow: 0 0 2px .5px var(--blue-7);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
box-shadow: 0 0 2px .5px var(--0);
|
||||
background-color: var(--blue-3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#site-header-user-links ul > .mw-list-item a {
|
||||
color: var(--blue-7);
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
.color-scheme-toggle {
|
||||
padding: var(--space);
|
||||
width: calc(var(--space) * 3);
|
||||
|
||||
filter: saturate(0%) brightness(0) contrast(10);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: saturate(0%) brightness(1) contrast(10);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
#site-header {
|
||||
grid-column: navstart / -3;
|
||||
grid-column: navstart / -2;
|
||||
grid-row: topstart;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-rows: subgrid;
|
||||
@ -134,16 +175,23 @@
|
||||
grid-column: menustart / pageend;
|
||||
}
|
||||
|
||||
#site-header-container {
|
||||
grid-column: pagestart;
|
||||
display: flex;
|
||||
gap: calc(var(--space) * 2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
#site-header {
|
||||
grid-column: 1;
|
||||
grid-row: topstart / -1;
|
||||
grid-template-columns:
|
||||
[marks] auto
|
||||
[menu] 1fr
|
||||
[marks] 1fr
|
||||
[toggle] auto
|
||||
[menu] auto
|
||||
;
|
||||
grid-template-rows: 3em auto;
|
||||
row-gap: var(--space);
|
||||
@ -152,11 +200,21 @@
|
||||
}
|
||||
|
||||
|
||||
#site-header-search {
|
||||
grid-column: marks / -1;
|
||||
#site-header-container {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
#site-header-search form {
|
||||
.site-header-user {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#color-scheme-toggle {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#site-header-search {
|
||||
position: sticky;
|
||||
align-self: flex-start;
|
||||
top: var(--space);
|
||||
|
||||
@ -11,12 +11,17 @@
|
||||
padding-top: calc(var(--space) - 2px);
|
||||
}
|
||||
|
||||
.site-nav-menu-links a, .site-nav-menu button{
|
||||
text-shadow: 0 0 2px var(--black);
|
||||
.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;
|
||||
font-family: 'Libre Caslon', serif;
|
||||
color: var(--gold-1);
|
||||
color: var(--blue-1);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--blue-7);
|
||||
text-shadow: 0 0 2px var(--0);
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav-menu button {
|
||||
@ -61,7 +66,25 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
#site-nav-toc-title {
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: .3em;
|
||||
|
||||
border-image: linear-gradient(90deg, transparent 5%, var(--blue-1) 50%, transparent 95%) 1;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-image: linear-gradient(90deg, transparent 5%, var(--blue-7) 50%, transparent 95%) 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#site-nav-toc-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
#site-nav-wrapper {
|
||||
grid-column: navstart;
|
||||
@ -100,7 +123,7 @@
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
#site-lastedit.layout-mouse {
|
||||
display: none;
|
||||
@ -139,6 +162,14 @@
|
||||
height: calc(var(--space) * 3);
|
||||
}
|
||||
|
||||
#site-nav-toc-title {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#site-nav-toc-title a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@ -153,17 +184,21 @@
|
||||
}
|
||||
|
||||
.site-nav-menu:last-child {
|
||||
margin-left: .6em;
|
||||
margin-left: calc(var(--space) * 3);
|
||||
}
|
||||
|
||||
.site-nav-menu:first-child {
|
||||
margin-right: calc(var(--space) * 3);
|
||||
}
|
||||
|
||||
.site-nav-menu {
|
||||
width: 90vw;
|
||||
width: calc(100vw - 2.4em);
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
#site-nav-wrapper > div::before {
|
||||
content: '';
|
||||
padding: 1px;
|
||||
}
|
||||
// #site-nav-wrapper > div::before {
|
||||
// content: '';
|
||||
// padding: 1px;
|
||||
// }
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
#localNotice {
|
||||
// width: max-content;
|
||||
box-shadow: inset 0 0 6px 12px white;
|
||||
|
||||
background: 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%);
|
||||
border: 2px solid var(--gold-3);
|
||||
}
|
||||
|
||||
.mw-dismissable-notice {
|
||||
@ -12,15 +12,20 @@
|
||||
|
||||
.mw-dismissable-notice-close {
|
||||
position: absolute;
|
||||
bottom: calc(var(--space) * 2);
|
||||
bottom: calc(var(--space) * 1);
|
||||
right: calc(var(--space) * 2);
|
||||
color: var(--gold-7);
|
||||
}
|
||||
|
||||
.mw-dismissable-notice-body {
|
||||
text-wrap: balance;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
.sitenotice p {
|
||||
color: var(--gold-7);
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
.mw-dismissable-notice, #localNotice {
|
||||
grid-row: sitenotice;
|
||||
grid-column: pagestart / pageend;
|
||||
@ -28,24 +33,39 @@
|
||||
}
|
||||
|
||||
#localNotice {
|
||||
padding: 2.4em;
|
||||
padding: calc(var(--space) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
#localNotice {
|
||||
font-size: .9em;
|
||||
padding: calc(var(--space) * 1.5);
|
||||
padding: calc(var(--space) * 1);
|
||||
margin-left: var(--space);
|
||||
margin-right: var(--space);
|
||||
}
|
||||
|
||||
.mw-dismissable-notice {
|
||||
padding-bottom: calc(var(--space) * 4);
|
||||
grid-column: 1;
|
||||
grid-row: sitenotice;
|
||||
// margin-top: calc(var(--space) * 1);
|
||||
margin-top: calc(var(--space) * 1);
|
||||
}
|
||||
|
||||
.mw-dismissable-notice-close {
|
||||
bottom: calc(var(--space) * 1);
|
||||
}
|
||||
|
||||
// @media (prefers-color-scheme: dark){
|
||||
// .mw-dismissable-notice-close {
|
||||
// color: var(--8);
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
}
|
||||
46
resources/parts/specialpage.less
Normal file
46
resources/parts/specialpage.less
Normal file
@ -0,0 +1,46 @@
|
||||
.mw-changeslist-legend {
|
||||
float: none;
|
||||
margin-right: var(--space);
|
||||
margin-left: var(--space);
|
||||
background: var(--0);
|
||||
}
|
||||
|
||||
.mw-htmlform-ooui-wrapper {
|
||||
background-color: var(--0);
|
||||
padding: var(--space);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color:
|
||||
var(--0);
|
||||
}
|
||||
|
||||
.mw-htmlform-submit-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: calc(var(--space) * 2 );
|
||||
}
|
||||
|
||||
.mw-htmlform-submit {
|
||||
padding: calc(var(--space));
|
||||
font-size: calc(var(--space) * 2);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mw-ui-container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: calc(var(--space) * 2);
|
||||
}
|
||||
|
||||
.mw-number-text, .mw-number-text.mw-number-text span {
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
.oo-ui-dropdownWidget-handle.oo-ui-dropdownWidget-handle {
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
.mw-tempuserlink {
|
||||
background: none;
|
||||
}
|
||||
0
resources/parts/tables.less
Normal file
0
resources/parts/tables.less
Normal file
@ -10,19 +10,26 @@
|
||||
@import 'parts/portableinfobox.less';
|
||||
@import 'parts/sitenotice.less';
|
||||
@import 'parts/dropmenu.less';
|
||||
@import 'parts/specialpage.less';
|
||||
@import 'parts/tables.less';
|
||||
|
||||
@font-face {
|
||||
font-family: "Libre Caslon";
|
||||
src: url('assets/fonts/LibreCaslonText-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shippori Mincho";
|
||||
src: url('assets/fonts/ShipporiMincho-Regular.ttf');
|
||||
}
|
||||
|
||||
|
||||
#grid {
|
||||
margin-bottom: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 1081px) {
|
||||
@media (min-width: 1201px) {
|
||||
|
||||
.layout-touch {
|
||||
display: none;
|
||||
@ -32,10 +39,10 @@
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[startgap] minmax(var(--space), 1.5fr)
|
||||
[navstart] 12em
|
||||
[navstart] var(--sidebar-width)
|
||||
[navgap] minmax(var(--space), .5fr)
|
||||
[pagestart] minmax(auto, 78em)
|
||||
[pageend] 12em
|
||||
[pageend] var(--sidebar-width)
|
||||
[endgap] minmax(var(--space), 2fr)
|
||||
;
|
||||
grid-template-rows:
|
||||
@ -47,11 +54,11 @@
|
||||
[bottomstart] auto
|
||||
;
|
||||
height: 100%;
|
||||
flex-shrink: 1
|
||||
margin-top: calc(6vw - 6vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
.layout-mouse {
|
||||
display: none;
|
||||
@ -79,16 +86,29 @@
|
||||
|
||||
:root {
|
||||
--sidebar-width: 12em;
|
||||
--gap-width: clamp(1em, 6vw, 12em);
|
||||
--space: .6em;
|
||||
--pi-width: 24em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-image: linear-gradient(120deg, var(--blue-2), var(--white) 10vw);
|
||||
background-repeat: no-repeat;
|
||||
// min-height: 100vh;
|
||||
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%)
|
||||
;
|
||||
background-attachment: fixed, local;
|
||||
color: var(--8);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background:
|
||||
linear-gradient(95deg, transparent 70%, var(--0) 140%),
|
||||
radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
|
||||
;
|
||||
background-attachment: fixed, local;
|
||||
}
|
||||
}
|
||||
|
||||
body::selection {
|
||||
|
||||
@ -6,8 +6,6 @@ h1, h2, h3, p, ul, input {
|
||||
margin: unset;
|
||||
border: unset;
|
||||
padding: unset;
|
||||
// font-size: unset;
|
||||
// font-weight: unset;
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
@ -16,6 +16,16 @@
|
||||
|
||||
<div id="page-header-links">
|
||||
|
||||
<ul id="page-header-views">
|
||||
{{#data-portlets}}
|
||||
{{#data-associated-pages}}
|
||||
{{{html-items}}}
|
||||
{{/data-associated-pages}}
|
||||
{{{data-views.array-items.0.html-item}}}
|
||||
{{{data-views.array-items.1.html-item}}}
|
||||
{{/data-portlets}}
|
||||
</ul>
|
||||
|
||||
<div id="page-header-options">
|
||||
<button>Options</button>
|
||||
<div id="page-header-options-links">
|
||||
@ -39,16 +49,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="page-header-views">
|
||||
{{#data-portlets}}
|
||||
{{#data-associated-pages}}
|
||||
{{{html-items}}}
|
||||
{{/data-associated-pages}}
|
||||
{{{data-views.array-items.0.html-item}}}
|
||||
{{{data-views.array-items.1.html-item}}}
|
||||
{{/data-portlets}}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -51,4 +51,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<noscript>
|
||||
<style>
|
||||
.color-scheme-toggle {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
<button id="toggle-to-light" class="color-scheme-toggle">☀️</button>
|
||||
<button id="toggle-to-dark" class="color-scheme-toggle">🌙</button>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user