93 lines
2.7 KiB
HTML
93 lines
2.7 KiB
HTML
{% extends "base_public.html" %}
|
|
|
|
{% block title %}The Crumbforest Crew{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="container">
|
|
<hgroup>
|
|
<h1>🌲 The Crumbforest Crew</h1>
|
|
<p>Meet the 15 experts ready to help you learn and build.</p>
|
|
</hgroup>
|
|
|
|
<div class="crew-grid">
|
|
{% for id, role in roles.items() %}
|
|
<article class="role-card" style="border-left: 5px solid {{ role.color }};">
|
|
<header>
|
|
<div class="role-icon">{{ role.icon }}</div>
|
|
<h3 style="color: {{ role.color }}">{{ role.name }}</h3>
|
|
<small>{{ role.title }}</small>
|
|
</header>
|
|
<p>{{ role.description }}</p>
|
|
<footer>
|
|
{% if id == 'eule' %}
|
|
<!-- Eule is public -->
|
|
<a href="/crumbforest/roles/{{ id }}" role="button" class="contrast"
|
|
style="background-color: {{ role.color }}; border-color: {{ role.color }}; width: 100%;">
|
|
Start Chat
|
|
</a>
|
|
{% else %}
|
|
<!-- Others require login (or are locked) -->
|
|
{% if user %}
|
|
<a href="/crumbforest/roles/{{ id }}" role="button" class="outline"
|
|
style="color: {{ role.color }}; border-color: {{ role.color }}; width: 100%;">
|
|
Chat
|
|
</a>
|
|
{% else %}
|
|
<a href="/login?next=/crumbforest/roles/{{ id }}" role="button" class="secondary outline"
|
|
style="width: 100%;">
|
|
🔒 Login to Chat
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</footer>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<style>
|
|
.crew-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* 3 Column Layout for larger screens to enforce 3x5 if roles are multiple of 3 */
|
|
@media (min-width: 992px) {
|
|
.crew-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.role-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
/* Override pico */
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.role-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.role-card header {
|
|
text-align: center;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.role-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.role-card p {
|
|
flex-grow: 1;
|
|
/* Push footer down */
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
{% endblock %} |