User:Hemisputnik/MainPage: Difference between revisions

From Resonite Wiki
← Older edit
VisualWikitext
add CSS so far
m Newline
 
(8 intermediate revisions by the same user not shown)
Line 8: Line 8:
<div class="mp-header-stats-sep"></div>
<div class="mp-header-stats-sep"></div>
<ul>
<ul>
<li><b>1,234</b> articles</li><li><b>123</b> users</li>
<li><b>[[Special:Statistics|{{NUMBEROFARTICLES}}]]</b> articles</li>
<li><b>[[Special:Statistics|{{NUMBEROFACTIVEUSERS}}]]</b> active users</li>
</ul>
</ul>
<div class="mp-header-stats-sep"></div>
<div class="mp-header-stats-sep"></div>
Line 20: Line 21:
<div class="mp-boxes">
<div class="mp-boxes">
<div class="mp-column">
<div class="mp-column">
<div class="mp-box">
<div id="mp-box-dyk" class="mp-box">
<h2 class="mp-h2">Did you know...</h2>
<div class="mp-box-content">{{Did you know}}</div>
</div>
</div>
<div class="mp-box">
<div id="mp-box-tutorial" class="mp-box">
<h2 class="mp-h2">Featured tutorial</h2>
<div class="mp-box-content">{{Featured tutorial}}</div>
</div>
</div>
</div>
</div>
<div class="mp-column">
<div class="mp-column">
<div class="mp-box">
<div id="mp-box-component" class="mp-box">
<h2 class="mp-h2">Component of the day</h2>
<div class="mp-box-content">{{Component of the day}}</div>
</div>
</div>
<div class="mp-box">
<div id="mp-box-node" class="mp-box">
<h2 class="mp-h2">Node of the day</h2>
<div class="mp-box-content">{{Node of the day}}</div>
</div>
</div>
</div>
</div>
</div>
</div>


