diff --git a/.gitignore b/.gitignore index df07347..743eb48 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ .eslintcache -node_modules/ +node_modules/ \ No newline at end of file diff --git a/resources/assets/cursor-right.svg b/resources/assets/cursor-right.svg new file mode 100755 index 0000000..d0b947d --- /dev/null +++ b/resources/assets/cursor-right.svg @@ -0,0 +1,38 @@ + + + + diff --git a/resources/assets/fonts/LibreCaslonText-Bold.ttf b/resources/assets/fonts/LibreCaslonText-Bold.ttf new file mode 100755 index 0000000..6527832 Binary files /dev/null and b/resources/assets/fonts/LibreCaslonText-Bold.ttf differ diff --git a/resources/assets/fonts/LibreCaslonText-Italic.ttf b/resources/assets/fonts/LibreCaslonText-Italic.ttf new file mode 100755 index 0000000..6bbdecc Binary files /dev/null and b/resources/assets/fonts/LibreCaslonText-Italic.ttf differ diff --git a/resources/assets/fonts/LibreCaslonText-Regular.ttf b/resources/assets/fonts/LibreCaslonText-Regular.ttf new file mode 100755 index 0000000..efa0186 Binary files /dev/null and b/resources/assets/fonts/LibreCaslonText-Regular.ttf differ diff --git a/resources/assets/fonts/ShipporiMincho-Bold.ttf b/resources/assets/fonts/ShipporiMincho-Bold.ttf new file mode 100755 index 0000000..bc817fc Binary files /dev/null and b/resources/assets/fonts/ShipporiMincho-Bold.ttf differ diff --git a/resources/assets/fonts/ShipporiMincho-ExtraBold.ttf b/resources/assets/fonts/ShipporiMincho-ExtraBold.ttf new file mode 100755 index 0000000..941e726 Binary files /dev/null and b/resources/assets/fonts/ShipporiMincho-ExtraBold.ttf differ diff --git a/resources/assets/fonts/ShipporiMincho-Medium.ttf b/resources/assets/fonts/ShipporiMincho-Medium.ttf new file mode 100755 index 0000000..82b8f40 Binary files /dev/null and b/resources/assets/fonts/ShipporiMincho-Medium.ttf differ diff --git a/resources/assets/fonts/ShipporiMincho-Regular.ttf b/resources/assets/fonts/ShipporiMincho-Regular.ttf new file mode 100755 index 0000000..84372a1 Binary files /dev/null and b/resources/assets/fonts/ShipporiMincho-Regular.ttf differ diff --git a/resources/assets/fonts/ShipporiMincho-SemiBold.ttf b/resources/assets/fonts/ShipporiMincho-SemiBold.ttf new file mode 100755 index 0000000..0cd7572 Binary files /dev/null and b/resources/assets/fonts/ShipporiMincho-SemiBold.ttf differ diff --git a/resources/colors.less b/resources/colors.less index 2452233..7287faf 100644 --- a/resources/colors.less +++ b/resources/colors.less @@ -8,7 +8,7 @@ --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(0.96 0.02 90); + --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); diff --git a/resources/layout-mouse.less b/resources/layout-mouse.less deleted file mode 100644 index c8a5898..0000000 --- a/resources/layout-mouse.less +++ /dev/null @@ -1,175 +0,0 @@ -:root { - --sidebar-width: calc(10.2em + calc(.3vw * 9)); -} - -#grid { - display: grid; - grid-template-columns: 10.2em calc(.3vw * 9) 1fr auto var(--sidebar-width); - grid-template-rows: - [topstart] auto - [sitenotice] auto - [title] auto - [pageheader] auto - [pagebody] auto - [bottomstart] auto - ; - column-gap: var(--space); - height: 100%; - max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width)); - margin: auto; - padding: calc(var(--space) * 2); -} - -#page { - margin-top: calc(0.3vw * 9); - grid-column: 3 / 5; - grid-row: title / bottomstart ; - display: grid; - grid-template-rows: subgrid; - grid-template-columns: subgrid; -} - -#topbar { - column-gap: var(--space); - grid-column: 1 / 6; - grid-row: topstart / bottomstart; - grid-template-columns: subgrid; - grid-template-rows: subgrid; -} - -#top-logo { - grid-row: 1; -} - -#nav-search, #nav-search-bar { - grid-column: 3 / 4; - width: 100%; - position: relative; -} - -#user-menu { - margin-left: calc(var(--space) * 3); - grid-column: 4 / 5; -} - -#localNotice { - grid-row: sitenotice; - grid-column: 3 / 5; -} - -#versions { - align-items: center; -} - -#sidebar-nav { - grid-column: 1; - grid-row: pagebody / -1; - display: flex; - flex-direction: column; - gap: calc(var(--space) * 2); - width: 100%; -} - -.nav-menu { - border-radius: calc(var(--space) / 2); -} - -.nav-show { - display: none; -} - -.mw-list-item { - display: flex; -} - -.mw-heading { - align-items: baseline; - justify-content: space-between; -} - -.nav-sticky { - position: sticky; - top: calc(var(--space) * 2); -} - -.site-links > a:not(.nav-backtotop):hover::before, #nav-toc > .site-links > li:hover::before { - background-image: url(/resources/assets/cursor-test.svg); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - display: block; - content: ''; - width: 1em; -} - -.page-link-list { - display: flex; - flex-direction: column; - gap: calc(var(--space) / 2); -} - -#user-menu-list { - right: 0; -} - -.sidebar-page-mouse { - grid-column: 5; - grid-row: topstart; -} - -#page-menu { - // position: sticky; - // top: calc(var(--space) * 2); - position: relative; - min-height: 100%; - width: 100%; -} - -#page-menu-button { - height: 100%; - text-align: left; -} - -#user-menu-button:hover, #page-menu-button:hover { - box-shadow: inset 0 0 3px 3px var(--blue-3); -} - -#page-menu > * { - padding-left: var(--space); -} - -.sidebar-page-touch { - display: none; -} - -#page-menu-list { - flex-direction: column; - gap: calc(var(--space) * 4); -} - -#titleblock { - grid-column: 1 / 3; - grid-row: title; -} - -#mw-content-text { - grid-column: 1 / 3; - grid-row: pagebody / bottomstart; -} - -#pagebody { - grid-row: pagebody -} - -#mw-content-text:has(> .mw-parser-output > #pagebody-header), .mw-parser-output:has(> #pagebody-header) { - display: grid; - grid-template-rows: subgrid; - grid-row: pageheader / bottomstart; -} - -#bottombar { - grid-column: 3 / 4; - grid-row: bottomstart; - bottom: 0; - height: 6em; -} \ No newline at end of file diff --git a/resources/layout-touch.less b/resources/layout-touch.less deleted file mode 100644 index 5697daf..0000000 --- a/resources/layout-touch.less +++ /dev/null @@ -1,177 +0,0 @@ -:root { - --touch-whitespace: 1.2vw; -} - -#grid { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto; - padding: var(--space); -} - -p { - padding-left: var(--space); - padding-right: var(--space); -} - -.mw-heading { - justify-content: center; - position: relative; - margin-left: var(--space); - margin-right: var(--space); -} - -.mw-heading > .mw-editsection { - position: absolute; - right: 0; -} - -#topbar { - grid-column: 1; - grid-row: 1; - column-gap: var(--space); - grid-template-columns: auto minmax(min-content, 1fr) min-content; - grid-template-rows: 3.6em 3.6em; - row-gap: var(--space); -} - -#top-logo { - grid-column: 1; - grid-row: 1; - align-items: flex-start; -} - -#top-logo a { - top: var(--space); - left: 50%; - transform: translate(-50%); -} - -#nav-search { - position: sticky; - top: var(--space); - grid-column: 1 / 4; - grid-row: 2; - width: 100%; -} - -#nav-search-bar { - width: 100%; -} - -#sidebar-nav { - grid-row: -1; - position: fixed; - bottom: 0; - left: 50%; - transform: translate(-50%); - width: 100%; - height: fit-content; - display: flex; - // flex-direction: row-reverse; - direction: rtl; - align-items: end; - z-index: 1; - gap: var(--space); - justify-content: center; - overflow-y: hidden; - padding-top: 1em; - margin-top: -1em; -} - -.nav-menu { - border-left: 0; - border-right: 0; - border-top-left-radius: var(--space); - border-top-right-radius: var(--space); - height: fit-content; - min-width: fit-content; - align-items: center; -} - -.nav-menu:not(:focus-within) { - height: calc(var(--space) * 3); -} - -.sidebar-page-mouse { - display: none; -} - -.sidebar-page-touch { - grid-row: 1; - grid-column: 3; -} - -#user-menu { - margin-left: auto; -} - -#page-menu { - width: fit-content; - position: relative; -} - -#page-menu-button { - height: 100%; - width: 100%; -} - -#user-menu-list { - right: 0; -} - -#page-menu-list { - grid-row: unset; - right: 0; - gap: calc(var(--space) * 3); - // box-shadow: 0 0 2px 1px var(--gold-7), inset 0 0 6px 3px var(--gold-1); - z-index: 1; -} - -.site-links { - border-top: 1px solid var(--gold-1); - padding-top: calc(var(--space)); - margin-left: var(--space); - margin-right: var(--space); - box-sizing: border-box; - width: fit-content; - align-items: center; -} - -.site-links a { - text-align: center; -} - -details.page-links { - display: flex; - flex-direction: column; - text-align: center; -} - -#page { - grid-column: 1; - grid-row: 3 / 5; - display: grid; - grid-template-rows: subgrid; - grid-template-columns: subgrid; -} - -#pagebody { - grid-row: 2; -} - -#bottombar { - grid-row: 5; - margin-bottom: calc(var(--space) * 5); -} - -#sidebar-nav > * { - flex-shrink: 0; -} - -@media (max-width: 720px) { - .pi-title:first-child { - display: none; - } - -} \ No newline at end of file diff --git a/resources/main.js b/resources/main.js index 7b60af5..4230a94 100644 --- a/resources/main.js +++ b/resources/main.js @@ -1 +1,24 @@ -$(document).ready(console.log("page is fully loaded")); \ No newline at end of file +// This is the skin's only javascript file. If you want to add more JS files, you need to include them in skin.json's ResourceModules section, the way this one is. + +// The wrapper function is needed to make sure all of the mediawiki JS is loaded before the page's is, and load relevant parts for use here. +mw.loader.using( [ + 'mediawiki.jqueryMsg' + ] ).then( () => { + + // This gets the user's current username, and puts it the user menu button. + const username = mw.user.getName(); + const button = document.getElementById('site-header-user').children[0]; + if (username) { + button.textContent = username; + } else { + button.textContent = mw.message( 'login' ).text(); + } + + // This replaces the text of the print link with the current 'print' system message. + const print = document.getElementById('page-action-print').children[0]; + print.textContent = mw.message( 'print' ).text(); + + const toctitle = document.getElementById('site-nav-toc').children[0]; + toctitle.textContent = mw.message( 'toc' ).text(); + } +) \ No newline at end of file diff --git a/resources/navmenu.less b/resources/navmenu.less deleted file mode 100644 index 6e279a1..0000000 --- a/resources/navmenu.less +++ /dev/null @@ -1,66 +0,0 @@ -.nav-menu { - background-color: var(--blue-4); - box-shadow: 0 0 1px 1px var(--gold-3), inset 0 0 6px 3px var(--blue-3); - border: 1px outset var(--gold-1); -} - -.site-links { - display: flex; - flex-direction: column; - gap: calc(var(--space) / 2); - padding: var(--space); -} - -.site-links > a, #nav-toc > .site-links, .nav-show { - text-shadow: 0 0 2px var(--black); - font-weight: bold; - font-size: .9em; - font-family: 'Libre Caslon', serif; -} - -.site-links > a { - display: flex; - gap: var(--space); -} - -#nav-toc:not(:has(ul > .nav-toclevel1)) { - display: none; -} - -.nav-menu a { - color: var(--gold-1); -} - -.nav-menu a:hover { - color: var(--blue-2); -} - -.nav-menu { - display: flex; - flex-direction: column; -} - -#nav-toc { - margin-top: calc(var(--space) * 6); -} - -.nav-backtotop { - display: flex; - justify-content: center; - gap: calc(var(--space) / 2); - align-items: center; -} - -.nav-show { - border: none; - background: none; - padding: .6em; - text-align: center; - color: var(--gold-1); - box-sizing: border-box; - width: 100%; -} - -.nav-external:last-of-type { - display: none; -} diff --git a/resources/parts/dropmenu.less b/resources/parts/dropmenu.less new file mode 100644 index 0000000..c9e095e --- /dev/null +++ b/resources/parts/dropmenu.less @@ -0,0 +1,35 @@ +#site-header-search-bar, .site-nav-menu { + border-radius: calc(var(--space) / 2); + background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%); + box-shadow: inset 0 0 6px 1px var(--blue-3), 0 0 3px .1px var(--blue-7); + border-top: 2px solid var(--blue-3); +} + +#site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer { + background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3)); +} + +#site-header-user-links, #page-header-options-links { + display: none; + position: absolute; + margin-top: var(--space); + box-shadow: 0 0 3px 1px var(--blue-7); + z-index: 12; + right: 0; +} + +#site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links { + display: flex; +} + +.drop-link-list { + display: flex; + gap: var(--space); + flex-direction: column; + padding: var(--space); + width: max-content; +} + +.drop-link-list a { + color: var(--blue-7); +} \ No newline at end of file diff --git a/resources/parts/page-body.less b/resources/parts/page-body.less new file mode 100644 index 0000000..02cead8 --- /dev/null +++ b/resources/parts/page-body.less @@ -0,0 +1,122 @@ +#page { + grid-row: title / bottomstart; +} + +#pagebody-header { + grid-row: toc; +} + +#pagebody a:link { + color: var(--blue-6); +} + +#pagebody a.new { + color: red; + text-decoration: underline wavy; +} + +#pagebody a:not(.new):visited { + color: var(--pink-6); +} + +#pagebody a:hover , #pagebody a:visited:hover { + color: var(--blue-4); +} + +.mw-heading { + display: flex; + margin-bottom: calc(var(--space)); +} + +#page p { + margin-bottom: calc(var(--space) * 2); + line-height: calc(var(--space) * 3); + text-wrap: pretty; +} + +#mw-content-text { + grid-row: toc / bottomstart; +} + +.mw-heading h2{ + margin-left: calc(var(--space) / 2); + margin-bottom: calc(var(--space) / 2); +} + +.mw-heading2 { + border-bottom: 2px solid; + margin-bottom: calc(var(--space)); + margin-top: calc(var(--space) * 3); + border-image: linear-gradient(90deg, var(--gold-7), transparent 90%) 30; +} + +.mw-heading h3 { + margin-left: calc(var(--space) *4); + margin-top: calc(var(--space)); +} + +.mw-heading h4 { + margin-left: calc(var(--space) * 8); +} + +.mw-heading3 .mw-editsection, .mw-heading4 .mw-editsection { + display: none; +} + +@media (min-width: 1081px) { + #page { + margin-top: calc(var(--space) * 6); + grid-column: pagestart / pageend ; + grid-row: title / bottomstart ; + display: grid; + grid-template-rows: subgrid; + grid-template-columns: 1fr; + } + + #pagebody { + grid-row: pagebody + } + + + .mw-heading { + align-items: baseline; + justify-content: space-between; + } + +} + +@media (max-width: 1080px) { + #page { + grid-column: 1; + + display: grid; + grid-template-rows: subgrid; + grid-template-columns: subgrid; + margin-top: calc(var(--space) * 4); + } + + #pagebody { + grid-row: 2; + } + + #pagebody p { + margin-left: var(--space); + margin-right: var(--space); + } + + .mw-heading { + margin-left: var(--space); + margin-right: var(--space); + } + + .mw-heading > .mw-editsection { + position: absolute; + right: var(--space); + } + +} + + +@media (max-width: 720px) { + +} \ No newline at end of file diff --git a/resources/parts/page-header.less b/resources/parts/page-header.less new file mode 100644 index 0000000..89e7d45 --- /dev/null +++ b/resources/parts/page-header.less @@ -0,0 +1,85 @@ +#page-header { + display: flex; + align-items: end; + justify-content: space-between; + border-bottom: 3px solid var(--black); +} + +#page-title { + display: flex; +} + +#page-header-views { + margin-bottom: calc(var(--space) / 2); + display: flex; + gap: var(--space); +} + +#page-header-views > * > a:link, #page-header-views#page-header-views a:visited { + color: var(--black); +} + +#page-header-views > * > a:link:hover, #page-header-views#page-header-views a:visited:hover { + color: var(--blue-5); +} + +#page-header-options { + position: relative; +} + +#page-header-options button { + text-decoration: underline; +} + +#page-header-options button:hover { + color: var(--blue-5); +} + +#page-title-versions { + display: flex; + flex-wrap: wrap; + gap: var(--space); + margin-left: 2vw; +} + +#firstHeading { + margin-bottom: .1em; +} + +#firstHeading, .mw-heading h2 { + font-family: 'Libre Caslon', serif; + text-wrap: balance; +} + +#page-header { + grid-row: title; +} + +#page-header-links { + display: flex; + gap: var(--space); +} + +@media (min-width: 1081px) { + +} + +@media (max-width: 1080px) { + #page-title{ + flex-direction: column-reverse; + } + + #page-header { + margin-left: var(--space); + margin-right: var(--space); + } + +} + +@media (max-width: 720px) { + + #page-header-links { + flex-direction: column; + align-items: end; + } +} \ No newline at end of file diff --git a/resources/parts/page-toc.less b/resources/parts/page-toc.less new file mode 100644 index 0000000..a873dc7 --- /dev/null +++ b/resources/parts/page-toc.less @@ -0,0 +1,83 @@ +.tocnumber, .toctitle { + display: none; +} + +#toc { + // margin-top: calc(var(--space) * 2); + // margin-bottom: calc(var(--space) * 2); + + background-image: linear-gradient(100deg, transparent 0%, #ecf2ff 20%, #ecf2ff 80%, transparent); + box-shadow: inset 0 0 12px 12px white; + padding-top: calc(var(--space) * 2); + padding-bottom: calc(var(--space) * 2); + +} + +.toctitle > h2 { + text-align: center; +} + +#toc > ul { + display: flex; + justify-content: center; + column-gap: calc(var(--space) * 2); + row-gap: calc(var(--space)); + flex-wrap: wrap; + padding-bottom: var(--space); +} + +.toclevel-1 { + flex-basis: 6em; +} + +.toclevel-1 > a { + font-size: 1.2em; + // font-weight: bold; + color: var(--black); + // background-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); +} + +.toclevel-2 > a { + color: var(--blue-6); + +} + +.toclevel-1 ul, .toclevel-1 { + display: flex; + flex-direction: column; + gap: calc(var(--space) / 2); + align-items: center; +} + +.toctext { + text-wrap: nowrap; + font-family: 'Libre Caslon'; +} + +a:has(> .toctext):hover { + color: var(--blue-4); +} + +#mw-content-text:has(> .mw-parser-output > #pagebody-header), .mw-parser-output:has(> #pagebody-header) { + display: grid; + grid-template-rows: subgrid; + grid-row: toc / bottomstart; +} + +@media (min-width: 1081px) { + +} + +@media (max-width: 1080px) { + .toctext { + font-size: 0.9em; + } + #toc > ul { + column-gap: calc(var(--space) / 2); + } + + .toclevel-1, .toclevel-1 ul { + row-gap: 0; + } + +} \ No newline at end of file diff --git a/resources/parts/portableinfobox.less b/resources/parts/portableinfobox.less new file mode 100644 index 0000000..58373b1 --- /dev/null +++ b/resources/parts/portableinfobox.less @@ -0,0 +1,57 @@ +.portable-infobox { + --pi-item-spacing: calc(var(--space)); + margin-left: var(--space); + color: var(--gold-7); +} + +.pi-title.pi-title, .pi-header.pi-header { + border-bottom: 2px solid; + border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30; + font-family: 'Libre Caslon'; + line-height: 1em; + padding-bottom: .5em; +} + +.pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{ + background: var(--white) border-box; +} + +.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { + border: none; +} + +.pi-data-label { + text-align: center; +} + +@media (min-width: 1081px) { + .portable-infobox { + margin-right: calc(var(--space) * 20 * -1); + } +} + +@media (min-width: 721px) { + .portable-infobox { + background: linear-gradient(80deg, var(--gold-3) 0%, var(--white) 40% 0%, var(--gold-1) 60%, transparent 80%); + // conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40%, var(--white) 44%, var(--gold-4) 50%) padding-box; + // background: var(--gold-4) + // background: conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40% 0%, var(--white) 44% 0%, var(--gold-4) 50%); + // background: conic-gradient( + // from 339deg at 20% -60%, + // var(--gold-3) 40%, var(--white) 47% 0%, var(--gold-2) 49%, + // var(--white) 51% 0%, var(--white) 51% 0%, var(--gold-3) 52%, + // var(--gold-3) 53%, var(--white) 54% 0%, var(--white) 55% 0%, var(--gold-3) 56%) + } +} + +@media (max-width: 720px) { + .portable-infobox { + background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%); + margin-left: 0; + margin-right: 0; + } + + .pi-title:first-child { + display: none; + } +} \ No newline at end of file diff --git a/resources/parts/site-footer.less b/resources/parts/site-footer.less new file mode 100644 index 0000000..cfd34d9 --- /dev/null +++ b/resources/parts/site-footer.less @@ -0,0 +1,63 @@ +#site-footer { + grid-row: bottomstart; + display: flex; + padding: var(--space); + align-items: center; + border-top: 2px solid var(--blue-7); +} + +#site-footer a:link { + color: var(--blue-7); +} + +#footerblock { + display: flex; + justify-content: space-between; + width: 100%; +} + +.footer-links { + display: flex; + gap: var(--space); + align-items: center; + font-size: calc(var(--space) * 1.5); +} + + + +@media (min-width: 1081px) { + #site-footer { + grid-column: pagestart / pageend; + + // border-left: 1px solid var(--blue-7); + // border-right: 1px solid var(--blue-7); + border-top-right-radius: var(--space); + border-top-left-radius: var(--space); + } + + #site-lastedit.layout-touch { + display: none; + } +} + +@media (max-width: 1080px) { + #site-footer { + gap: var(--space); + grid-column: 1; + flex-direction: column; + padding-bottom: calc(var(--space) * 4); + } +} + +@media (max-width: 720px) { + #site-footer { + + padding-bottom: calc(var(--space) * 6); + } + + #footerblock { + flex-direction: column; + align-items: center; + gap: var(--space); + } +} \ No newline at end of file diff --git a/resources/parts/site-header.less b/resources/parts/site-header.less new file mode 100644 index 0000000..062a715 --- /dev/null +++ b/resources/parts/site-header.less @@ -0,0 +1,162 @@ +#site-header { + display: grid; +} + +#site-header-marks a { + display: flex; + height: 100%; + max-width: 12em; +} + +#site-header-wordmark { + // Note that the wordmark's underline is drawn here, and is not a part of the SVG file. + border-bottom: 3px solid var(--black); + width: 100%; +} + +.searchButton { + position: absolute; + right: var(--space); + top: 50%; + transform: translate(0, -50%); + background: none; + border-left: 1px solid var(--white); + cursor: pointer; + padding: var(--space); +} + +#site-header-search-bar { + padding: var(--space); + height: 100%; + font-size: calc(var(--space) * 2); + border-bottom: 3px solid var(--black); + width: 100%; +} + +#site-header-search-bar::placeholder { + color: white; + font-weight: bold; + font-family: 'Libre Caslon'; +} + +#site-header-search-bar:focus::placeholder { + color: var(--blue-4); +} + +#site-header-search-bar:hover { + box-shadow: inset 0 0 6px 1px var(--blue-6), 0 0 3px .1px var(--blue-7); + border-top: 2px solid var(--blue-6); +} + +#site-header-search-bar:focus { + outline: 3px solid var(--blue-6); + background-color: var(--white); + background-image: linear-gradient(90deg, var(--white), var(--blue-1) 80%); + border-top: 2px solid var(--blue-7); + box-shadow: none; +} + +#site-header-search-bar:focus:hover { + box-shadow: inset 0 0 6px 1px var(--blue-5); +} + +#site-header-user { + position: relative; + margin-left: auto; +} + +#site-header-user button { + display: block; + height: calc(100% - 3px); + text-wrap: nowrap; + padding-left: var(--space); + padding-right: var(--space); + border-bottom: 3px solid var(--black); +} + +#site-header-user button:hover { + box-shadow: inset 0 0 3px 3px var(--blue-5); +} + +#site-header-user:focus-within button { + background-image: none; + background-color: var(--blue-4); + box-shadow: 0 0 2px .5px var(--blue-7); +} + +#site-header-user-links ul > .mw-list-item a { + color: var(--blue-7); +} + +@media (min-width: 1081px) { + + #site-header { + grid-column: navstart / -1; + grid-row: topstart; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + margin-top: var(--space); + } + + #site-header-search form { + height: 100%; + } + + #site-header-marks { + grid-column: 1; + grid-row: 1; + align-items: flex-start; + } + + + #site-header-marks { + grid-row: 1; + } + + #site-header-search, #site-header-search-bar { + grid-column: pagestart / menustart; + width: 100%; + position: relative; + overflow: visible; + } + + #site-header-user { + // margin-left: calc(var(--space) * 3); + grid-column: menustart / pageend; + } + +} + +@media (max-width: 1080px) { + + #site-header { + grid-column: 1; + grid-row: topstart / -1; + grid-template-columns: + [marks] auto + [menu] 1fr + ; + grid-template-rows: 3em auto; + row-gap: var(--space); + column-gap: var(--space); + margin: var(--space); + } + + + #site-header-search { + grid-column: marks / -1; + } + + #site-header-search form { + position: sticky; + align-self: flex-start; + top: var(--space); + z-index: 6; + } + + #site-header-search { + top: var(--space); + grid-row: 2; + } + +} \ No newline at end of file diff --git a/resources/parts/site-nav.less b/resources/parts/site-nav.less new file mode 100644 index 0000000..f66d795 --- /dev/null +++ b/resources/parts/site-nav.less @@ -0,0 +1,170 @@ +.site-nav-menu { + display: flex; + flex-direction: column; +} + +.site-nav-menu-links { + display: flex; + flex-direction: column; + gap: calc(var(--space) / 2); + padding: var(--space); + padding-top: calc(var(--space) - 2px); +} + +.site-nav-menu-links a, .site-nav-menu button{ + text-shadow: 0 0 2px var(--black); + font-weight: bold; + font-size: .9em; + font-family: 'Libre Caslon', serif; + color: var(--gold-1); +} + +.site-nav-menu button { + padding: calc(var(--space) / 2); + margin-left: var(--space); + margin-right: var(--space); + text-align: center; + box-sizing: border-box; + border-bottom: 1px solid var(--gold-1); +} + +.site-nav-menu-links a:hover { + color: var(--blue-2); +} + +.mw-list-item { + display: flex; + gap: calc(var(--space)); + overflow: clip; +} + +#site-lastedit.layout-mouse { + text-align: center; + font-size: .9em; + color: var(--blue-5); + padding-left: var(--space); + padding-right: var(--space); +} + +#site-nav-toc-title { + justify-content: center; +} + +#site-nav-wrapper { + width: 100%; +} + +#site-nav-wrapper > div { + display: flex; +} + +.nav-external:last-of-type { + display: none; +} + +@media (min-width: 1081px) { + + #site-nav-wrapper { + grid-column: navstart; + grid-row: pagebody / -1; + } + + #site-lastedit.layout-touch { + display: none; + } + + .site-nav-menu-links > li:not(#site-nav-toc-title):hover::before { + background-image: url(assets/cursor-right.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: bottom; + content: ''; + width: 1em; + flex-shrink: 0; + margin-right: -.3em; + } + + #site-nav-wrapper > div { + flex-direction: column; + gap: calc(var(--space) * 2); + height: 100%; + } + + .site-nav-menu button { + display: none; + } + + .site-nav-sticky { + position: sticky; + top: calc(var(--space)); + } + +} + +@media (max-width: 1080px) { + + #site-lastedit.layout-mouse { + display: none; + } + + #site-nav-wrapper .site-nav-menu { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + #site-nav-wrapper { + position: fixed; + bottom: 0; + z-index: 6; + } + + #site-nav-wrapper > div { + flex-direction: row-reverse; + height: fit-content; + justify-content: center; + gap: var(--space); + align-items: end; + } + + .site-nav-menu { + overflow-y: hidden; + } + + .site-nav-menu-links { + align-self: center; + align-items: center; + padding-top: calc(var(--space)); + } + + .site-nav-menu:not(:focus-within) { + height: calc(var(--space) * 3); + } + +} + +@media (max-width: 720px) { + + #site-nav-wrapper > div { + width: fit-content; + } + + #site-nav-wrapper { + overflow-x: scroll; + scroll-snap-type: x mandatory; + } + + .site-nav-menu:last-child { + margin-left: .6em; + } + + .site-nav-menu { + width: 90vw; + flex-shrink: 0; + scroll-snap-align: center; + } + + #site-nav-wrapper > div::before { + content: ''; + padding: 1px; + } +} \ No newline at end of file diff --git a/resources/parts/sitenotice.less b/resources/parts/sitenotice.less new file mode 100644 index 0000000..43fe9aa --- /dev/null +++ b/resources/parts/sitenotice.less @@ -0,0 +1,51 @@ +#localNotice { + // width: max-content; + box-shadow: inset 0 0 6px 12px white; + + background: var(--gold-2); +} + +.mw-dismissable-notice { + text-align: center; + position: relative; +} + +.mw-dismissable-notice-close { + position: absolute; + bottom: calc(var(--space) * 2); + right: calc(var(--space) * 2); +} + +.mw-dismissable-notice-body { + text-wrap: balance; +} + +@media (min-width: 1081px) { + .mw-dismissable-notice, #localNotice { + grid-row: sitenotice; + grid-column: pagestart / pageend; + margin-top: var(--space); + } + + #localNotice { + padding: 2.4em; + } +} + +@media (max-width: 1080px) { + #localNotice { + font-size: .9em; + padding: calc(var(--space) * 1.5); + } + + .mw-dismissable-notice { + padding-bottom: calc(var(--space) * 4); + grid-column: 1; + grid-row: sitenotice; + // margin-top: calc(var(--space) * 1); + } +} + +@media (max-width: 720px) { + +} \ No newline at end of file diff --git a/resources/skin.less b/resources/skin.less index b7d6a3f..54f4fd3 100644 --- a/resources/skin.less +++ b/resources/skin.less @@ -1,36 +1,91 @@ @import 'unset.less'; @import 'colors.less'; -@media (max-width: 1080px) { - @import 'layout-touch.less'; -} - -@media (min-width: 1081px) { - @import 'layout-mouse.less'; -} - -@import 'topbar.less'; -@import 'toc.less'; -@import 'navmenu.less'; - -@import 'mediawiki.skin.variables.less'; +@import 'parts/site-header.less'; +@import 'parts/site-nav.less'; +@import 'parts/site-footer.less'; +@import 'parts/page-header.less'; +@import 'parts/page-body.less'; +@import 'parts/page-toc.less'; +@import 'parts/portableinfobox.less'; +@import 'parts/sitenotice.less'; +@import 'parts/dropmenu.less'; @font-face { font-family: "Libre Caslon"; - src: url('/resources/assets/Libre_Caslon_Text/LibreCaslonText-Regular.ttf'); + src: url('assets/fonts/LibreCaslonText-Regular.ttf'); +} + +#grid { + margin-bottom: 0; + min-height: 100vh; +} + +@media (min-width: 1081px) { + #grid { + display: grid; + grid-template-columns: + [navstart] var(--sidebar-width) + // [navspacer] var(--navspace-width) + [pagestart] 1fr + [menustart] min-content + [pageend] calc(var(--sidebar-width)) + // [userend] + ; + grid-template-rows: + [topstart] 3.6em + [sitenotice] auto + [title] auto + [toc] auto + [pagebody] 1fr + [bottomstart] auto + ; + column-gap: 1vw; + height: 100%; + max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width)); + margin: auto; + padding-left: var(--space); + padding-right: var(--space); + } +} + +@media (max-width: 1080px) { + #grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: + [topstart] 7.8em + [sitenotice] auto + [title] auto + [toc] auto + [pagebody] 1fr + [bottomstart] auto + ; + // padding: var(--space); + padding-bottom: 0; + } +} + +@media (max-width: 720px) { + +} + +:root { + --sidebar-width: 12em; + --navspace-width: 1em; + --space: .6em; + --pi-width: 24em; } body { margin: 0; - background-image: linear-gradient(100deg, var(--blue-1), var(--white) 20%, var(--white)70%, var(--blue-1)) + background-image: linear-gradient(120deg, var(--blue-2), var(--white) 10vw); + background-repeat: no-repeat; + // min-height: 100vh; } body::selection { - background-color: var(--blue-5); -} - -:root { - --space: .6em; + background-color: var(--blue-4); } button { @@ -41,107 +96,75 @@ fieldset { margin-top: calc(var(--space) * 3); } -#title-views { - display: flex; - gap: var(--space); - align-items: center; -} - -#site-icon { - position: absolute; -} - -#page a:link { - color: var(--blue-6); -} - -#page a.new, #page a.new { - color: red; - text-decoration: underline wavy; -} - -#page a:not(.new):visited { - color: var(--pink-6); -} - -#page a:hover , #page a:visited:hover { - color: var(--blue-4); -} - -.pi-title { - background-color: var(--gold-4); -} - -#pagetitle { - position: relative; -} - -#firstHeading { - margin-bottom: .1em; - margin-top: auto; -} - -#firstHeading, .mw-heading h2 { - font-family: 'Libre Caslon', serif; - text-wrap: balance; -} - -.mw-heading { - display: flex; - margin-bottom: calc(var(--space)); -} - -main p { - margin-bottom: calc(var(--space) * 2); - line-height: calc(var(--space) * 3); -} - .mw-list-item.selected { display: none; } -#titleblock { - border-bottom: 3px solid var(--black); - // margin-bottom: calc(var(--space) * 2); - display: flex; - align-items: end; - justify-content: space-between; -} - -#pagetitle { - display: flex; - // align-items: center; -} - -#title-views { - margin-left: auto; - margin-bottom: calc(var(--space) / 2); -} - -#versions { - display: flex; - flex-wrap: wrap; - gap: var(--space); - margin-left: 2vw; -} - #t-print, #t-upload { display: none; } -#localNotice { - width: 100%; -} +// #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; -.sitenotice { - display: flex; - padding: calc(var(--space) * 3); - justify-content: center; - // background: linear-gradient(90deg, transparent, var(--blue-5) 20%, var(--blue-5) 70%, transparent); - color: var(--gold-1); +// 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; - background: linear-gradient(to top, #ffffffff 0%, #000000ff 20%, #000000ff 80%, #ffffffff 100%), linear-gradient(to right, #ffffffff 0%, #000000ff 20%, #000000ff 80%, #ffffffff 100%), linear-gradient(to top, #667fdaff 0% 100%, #0000ffff 100%);background-blend-mode: color-dodge; -} // border-style: solid; diff --git a/resources/toc.less b/resources/toc.less deleted file mode 100644 index 210fd0c..0000000 --- a/resources/toc.less +++ /dev/null @@ -1,37 +0,0 @@ -.tocnumber, .toctitle { - display: none; -} - -.toc { - margin-bottom: 1.2em; -} - -.toctitle > h2 { - text-align: center; -} - -.toc > ul { - display: flex; - justify-content: center; - gap: calc(var(--space) * 2); - flex-wrap: wrap; -} - -.toclevel-1 { - flex-basis: 6em; -} - -.toclevel-1 > a { - font-size: 1.2em; -} - -.toclevel-1 ul, .toclevel-1 { - display: flex; - flex-direction: column; - gap: 0; - align-items: center; -} - -.toctext { - text-wrap: nowrap; -} \ No newline at end of file diff --git a/resources/topbar.less b/resources/topbar.less deleted file mode 100644 index 9d31da5..0000000 --- a/resources/topbar.less +++ /dev/null @@ -1,115 +0,0 @@ -#topbar { - display: grid; -} - -#top-logo { - height: fit-content; - align-self: center; - width: 100%; -} - -#top-logo img{ - max-width: 100%; - max-height: calc(var(--space) * 4); -} - -.searchButton { - position: absolute; - right: var(--space); - top: 50%; - transform: translate(0, -50%); - border: none; - background: none; - border-left: 1px solid black; - cursor: pointer; - padding: var(--space); - box-sizing: border-box; -} - -#nav-search { - height: 100%; - justify-self: center; -} - -#nav-search-bar { - border-radius: calc(var(--space) / 2); - // background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1)); - // background-color: var(--blue-2); - background-color: var(--white); - border: 1px solid var(--black); - border-bottom: 3px solid var(--black); - font-size: calc(var(--space) *2); - padding: var(--space); - height: 100%; -} - -#nav-search-bar:hover { - box-shadow: inset 0 0 3px 3px var(--blue-3); -} - -#nav-search-bar:focus { - outline: 3px solid var(--blue-7); - box-shadow: inset 0 0 3px 3px var(--blue-3); - background-color: var(--white); - border-bottom: 3px inset var(--blue-7); - background-image: none; -} - -#nav-search form { - height: 100%; -} - -#user-menu-button, #page-menu-button { - border-bottom: 3px solid var(--blue-6); - border-width: 0 0 3px 0; -} - -#user-menu-button, #user-menu-list, #page-menu-button, #page-menu-list { - width: fit-content; - font-size: 1em; - overflow: clip; - text-overflow: ellipsis; - padding: var(--space); - background-color: var(--blue-2); - // border-radius: calc(var(--space) / 2 ); - // box-shadow: inset 0 0 3px 3px var(--blue-1); - color: var(--blue-7); -} - -#user-menu { - position: relative; -} - -#user-menu-button { - height: 100%; -} - -#page-menu-list, #user-menu-list { - position: absolute; - margin-top: calc(var(--space) / 2); - display: none; - z-index: 1; - // border-top: 3px solid var(--blue-6); - border-width: 3px 0 0 0; - box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1); -} - -#page-actions, #page-views, #user-links { - display: flex; - flex-direction: column; - width: max-content; - gap: var(--space); -} - -#user-menu:focus-within #user-menu-button, #page-menu:focus-within #page-menu-button { - background-color: var(--blue-3); - box-shadow: inset 0 0 3px 3px var(--blue-4), 0 0 2px .5px var(--blue-7); -} - -#user-menu:focus-within #user-menu-list, #page-menu:focus-within #page-menu-list { - display: flex; -} - -.page-link-list > .mw-list-item a { - color: var(--blue-7); -} \ No newline at end of file diff --git a/resources/unset.less b/resources/unset.less index c45e67c..bbe6ae9 100644 --- a/resources/unset.less +++ b/resources/unset.less @@ -10,6 +10,10 @@ h1, h2, h3, p, ul, input { // font-weight: unset; } +button { + all: unset; +} + summary { list-style: none; } @@ -30,12 +34,14 @@ summary { :is(.portable-infobox *) { background-color: unset; - border-style: none; - border-color: unset; padding: unset; --pi-secondary-background: none; } +.pi-group, .pi-data { + border: unset; +} + .mw-body-content::after { content: unset; } @@ -45,4 +51,8 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; +} + +.mw-dismissable-notice-body.mw-dismissable-notice-body { + margin: 0; } \ No newline at end of file diff --git a/resources/variables.less b/resources/variables.less deleted file mode 100644 index 9f03a81..0000000 --- a/resources/variables.less +++ /dev/null @@ -1 +0,0 @@ -@cdx-icon-full-screen: 150px; \ No newline at end of file diff --git a/skin.json b/skin.json index 722415e..42ea679 100644 --- a/skin.json +++ b/skin.json @@ -9,7 +9,7 @@ "namemsg": "skinname-crystal", "type": "skin", "requires": { - "MediaWiki": ">= 1.45.0" + "MediaWiki": ">= 1.44.0" }, "ValidSkinNames": { "crystal": { @@ -18,20 +18,14 @@ { "name": "crystal", "responsive": true, + "supportsMwHeading": true, "toc": true, - "messages": [ - "crystal-no-categories", - "otherlanguages", - "sitetitle", - "search", - "tagline" - ], "styles": [ "codex-styles", "skins.crystal.styles" ], "scripts": [ - "skin.crystal.js" + "skins.crystal.js" ] } ] @@ -47,12 +41,7 @@ "class": "MediaWiki\\ResourceLoader\\SkinModule", "features": { "normalize": false, - "elements": false, - "content-tables": true, "content-links": true, - "content-media": true, - "content-links-external": false, - "interface-category": true, "toc": false }, "targets": [ @@ -64,9 +53,16 @@ ] }, "skins.crystal.js": { - "scripts": [ - "resources/main.js" - ] + "packageFiles": [ + "resources/main.js" + ], + "messages": [ + "login", + "sitetitle", + "print", + "lastmodifiedatby", + "toc" + ] } }, "ResourceFileModulePaths": { diff --git a/templates/page-header.mustache b/templates/page-header.mustache new file mode 100644 index 0000000..9f9ef86 --- /dev/null +++ b/templates/page-header.mustache @@ -0,0 +1,54 @@ +{{! This header includes the page's title, version swap buttons, as well as page views and options.}} + +
+ +
+
+ {{{html-title-heading}}} +
+ {{#array-indicators}} + +
{{{html}}}
+ + {{/array-indicators}} +
+
+ +
+ +
+ +
+
    + {{#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. }} +
  • + Print {{! This link's content is a placeholder, replaced with a system message via Javascript.}} +
    • +
+
    + {{#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}} +
+
+
+ + + +
+ +
\ No newline at end of file diff --git a/templates/sidebar-page.mustache b/templates/sidebar-page.mustache deleted file mode 100644 index 76c5c00..0000000 --- a/templates/sidebar-page.mustache +++ /dev/null @@ -1,29 +0,0 @@ - -
- - -
\ No newline at end of file diff --git a/templates/site-footer.mustache b/templates/site-footer.mustache new file mode 100644 index 0000000..652737d --- /dev/null +++ b/templates/site-footer.mustache @@ -0,0 +1,27 @@ + {{! This footer has a few project links and icons, as well as the 'last edit' system message when in touch layout.}} + + \ No newline at end of file diff --git a/templates/site-header.mustache b/templates/site-header.mustache new file mode 100644 index 0000000..349ed7f --- /dev/null +++ b/templates/site-header.mustache @@ -0,0 +1,33 @@ +{{! The header includes the site's logo, wordmark, search bar and user menu. }} + + \ No newline at end of file diff --git a/templates/site-nav.mustache b/templates/site-nav.mustache new file mode 100644 index 0000000..f6cae65 --- /dev/null +++ b/templates/site-nav.mustache @@ -0,0 +1,61 @@ +{{! The nav section appears as a sidebar in the mouse layout, and tabs along the bottom of the screen in the touch layout. }} + + \ No newline at end of file diff --git a/templates/skin.mustache b/templates/skin.mustache index 6d1cc2e..43db58e 100644 --- a/templates/skin.mustache +++ b/templates/skin.mustache @@ -2,191 +2,20 @@
-
- - - -
- {{#data-portlets}} - {{#data-user-menu}} - {{#array-items.0.array-links.0}} - - {{/array-items.0.array-links.0}} -
- -
- {{/data-user-menu}} - {{/data-portlets}} -
-
- {{>sidebar-page}} -
-
- -
-
    - {{#data-portlets}} - {{#data-actions}} - {{{html-items}}} - {{/data-actions}} - {{/data-portlets}} -
  • - - Print - -
    • -
-
    - {{#data-portlets}} - {{#data-views}} - {{#array-items.2}} - {{{html-item}}} - {{/array-items.2}} - {{/data-views}} - {{/data-portlets}} - {{#data-portlets-sidebar}} - {{#array-portlets-rest.1}} - {{{html-items}}} - {{/array-portlets-rest.1}} - {{/data-portlets-sidebar}} -
-
-
-
+ {{>site-header}} {{{html-site-notice}}} - + {{>site-nav}}
-
-
-
- {{{html-title-heading}}} -
- {{#array-indicators}} - -
{{{html}}}
- - {{/array-indicators}} -
-
+ + {{>page-header}} -
    - {{#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}} -
-
- - {{{html-body-content}}} + {{{html-body-content}}}
- + {{>site-footer}}
\ No newline at end of file