User:Editingthingsforlife/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// This code should go into MediaWiki:Timeless.js on your wiki.
// It ensures that jQuery is loaded before executing.
$(function() { // Shorthand for $(document).ready()

    // 1. Add a specific class to the <body> tag if we are on the Main Page.
    // This helps in applying the main page-specific banner styles from the CSS.
    // The CSS I provided uses '.page-Main_Page #mainpage-banner-container'.
    // Most skins add 'page-Main_Page' automatically. This is a fallback or alternative.
    if (mw.config.get('wgPageName') === 'Main_Page') {
        $('body').addClass('is-main-page-view'); // You can then use .is-main-page-view in CSS
                                                // e.g., .is-main-page-view #mainpage-banner-container { ... }
                                                // Or ensure .page-Main_Page is there if your CSS relies on it
                                                // and the skin doesn't add it:
        // if (!$('body').hasClass('page-Main_Page')) {
        //     $('body').addClass('page-Main_Page');
        // }
    }


    // 2. OPTIONAL: Custom toggle for sidebar sections if Timeless default isn't desired.
    // Timeless usually handles sidebar section collapsing.
    // This is an example if you needed more control or a different animation.
    /*
    $('#mw-sidebar .vector-menu-heading').on('click', function(e) {
        e.preventDefault(); // Prevent default if it's an anchor
        var $content = $(this).nextAll('.vector-menu-content').first();
        $content.slideToggle('fast');
        $(this).toggleClass('mw-collapsed'); // Timeless might use this class for arrows
    });
    */

    // 3. OPTIONAL: Smooth scrolling for anchor links (if you have them on long pages)
    /*
    $('a[href*="#"]:not([href="#"])').on('click', function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 70 // Adjust 70 for fixed header height
                }, 1000);
                return false;
            }
        }
    });
    */

    // Add any other Timeless-specific JavaScript enhancements here.
    // For the visual style in the image, CSS is the primary driver.
    // JavaScript would be for behaviors or ensuring CSS targeting.

});