37
edits
User:Arskari/sandbox: Difference between revisions
wikitext breakdown of main page prototype
No edit summary |
(wikitext breakdown of main page prototype) |
||
| Line 119: | Line 119: | ||
* Navigation sections for useful articles | * Navigation sections for useful articles | ||
* Link to forum/community sites? | * Link to forum/community sites? | ||
* <s>Current community events bumper (Ongoing, Winner, ?)</s> Needs styling | * <s>Current community events bumper (Ongoing, Winner, ?)</s> Needs styling for contests | ||
* <s>Online Sequencer updates/news</s> Started, needs more entries. Changelog documentation page? | * <s>Online Sequencer updates/news</s> Started, needs more entries. Changelog documentation page? | ||
* Wiki users/article count? | * Wiki users/article count? | ||
| Line 125: | Line 125: | ||
** The bumpers are now a flex box containing two inline elements, each with a single table contained in itself. This handles scaling and wrapping. | ** The bumpers are now a flex box containing two inline elements, each with a single table contained in itself. This handles scaling and wrapping. | ||
* Migrate sections currently on [[Main Page]] to their own articles (History, features) | * Migrate sections currently on [[Main Page]] to their own articles (History, features) | ||
====== Wikitext Breakdown ====== | |||
<pre> | |||
__NOTOC__ | |||
{|class="wikitable" style="width: 100%; border-spacing: 5px; text-align: center; margin-bottom: .3%;" | |||
| <span style="font-size:125%;">Welcome to the '''{{SITENAME}}''', a wiki for using and navigating [https://onlinesequencer.net/ Online Sequencer].</span> | |||
'''Online Sequencer''' is a web-based music [[wikipedia:Music_sequencer|sequencer]] that allows users to create music saved online or on their computer and share it with other users. | |||
|} | |||
</pre> | |||
This is the welcome banner, implemented as a wikitable. <nowiki>__NOTOC__</nowiki> prevents a table of contents from being generated, but a <nowiki>__FORCETOC__</nowiki> could be used after this if wanted for the rest of the main page. | |||
<pre> | |||
<div style="display: flex; flex-wrap: wrap; column-gap: .3%;"> | |||
</pre> | |||
Opens a flexbox container to handle the two bumpers. <code>flex-wrap: wrap</code> enables wrapping at narrow screen sizes, such as shrinking a window or on a mobile device. <code>column-gap</code> adds space between items if on the same row. | |||
<pre> | |||
<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1; "> | |||
</pre> | |||
Creates an inline element inside the flexbox. <code>flex-grow</code> causes the sections to stretch to fill out all possible width; having both at 1 makes them share the width. | |||
<pre> | |||
{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;" | |||
|- | |||
| style="vertical-align: top;" | | |||
</pre> | |||
Creates a table inside the inline element, which is what is actually seen. Width and height are set to take up all space in their container. <code>vertical-align</code> must be applied to the row and makes sure content is aligned to the top, rather than centering by default. | |||
<pre> | |||
{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;" | |||
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Getting Started''' <!-- LINK ARTICLES HERE --> | |||
|} | |||
</pre> | |||
Banner using a table for color and styling. | |||
<pre> | |||
* [[Features]] | |||
* [[Instruments]] | |||
* [[Equalizer]] | |||
|} | |||
</div></pre>Content in a list, then close the table, and finally close the inline.<pre><div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1;"> | |||
</pre>Second inline element.<pre> | |||
{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;" | |||
|- | |||
| style="vertical-align: top;" | | |||
</pre>Second table.<pre> | |||
{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;" | |||
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Online Sequencer News''' <!-- For news about the site itself --> | |||
|} | |||
</pre>Another banner.<pre> | |||
* '''[https://test.onlinesequencer.net/ test.onlinesequencer.net]''' : Synthesizer instrument added | |||
* Sustained smooth synth added, old sequences not affected | |||
</pre>Content in a list.<pre> | |||
{|class="wikitable" style="width: 100%; border-spacing: 5px;" | |||
!style="color:#FFFFFF; background:#254d88; text-align: left";|'''Community''' <!-- For contests, mod applications, other community stuff --> | |||
|} | |||
</pre>Another banner.<pre> | |||
* [https://test.onlinesequencer.net/forum/ Online Sequencer Forum] | |||
</pre>Link to the forum.<pre> | |||
---- | |||
[https://onlinesequencer.net/forum/thread-8016.html Current Contest] (8/1/23 – 8/21/2023) | |||
Theme: Eurobeat | |||
---- | |||
[https://onlinesequencer.net/forum/thread-7942.html Last Contest] (7/1/23 – 7/21/2023) | |||
Theme: Jungle music | |||
Winning entries: | |||
# [http://onlinesequencer.net/3509773 jungle jammin'] by [https://onlinesequencer.net/members/26737 Mr. Magicman] | |||
# [https://onlinesequencer.net/3519882 I was inspired by traditional African music] by [https://onlinesequencer.net/members/14215 Lopyt] | |||
# [https://onlinesequencer.net/3498969 Black Mamba] by [https://onlinesequencer.net/members/36102 JOwen] | |||
|} | |||
</div> | |||
</pre>Remainder of the table. <code>----</code> creates a horizontal line to separate sections. Listing items by <code>#</code> creates a numbered list. Close the table and inline.<pre> | |||
</div> | |||
</pre>Close the flexbox. | |||