日本語環境向けのArticleページ専用スタイル (ja-JP) by MaruniUmebachi

/* ==UserStyle==
@name         1.2. 記事
@version      20241122.06.05
@namespace    https://userstyles.world/user/MaruniUmebachi
@description  記事形式のページのためのスタイルテーマ。私の用意した var スタイルとの併用を前提としています。
@homepage     https://userstyles.world/user/MaruniUmebachi
@author       MaruniUmebachi
@license      CC 0
==/UserStyle== */

@font-face {
    font-family: 'full space';
    src: local('Noto Sans Mono ExtraCondensed'), local('Noto Sans'), local('Serif');
    unicode-range: U+3000, U+0020;
    size-adjust: 200%;
}

:root {
    --Stylus-CSS: "* 記事";
    :not(main article, main section, article, [class*="article"])h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --Stylus-CSS: "* 記事";
    }

    div.article h1 ~ p:lang(ja),
    main > section > div.txt-body > p:lang(ja) {
        --Stylus-CSS: "* 記事";
        letter-spacing: var(--letter-spacing-Stylus-article-p);
        word-spacing: var(--word-spacing-Stylus-article-p);
        font-size: var(--font-size-Stylus-article-p);
        font-family: var(--font-family-Stylus-article-p);
        line-height: var(--line-height-Stylus-article-p);
        text-align: var(--text-align-Stylus-article-p);
        text-align-last: var(--text-align-last-Stylus-article-p);
        hyphens: var(--hyphens-Stylus-article-p);
        ol li p:lang(ja) {
            --Stylus-CSS: "* 記事";
            text-align: var(--text-align-Stylus-article-p);
            text-align-last: var(--text-align-last-Stylus-article-p);
        }
    }
}

html:lang(ja):root {
    --Stylus-CSS: "* 記事";
    &,
    body {
        --Stylus-CSS: "* 記事";
        font-feature-settings: var(--font-feature-settings-Stylus);
        letter-spacing: var(--letter-spacing-Stylus);
        word-spacing: var(--word-spacing-Stylus);
    }

    :not(aside, sub, menu) :where(#main, main, article, .main:has(h1, .author)) {
        --Stylus-CSS: "* 記事";
        &:has(p):not(:has(aside, section, sub, menu)) {
            --Stylus-CSS: "* 記事";
            box-sizing: var(--box-sizing-Stylus-article);
            width: var(--width-Stylus-article);
            inline-size: var(--inline-size-Stylus-article);
            max-width: var(--max-width-Stylus-article);
            max-inline-size: var(--max-inline-size-Stylus-article);
        }

        :where(article, #article, section, .main_content) {
            --Stylus-CSS: "* 記事";
            &:has(p):not(:has(aside, section, sub, menu)) {
                --Stylus-CSS: "* 記事";
                box-sizing: var(--box-sizing-Stylus-article);
                width: var(--width-Stylus-article);
                inline-size: var(--inline-size-Stylus-article);
                max-width: var(--max-width-Stylus-article);
                max-inline-size: var(--max-inline-size-Stylus-article);
            }

            &,
            > div,
            > div > div,
            > div > div > div,
            > div > div > div > div,
            > div > div > div > div > div,
            > div > div > div > div > div > div {
                > p {
                    --Stylus-CSS: "* 記事";
                    font-feature-settings: var(--font-feature-settings-article-p);
                    letter-spacing: var(--letter-spacing-article-p);
                    word-spacing: var(--word-spacing-article-p);
                    font-size: var(--font-size-article-p);
                    font-family: var(--font-family-article-p);
                    line-height: var(--line-height-article-p);
                    text-align: var(--text-align-article-p);
                    text-align-last: var(--text-align-last-article-p);
                    hyphens: var(--hyphens-article-p);
                    &:not(:only-of-type) {
                        --Stylus-CSS: "* 記事";
                        text-indent: var(--text-indent-article-p);
                    }

                    > img:where(.aligncenter, .size-full) {
                        --Stylus-CSS: "* 記事";
                        block-size: var(--block-size-Stylus-article-fill-inline);
                        height: var(--height-Stylus-article-fill-inline);
                        max-height: var(--max-height-Stylus-article-fill-inline);
                        max-block-size: var(--max-block-size-Stylus-article-fill-inline);
                        border-radius: var(--border-radius-Stylus-article-fill-inline);
                    }

                    ruby {
                        --Stylus-CSS: "* 記事";
                        line-height: var(--line-height-Stylus-article-ruby);
                    }

                    b,
                    [style*="font-weight: bold;"] {
                        font-family: var(--font-family-Stylus-article-bold), sans-serif;
                    }
                }
            }
        }
    }

    :target {
        --Stylus-CSS: "* 記事";
        transition: var(--transition-Stylus-article-target);
    }

    :any-link {
        --Stylus-CSS: "* 記事";
        text-underline-position: var(--text-underline-position-Stylus-article-any-link);
        line-height: var(--line-height-Stylus-article-any-link);
        word-break: var(--word-break-Stylus-article-any-link);
    }

    :is(article, #article, section.content--body, section.content--detail-main, #personal-public-article-body, div.p-article) {
        --Stylus-CSS: "* 記事";
        p:lang(ja) {
            --Stylus-CSS: "* 記事";
            font-feature-settings: var(--font-feature-settings-article-p);
            letter-spacing: var(--letter-spacing-article-p);
            word-spacing: var(--word-spacing-article-p);
            font-size: var(--font-size-article-p);
            font-family: var(--font-family-article-p);
            line-height: var(--line-height-article-p);
            text-align: var(--text-align-article-p);
            text-align-last: var(--text-align-last-article-p);
            hyphens: var(--hyphens-article-p);
        }
    }

    div.hdg-article p.corner-title:lang(ja) {
        --Stylus-CSS: "* 記事";
        font-size: unset;
        font-optical-sizing: unset;
        --font-family-Stylus: unset;
        line-height: normal;
        text-align: unset;
        text-align-last: unset;
    }
}

