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. // This gets the user's current username, and puts it the user menu button.
const username = mw.user.getName(); const username = mw.user.getName();
const button = document.getElementById('site-header-user').children[0]; const buttons = document.getElementsByClassName('site-header-user');
if (username) { for (const button of buttons) {
button.textContent = username; if (username) {
} else { button.firstElementChild.textContent = username;
button.textContent = mw.message( 'login' ).text(); } else {
button.firstElementChild.textContent = mw.message( 'login' ).text();
}
} }
// This replaces the text of the print link with the current 'print' system message. // 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); 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)); background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
} }
#site-header-user-links, #page-header-options-links { #site-header-user-links, #page-header-options-links {
display: none; display: none;
position: absolute; position: absolute;
margin-top: var(--space); margin-top: calc(var(--space) / 2);
box-shadow: 0 0 3px 1px var(--blue-7); box-shadow: 0 0 3px 1px var(--blue-7);
z-index: 12; z-index: 12;
right: 0; 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; display: flex;
} }
@ -32,4 +33,5 @@
.drop-link-list a { .drop-link-list a {
color: var(--blue-7); 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; position: relative;
} }
#page-header-options:focus-within button{
color: var(--blue-5);
position: relative;
text-decoration: none;
}
#page-header-options button { #page-header-options button {
text-decoration: underline; text-decoration: underline;
} }
@ -61,7 +67,11 @@
} }
@media (min-width: 1081px) { @media (min-width: 1081px) {
#site-header-container {
grid-column: pagestart;
display: flex;
gap: var(--space);
}
} }
@media (max-width: 1080px) { @media (max-width: 1080px) {
@ -74,6 +84,11 @@
margin-right: var(--space); margin-right: var(--space);
} }
#site-header-container {
grid-row: 2;
grid-column: 1 / 3;
}
} }
@media (max-width: 720px) { @media (max-width: 720px) {

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

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

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

@ -35,7 +35,6 @@
.mw-list-item { .mw-list-item {
display: flex; display: flex;
gap: calc(var(--space)); gap: calc(var(--space));
overflow: clip;
} }
#site-lastedit.layout-mouse { #site-lastedit.layout-mouse {
@ -73,7 +72,7 @@
display: none; 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-image: url(assets/cursor-right.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;

37
resources/skin.less
View File

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

39
templates/site-header.mustache
View File

@ -10,16 +10,24 @@
</a> </a>
</div> </div>
<div id="site-header-search"> <div id="site-header-container">
{{#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-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. }} <button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
<div id="site-header-user-links"> <div id="site-header-user-links">
<ul class="drop-link-list"> <ul class="drop-link-list">
@ -30,4 +38,17 @@
</div> </div>
</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> </header>