layout is ready

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

View File

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

View File

@ -5,13 +5,31 @@
#grid { #grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 12em 12em 12em auto 12em; grid-template-rows: auto;
padding-left: var(--touch-whitespace); padding-left: var(--touch-whitespace);
padding-right: 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 { #topbar {
grid-row: 1; grid-row: 1;
margin-bottom: calc(var(--space));
} }
#sidebar-nav { #sidebar-nav {
@ -22,10 +40,34 @@
height: 50px; height: 50px;
} }
#sidebar-pageview { #sidebar-page {
grid-row: 2; 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 { #page {
grid-row: 3 / 5; grid-row: 3 / 5;
display: grid; display: grid;
@ -33,8 +75,31 @@
grid-template-columns: subgrid; 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 { #titleblock {
grid-row: 1; display: flex;
flex-direction: column-reverse;
align-items: center;
margin-left: var(--space);
margin-right: var(--space);
} }
#pagebody { #pagebody {
@ -43,4 +108,10 @@
#bottombar { #bottombar {
grid-row: 5; 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"));

View File

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

View File

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

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;
}

View File

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

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>

View File

@ -1,59 +1,93 @@
<div id="grid"> <div id="grid">
<header id="topbar"> <header id="topbar">
{{#data-portlets}} <div id="top-logo">
{{#data-user-menu}} Phial Fantasy
{{{html-items}}} </div>
{{/data-user-menu}}
{{/data-portlets}}
<div id="nav-search"> <div id="nav-search">
{{#data-search-box}} {{#data-search-box}}
{{{html-input}}} {{{html-input}}}
{{/data-search-box}} {{/data-search-box}}
</div> </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> </header>
<div id="sidebar-nav"> <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-sidebar}}
{{#data-portlets-first}} {{#data-portlets-first}}
{{{html-items}}} {{{html-items}}}
{{/data-portlets-first}} {{/data-portlets-first}}
{{/data-portlets-sidebar}} {{/data-portlets-sidebar}}
</div> </ul>
</nav> </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>
<div id="sidebar-pageview"> {{>sidebar-page}}
<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>
<main id="page"> <main id="page">
<div id="titleblock"> <div id="titleblock">
<div id="pagetitle"> <div id="pagetitle">
{{{html-title-heading}}} {{{html-title-heading}}}
</div> </div>
<div id="categories"></div> <div id="versions">
{{#array-indicators}}
<a href="?{{{id}}}">
<div id="{{{id}}}">{{{html}}}</div>
</a>
{{/array-indicators}}
</div>
</div> </div>
{{{html-body-content}}} {{{html-body-content}}}
</main> </main>
<footer id="bottombar"></footer> <footer id="bottombar">
{{#data-footer.data-icons.array-items}}
{{{html}}}
{{/data-footer.data-icons.array-items}}
</footer>
</div> </div>