:root * :is(article, #article, section.content--body, section.content--detail-main, #personal-public-article-body) p:lang(ja):first-of-type {
    --Stylus-CSS: "* 記事";
    --none: none;
}

:where(html:root, :not(code, pre, .code, .edit)) :where(:lang(ja), :lang(en), :lang(fr)) {
    --Stylus-CSS: "* 記事";
    word-spacing: var(--word-spacing-Stylus-article);
}

:where([style*="background"]) {
    --Stylus-CSS: "* 記事";
    color: currentColor;
}

[data-ual-view-type="list"] {
    --Stylus-CSS: "* 記事";
    line-height: var(--line-height-Stylus-form);
}

@-moz-document regexp("^\\w+-extension://.+") {

}

@-moz-document regexp("https://web.archive.org/site/200") {
/* 2000年代のArchive */
html:root {
    body:lang(ja) {
        --Stylus-CSS: "* 記事";
        font-feature-settings: var(--font-feature-settings-Stylus) !important;
        line-height: 2;
        letter-spacing: 1px;
        text-shadow: 0 0 .25em light-dark(#0000, #000);
        p {
            --Stylus-CSS: "* 記事";
            margin-block-end: 1em;
        }
    }

    *:lang(ja) {
        --Stylus-CSS: "* 記事";
        font-feature-settings: var(--font-feature-settings-Stylus) !important;
        max-width: 100% !important;
        article > div > p {
            --Stylus-CSS: "* 記事";
            font-size: calc(16px * 1.5);
            font-optical-sizing: none;
            --font-family-Stylus: var(--font-family-Stylus-article);
            line-height: 2;
        }
    }
}
}

@-moz-document domain("web.archive.org") {
:root {
    body *:lang(ja) {
        --Stylus-CSS: "* 記事";
        line-height: var(--line-height-Stylus);
        font-feature-settings: var(--font-feature-settings-Stylus);
        font-variant-east-asian: var(--font-variant-east-asian-Stylus);
        font-kerning: var(--font-kerning-Stylus);
        letter-spacing: var(--letter-spacing-Stylus);
        word-spacing: var(--word-spacing-Stylus);
    }

    *:lang(ja) {
        --Stylus-CSS: "* 記事";
        p,
        article > div {
            --Stylus-CSS: "* 記事";
            margin-block-end: 1em;
        }
    }
}
}