kennethreitz.org/tuftecms/templates/archive-by-length.html

{% extends "base.html" %}

{% block title %}{{ archive_title }}{% endblock %}

{% block content %}
<h1>{{ archive_title }}</h1>

<p>Essays organized by estimated reading time (based on ~200 words per minute).</p>

<nav class="year-picker">
    <div class="browse-by-type">
        <strong>Browse by:</strong>
        <div class="type-links">
            <a href="/archive">By Date</a>
            <a href="/archive/by-length">By Length</a>
            <a href="/archive/themes" class="themes-link">Themes</a>
            <a href="/search" class="search-link">Search</a>
            <a href="/directory" class="directory-link">Directory</a>
            <a href="/random" class="random-link">Random</a>
        </div>
    </div>
    <div class="browse-by-type" style="margin-top: 1rem;">
        <strong>Indexes:</strong>
        <div class="type-links">
            <a href="/archive/sidenotes">Sidenotes</a>
            <a href="/archive/outlines">Outlines</a>
            <a href="/archive/quotes">Quotes</a>
            <a href="/archive/connections">Connections</a>
            <a href="/archive/terms">Terms</a>
            <a href="/archive/graph">Graph</a>
        </div>
    </div>
</nav>

<div style="margin-top: 1rem; margin-bottom: 1rem;">
    <button id="toggleOrder" class="sort-toggle">Sort: Longest First ↓</button>
</div>

{% if grouped_posts %}
    {% for group_name, posts in grouped_posts.items() %}
        <section>
            <h2>{{ group_name }} <span style="color: #999; font-weight: normal; font-size: 0.85em;">({{ posts|length }} essays)</span></h2>
            
            {% for post in posts %}
                <div class="archive-post">
                    <div class="archive-post-content">
                        <p><strong><a href="{{ post.url }}">{{ post.title }}</a></strong>
                        <span class="reading-time">{{ post.reading_time }} min</span>
                        <span class="word-count">{{ post.word_count }} words</span>
                        {% if post.pub_date %}
                            <span class="post-date">{{ post.pub_date.strftime('%B %Y') }}</span>
                        {% endif %}
                        <br>
                        {% if post.description %}
                            {{ post.description }}
                        {% endif %}
                        </p>
                    </div>
                </div>
            {% endfor %}
        </section>
    {% endfor %}
{% else %}
    <p>No posts found.</p>
{% endif %}

<style>
.year-picker {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    width: 55%;
    position: relative;
    z-index: 1;
}

.browse-by-type {
    font-size: 0.9em;
}

.browse-by-type strong {
    display: block;
    margin-bottom: 0.5rem;
}

.type-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.type-links a {
    color: #666;
    text-decoration: none;
    background: #f0f0f0;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.type-links a:hover {
    color: #333;
    background: #e0e0e0;
}

.reading-time,
.word-count,
.post-date {
    color: #666;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.reading-time {
    background: #e8f4f8;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-weight: 500;
}

.word-count {
    font-style: italic;
}

.post-date {
    color: #999;
}

section {
    margin-bottom: 2.5rem;
}

section h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.archive-post {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
}

.archive-post-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.3rem;
    margin-left: -3rem;
}

.archive-post-content {
    flex: 1;
}

.archive-post-content p {
    margin: 0;
}

@media (max-width: 1400px) {
    .year-picker {
        width: 60%;
    }
}

@media (max-width: 1200px) {
    .year-picker {
        width: 70%;
    }
}

