elvsc

{% extends "layout.html" %}

{% block main %}

<style>
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;

    .root { font-size: 1.5rem; }

    .routes {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-size: 1.5rem;

        a { margin-left: 1.5rem; }
    }
}

@media (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: flex-start;

        .routes {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        .routes a { margin: 0.5rem 0; }
    }
}

.repo-hero {
    width: 100%;
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    h1 {
        margin: 0;

        a:hover {
            background-color: var(--bg-0);
            color: var(--text-0);
        }
    }

    .stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        color: var(--text-1);

        .item {
            display: flex;
            align-items: center;
            margin-right: 1rem;

            svg { margin-right: 0.25rem; }
        }
    }
}

.bookmark-select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-0);

    .dropdown {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: 0.5rem;
        }

        &:hover .options { display: flex; }

        .current {
            color: var(--text-1);
            border-bottom: 1px solid var(--bg-2);
            padding: 0.15rem 0.25rem;
            cursor: pointer;
            font-size: var(--font-size-base);
            transition: color 0.15s, border-color 0.15s;

            &:hover {
                color: var(--text-0);
                border-bottom-color: var(--text-2);
            }
        }

        .options {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 0.25rem;
            background: var(--bg-1);
            border: 1px solid var(--bg-2);
            border-radius: 6px;
            overflow: hidden;
            z-index: 10;
            min-width: 100%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .option {
            padding: 0.35rem 0.75rem;
            color: var(--text-1);
            text-decoration: none;
            font-size: var(--font-size-base);
            white-space: nowrap;
            transition: background 0.1s, color 0.1s;

            &:hover { background: var(--bg-2); color: var(--text-0); }
            &.active { color: var(--primary-color); }
        }
    }
}
</style>

<nav>
    <div class="root">
        <a href="{{ public }}/index.html">~elvsc</a>
    </div>

    <div class="routes">
        <a href="{{ public }}/{{ summary.name }}/{{ bookmark }}/tree/index.html">./tree</a>
    </div>
</nav>

<div class="repo-hero">
    <h1><a href="{{ public }}/{{ summary.name }}/{{ bookmark }}/index.html">{{ summary.name }}</a></h1>

    <div class="bookmark-select">
        <svg height="16" width="16" viewBox="0 0 16 16">
            <path fill="currentColor" d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.492 2.492 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Z"></path>
        </svg>
        <div class="dropdown">
            <span class="current">{{ bookmark }}</span>
            <div class="options">
                {% for b in bookmarks %}
                <a href="{{ public }}/{{ summary.name }}/{{ b }}/index.html"
                    class="option {% if b == bookmark %}active{% endif %}">
                    {{ b }}
                </a>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="stats">
        <div class="item">
            <svg height="16" width="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path>
            </svg>
            <span><strong>{{ summary.commits }}</strong> commits</span>
        </div>

        <div class="item">
            <svg height="16" width="16" viewBox="0 0 16 16">
                <path fill="currentColor" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"></path>
            </svg>
            <span>Updated <strong>{{ summary.latest }}</strong></span>
        </div>
    </div>
</div>

{% block view %}{% endblock view %}
{% endblock main %}