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

grid stretchy nice

Browse Source
This commit is contained in:
Effie 2025-10-13 01:40:38 +11:00
parent 33dd0ac7e5
commit 38021e6a93
8 changed files with 110 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/assets/Codex_icon_search.svg Executable file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>
search
</title>
<path fill="currentColor" d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 277 B

12
resources/main.js
View File

@ -7,11 +7,13 @@ mw.loader.using( [
// This gets the user's current username, and puts it the user menu button.
const username = mw.user.getName();
const button = document.getElementById('site-header-user').children[0];
if (username) {
button.textContent = username;
} else {
button.textContent = mw.message( 'login' ).text();
const buttons = document.getElementsByClassName('site-header-user');
for (const button of buttons) {
if (username) {
button.firstElementChild.textContent = username;
} else {
button.firstElementChild.textContent = mw.message( 'login' ).text();
}
}
// This replaces the text of the print link with the current 'print' system message.

8
resources/parts/dropmenu.less
View File

@ -5,20 +5,21 @@
border-top: 2px solid var(--blue-3);
}
#site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
.site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
}
#site-header-user-links, #page-header-options-links {
display: none;
position: absolute;
margin-top: var(--space);
margin-top: calc(var(--space) / 2);
box-shadow: 0 0 3px 1px var(--blue-7);
z-index: 12;
right: 0;
border: 2px solid var(--blue-3);
}
#site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
.site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
display: flex;
}
@ -32,4 +33,5 @@
.drop-link-list a {
color: var(--blue-7);
text-shadow: 0 0 3px var(--blue-1);
}

17
resources/parts/page-header.less
View File

@ -27,6 +27,12 @@
position: relative;
}
#page-header-options:focus-within button{
color: var(--blue-5);
position: relative;
text-decoration: none;
}
#page-header-options button {
text-decoration: underline;
}
@ -61,7 +67,11 @@
}
@media (min-width: 1081px) {
#site-header-container {
grid-column: pagestart;
display: flex;
gap: var(--space);
}
}
@media (max-width: 1080px) {
@ -74,6 +84,11 @@
margin-right: var(--space);
}
#site-header-container {
grid-row: 2;
grid-column: 1 / 3;
}
}
@media (max-width: 720px) {

31
resources/parts/site-header.less
View File

@ -6,6 +6,7 @@
display: flex;
height: 100%;
max-width: 12em;
margin: auto;
}
#site-header-wordmark {
@ -19,10 +20,20 @@
right: var(--space);
top: 50%;
transform: translate(0, -50%);
border-left: 1px solid var(--blue-1);
background: none;
border-left: 1px solid var(--white);
cursor: pointer;
padding: var(--space);
width: calc(var(--space) * 4);
z-index: 6;
}
#site-header-search-icon {
grid-row: pagestart;
position: absolute;
top: calc(var(--space) * 1.5);
right: var(--space);
color: var(--white);
}
#site-header-search-bar {
@ -34,7 +45,7 @@
}
#site-header-search-bar::placeholder {
color: white;
color: var(--blue-1);
font-weight: bold;
font-family: 'Libre Caslon';
}
@ -60,12 +71,12 @@
box-shadow: inset 0 0 6px 1px var(--blue-5);
}
#site-header-user {
.site-header-user {
position: relative;
margin-left: auto;
}
#site-header-user button {
.site-header-user button {
display: block;
height: calc(100% - 3px);
text-wrap: nowrap;
@ -74,11 +85,11 @@
border-bottom: 3px solid var(--black);
}
#site-header-user button:hover {
.site-header-user button:hover {
box-shadow: inset 0 0 3px 3px var(--blue-5);
}
#site-header-user:focus-within button {
.site-header-user:focus-within button {
background-image: none;
background-color: var(--blue-4);
box-shadow: 0 0 2px .5px var(--blue-7);
@ -91,7 +102,7 @@
@media (min-width: 1081px) {
#site-header {
grid-column: navstart / -1;
grid-column: navstart / -3;
grid-row: topstart;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
@ -114,14 +125,12 @@
}
#site-header-search, #site-header-search-bar {
grid-column: pagestart / menustart;
grid-column: pagestart / menugap;
width: 100%;
position: relative;
overflow: visible;
}
#site-header-user {
// margin-left: calc(var(--space) * 3);
.site-header-user {
grid-column: menustart / pageend;
}

