diff --git a/resources/layout-mouse.less b/resources/layout-mouse.less new file mode 100644 index 0000000..77cceac --- /dev/null +++ b/resources/layout-mouse.less @@ -0,0 +1,80 @@ +:root { + --sidebar-width: calc(3em + 9vw); +} + +#grid { + display: grid; + grid-template-columns: var(--sidebar-width) auto var(--sidebar-width); + grid-template-rows: + [topstart] auto + [title] auto + [pageheader] auto + [pagebody] auto + [bottomstart] auto + ; + column-gap: .6em; + height: 100%; + max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width)); + margin: auto; + padding-left: .6em; + padding-right: .6em; +} + +#topbar { + grid-column: 2; + grid-row: topstart ; +} + +#sidebar-nav { + grid-column: 1; + grid-row: pagebody / -1; +} + +.nav-menu { + max-width: 12em; + margin: auto; + position: sticky; + top: 1.2em; +} + +#sidebar-pageview { + grid-column: 3; + grid-row: pagebody / -1; +} + +.sidebar-pageview-menu { + width: 4em; +} + +#page { + grid-column: 2; + grid-row: title / bottomstart ; + display: grid; + grid-template-rows: subgrid; + grid-template-columns: subgrid; +} + +#titleblock { + grid-column: 1; + grid-row: title; +} + +#mw-content-text { + grid-column: 1; + grid-row: pagebody / bottomstart; +} + +#pagebody { + grid-row: pagebody +} + +#mw-content-text:has(> .mw-parser-output), .mw-parser-output { + display: grid; + grid-template-rows: subgrid; + grid-row: pageheader / bottomstart; +} + +#bottombar { + grid-column: 2; + grid-row: bottomstart; +} \ No newline at end of file diff --git a/resources/layout-touch.less b/resources/layout-touch.less new file mode 100644 index 0000000..bf5f847 --- /dev/null +++ b/resources/layout-touch.less @@ -0,0 +1,46 @@ +:root { + --touch-whitespace: calc(18vw - 132px); +} + +#grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 12em 12em 12em auto 12em; + padding-left: var(--touch-whitespace); + padding-right: var(--touch-whitespace); +} + +#topbar { + grid-row: 1; +} + +#sidebar-nav { + position: fixed; + bottom: 0; + left: 50%; + width: 50px; + height: 50px; +} + +#sidebar-pageview { + grid-row: 2; +} + +#page { + grid-row: 3 / 5; + display: grid; + grid-template-rows: subgrid; + grid-template-columns: subgrid; +} + +#titleblock { + grid-row: 1; +} + +#pagebody { + grid-row: 2; +} + +#bottombar { + grid-row: 5; +} \ No newline at end of file diff --git a/resources/skin.js b/resources/skin.js index e69de29..1f21dd5 100644 --- a/resources/skin.js +++ b/resources/skin.js @@ -0,0 +1,6 @@ +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 e69de29..9d44a47 100644 --- a/resources/skin.less +++ b/resources/skin.less @@ -0,0 +1,88 @@ +@media (max-width: 1080px) { + @import 'layout-touch.less'; +} + +@media (min-width: 1081px) { + @import 'layout-mouse.less'; +} + + + + +.mediawiki { + +} + +#topbar { + background-color: yellow; + +} + +#sidebar-nav { + +} + + +.nav-menu { + display: flex; + flex-direction: column; + align-items: center; + + gap: .6em; +} + +.nav-links { + background-color: blue; +} + +.mw-list-item a, .mw-list-item a { + color: white; +} + +#sidebar-pageview { + +} + +.sidebar-pageview-menu { + background-color: purple; +} + +#titleblock, #pagebody-header { + background-color: green; +} + +#mw-content-text { + background-color: red; +} + +#bottombar { + background-color: pink; +} + + + + +li { + list-style: none; +} + +a { + color: unset; +} + +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 diff --git a/skin.json b/skin.json index f535359..7f3e2db 100644 --- a/skin.json +++ b/skin.json @@ -30,7 +30,9 @@ "codex-styles", "skins.crystal.styles" ], - "scripts": [] + "scripts": [ + "skin.js" + ] } ] } diff --git a/templates/skin.mustache b/templates/skin.mustache index e69de29..08b6da3 100644 --- a/templates/skin.mustache +++ b/templates/skin.mustache @@ -0,0 +1,59 @@ +
+ +
+ {{#data-portlets}} + {{#data-user-menu}} + {{{html-items}}} + {{/data-user-menu}} + {{/data-portlets}} + +
+ + + + + +
+
+
+ {{{html-title-heading}}} +
+
+
+ + {{{html-body-content}}} + +
+ + + +
\ No newline at end of file