Menu colors, non-page text styling, more layout work

This commit is contained in:
Effie 2025-10-07 02:19:36 +11:00
parent 04bc6176df
commit 1996cd40b7
10 changed files with 493 additions and 204 deletions

23
resources/colors.less Normal file
View File

@ -0,0 +1,23 @@
:root {
--blue-1: oklch(0.96 0.02 270);
--blue-2: oklch(0.92 0.04 270);
--blue-3: oklch(0.79 0.11 270);
--blue-4: oklch(0.71 0.16 270);
--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-2: oklch(0.92 0.04 90);
--gold-3: oklch(0.79 0.11 90);
--gold-4: oklch(0.71 0.16 90);
--gold-5: oklch(0.61 0.14 90);
--gold-6: oklch(0.41 0.1 90);
--gold-7: oklch(0.3 0.07 90);
--pink-1: oklch(0.97 0.02 330);
--pink-2: oklch(0.92 0.04 330);
--pink-3: oklch(0.8 0.11 330);
--pink-4: oklch(0.73 0.16 330);
--pink-5: oklch(0.63 0.14 330);
--pink-6: oklch(0.42 0.1 330);
--pink-7: oklch(0.31 0.07 330);
}

View File

@ -1,5 +1,5 @@
:root {
--sidebar-width: calc(3em + 9vw);
--sidebar-width: calc(4.2em + 9vw);
}
#grid {
@ -20,10 +20,19 @@
padding-right: calc(var(--space) * 2);
}
#page {
margin-top: calc(var(--space) * 6);
}
#topbar {
column-gap: var(--space);
grid-column: 2;
grid-row: topstart ;
margin-bottom: calc(var(--space) * 6);
grid-template-columns: 1fr 4fr 1fr;
}
#nav-search, #nav-search-bar {
width: 100%;
}
#versions {
@ -36,6 +45,20 @@
display: flex;
flex-direction: column;
gap: calc(var(--space) * 2);
width: calc(var(--space) * 18);
}
.nav-menu {
border-radius: var(--space);
margin-right: var(--space);
}
.nav-show {
display: none;
}
.mw-list-item {
display: flex;
}
.mw-heading {
@ -43,26 +66,34 @@
justify-content: space-between;
}
.nav-menu {
max-width: 12em;
}
.nav-sticky {
position: sticky;
top: calc(var(--space) * 2);
}
#sidebar-page {
grid-column: 3;
grid-row: pagebody / -1;
.site-links > a:not(.nav-backtotop):hover::before, #nav-toc > .site-links > li:hover::before {
content: '☞';
color: var(--gold-1);
}
.sidebar-page-menu {
.page-link-list {
display: flex;
flex-direction: column;
gap: calc(var(--space) / 2);
}
#sidebar-page-mouse {
grid-column: 3;
grid-row: pagebody / -1;
display: flex;
flex-direction: column;
gap: calc(var(--space) * 2);
}
#sidebar-page-touch {
display: none;
}
#page {
grid-column: 2;
grid-row: title / bottomstart ;
@ -74,8 +105,6 @@
#titleblock {
grid-column: 1;
grid-row: title;
display: flex;
justify-content: space-between;
}
#mw-content-text {

View File

@ -29,37 +29,117 @@ p {
#topbar {
grid-row: 1;
margin-bottom: calc(var(--space));
grid-template-columns: 1fr 1fr;
margin-left: var(--space);
margin-right: var(--space);
}
#top-logo {
grid-column: 1;
}
#user-menu {
grid-column: 2;
}
#nav-search {
grid-column: 1 / 3;
grid-row: 2;
width: 100%;
}
#nav-search-bar {
width: 100%;
}
#sidebar-nav {
grid-row: -1;
position: fixed;
bottom: 0;
left: 50%;
width: 50px;
height: 50px;
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-x: scroll;
overflow-y: hidden;
padding-top: 1em;
margin-top: -1em;
}
#sidebar-page {
grid-row: 2;
.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-touch {
width: 100%;
height: fit-content;
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: calc(var(--space) * 3);
justify-items: center;
}
#sidebar-page-mouse {
display: none;
}
.sidebar-page-menu {
display: flex;
justify-content: space-between;
text-align: center;
}
.sidebar-page-menu > * {
flex-basis: 12em;
margin-bottom: calc(var(--space) * 2);
margin: calc(var(--space));
#page-main {
grid-row: 2;
grid-column: 1 / 3;
}
.sidebar-page-menu > .page-link-list {
#page-main .page-link-list {
display: flex;
gap: var(--space);
margin-bottom: auto;
}
#page-main .page-link-list li {
text-align: center;
}
.page-view-details .page-link-list {
display: flex;
flex-direction: column;
align-items: center;
}
.site-links {
border-top: 1px solid white;
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;
}
.page-link-list {
font-size: .9em;
}
details.page-links {
@ -75,25 +155,23 @@ details.page-links {
grid-template-columns: subgrid;
}
// #titleblock {
// grid-row: 1;
// padding: var(--space);
// display: grid;
// grid-template-columns: 1fr auto 1fr;
// align-items: end;
// }
#pagebody {
grid-row: 2;
}
// #pagetitle {
// grid-column: 2;
// text-align: center;
// }
#bottombar {
grid-row: 5;
margin-bottom: calc(var(--space) * 5);
}
// #versions {
// grid-column: 3;
// justify-content: flex-end;
// align-items: baseline;
// }
#sidebar-nav > * {
flex-shrink: 0;
}
@media (max-width: 720px) {
.pi-title:first-child {
display: none;
}
#titleblock {
display: flex;
flex-direction: column-reverse;
@ -101,17 +179,11 @@ details.page-links {
margin-left: var(--space);
margin-right: var(--space);
}
#pagebody {
grid-row: 2;
#sidebar-nav {
justify-content: space-around;
}
#bottombar {
grid-row: 5;
}
@media (max-width: 720px) {
.pi-title:first-child {
display: none;
.sidebar-page-menu {
width: max-content;
flex-wrap: wrap;
}
}

66
resources/navmenu.less Normal file
View File

@ -0,0 +1,66 @@
.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 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;
}

