elvsc

{% extends "layout.html" %} {% block main %}

<style>
.hub-hero {
    text-align: center;
    margin-top: 6rem;

    .title {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .subtitle {
        font-size: 1.25rem;
    }
}

.hub {
    margin: 3rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;

    .repo {
        background: var(--bg-1);
        border: 1px solid var(transparent);
        border-radius: 8px;
        padding: 1.25rem 1.5rem;

        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        text-decoration: none;
        color: var(--text-0);
        transition: all 0.2s;

        &:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);

            color: var(--text-0);
            border-color: var(--text-2);
            background: var(--bg-2);
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            h1 {
                margin: 0;
                line-height: var(--line-height);
                font-weight: 600;
            }
        }

        .description {
            margin: 0;
            font-size: var(--font-size-base);
            line-height: var(--line-height);
            color: var(--text-1);

            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .meta {
            margin-top: auto;
            padding-top: 0.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;

            font-size: var(--font-size-base);
            line-height: var(--line-height);

            color: var(--text-1);

            .item {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;

                svg {
                    flex-shrink: 0;
                    opacity: 0.8;
                }
            }
        }
    }
}

</style>

<div class="hub-hero">
   <h1 class="title">~elvsc</h1>
   <p class="subtitle"> {{ repositories.len() }} repositories</p>
</div>

<div class="hub">
   {%- for repository in repositories %}
   <a class="repo" href="{{ public }}/{{ repository.name }}/index.html" >
      <div class="header">
         <h1>{{ repository.name }}</h1>
      </div>
      <p class="description">{{ repository.description }}</p>
      <div class="meta">
         <span class="item">
            <svg height="12" width="12" 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>
            {{ repository.commits }}
         </span>
         <span class="item">
            <svg height="12" width="12" 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>
            {{ repository.latest }}
         </span>
      </div>
   </a>
   {% endfor -%}
</div>

{% endblock main %}