kennethreitz.org/tuftecms/templates/sidenotes.html

{% extends "base.html" %}

{% block content %}
<article class="collection-index-page">
    <header>
        <h1>Sidenotes Index</h1>
        <p class="subtitle">The contemplative layer &mdash; {{ total_count }} marginalia across the digital garden.</p>
    </header>

    <section>
        <p>Every sidenote from across the site, extracted and presented as its own contemplative document. These margin thoughts often contain the most honest insights, the recursive observations that couldn't fit in the main narrative flow.</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" loading="lazy">
                        {% 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.sidenotes|length }} sidenote{{ 's' if article.sidenotes|length != 1 else '' }}
                    </div>
                    
                    <div class="sidenotes-list">
                        {% for sidenote in article.sidenotes %}
                            <p class="sidenote-entry">
                                {% if sidenote.id %}
                                    <a href="{{ article.url }}#{{ sidenote.id }}" class="sidenote-link">
                                        {{ sidenote.text|safe if sidenote.text else '' }}
                                    </a>
                                {% else %}
                                    {{ sidenote.text|safe if sidenote.text else sidenote|safe }}
                                {% endif %}
                            </p>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <p>No sidenotes 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;
    }

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

    .sidenote-entry {
        margin-bottom: 1rem;
        padding-left: 1.4rem;
        border-left: 2px solid color-mix(in srgb, var(--accent) 25%, var(--line-soft));
        font-size: 1.25rem;
        line-height: 1.65;
        color: var(--ink);
        font-style: italic;
    }

    .sidenotes-list img {
        display: none !important;
    }
    
    .sidenote-entry img {
        display: none !important;
    }
    
    .sidenote-link img {
        display: none !important;
    }

    .sidenote-entry:last-child {
        margin-bottom: 0;
    }

    .sidenote-link {
        color: inherit;
        text-decoration: none;
        display: block;
    }

    .sidenote-link:hover {
        color: var(--ink);
        background-color: color-mix(in srgb, var(--accent) 6%, transparent);
        margin-left: -0.5rem;
        padding-left: 0.5rem;
        border-radius: 3px;
    }

    @media (max-width: 768px) {
        .sidenotes-list {
            padding-left: 0.5rem;
        }

        .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;
        }
        
        .sidenote-entry {
            padding-left: 1rem;
            font-size: 1rem;
        }
    }
</style>
{% endblock %}