View File

@ -1,4 +1,5 @@
@import 'unset.less';
@import 'colors.less';
@media (max-width: 1080px) {
@import 'layout-touch.less';
@ -10,6 +11,7 @@
@import 'topbar.less';
@import 'toc.less';
@import 'navmenu.less';
@import 'mediawiki.skin.variables.less';
@ -18,12 +20,45 @@
src: url('/resources/assets/Libre_Caslon_Text/LibreCaslonText-Regular.ttf');
}
body {
margin: 0;
}
:root {
--space: .6em;
}
body {
margin: 0;
button {
cursor: pointer;
}
fieldset {
margin-top: calc(var(--space) * 3);
}
#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 {
@ -45,24 +80,6 @@ p {
line-height: calc(var(--space) * 3);
}
.nav-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space);
}
.nav-links {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.nav-toc {
position: sticky;
top: calc(var(--space) * 2);
}
.mw-list-item.selected {
display: none;
}
@ -70,6 +87,8 @@ p {
#titleblock {
border-bottom: 3px solid black;
margin-bottom: calc(var(--space) * 2);
display: flex;
justify-content: space-between;
}
#versions {
@ -81,33 +100,3 @@ p {
#t-print, #t-upload {
display: none;
}
// #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;
// }
// #mw-content-text {
// background-color: red;
// }
// #bottombar {
// background-color: pink;
// }

View File

@ -22,7 +22,7 @@
}
.toclevel-1 > a {
font-size: calc(var(--space) * 2);
font-size: 1.2em;
}
.toclevel-1 ul, .toclevel-1 {

View File

@ -1,21 +1,91 @@
#topbar {
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
display: grid;
padding-top: var(--space);
row-gap: var(--space);
}
#top-logo {
display: flex;
justify-content: space-between;
align-items: center;
}
#top-logo a {
width: fit-content;
}
#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 {
position: relative;
height: fit-content;
justify-self: center;
}
#nav-search-bar {
border-radius: var(--space);
background-color: var(--blue-1);
box-shadow: 0 0 2px 1px var(--gold-7);
border-bottom: 3px solid var(--blue-7);
font-size: calc(var(--space) *2);
padding: var(--space);
}
#nav-search-bar:focus {
outline: 3px solid var(--blue-7);
box-shadow: inset 0 0 3px 3px var(--blue-3);
background-color: white;
border-bottom: 3px inset var(--blue-7);
}
#nav-search-label {
position: absolute;
left: var(--space);
top: 50%;
transform: translate(0, -50%);
opacity: 0.6;
font-size: 1.2em;
}
#user-menu-button {
font-size: 1em;
height: 100%;
background-color: var(--blue-4);
box-shadow: 0 0 1px 1px var(--gold-3), inset 0 0 6px 2px var(--blue-3);
border: 1px outset var(--gold-1);
border-radius: var(--space);
color: white;
}
#user-menu-list {
display: none;
flex-direction: column;
align-items: flex-end;
position: absolute;
right: 0;
background: white;
padding: 0;
}
#user-menu {
width: 6em;
gap: var(--space);
justify-self: right;
position: relative;
}
#user-menu:focus-within #user-menu-list {

View File

