StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-11 16:48:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): ✨ add site logo to header

Browse source
This commit is contained in:
alistair3149 2022-12-03 12:39:17 -05:00
parent 143c64c7b0
commit 7bfec28ef2
No known key found for this signature in database
4 changed files with 57 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/skins.citizen.styles/Header.less
View file

@ -66,6 +66,12 @@
} }
} }
&__logo {
padding: 0 var( --space-xs ) 0 0;
border-right: 1px solid var( --border-color-base );
margin: 0 var( --space-xxs );
}
&__inner { &__inner {
z-index: -1; // Inner element should be behind menu and search z-index: -1; // Inner element should be behind menu and search
display: flex; display: flex;
@ -143,6 +149,13 @@
left: 0; left: 0;
border-top: 0; border-top: 0;
border-right: 1px solid var( --border-color-base ); border-right: 1px solid var( --border-color-base );
&__logo {
padding: 0 0 var( --space-xs ) 0;
border-right: 0;
border-bottom: 1px solid var( --border-color-base );
margin: var( --space-xxs ) 0;
}
} }
} }

41
templates/Drawer__logo.mustache
View file

@ -1,21 +1,20 @@
{{! {{!
LogoDefinition logo LogoDefinition logo
string link-mainpage link to the main page string link-mainpage link to the main page
string msg-sitesubtitle the contents of the sitesubtitle message key }}
}} {{#data-logos}}
{{#data-logos}} <a href="{{link-mainpage}}" class="mw-logo citizen-drawer__logo">
<a href="{{link-mainpage}}" class="mw-logo citizen-drawer__logo"> {{! alt is provided for valid HTML but given aria-hidden not needed. }}
{{! alt is provided for valid HTML but given aria-hidden not needed. }} <img class="mw-logo-icon" src="{{!
<img class="mw-logo-icon" src="{{! Pick an icon based on this order: Icon > SVG > 1x
Pick an icon based on this order: Icon > SVG > 1x Need a better way to indent the syntax below
Need a better way to indent the syntax below }}{{#icon}}{{.}}{{/icon}}{{!
}}{{#icon}}{{.}}{{/icon}}{{! }}{{^icon}}{{!
}}{{^icon}}{{! }}{{#svg}}{{.}}{{/svg}}{{!
}}{{#svg}}{{.}}{{/svg}}{{! }}{{^svg}}{{!
}}{{^svg}}{{! }}{{#1x}}{{.}}{{/1x}}{{!
}}{{#1x}}{{.}}{{/1x}}{{! }}{{/svg}}{{!
}}{{/svg}}{{! }}{{/icon}}"{{!
}}{{/icon}}"{{! }}alt="" aria-hidden="true" height="80" width="80" loading="lazy">
}}alt="" aria-hidden="true" height="80" width="80" loading="lazy"> </a>
</a> {{/data-logos}}
{{/data-logos}}

1
templates/Header.mustache
View file

@ -3,6 +3,7 @@
string msg-citizen-drawer-toggle The label used by the drawer button string msg-citizen-drawer-toggle The label used by the drawer button
}} }}
<header class="mw-header citizen-header"> <header class="mw-header citizen-header">
{{>Header__logo}}
{{#data-search-box}}{{>Search}}{{/data-search-box}} {{#data-search-box}}{{>Search}}{{/data-search-box}}
{{>Drawer}} {{>Drawer}}
<div class="citizen-header__inner"> <div class="citizen-header__inner">

23
templates/Header__logo.mustache Normal file
View file

@ -0,0 +1,23 @@
{{!
LogoDefinition logo
string link-mainpage link to the main page
TODO: Maybe merge with Drawer__logo?
}}
{{#data-logos}}
<div class="citizen-header__logo">
<a href="{{link-mainpage}}" class="mw-logo citizen-header__button">
{{! alt is provided for valid HTML but given aria-hidden not needed. }}
<img class="mw-logo-icon" src="{{!
Pick an icon based on this order: Icon > SVG > 1x
Need a better way to indent the syntax below
}}{{#icon}}{{.}}{{/icon}}{{!
}}{{^icon}}{{!
}}{{#svg}}{{.}}{{/svg}}{{!
}}{{^svg}}{{!
}}{{#1x}}{{.}}{{/1x}}{{!
}}{{/svg}}{{!
}}{{/icon}}"{{!
}}alt="" aria-hidden="true" height="32" width="32">
</a>
</div>
{{/data-logos}}