Skip to content

GitHub adaptive content by vednoc

Screenshot of GitHub adaptive content

Details

Authorvednoc

LicenseMIT

Categorygithub

Created

Updated

Size4.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adaptive header/nav/body content for GitHub.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         GitHub adaptive content
@namespace    userstyles.world/user/vednoc
@description  Adaptive header/nav/body content for GitHub.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@version      0.3.0
@license      MIT
@preprocessor stylus

@var checkbox shortNav 'Enable short navbar style' 1
@var checkbox altNav 'Enable alternative navbar style' 0
==/UserStyle== */

t = transparent
i = !important

$reset = @block {
    margin-inline: auto
    max-width: calc(1280px - 32px)
}

$resetFull = @block {
    padding-inline: 0 i
    margin-inline: auto
    max-width: calc(1280px - 32px)
}

@-moz-document domain('github.com') {
    @media (min-width: 768px) {
        body:not(.full-width):not(.notifications-v2):not(.height-full) {
            // Navbar.
            .js-header-wrapper {
                padding-inline: 1rem if shortNav
                background-color: var(--color-header-bg) unless altNav

                if altNav {
                    --color-header-text: var(--color-fg-muted)
                    --color-header-logo: var(--color-fg-default)
                    --color-header-bg: var(--color-canvas-default)
                    --color-header-search-bg: var(--color-canvas-inset)
                    --color-header-search-border: var(--color-border-default)
                    ::placeholder { color: var(--color-fg-muted) }
                }

                // Logged in/out headers.
                > .Header, > .Header-old {
                    { $resetFull } if shortNav
                    background: none
                    border-bottom: 1px solid var(--color-border-muted) if altNav
                }

                // Fixes discrepancies in different places.
                > .Header-old > [class*='container-'] {
                    { $resetFull } if shortNav
                }
            }

            // Repository page header.
            #repository-container-header.hide-full-screen {
                padding-inline: 1rem

                // Hide header background on light themes.
                &[style*='page-header-bg'] { background: none i }

                > div, > nav {
                    { $resetFull }
                }
            }

            // Alerts of various kinds.
            #js-flash-container > div > div,
            #notification-shelf > div,
            // Sponsors alerts.
            x-banner,
            x-banner + div[style],
            // Issues dashboard page.
            #issues_dashboard.container-lg,
            // Actions page. @upstream
            split-page-layout,
            // Footer width.
            footer.width-full {
                { $resetFull }
            }

            // Remove extra space. @upstream
            button.js-flash-close > svg { margin-right: 0 }

            // Organization page header.
            .pagehead.orghead {
                padding-inline:  1rem

                // Content.
                .container-lg,
                .container-xl,
                // Navigation.
                nav ul, nav {
                    { $resetFull }
                }

                // Tab content.
                + .container-lg {
                    max-width: unset

                    > div {
                        { $resetFull }
                    }
                }
            }

            // Main content.
            main {
                // More consistent padding.
                .px-lg-5, .px-md-4 { padding-inline: 1rem i }

                // Tabbed navigation on profile page.
                .position-sticky > .container-xl { padding-inline: 0 i }
            }
        }
    }
}

@-moz-document regexp('https?://github.com/sponsors/.+') {
    main > div {
        // Alerts.
        &:not(.container-lg) {
            > .container-lg {
                { $resetFull }
            }

            // Add padding to "sponsors matching fund" bar.
            &.flash + [style] { padding-inline: 1rem }
        }

        // Page content.
        &.container-lg {
            padding-inline: 1rem
            max-width: 1280px
        }
    }
}

@-moz-document regexp('https?://github.com/.+/.+/(releases|tags)$') {
    main {
        .col-11 { width: 100% }
        .col-md-9 { width: 83.3333333% }
    }
}

Reviews

No reviews yet.