User:Arskari/sandbox: Difference between revisions

Jump to navigation Jump to search
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.
37

edits

Navigation menu