Abbaye — version_index.html.j2

at 4940405
<!doctype html>
<html prefix="og: https://ogp.me/ns#" lang="{{lang|default(value='en')}}">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {% if config.site.fediverse_creator %}<meta name="fediverse:creator" content="{{ config.site.fediverse_creator }}" />{% endif %}
        {% if config.site.opengraph %}
            <meta property="og:title" content="{{ project_name }} — {{ version }}" />
            <meta property="og:type" content="{{ config.site.opengraph.type|default(value='article') }}" />
            <meta property="og:image" content="{{config.site.base_url}}/{{ config.site.opengraph.image }}" />
            {% if config.site.opengraph.image_alt_text %}
                <meta property="og:image:alt" content="{{ config.site.opengraph.image_alt_text }}" />
            {% endif %}
            <meta property="og:url" content="{{ config.site.opengraph.url|default(value=config.site.base_url)|safe }}/{{ version }}" />
            <meta property="og:site_name" content="{{ project_name }}" />
            {% if config.site.opengraph.description %}
                <meta property="og:description" content="{{ config.site.opengraph.description }}" />
            {% endif %}
        {% endif %}
        <title>{{ project_name }} — {{ version }}</title>
        <style>
            *,
            *::before,
            *::after {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            body {
                font-family:
                    system-ui,
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    sans-serif;
                color: #2e2416;
                background: #f5efe4;
                line-height: 1.6;
            }
            /* ── Header ── */
            header {
                background: #3d5732;
                color: #f0e8d8;
                padding: 0.75rem 1.5rem;
                display: flex;
                align-items: center;
                gap: 1.5rem;
            }
            header a {
                color: #c8bbaa;
                text-decoration: none;
                font-size: 0.9rem;
            }
            header a:hover {
                text-decoration: underline;
                color: #f0e8d8;
            }
            header .title {
                font-weight: 600;
                font-size: 1rem;
            }
            /* ── Layout ── */
            .layout {
                display: flex;
                min-height: calc(100vh - 44px);
            }
            /* ── Sidebar ── */
            aside {
                width: 230px;
                flex-shrink: 0;
                background: #ede5d8;
                border-right: 1px solid #c9baa8;
                padding: 1.5rem 1rem;
                font-size: 0.875rem;
            }
            aside h3 {
                font-size: 0.65rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.12em;
                color: #7a6855;
                margin-top: 1.5rem;
                margin-bottom: 0.5rem;
            }
            aside h3:first-child {
                margin-top: 0;
            }
            aside ul {
                list-style: none;
            }
            aside li {
                padding: 0.25rem 0;
            }
            aside a {
                color: #7a4429;
                text-decoration: none;
            }
            aside a:hover {
                text-decoration: underline;
                color: #a05a3a;
            }
            /* ── Main content ── */
            main {
                flex: 1;
                padding: 2rem 2.5rem;
                max-width: 860px;
                overflow-x: hidden;
                background: #fdfaf5;
            }
            /* ── Markdown typography ── */
            main h1,
            main h2,
            main h3,
            main h4,
            main h5,
            main h6 {
                margin-top: 1.5em;
                margin-bottom: 0.5em;
                line-height: 1.3;
                color: #2e2416;
            }
            main h1 {
                font-size: 1.9rem;
                border-bottom: 2px solid #c9baa8;
                padding-bottom: 0.4rem;
            }
            main h2 {
                font-size: 1.4rem;
                border-bottom: 1px solid #ddd4c4;
                padding-bottom: 0.3rem;
            }
            main h3 {
                font-size: 1.15rem;
            }
            main p {
                margin-bottom: 1em;
            }
            main a {
                color: #7a4429;
            }
            main a:hover {
                color: #a05a3a;
            }
            main img {
                max-width: 100%;
                height: auto;
            }
            main pre {
                background: #eae2d4;
                border: 1px solid #c9baa8;
                border-radius: 5px;
                padding: 1em 1.25em;
                overflow-x: auto;
                margin-bottom: 1em;
                font-size: 0.875em;
            }
            main code {
                font-family:
                    "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
                    monospace;
                background: #eae2d4;
                padding: 0.15em 0.4em;
                border-radius: 3px;
                font-size: 0.875em;
            }
            main pre code {
                background: none;
                padding: 0;
                font-size: inherit;
            }
            main ul,
            main ol {
                padding-left: 1.5em;
                margin-bottom: 1em;
            }
            main li {
                margin-bottom: 0.2em;
            }
            main table {
                border-collapse: collapse;
                margin-bottom: 1em;
                width: 100%;
            }
            main th,
            main td {
                border: 1px solid #c9baa8;
                padding: 0.4em 0.75em;
                text-align: left;
            }
            main th {
                background: #ede5d8;
                font-weight: 600;
            }
            main blockquote {
                border-left: 4px solid #c9baa8;
                padding: 0.5em 1em;
                margin: 0 0 1em;
                color: #7a6855;
                font-style: italic;
            }
            /* ── Dist file metadata ── */
            .dist-meta {
                font-size: 0.75rem;
                color: #7a6855;
                margin-top: 0.15rem;
                word-break: break-all;
            }
            .dist-meta code {
                font-family:
                    "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
                    monospace;
                font-size: 0.7rem;
            }
            /* ── Changelog section ── */
            .changelog-divider {
                border: none;
                border-top: 2px solid #c9baa8;
                margin: 2.5rem 0;
            }
            .changelog-heading {
                font-size: 1.3rem;
                font-weight: 600;
                color: #5a4030;
                margin-bottom: 1rem;
            }
            /* ── Responsive ── */
            @media (max-width: 640px) {
                .layout {
                    flex-direction: column;
                }
                aside {
                    width: 100%;
                    border-right: none;
                    border-bottom: 1px solid #c9baa8;
                }
            }
        </style>
    </head>
    <body>
        <header>
            <a href="../">← All versions</a>
            <span class="title">{{ project_name }} — {{ version }}</span>
        </header>
        <div class="layout">
            <aside>
                {% if repo_url %}
                <h3>Repository</h3>
                <p><a href="{{ repo_url }}">{{ repo_url }}</a></p>
                {% endif %} {% if has_docs %}
                <h3>Documentation</h3>
                <ul>
                    <li><a href="docs/">📖 API docs</a></li>
                    {% if has_docs_tarball %}
                    <li><a href="docs.tar.gz">⬇ docs.tar.gz</a></li>
                    {% endif %}
                </ul>
                {% endif %} {% if has_dist %}
                <h3>Downloads</h3>
                <ul>
                    {% for file in dist_files %}
                    <li>
                        <a href="dist/{{ file.name }}">⬇ {{ file.name }}</a>
                        <div class="dist-meta">
                            {{ file.size_human }}<br /><code title="SHA-256"
                                >sha256: {{ file.sha256 }}</code
                            >
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </aside>
            <main>
                {{ readme_html | safe }} {% if changelog_html %}
                <hr class="changelog-divider" />
                <h2 class="changelog-heading">Changes in {{ version }}</h2>
                {{ changelog_html | safe }} {% endif %}
            </main>
        </div>
    </body>
</html>