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

layout is ready

Browse Source
This commit is contained in:
Effie 2025-10-05 22:55:42 +11:00
parent 7bed23687f
commit 04bc6176df
11 changed files with 421 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/layout-mouse.less
View File

@ -12,38 +12,55 @@
[pagebody] auto
[bottomstart] auto
;
column-gap: .6em;
column-gap: var(--space);
height: 100%;
max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
margin: auto;
padding-left: .6em;
padding-right: .6em;
padding-left: calc(var(--space) * 2);
padding-right: calc(var(--space) * 2);
}
#topbar {
grid-column: 2;
grid-row: topstart ;
margin-bottom: calc(var(--space) * 6);
}
#versions {
align-items: center;
}
#sidebar-nav {
grid-column: 1;
grid-row: pagebody / -1;
display: flex;
flex-direction: column;
gap: calc(var(--space) * 2);
}
.mw-heading {
align-items: baseline;
justify-content: space-between;
}
.nav-menu {
max-width: 12em;
margin: auto;
position: sticky;
top: 1.2em;
}
#sidebar-pageview {
.nav-sticky {
position: sticky;
top: calc(var(--space) * 2);
}
#sidebar-page {
grid-column: 3;
grid-row: pagebody / -1;
}
.sidebar-pageview-menu {
width: 4em;
.sidebar-page-menu {
display: flex;
flex-direction: column;
gap: calc(var(--space) * 2);
}
#page {
@ -57,6 +74,8 @@
#titleblock {
grid-column: 1;
grid-row: title;
display: flex;
justify-content: space-between;
}
#mw-content-text {
@ -68,13 +87,15 @@
grid-row: pagebody
}
#mw-content-text:has(> .mw-parser-output), .mw-parser-output {
#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: 2;
grid-column: 2 / 3;
grid-row: bottomstart;
bottom: 0;
height: 6em;
}

77
resources/layout-touch.less
View File

@ -5,13 +5,31 @@
#grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 12em 12em 12em auto 12em;
grid-template-rows: auto;
padding-left: var(--touch-whitespace);
padding-right: var(--touch-whitespace);
}
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-row: 1;
margin-bottom: calc(var(--space));
}
#sidebar-nav {
@ -22,10 +40,34 @@
height: 50px;
}
#sidebar-pageview {
#sidebar-page {
grid-row: 2;
}
.sidebar-page-menu {
display: flex;
justify-content: space-between;
}
.sidebar-page-menu > * {
flex-basis: 12em;
margin-bottom: calc(var(--space) * 2);
margin: calc(var(--space));
}
.sidebar-page-menu > .page-link-list {
display: flex;
gap: var(--space);
margin-bottom: auto;
}
details.page-links {
display: flex;
flex-direction: column;
text-align: center;
}
#page {
grid-row: 3 / 5;
display: grid;
@ -33,8 +75,31 @@
grid-template-columns: subgrid;
}
// #titleblock {
// grid-row: 1;
// padding: var(--space);
// display: grid;
// grid-template-columns: 1fr auto 1fr;
// align-items: end;
// }
// #pagetitle {
// grid-column: 2;
// text-align: center;
// }
// #versions {
// grid-column: 3;
// justify-content: flex-end;
// align-items: baseline;
// }
#titleblock {
grid-row: 1;
display: flex;
flex-direction: column-reverse;
align-items: center;
margin-left: var(--space);
margin-right: var(--space);
}
#pagebody {
@ -43,4 +108,10 @@
#bottombar {
grid-row: 5;
}
@media (max-width: 720px) {
.pi-title:first-child {
display: none;
}
}

1
resources/main.js Normal file
View File

@ -0,0 +1 @@
$(document).ready(console.log("page is fully loaded"));

6
resources/skin.js
View File

@ -1,6 +0,0 @@
var divs = document.getElementById("pagebody-header");
console.log("divs")
window.onload = (event) => {
console.log("page is fully loaded");
};

121
resources/skin.less
View File

