Readable Zig Docs (March 2024) by recursiveGecko

/* ==UserStyle==
@name         Readable Zig Docs (March 2024)
@version      20240320.21.31
@namespace    https://userstyles.world/user/recursiveGecko
@description  More readable docs for Zig stdlib.
@author       recursiveGecko
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://ziglang.org/documentation/master/std") {
body {
    --base-width: 60rem;
    --max-source-width: 75vw;
    --page-x-margin: 0.4rem;
    --page-y-margin: 1rem;
    
    --doc-text-align: unset; /* justify, unset */
    --link-text-decoration: underline dotted;
    
    /* color of symbols enclosed in <code> */
    --code-symbol-color: #eee;
    /* color of symbols that are links enclosed in <code> */
    --code-link-color: #eee;
    /* adds margin around <code> symbols for better visibility */
    --code-symbol-margin: 0 0.4rem 0 0.4rem;
    
    
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;

    margin: var(--page-y-margin) var(--page-x-margin) var(--page-y-margin) var(--page-x-margin);
    
    line-height: 1.5rem;

    /* logo */
    & > nav {
        flex: 0 1;
    }

    /* search box & breadcrumbs */
    & > #navWrap {
        max-width: var(--base-width);
        margin: 0;
    }

    /* contents */
    & > section {
        margin-top: 1rem;
        width: calc(min(var(--base-width), 100%));

        & a {
            text-decoration: var(--link-text-decoration);
        }
        
        & > * {
            margin-top: 2rem;
        }
    }
}

/* Module documentation */
#tldDocs {
    text-align: var(--doc-text-align);

    & code {
        color: var(--code-symbol-color);
    }
    & code a {
        color: var(--code-link-color);
    }
    & code {
        margin: var(--code-symbol-margin);
    }
}

/* Fields and params list */
#listParams > div,
#listFields > div {
    margin: 0;

    & > pre {
        padding: 0.25rem 0 0.25rem 1rem;
    }
}

#listValues {
    display: grid;
    grid-template-columns: min-content min-content 1fr;
    column-gap: 2rem;
    text-align: var(--doc-text-align);

    & code {
        color: var(--code-symbol-color);
    }
    & code a {
        color: var(--code-link-color);
    }

    & > tr {
        display: contents;

        & > td {
            max-width: unset;


            & > * {
                padding: 0;
                margin: 0;
            }
        }
    }
}

/* source code, example usage */
#sectSource pre, #sectDocTests pre {
    --full-width: calc(100vw - 2 * var(--page-x-margin));
    --growing-width: calc(max(var(--base-width), var(--max-source-width)));
    --this-width: calc(min(var(--full-width), var(--growing-width)));
    
    position: relative;
    margin-left: calc(min(-1 * var(--this-width)/2 + 50%));
    width: var(--this-width);
}

/* 
function declaration at the top
code blocks in the docs (presumed to be short)
*/
#fnProto code, #tldDocs > pre {
    white-space: pre-wrap;
    overflow-wrap: normal;
}


#listFns > div {
    border-width: 0;
}
}