User:Hemisputnik/MainPage

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

• 1,234 articles
• 123 users

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

.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 {
        flex: 1;

        & .mp-header-subtitle {
            font-family: Poppins, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
            font-size: 24px;
            font-weight: 400;
            line-height: 1.3;

            & b {
                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 {
                    /* Fun thing (that Wikipedia also does), to prevent the bullet point
                       from being part of the text. */
                    display: inline;

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

                    &:last-child::after {
                        content: "";
                    }
                }
            }
        }
        
        /* Set the 'gap' to 12px. Since we're in flow mode and not in flex mode,
           we have to rely on margins. */
        
        & > * {
            margin: 12px 0;
        }
        
        & :first-child {
            margin-top: 0;
        }
        
        & :last-child {
            margin-bottom: 0;
        }
    }
}