@ -1,3 +1,5 @@
@import 'unset.less';
@media (max-width: 1080px) {
@import 'layout-touch.less';
}
@ -6,83 +8,106 @@
@import 'layout-mouse.less';
}
@import 'topbar.less';
@import 'toc.less';
@import 'mediawiki.skin.variables.less';
.mediawiki {
@font-face {
font-family: "Libre Caslon";
src: url('/resources/assets/Libre_Caslon_Text/LibreCaslonText-Regular.ttf');
}
#topbar {
background-color: yellow;
:root {
--space: .6em;
}
#sidebar-nav {
body {
margin: 0;
}
#firstHeading {
margin-bottom: .1em;
margin-top: auto;
}
#firstHeading, .mw-heading h2 {
font-family: 'Libre Caslon', serif;
}
.mw-heading {
display: flex;
margin-bottom: calc(var(--space));
}
p {
margin-bottom: calc(var(--space) * 2);
line-height: calc(var(--space) * 3);
}
.nav-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: .6em;
align-items: flex-start;
gap: var(--space);
}
.nav-links {
background-color: blue;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mw-list-item a, .mw-list-item a {
color: white;
.nav-toc {
position: sticky;
top: calc(var(--space) * 2);
}
#sidebar-pageview {
.mw-list-item.selected {
display: none;
}
.sidebar-pageview-menu {
background-color: purple;
#titleblock {
border-bottom: 3px solid black;
margin-bottom: calc(var(--space) * 2);
}
#titleblock, #pagebody-header {
background-color: green;
#versions {
display: flex;
flex-wrap: wrap;
gap: var(--space);
}
#mw-content-text {
background-color: red;
#t-print, #t-upload {
display: none;
}
#bottombar {
background-color: pink;
}
// #topbar {
// background-color: yellow;
// }
// .nav-links {
// background-color: blue;
// }
// .mw-list-item a, .mw-list-item a {
// color: white;
// }
// .sidebar-page-menu {
// background-color: purple;
// }
// #titleblock, #pagebody-header {
// background-color: green;
// }
li {
list-style: none;
}
a {
color: unset;
}
// #mw-content-text {
// background-color: red;
// }
h1 {
margin: unset;
border: unset;
font-size: unset;
font-weight: unset;
}
h2 {
margin: unset;
border: unset;
padding: 0;
}
p {
margin: unset;
}
// #bottombar {
// background-color: pink;
// }

37
resources/toc.less Normal file
View File

@ -0,0 +1,37 @@
.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: calc(var(--space) * 2);
}
.toclevel-1 ul, .toclevel-1 {
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
}
.toctext {
text-wrap: nowrap;
}

23
resources/topbar.less Normal file
View File

@ -0,0 +1,23 @@
#topbar {
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
display: flex;
justify-content: space-between;
}
#user-menu-list {
display: none;
flex-direction: column;
position: absolute;
background: white;
}
#user-menu {
width: 6em;
}
#user-menu:focus-within #user-menu-list {
display: flex;
}

45
resources/unset.less Normal file
View File

@ -0,0 +1,45 @@
li {
list-style: none;
}
a {
color: unset;
}
h1, h2, h3, p, ul {
margin: unset;
border: unset;
padding: unset;
// font-size: unset;
// font-weight: unset;
}
summary {
list-style: none;
}
#preferences .mw-htmlform-submit-buttons {
position: unset;
margin: unset;
padding: unset;
border-top: unset;
box-shadow: unset;
}
.portable-infobox {
background: unset;
padding: unset;
margin: unset;
}
:is(.portable-infobox *) {
background-color: unset;
border-style: none;
border-color: unset;
padding: unset;
--pi-secondary-background: none;
}
.mw-body-content::after {
content: unset;
}

20
skin.json
View File

@ -2,14 +2,14 @@
"name": "Crystal",
"version": "1.0.0",
"author": [
"[https://skins.wmflabs.org skins.wmflabs.org v.3.0]"
"Esby"
],
"url": "https://www.mediawiki.org/wiki/Skin:Crystal",
"descriptionmsg": "crystal-skin-desc",
"namemsg": "skinname-crystal",
"type": "skin",
"requires": {
"MediaWiki": ">= 1.41.0"
"MediaWiki": ">= 1.45.0"
},
"ValidSkinNames": {
"crystal": {
@ -31,7 +31,7 @@
"skins.crystal.styles"
],
"scripts": [
"skin.js"
"skin.crystal.js"
]
}
]
@ -46,15 +46,14 @@
"skins.crystal.styles": {
"class": "MediaWiki\\ResourceLoader\\SkinModule",
"features": {
"normalize": true,
"elements": true,
"normalize": false,
"elements": false,
"content-tables": true,
"content-links": true,
"content-media": true,
"content-links-external": false,
"interface-message-box": true,
"interface-category": true,
"toc": true
"toc": false
},
"targets": [
"desktop",
@ -63,6 +62,11 @@
"styles": [
"resources/skin.less"
]
},
"skins.crystal.js": {
"scripts": [
"resources/main.js"
]
}
},
"ResourceFileModulePaths": {
@ -71,4 +75,4 @@
},
"ResourceModuleSkinStyles": {},
"manifest_version": 2
}
}

