diff --git a/resources/layout-mouse.less b/resources/layout-mouse.less index 77cceac..e0bcbcb 100644 --- a/resources/layout-mouse.less +++ b/resources/layout-mouse.less @@ -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; } \ No newline at end of file diff --git a/resources/layout-touch.less b/resources/layout-touch.less index bf5f847..458f220 100644 --- a/resources/layout-touch.less +++ b/resources/layout-touch.less @@ -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; + } } \ No newline at end of file diff --git a/resources/main.js b/resources/main.js new file mode 100644 index 0000000..7b60af5 --- /dev/null +++ b/resources/main.js @@ -0,0 +1 @@ +$(document).ready(console.log("page is fully loaded")); \ No newline at end of file diff --git a/resources/skin.js b/resources/skin.js deleted file mode 100644 index 1f21dd5..0000000 --- a/resources/skin.js +++ /dev/null @@ -1,6 +0,0 @@ -var divs = document.getElementById("pagebody-header"); -console.log("divs") - -window.onload = (event) => { - console.log("page is fully loaded"); -}; \ No newline at end of file diff --git a/resources/skin.less b/resources/skin.less index 9d44a47..73a284b 100644 --- a/resources/skin.less +++ b/resources/skin.less @@ -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; -} \ No newline at end of file +// #bottombar { +// background-color: pink; +// } \ No newline at end of file diff --git a/resources/toc.less b/resources/toc.less new file mode 100644 index 0000000..ccd02da --- /dev/null +++ b/resources/toc.less @@ -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; +} \ No newline at end of file diff --git a/resources/topbar.less b/resources/topbar.less new file mode 100644 index 0000000..c4f6135 --- /dev/null +++ b/resources/topbar.less @@ -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; +} \ No newline at end of file diff --git a/resources/unset.less b/resources/unset.less new file mode 100644 index 0000000..bb068a0 --- /dev/null +++ b/resources/unset.less @@ -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; +} \ No newline at end of file diff --git a/skin.json b/skin.json index 7f3e2db..722415e 100644 --- a/skin.json +++ b/skin.json @@ -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 -} +} \ No newline at end of file diff --git a/templates/sidebar-page.mustache b/templates/sidebar-page.mustache new file mode 100644 index 0000000..b921d32 --- /dev/null +++ b/templates/sidebar-page.mustache @@ -0,0 +1,64 @@ +
+
+ + +
+ + Page Views + +
    + {{#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}} +
+
+ +
+ + Page Actions + +
    + {{#data-portlets}} + {{#data-actions}} + {{{html-items}}} + {{/data-actions}} + {{/data-portlets}} +
  • + + Print + +
    • +
+
+
+
\ No newline at end of file diff --git a/templates/skin.mustache b/templates/skin.mustache index 08b6da3..1db97af 100644 --- a/templates/skin.mustache +++ b/templates/skin.mustache @@ -1,59 +1,93 @@
- {{#data-portlets}} - {{#data-user-menu}} - {{{html-items}}} - {{/data-user-menu}} - {{/data-portlets}} + +
+ {{#data-portlets}} + {{#data-user-menu}} + {{#array-items.0.array-links.0}} + + {{/array-items.0.array-links.0}} +
+ {{{html-items}}} +
+ {{/data-user-menu}} + {{/data-portlets}} +
- + {{>sidebar-page}}
{{{html-title-heading}}}
-
+
+ {{#array-indicators}} + +
{{{html}}}
+ + {{/array-indicators}} +
- {{{html-body-content}}} + {{{html-body-content}}}
- +
\ No newline at end of file