@media (max-width: 760px) {
    .year-picker {
        width: 100%;
        padding: 0.8rem 1rem;
    }
    
    .archive-post-icon {
        margin-left: -2rem;
        width: 20px;
        height: 20px;
    }
    
    .reading-time,
    .word-count,
    .post-date {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

.sort-toggle {
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.sort-toggle:hover {
    background: #e0e0e0;
}

.random-link {
    background: #f3e8ff !important;
    color: #9333ea !important;
}

.random-link:hover {
    background: #e9d5ff !important;
    color: #7c3aed !important;
}

.directory-link {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.directory-link:hover {
    background: #fecaca !important;
    color: #dc2626 !important;
}

.search-link {
    background: #fefce8 !important;
    color: #ca8a04 !important;
}

.search-link:hover {
    background: #fef9c3 !important;
    color: #a16207 !important;
}

.themes-link {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.themes-link:hover {
    background: #bbf7d0 !important;
    color: #15803d !important;
}

@media (max-width: 768px) {
    .sort-toggle {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}

body.light-mode .year-picker {
    background: #f8f8f8 !important;
    border-color: #e0e0e0 !important;
}

body.light-mode .type-links a {
    background: #f0f0f0 !important;
    color: #666 !important;
}

body.light-mode .type-links a:hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}

body.dark-mode .year-picker {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .type-links a {
    background: #2a2a2a;
    color: #ccc;
}

body.dark-mode .type-links a:hover {
    background: #333;
    color: #fff;
}

body.dark-mode .random-link {
    background: #2d1b3d !important;
    color: #c084fc !important;
}

body.dark-mode .random-link:hover {
    background: #3d2352 !important;
    color: #e9d5ff !important;
}

body.dark-mode .directory-link {
    background: #3d1a1a !important;
    color: #f87171 !important;
}

body.dark-mode .directory-link:hover {
    background: #4d2020 !important;
    color: #fca5a5 !important;
}

body.dark-mode .search-link {
    background: #3d3d1a !important;
    color: #fbbf24 !important;
}

body.dark-mode .search-link:hover {
    background: #4d4d20 !important;
    color: #fde68a !important;
}

body.dark-mode .themes-link {
    background: #1a3d1a !important;
    color: #4ade80 !important;
}

body.dark-mode .themes-link:hover {
    background: #204d20 !important;
    color: #86efac !important;
}

body.dark-mode .sort-toggle {
    background: #2a2a2a;
    border-color: #333;
    color: #ccc;
}

body.dark-mode .sort-toggle:hover {
    background: #333;
    color: #fff;
}

body.dark-mode .reading-time {
    background: #1a2d33;
}

@media (prefers-color-scheme: dark) {
    .year-picker {
        background: #1a1a1a;
        border-color: #333;
    }
    
    .type-links a {
        background: #2a2a2a;
        color: #ccc;
    }
    
    .type-links a:hover {
        background: #333;
        color: #fff;
    }
    
    .random-link {
        background: #2d1b3d !important;
        color: #c084fc !important;
    }
    
    .random-link:hover {
        background: #3d2352 !important;
        color: #e9d5ff !important;
    }
    
    .directory-link {
        background: #3d1a1a !important;
        color: #f87171 !important;
    }
    
    .directory-link:hover {
        background: #4d2020 !important;
        color: #fca5a5 !important;
    }
    
    .search-link {
        background: #3d3d1a !important;
        color: #fbbf24 !important;
    }
    
    .search-link:hover {
        background: #4d4d20 !important;
        color: #fde68a !important;
    }
    
    .themes-link {
        background: #1a3d1a !important;
        color: #4ade80 !important;
    }
    
    .themes-link:hover {
        background: #204d20 !important;
        color: #86efac !important;
    }
    
    .sort-toggle {
        background: #2a2a2a;
        border-color: #333;
        color: #ccc;
    }
    
    .sort-toggle:hover {
        background: #333;
        color: #fff;
    }
    
    .reading-time {
        background: #1a2d33;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('toggleOrder');
    const sections = Array.from(document.querySelectorAll('section'));
    let isDescending = true;
    
    button.addEventListener('click', function() {
        isDescending = !isDescending;
        
        // Reverse the sections
        sections.reverse();
        
        // Re-insert them in reversed order
        const parent = sections[0].parentNode;
        sections.forEach(section => {
            parent.appendChild(section);
        });
        
        // Update button text
        button.textContent = isDescending ? 'Sort: Longest First ↓' : 'Sort: Shortest First ↑';
    });
});
</script>
{% endblock %}