@ -2,11 +2,7 @@ li {
list-style: none;
}
a {
color: unset;
}
h1, h2, h3, p, ul {
h1, h2, h3, p, ul, input {
margin: unset;
border: unset;
padding: unset;
@ -43,3 +39,10 @@ summary {
.mw-body-content::after {
content: unset;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}

View File

@ -1,33 +1,10 @@
<div id="sidebar-page">
<div class="sidebar-page-menu">
<div id="page-main" 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-views.array-items.0.html-item}}}
{{{data-views.array-items.1.html-item}}}
{{#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}}
{{{html-items}}}
{{/data-associated-pages}}
{{#data-views}}
{{#array-items.2}}
@ -35,6 +12,14 @@
{{/array-items.2}}
{{/data-views}}
{{/data-portlets}}
</ul>
</div>
<div id="page-views" class="sidebar-page-menu">
<details name="page-menu" class="page-view-details">
<summary class="page-menu-heading">
Page Views
</summary>
<ul class="page-link-list">
{{#data-portlets-sidebar}}
{{#array-portlets-rest.1}}
{{{html-items}}}
@ -42,12 +27,13 @@
{{/data-portlets-sidebar}}
</ul>
</details>
<details id="page-actions" class="page-links">
</div>
<div id="page-actions" class="sidebar-page-menu">
<details name="page-menu" class="page-view-details">
<summary class="page-menu-heading">
Page Actions
</summary>
<ul class="page-link-list mw-collapsible mw-collapsed">
<ul class="page-link-list">
{{#data-portlets}}
{{#data-actions}}
{{{html-items}}}
@ -61,4 +47,3 @@
</ul>
</details>
</div>
</div>

View File

@ -1,24 +1,36 @@
<div id="grid">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
<div id="grid" class="mw-parser-output">
<header id="topbar">
<div id="top-logo">
Phial Fantasy
<a href="https://phialfantasy.wiki">
{{#data-logos}}
<img src="{{{icon}}}" />
{{/data-logos}}
</a>
</div>
<div id="nav-search">
{{#data-search-box}}
{{{html-input}}}
<form action="{{{form-action}}}">
<input id="nav-search-bar" {{{html-input-attributes}}}>
<input value="🔍" {{{html-button-go-attributes}}}>
</form>
{{/data-search-box}}
</div>
<div id="user-menu">
{{#data-portlets}}
{{#data-user-menu}}
{{#array-items.0.array-links.0}}
<button id="user-menu-name">
<button id="user-menu-button">
{{{text}}}
</button>
{{/array-items.0.array-links.0}}
<div id="user-menu-list">
{{{html-items}}}
<a href="/index.php/Special:Upload">
Upload a File
</a>
</div>
{{/data-user-menu}}
{{/data-portlets}}
@ -27,46 +39,86 @@
<div id="sidebar-nav">
<nav class="nav-menu">
<nav id="nav-main" class="nav-menu">
<button class="nav-show">
Wiki Pages
</button>
<ul class="site-links">
{{#data-portlets-sidebar}}
{{#data-portlets-first}}
{{{html-items}}}
{{#array-items}}
{{#array-links}}
{{#array-attributes.0}}
<a href="{{{value}}}">
{{/array-attributes.0}}
<li class="mw-list-item">
{{{text}}}
</li class="mw-list-item">
</a>
{{/array-links}}
{{/array-items}}
{{/data-portlets-first}}
{{/data-portlets-sidebar}}
</ul>
</nav>
<div class="nav-menu">
{{#data-portlets-sidebar}}
{{#array-portlets-rest}}
<div class="nav-menu nav-external">
<button class="nav-show">
{{{label}}}
</button>
<ul class="site-links">
{{#data-portlets-sidebar.array-portlets-rest.0}}
{{{html-items}}}
{{/data-portlets-sidebar.array-portlets-rest.0}}
{{#array-items}}
{{#array-links}}
{{#array-attributes.0}}
<a href="{{{value}}}">
{{/array-attributes.0}}
<li class="mw-list-item">
{{{text}}}
</li class="mw-list-item">
</a>
{{/array-links}}
{{/array-items}}
</ul>
</div>
{{/array-portlets-rest}}
{{/data-portlets-sidebar}}
<div class="nav-menu nav-toc">
<nav id="nav-toc" class="nav-menu nav-sticky">
<button class="nav-show">
Page Contents
</button>
<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>
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop">
<li>
{{{html-title}}}
</li>
</a>
{{#data-toc}}
{{#array-sections}}
<li class="nav-toclevel{{{toclevel}}}">
<a href="#{{{linkAnchor}}}" class="nav-toclevel{{{toclevel}}}">
<li class="mw-list-item">
{{{line}}}
</li>
</a>
{{/array-sections}}
{{/data-toc}}
</ul>
</div>
</nav>
</div>
{{>sidebar-page}}
<div id="sidebar-page-mouse">{{>sidebar-page}}</div>
<div id="sidebar-page-touch">
<button class="page-show">Editor Pages</button>
{{>sidebar-page}}</div>
<main id="page">
<div id="titleblock">
<div id="pagetitle">
<div id="titlebg"></div>
{{{html-title-heading}}}
</div>
<div id="versions">