feat(core): put non-header elements into a container

Just more sanity and easier to customize header
This commit is contained in:
alistair3149 2022-10-04 22:00:56 -04:00
parent 4aa59d5c14
commit d234ece146
No known key found for this signature in database
2 changed files with 22 additions and 18 deletions

View file

@ -1,5 +1,10 @@
@width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
.citizen-page-container {
// Reserve space for header
margin-bottom: var( --header-size );
}
.mw-body,
.parsoid-body {
min-height: 80vh; // avoid footer being in the middle of the page
@ -87,13 +92,10 @@ a.image {
padding-left: ~'calc( var( --padding-page ) * 2 )';
}
#siteNotice,
.mw-body,
.parsoid-body,
.citizen-footer,
#mw-data-after-content {
.citizen-page-container {
// Reserve space for header
margin-left: var( --header-size );
margin-bottom: 0;
}
}

View file

@ -11,16 +11,18 @@
}}
{{#data-header}}{{>Header}}{{/data-header}}
<div id="siteNotice">{{{html-site-notice}}}</div>
<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
{{>ContentHeader}}
<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>
{{>ContentFooter}}
</main>
{{{html-after-content}}}
{{#data-footer}}{{>Footer}}{{/data-footer}}
<div class="citizen-page-container">
<div id="siteNotice">{{{html-site-notice}}}</div>
<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
{{>ContentHeader}}
<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>
{{>ContentFooter}}
</main>
{{{html-after-content}}}
{{#data-footer}}{{>Footer}}{{/data-footer}}
</div>