3
resources/parts/site-nav.less
View File

@ -35,7 +35,6 @@
.mw-list-item {
display: flex;
gap: calc(var(--space));
overflow: clip;
}
#site-lastedit.layout-mouse {
@ -73,7 +72,7 @@
display: none;
}
.site-nav-menu-links > li:not(#site-nav-toc-title):hover::before {
.site-nav-menu-links > li:not(#site-nav-toc-title):hover::before, .site-nav-menu-links > li:not(#site-nav-toc-title):has(a:focus)::before {
background-image: url(assets/cursor-right.svg);
background-size: contain;
background-repeat: no-repeat;

37
resources/skin.less
View File

@ -16,21 +16,27 @@
src: url('assets/fonts/LibreCaslonText-Regular.ttf');
}
#grid {
margin-bottom: 0;
min-height: 100vh;
}
@media (min-width: 1081px) {
.layout-touch {
display: none;
}
#grid {
display: grid;
grid-template-columns:
[navstart] var(--sidebar-width)
// [navspacer] var(--navspace-width)
[pagestart] 1fr
[menustart] min-content
[pageend] calc(var(--sidebar-width))
// [userend]
[startgap] minmax(var(--space), 1.5fr)
[navstart] 12em
[navgap] minmax(var(--space), .5fr)
[pagestart] minmax(auto, 78em)
[pageend] 12em
[endgap] minmax(var(--space), 2fr)
;
grid-template-rows:
[topstart] 3.6em
@ -40,16 +46,17 @@
[pagebody] 1fr
[bottomstart] auto
;
column-gap: 1vw;
height: 100%;
max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
margin: auto;
padding-left: var(--space);
padding-right: var(--space);
flex-shrink: 1
}
}
@media (max-width: 1080px) {
.layout-mouse {
display: none;
}
#grid {
display: grid;
grid-template-columns: 1fr;
@ -72,7 +79,7 @@
:root {
--sidebar-width: 12em;
--navspace-width: 1em;
--gap-width: clamp(1em, 6vw, 12em);
--space: .6em;
--pi-width: 24em;
}
@ -104,7 +111,11 @@ fieldset {
display: none;
}
// #site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
*:focus {
z-index: 60;
}
// .site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
// font-size: 1em;
// overflow: clip;
// text-overflow: ellipsis;

39
templates/site-header.mustache
View File

@ -10,16 +10,24 @@
</a>
</div>
<div id="site-header-search">
{{#data-search-box}}
<form action="{{{form-action}}}">
<input id="site-header-search-bar" {{{html-input-attributes}}}>
<input value="🔍" {{{html-button-go-attributes}}}>
</form>
{{/data-search-box}}
</div>
<div id="site-header-container">
<div id="site-header-user">
<div id="site-header-search">
{{#data-search-box}}
<form action="{{{form-action}}}">
<input id="site-header-search-bar" {{{html-input-attributes}}}>
<input value="" {{{html-button-go-attributes}}}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="site-header-search-icon">
<title>
Search
</title>
<path fill="currentColor" d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/>
</svg>
</form>
{{/data-search-box}}
</div>
<div class="site-header-user layout-mouse">
<button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
<div id="site-header-user-links">
<ul class="drop-link-list">
@ -30,4 +38,17 @@
</div>
</div>
</div>
<div class="site-header-user layout-touch">
<button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
<div id="site-header-user-links">
<ul class="drop-link-list">
{{#data-portlets.data-user-menu}}
{{{html-items}}}
{{/data-portlets.data-user-menu}}
</ul>
</div>
</div>
</header>