<syntaxhighlight lang="css">
== Your first day ==
.mp-top {
    display: flex;
    /* Why row-reverse? When it wraps on smaller displays, the Resonite logo should appear first. */
    flex-flow: row-reverse wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 48px;


    & .mp-header {
<ul id="mp-items-first-day" class="mp-items">
        flex: 1;
<li><p>[[Installing Resonite|Install Resonite]]</p></li>
<li><p>[https://account.resonite.com Create an account]</p></li>
<li><p>[[Basic controls]]</p></li>
<li><p>[[Avatar Creation|Importing an avatar]]</p></li>
<li><p>[[Supporting Resonite]]</p></li>
</ul>
 
== Rules, guidelines & important information ==
 
<ul id="mp-items-rules" class="mp-items">
<li><p>[https://resonite.com/policies/Guidelines.html Usage guidelines]</p></li>
<li><p>[https://resonite.com/policies/EULA.html EULA]</p></li>
<li><p>[https://resonite.com/policies/PrivacyPolicy.html Privacy policy]</p></li>
<li><p>[[Mentors]]</p></li>
<li><p>[[Moderation]]</p></li>
<li><p>[[Resonite team]]</p></li>
<li><p>[[Branding guidelines|Branding]]</p></li>
</ul>
 
== What now? ==
 
<ul id="mp-items-what-now" class="mp-items">
<li><p>[[FAQ]]</p></li>
<li><p>[[Troubleshooting]]</p></li>
<li><p>[[Dash menu]]</p></li>
<li><p>[[Inventory]]</p></li>
<li><p>[[Public folders]]</p></li>
<li><p>[[Worlds]]</p></li>
<li><p>[[Camera]]</p></li>
<li><p>[[Homes]]</p></li>
</ul>
 
== Creation & technical ==


        & .mp-header-subtitle {
<ul id="mp-items-creation" class="mp-items">
            font-family: Poppins, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
<li><p>[[Tools]]</p></li>
            font-size: 24px;
<li><p>[[Component]]</p></li>
            font-weight: 400;
<li><p>[[ProtoFlux]]</p></li>
            line-height: 1.3;
<li><p>[[Tutorials]]</p></li>
<li><p>[[Tips & tricks]]</p></li>
<li><p>[[Things to avoid]]</p></li>
<li><p>[[Optimization guidelines|Optimization]]</p></li>
</ul>


            & b {
== Advanced topics ==
                font-weight: 700;
            }
        }
       
        & .mp-header-stats {
            display: flex;
            gap: 8px;
            align-items: center;
           
            & .mp-header-stats-sep {
                flex: 1;
               
                height: 0;
                border-top: 2px solid var(--color-surface-2);
            }
           
            & > ul {
                text-align: center;
                margin: 0;


                & li {
<ul id="mp-items-advanced" class="mp-items">
                    /* Fun thing (that Wikipedia also does), to prevent the bullet point
<li><p>[[Dynamic variables]]</p></li>
                      from being part of the text. */
<li><p>[[Cloud variables]]</p></li>
                    display: inline;
<li><p>[[Plugins]]</p></li>
<li><p>[[Connecting Resonite to other applications|Interoperability]]</p></li>
</ul>


                    &::after {
== Resonite development ==
                        content: " · ";
                        font-weight: bold;
                    }


                    &:last-child::after {
<ul id="mp-items-development" class="mp-items">
                        content: "";
<li><p>[https://github.com/Yellow-Dog-Man/Resonite-Issues/issues Issue tracker]</p></li>
                    }
<li><p>[https://github.com/Yellow-Dog-Man/Resonite-Issues/discussions Forum]</p></li>
                }
<li><p>[https://github.com/orgs/Yellow-Dog-Man/projects?query=is%3Aopen Development boards]</p></li>
            }
<li><p>[[Roadmap]]</p></li>
        }
<li><p>[[:Category:Versions|Changelogs]]</p></li>
       
<li><p>[[Office hours]]</p></li>
        /* Set the 'gap' to 12px. Since we're in flow mode and not in flex mode,
<li><p>[[The Resonance]]</p></li>
          we have to rely on margins. */
</ul>
       
 
        & > * {
== Social links ==
            margin: 12px 0;
 
        }
<ul class="mp-socials">
       
<li>[[File:DiscordIcon.png|48px|Resonite Discord|link=https://discord.gg/resonite|alt=Resonite Discord]]</li>
        & :first-child {
<li>[[File:TwitterIcon.png|36px|Resonite Twitter|link=https://x.com/resoniteapp]]</li>
            margin-top: 0;
<li>[[File:BlueSkyIcon.png|36px|Resonite BlueSky|link=https://bsky.app/profile/resonite.com]]</li>
        }
<li>[[File:MastodonIcon.png|36px|Resonite Mastodon|link=https://mastodon.social/@Resonite]]</li>
       
<li>[[File:TikTokIcon.png|36px|Resonite TikTok|link=https://tiktok.com/@resoniteofficial]]</li>
        & :last-child {
<li>[[File:TwitchIcon.png|36px|Resonite Twitch|link=https://twitch.tv/resoniteapp]]</li>
            margin-bottom: 0;
<li>[[File:YoutubeIcon.png|36px|Resonite YouTube|link=https://www.youtube.com/@resoniteapp|alt=Resonite YouTube]]</li>
        }
<li>[[File:PatreonIcon.png|36px|Resonite Patreon|link=https://www.patreon.com/resonite|alt=Resonite Patreon]]</li>
    }
</ul>
}
</syntaxhighlight>

Latest revision as of 07:29, 6 January 2026

Resonite logo

Welcome to the Resonite Wiki, a hub for information about Resonite that everyone can edit.

This wiki is a work in progress with improvements and tweaks planned. See Wiki Status for more information.

Did you know...

Template:Did you know

Featured tutorial

Template:Featured tutorial

Component of the day

Template:Component of the day

Node of the day

Template:Node of the day

Your first day

Rules, guidelines & important information

What now?

Creation & technical

Advanced topics

Resonite development

Social links

  • Resonite Discord
  • Resonite Twitter
  • Resonite BlueSky
  • Resonite Mastodon
  • Resonite TikTok
  • Resonite Twitch
  • Resonite YouTube
  • Resonite Patreon
Retrieved from "https://wiki.resonite.com/index.php?title=User:Hemisputnik/MainPage&oldid=114979"
Last modified
This page was last edited on 6 January 2026, at 07:29.