Template:MP box: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly><div class=" |
<includeonly><div class="mp-box" {{#if:{{{id|}}}|id="{{{id}}}"}}> |
||
{{#if:{{{heading|}}}|<div class=" |
{{#if:{{{heading|}}}|<div class="mp-heading"><h2>{{{heading}}}</h2></div>}} |
||
<div class=" |
<div class="mp-content"><span>{{{content|}}}</span></div> |
||
{{#if:{{{footer|}}}|<div class=" |
{{#if:{{{footer|}}}|<div class="mp-footer"><span>{{{footer}}}</span></div>}} |
||
</div></includeonly><!-- |
</div></includeonly><!-- |
||
--><noinclude> |
--><noinclude> |
||
| Line 8: | Line 8: | ||
</noinclude> |
</noinclude> |
||
<!-- |
<!-- |
||
. |
.mp-box { |
||
-- |
--mp-border: var(--tertiary-lightish); |
||
display: flex; |
display: flex; |
||
flex-flow: row wrap; |
flex-flow: row wrap; |
||
border: 1px solid var(-- |
border: 1px solid var(--mp-border); |
||
background: var(--secondary-lighter); |
background: var(--secondary-lighter); |
||
box-shadow: 0 0.25rem 0.35rem -0.25rem var(-- |
box-shadow: 0 0.25rem 0.35rem -0.25rem var(--mp-border); |
||
max-width: 60%; |
max-width: 60%; |
||
} |
} |
||
. |
.mp-box > * { |
||
width: 100%; |
width: 100%; |
||
padding: 0.5em 2em; |
padding: 0.5em 2em; |
||
} |
} |
||
. |
.mp-box > *:first-child { |
||
padding-top: 1.5rem; |
padding-top: 1.5rem; |
||
} |
} |
||
. |
.mp-box > *:last-child { |
||
padding-bottom: 1rem; |
padding-bottom: 1rem; |
||
} |
} |
||
. |
.mp-box h2 { |
||
font-size: 1.4em; |
font-size: 1.4em; |
||
font-weight: bold; |
font-weight: bold; |
||
| Line 38: | Line 38: | ||
} |
} |
||
. |
.mp-footer.mp-footer { |
||
background: var(--secondary-desaturatedish); |
background: var(--secondary-desaturatedish); |
||
transition: 0.3s ease-out; |
transition: 0.3s ease-out; |
||
align-self: flex-end; |
align-self: flex-end; |
||
padding: 0; |
padding: 0; |
||
border-top: 1px solid var(-- |
border-top: 1px solid var(--mp-border); |
||
width: 100%; |
width: 100%; |
||
} |
} |
||
. |
.mp-footer:hover { |
||
background: rgba(0, 0, 0, 0.1); |
background: rgba(0, 0, 0, 0.1); |
||
} |
} |
||
. |
.mp-footer > * { |
||
color: var(--gray-darker); |
color: var(--gray-darker); |
||
font-weight: bold; |
font-weight: bold; |
||
Revision as of 16:07, 29 August 2020
Usage
Using this:
{{MP box
|id = mybox1
|heading = Title
|content = Content stuff here
}}
Gets you this:
Title
Content stuff here
Template data
A box designed for the main page
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| id | id | A unique ID for this box, to be referenced in CSS or JS
| String | optional |
| Heading | heading | What shows up in the heading section
| String | suggested |
| Content | content | Content goes here | Content | suggested |
| Style | style | Set wrapper css style | Unknown | optional |
[view | edit | purge]The above documentation is transcluded fromTemplate:MP box/doc.
