mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-13 17:49:25 +00:00
feat(core): ✨ extend page header background to full width
This is needed to get rid of the negative margin sticky header background hack. Since it looks weird on wikis with background imgae.
This commit is contained in:
parent
17525528f5
commit
53742a0dd2
|
@ -1,3 +1,39 @@
|
|||
.citizen-page-header {
|
||||
z-index: @z-index-above-content;
|
||||
grid-area: header;
|
||||
padding-right: var( --padding-page );
|
||||
padding-left: var( --padding-page );
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var( --space-md );
|
||||
align-items: center;
|
||||
/* max-width should sync with .citizen-body-container */
|
||||
max-width: var( --width-layout );
|
||||
padding-top: var( --space-md );
|
||||
padding-bottom: var( --space-md );
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@media ( min-width: @min-width-breakpoint-desktop ) {
|
||||
.citizen-toc-enabled & {
|
||||
max-width: ~'calc( var( --width-layout ) + var( --width-toc ) + var( --space-xl ) )';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-page-heading {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.firstHeading-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
|
|
|
@ -25,8 +25,8 @@
|
|||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: ~'calc( var(--padding-page ) * -1 )';
|
||||
left: ~'calc( var(--padding-page ) * -1 )';
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: @z-index-bottom;
|
||||
height: 100%;
|
||||
content: '';
|
||||
|
@ -123,7 +123,7 @@ html {
|
|||
// Make sticky header more compact if there are less screen estate
|
||||
@media ( max-height: 800px ) {
|
||||
.citizen-page-header--sticky {
|
||||
.citizen-page-header {
|
||||
.citizen-page-header-inner {
|
||||
padding-top: var( --space-sm );
|
||||
padding-bottom: var( --space-sm );
|
||||
}
|
||||
|
|
|
@ -8,6 +8,8 @@
|
|||
.mw-body,
|
||||
.parsoid-body {
|
||||
min-height: 100vh; // avoid footer being in the middle of the page
|
||||
margin-top: var( --space-xl );
|
||||
margin-bottom: var( --space-xl );
|
||||
}
|
||||
|
||||
.citizen-body-container {
|
||||
|
@ -22,28 +24,6 @@
|
|||
gap: 0 var( --space-xl );
|
||||
justify-content: center;
|
||||
padding: 0 var( --padding-page );
|
||||
margin: var( --space-xl ) 0; // don't collide with other components (e.g. notice)
|
||||
}
|
||||
|
||||
.citizen-page-header {
|
||||
z-index: @z-index-above-content;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-area: header;
|
||||
gap: var( --space-md );
|
||||
align-items: center;
|
||||
padding-top: var( --space-md );
|
||||
padding-bottom: var( --space-md );
|
||||
}
|
||||
|
||||
.citizen-page-heading {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.firstHeading-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.citizen-body {
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
<header class="mw-body-header citizen-page-header">
|
||||
{{#data-page-heading}}{{>PageHeading}}{{/data-page-heading}}
|
||||
{{>PageTools}}
|
||||
<div class="citizen-page-header-inner">
|
||||
{{#data-page-heading}}{{>PageHeading}}{{/data-page-heading}}
|
||||
{{>PageTools}}
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
@ -16,16 +16,16 @@
|
|||
<div id="siteNotice">{{{html-site-notice}}}</div>
|
||||
</div>
|
||||
<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
|
||||
<div class="citizen-body-container">
|
||||
{{>PageHeader}}
|
||||
<div id="bodyContent" class="citizen-body" aria-labelledby="firstHeading">
|
||||
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
|
||||
{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
|
||||
{{{html-user-message}}}
|
||||
{{{html-body-content--formatted}}}
|
||||
</div>
|
||||
{{#toc-enabled}}{{>PageSidebar}}{{/toc-enabled}}
|
||||
{{>PageFooter}}
|
||||
<div class="citizen-body-container">
|
||||
<div id="bodyContent" class="citizen-body" aria-labelledby="firstHeading">
|
||||
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
|
||||
{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
|
||||
{{{html-user-message}}}
|
||||
{{{html-body-content--formatted}}}
|
||||
</div>
|
||||
{{#toc-enabled}}{{>PageSidebar}}{{/toc-enabled}}
|
||||
{{>PageFooter}}
|
||||
</div>
|
||||
</main>
|
||||
{{{html-after-content}}}
|
||||
|
|
Loading…
Reference in a new issue