64
templates/sidebar-page.mustache Normal file
View File

@ -0,0 +1,64 @@
<div id="sidebar-page">
<div class="sidebar-page-menu">
<ul class="page-link-list">
{{#data-portlets}}
{{#data-views}}
{{#array-items.0}}
{{{html-item}}}
{{/array-items.0}}
{{#array-items.1}}
{{{html-item}}}
{{/array-items.1}}
{{/data-views}}
{{#data-associated-pages}}
{{#array-items.1}}
{{{html-item}}}
{{/array-items.1}}
{{/data-associated-pages}}
{{/data-portlets}}
</ul>
<details id="page-views" class="page-links">
<summary class="page-menu-heading">
Page Views
</summary>
<ul class="#page-link-list">
{{#data-portlets}}
{{#data-associated-pages}}
{{#array-items.0}}
{{{html-item}}}
{{/array-items.0}}
{{/data-associated-pages}}
{{#data-views}}
{{#array-items.2}}
{{{html-item}}}
{{/array-items.2}}
{{/data-views}}
{{/data-portlets}}
{{#data-portlets-sidebar}}
{{#array-portlets-rest.1}}
{{{html-items}}}
{{/array-portlets-rest.1}}
{{/data-portlets-sidebar}}
</ul>
</details>
<details id="page-actions" class="page-links">
<summary class="page-menu-heading">
Page Actions
</summary>
<ul class="page-link-list mw-collapsible mw-collapsed">
{{#data-portlets}}
{{#data-actions}}
{{{html-items}}}
{{/data-actions}}
{{/data-portlets}}
<li id="page-action-print" class="mw-list-item">
<a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">
Print
</a>
</li>
</ul>
</details>
</div>
</div>

86
templates/skin.mustache
View File

@ -1,59 +1,93 @@
<div id="grid">
<header id="topbar">
{{#data-portlets}}
{{#data-user-menu}}
{{{html-items}}}
{{/data-user-menu}}
{{/data-portlets}}
<div id="top-logo">
Phial Fantasy
</div>
<div id="nav-search">
{{#data-search-box}}
{{{html-input}}}
{{/data-search-box}}
</div>
<div id="user-menu">
{{#data-portlets}}
{{#data-user-menu}}
{{#array-items.0.array-links.0}}
<button id="user-menu-name">
{{{text}}}
</button>
{{/array-items.0.array-links.0}}
<div id="user-menu-list">
{{{html-items}}}
</div>
{{/data-user-menu}}
{{/data-portlets}}
</div>
</header>
<div id="sidebar-nav">
<nav class="nav-menu">
<div class="nav-links">
<nav class="nav-menu">
<ul class="site-links">
{{#data-portlets-sidebar}}
{{#data-portlets-first}}
{{{html-items}}}
{{/data-portlets-first}}
{{/data-portlets-sidebar}}
</div>
</ul>
</nav>
<div class="nav-menu">
<ul class="site-links">
{{#data-portlets-sidebar.array-portlets-rest.0}}
{{{html-items}}}
{{/data-portlets-sidebar.array-portlets-rest.0}}
</ul>
</div>
<div class="nav-menu nav-toc">
<ul class="site-links">
<li class="nav-backtotop">
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" >Back to Top</a>
</li>
{{#data-toc}}
{{#array-sections}}
<li class="nav-toclevel{{{toclevel}}}">
{{{line}}}
</li>
{{/array-sections}}
{{/data-toc}}
</ul>
</div>
</div>
<div id="sidebar-pageview">
<nav class="sidebar-pageview-menu">
{{#data-portlets}}
{{#data-views}}
{{{html-items}}}
{{/data-views}}
{{#data-associated-pages}}
{{{html-items}}}
{{/data-associated-pages}}
{{#data-actions}}
{{{html-items}}}
{{/data-actions}}
{{/data-portlets}}
</nav>
</div>
{{>sidebar-page}}
<main id="page">
<div id="titleblock">
<div id="pagetitle">
{{{html-title-heading}}}
</div>
<div id="categories"></div>
<div id="versions">
{{#array-indicators}}
<a href="?{{{id}}}">
<div id="{{{id}}}">{{{html}}}</div>
</a>
{{/array-indicators}}
</div>
</div>
{{{html-body-content}}}
{{{html-body-content}}}
</main>
<footer id="bottombar"></footer>
<footer id="bottombar">
{{#data-footer.data-icons.array-items}}
{{{html}}}
{{/data-footer.data-icons.array-items}}
</footer>
</div>