User:Hemisputnik/MainPage/Style

Apply this userstyle to view User:Hemisputnik/MainPage correctly.

/* ==UserStyle==
@name           Resonite Wiki Custom Main Page
@namespace      https://512b.dev
@version        1.0.0
@author         hemisputnik
==/UserStyle== */
@-moz-document url-prefix("https://wiki.resonite.com/") {
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    .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;
            flex-basis: 400px;

            & .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 {
                    height: 0;
                    border-top: 2px solid var(--color-surface-2);

                    flex: 1;
                }

                & > 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;

                        &:not(:last-child)::after {
                            content: " · ";
                            font-weight: bold;
                        }
                    }
                }
            }

            /* 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;
            }
        }
    }

    .mp-boxes {
        display: flex;
        flex-flow: row wrap;
        gap: 12px;

        margin: 48px 0;

        & .mp-column {
            flex: 1;
            flex-basis: 350px;

            display: flex;
            flex-direction: column;
            gap: 12px;

            & .mp-box {
                background-color: darkred;
                border: 2px solid red;
                border-radius: 12px;

                flex: 1;

                padding: 16px;
                box-sizing: border-box;

                & .mp-h2 {
                    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: 20px;
                    font-weight: 600;

                    margin-top: 0;
                    margin-bottom: 8px;
                }
            }
        }
    }

    /* Box colours. */
    #mp-box-dyk {
        border-color: var(--color-brand-hero-green);
        background-color: var(--color-brand-sub-green);
    }
    #mp-box-tutorial {
        border-color: var(--color-brand-hero-cyan);
        background-color: var(--color-brand-sub-cyan);
    }
    #mp-box-component {
        border-color: var(--color-brand-hero-red);
        background-color: var(--color-brand-sub-red);
    }
    #mp-box-node {
        border-color: var(--color-brand-hero-orange);
        background-color: var(--color-brand-sub-orange);
    }

    ul.mp-items {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 12px;

        margin: 12px 0;

        & li {
            background-color: darkred;
            border: 2px solid red;
            border-radius: 8px;
            list-style-type: none;

            flex: 1;
            flex-basis: 200px;

            padding: 8px;
            box-sizing: border-box;

            & > p {
                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: 16px;
                font-weight: 500;
                letter-spacing: -0.5px;
                text-align: center;

                margin: 0;
            }
        }
    }

    /* Category colours. */
    #mp-items-first-day li {
        border-color: var(--color-brand-hero-red);
        background-color: var(--color-brand-sub-red);
    }
    #mp-items-rules li {
        border-color: var(--color-brand-hero-orange);
        background-color: var(--color-brand-sub-orange);
    }
    #mp-items-what-now li {
        border-color: var(--color-brand-hero-yellow);
        background-color: var(--color-brand-sub-yellow);
    }
    #mp-items-creation li {
        border-color: var(--color-brand-hero-green);
        background-color: var(--color-brand-sub-green);
    }
    #mp-items-advanced li {
        border-color: var(--color-brand-hero-cyan);
        background-color: var(--color-brand-sub-cyan);
    }
    #mp-items-development li {
        border-color: var(--color-brand-hero-purple);
        background-color: var(--color-brand-sub-purple);
    }
    
    ul.mp-socials {
        margin: 12px 0;

        & li {
            list-style-type: none;
            
            display: inline;
        
            &:not(:last-child) {
                margin-right: 2px;
            }
        }
    }
}