kennethreitz.org/tuftecms/templates/quotes.html

{% extends "base.html" %}

{% block content %}
<article class="collection-index-page">
    <header>
        <h1>Quotes Index</h1>
        <p class="subtitle">Collected wisdom &mdash; {{ total_count }} quotable insights across the digital garden.</p>
    </header>

    <section>
        <p>Every blockquote from across the site, extracted and presented as a collection of quotable insights. These are the moments of distilled understanding, the crystallized thoughts worth highlighting and sharing.</p>
        
        <hr>

        {% if articles %}
            {% for article in articles %}
                <div class="article-group">
                    <div class="article-title-container">
                        {% if article.unique_icon %}
                        <img src="{{ article.unique_icon }}" alt="Icon for {{ article.title }}" class="article-icon">
                        {% endif %}
                        <h3 class="article-title">
                            <a href="{{ article.url }}">{{ article.title }}</a>
                        </h3>
                    </div>
                    <div class="article-meta">
                        {{ article.category }}
                        {% if article.date %}
                            &middot; {{ article.date.strftime('%B %Y') if article.date.day == 1 else article.date.strftime('%B %d, %Y') }}
                        {% endif %}
                        &middot; {{ article.quotes|length }} quote{{ 's' if article.quotes|length != 1 else '' }}
                    </div>
                    
                    <div class="quotes-list">
                        {% for quote in article.quotes %}
                            <blockquote>
                                {{ quote.html|safe if quote.html else quote.text|safe if quote.text else quote|safe }}
                            </blockquote>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <p>No quotes found across the site.</p>
        {% endif %}
    </section>
</article>

<style>
    .subtitle {
        font-style: italic;
        color: var(--ink-muted);
        margin-top: -1rem;
        margin-bottom: 2rem;
    }

    .article-group {
        margin-bottom: 3rem;
        border-bottom: 1px solid var(--line-soft);
        padding-bottom: 2rem;
        max-width: 65%;
    }

    .article-group:last-child {
        border-bottom: none;
    }

    .article-title-container {
        position: relative;
        margin-bottom: 0.5rem;
    }

    .article-icon {
        width: 32px;
        height: 32px;
        position: absolute;
        left: -4rem;
        top: 0;
    }

    .article-title {
        font-size: 1.32rem;
        margin: 0;
        line-height: 1.25;
    }

    .article-title a {
        color: var(--ink);
        text-decoration: none;
    }

    .article-title a:hover {
        color: var(--accent);
        text-decoration: underline;
    }

    .article-meta {
        font-size: 0.9rem;
        color: var(--ink-faint);
        margin-bottom: 1.5rem;
    }

    .quotes-list {
        padding-left: 0;
    }

    .quotes-list blockquote {
        width: auto !important;
        margin: 1.5rem 0;
        box-sizing: border-box;
        padding: 1rem 1.4rem;
        border-left: 2px solid color-mix(in srgb, var(--accent) 25%, var(--line));
        font-size: 1.22rem;
        line-height: 1.62;
        color: var(--ink-muted);
        font-style: normal;
        background: color-mix(in srgb, var(--surface) 86%, transparent);
        border-radius: 0 4px 4px 0;
    }

    .quotes-list blockquote:last-child {
        margin-bottom: 0;
    }

    @media (max-width: 768px) {
        .article-group {
            max-width: 100%;
        }

        .article-title-container {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
        }

        .article-icon {
            position: static;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            margin-top: 0.1rem;
        }

        .article-title {
            flex: 1;
            min-width: 0;
        }

        .quotes-list blockquote {
            padding: 0.8rem 1rem;
            font-size: 1.05rem;
        }
    }

</style>
{% endblock %}