Template:MainPage: Difference between revisions
geometrydash.wiki.gg>Jamasto mNo edit summary |
geometrydash.wiki.gg>Jamasto mNo edit summary |
||
| Line 1: | Line 1: | ||
<includeonly>{{#invoke:MainPage|main}}</includeonly><noinclude> | <includeonly>{{#invoke:MainPage|main}}</includeonly><noinclude> | ||
;Description | ;Description | ||
:This template is used to create a dynamic [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout grid layout] on the main page using wiki.gg's Improved Main Page (IMP) framework, initiated with [[Module:MainPage]] to then | :This template is used to create a dynamic [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout grid layout] on the main page using wiki.gg's Improved Main Page (IMP) framework, initiated with [[Module:MainPage]] to then display with [[Template:MP-Box]] header-body content containers. | ||
:The layout is | :The layout is constructed using keywords arranged in a grid. This grid has 3 columns on desktop-width displays (>1350px), 2 columns on tablet-width displays (990px-1350px), and 1 column on mobile displays (<990px), and there is no limit for number of rows. Each keyword represents a grid section and can span multiple rows and/or columns, but must form dimensions of a contiguous rectangle (1x1, 2x1, 3x1, 1x2, 2x2, 1x3, 2x3). The following table gives a visual representation of how main page boxes can be arranged. The keyword <code>welcome</code> loads the contents of [[{{SITENAME}}/welcome]], for example. Keywords are not required to be used in all layouts for each screen dimension. | ||
:Using a keyword that does not have an already-created main page box will create a placeholder variant with a page-create input which can be used to quickly prepare a new one. | |||
{| class="wikitable" | {| class="wikitable" | ||
| style="background-color:#0F03;" |welcome | | style="background-color:#0F03;" |welcome | ||
| Line 11: | Line 9: | ||
| style="background-color:#0F03;" |welcome | | style="background-color:#0F03;" |welcome | ||
|- | |- | ||
| style="background-color:#F0F3;" |about | |||
| style="background-color:#F0F3;" |about | |||
| style="background-color:#00F3;" |external | | style="background-color:#00F3;" |external | ||
|- | |- | ||
| style="background-color:#FF03;" |contribute | | style="background-color:#FF03;" |contribute | ||
| style="background-color:#FF03;" |contribute | | style="background-color:#FF03;" |contribute | ||
| style="background-color:# | | style="background-color:#00F3;" |external | ||
|} | |} | ||
: | :'''Technical explanation:''' The input to desktop, tablet, and mobile create [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties CSS variables] which are then used as the value of [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas grid-template-areas] in media queries for screen widths >=1350px, >=990px, and <990px. The boxes are given an id based on their subpage name, which is then used by the module to find the template, as well as by the box templates to assign them a CSS id of <code>mp-box-<keyword></code>. Since these keywords are used directly in the grid layout, they must follow the rules of [https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident <custom-ident>] naming. | ||
The input to desktop, tablet, and mobile create [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties CSS variables] which are then used as the value of [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas grid-template-areas] in media queries for screen widths >=1350px, >=990px, and <990px. The boxes are given an id based on their subpage name, which is then used by the module to find the template, as well as by the box templates to assign them a CSS id of <code>mp-box-<keyword></code>. Since these keywords are used directly in the grid layout, they must follow the rules of [https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident <custom-ident>] naming. | |||
;Syntax | ;Syntax | ||
<pre> | <pre> | ||
| Line 74: | Line 60: | ||
external | external | ||
}} | }} | ||
[[Category:Container templates]]</noinclude> | [[Category:Container templates]]__NOTOC__</noinclude> | ||
Revision as of 04:46, 13 February 2026
- Description
- This template is used to create a dynamic grid layout on the main page using wiki.gg's Improved Main Page (IMP) framework, initiated with Module:MainPage to then display with Template:MP-Box header-body content containers.
- The layout is constructed using keywords arranged in a grid. This grid has 3 columns on desktop-width displays (>1350px), 2 columns on tablet-width displays (990px-1350px), and 1 column on mobile displays (<990px), and there is no limit for number of rows. Each keyword represents a grid section and can span multiple rows and/or columns, but must form dimensions of a contiguous rectangle (1x1, 2x1, 3x1, 1x2, 2x2, 1x3, 2x3). The following table gives a visual representation of how main page boxes can be arranged. The keyword
welcomeloads the contents of Geometry Dash Expanded Wiki/welcome, for example. Keywords are not required to be used in all layouts for each screen dimension. - Using a keyword that does not have an already-created main page box will create a placeholder variant with a page-create input which can be used to quickly prepare a new one.
| welcome | welcome | welcome |
| about | about | external |
| contribute | contribute | external |
- Technical explanation: The input to desktop, tablet, and mobile create CSS variables which are then used as the value of grid-template-areas in media queries for screen widths >=1350px, >=990px, and <990px. The boxes are given an id based on their subpage name, which is then used by the module to find the template, as well as by the box templates to assign them a CSS id of
mp-box-<keyword>. Since these keywords are used directly in the grid layout, they must follow the rules of <custom-ident> naming. - Syntax
{{MainPage
|desktop = (required) [requires 3 main page box specifications per line]
|tablet = (required) [requires 2 main page box specifications per line]
|mobile = (required) [requires 1 main page box specification per line]
}}
- Sample
{{MainPage
|desktop =
welcome welcome welcome
about about external
contribute contribute external
|tablet =
welcome welcome
about external
contribute contribute
|mobile =
welcome
about
contribute
external
}}
- Sample output
The welcome main page box does not exist. Check your spelling or create it here.
<inputbox>
type = create
width = 25
placeholder = name (no spaces, cannot start with a number)
buttonlabel = Create this main page box
default = welcome
prefix = Geometry Dash Expanded Wiki/
preload = Template:MP-Box--Preload
summary = Created using preload
</inputbox>
See Template:MP-Box for more information.
For inherent technical restrictions on valid names, see <custom-ident>.
The about main page box does not exist. Check your spelling or create it here.
<inputbox>
type = create
width = 25
placeholder = name (no spaces, cannot start with a number)
buttonlabel = Create this main page box
default = about
prefix = Geometry Dash Expanded Wiki/
preload = Template:MP-Box--Preload
summary = Created using preload
</inputbox>
See Template:MP-Box for more information.
For inherent technical restrictions on valid names, see <custom-ident>.
The external main page box does not exist. Check your spelling or create it here.
<inputbox>
type = create
width = 25
placeholder = name (no spaces, cannot start with a number)
buttonlabel = Create this main page box
default = external
prefix = Geometry Dash Expanded Wiki/
preload = Template:MP-Box--Preload
summary = Created using preload
</inputbox>
See Template:MP-Box for more information.
For inherent technical restrictions on valid names, see <custom-ident>.
The contribute main page box does not exist. Check your spelling or create it here.
<inputbox>
type = create
width = 25
placeholder = name (no spaces, cannot start with a number)
buttonlabel = Create this main page box
default = contribute
prefix = Geometry Dash Expanded Wiki/
preload = Template:MP-Box--Preload
summary = Created using preload
</inputbox>
See Template:MP-Box for more information.
For inherent technical restrictions on valid names, see <custom-ident>.