kennethreitz.org/templates/archive.html

{% extends "base.html" %}

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

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

<p><strong><a href="/feed.xml">[RSS Feed]</a></strong> • Get all articles with full content.</p>

{% if archive_description %}
<p>{{ archive_description }}</p>
{% endif %}

{% if grouped_posts and archive_title == 'Complete' %}
<nav class="year-picker">
    <div class="jump-to-year">
        <strong>Jump to year:</strong>
        <div class="year-links">
            {% for year in grouped_posts.keys() %}
                <a href="#year-{{ year }}">{{ year }}</a>
            {% endfor %}
        </div>
    </div>
    <div class="browse-by-type">
        <strong>Browse by type:</strong>
        <div class="type-links">
            <a href="/directory">File Directory</a>
            <a href="/search">Search</a>
            <a href="/themes">Themes</a>
            <a href="/sidenotes">Sidenotes</a>
            <a href="/outlines">Outlines</a>
            <a href="/quotes">Quotes</a>
            <a href="/connections">Connections</a>
            <a href="/terms">Terms</a>
            <a href="/graph">Graph</a>
        </div>
    </div>
</nav>
{% endif %}

{% if grouped_posts %}
    {% for group_name, posts in grouped_posts.items() %}
        <section{% if archive_title == 'Complete' %} id="year-{{ group_name }}"{% endif %}>
            <h2>{{ group_name }}</h2>
            
            {% for post in posts %}
                <div class="archive-post">
                    {% if post.unique_icon %}
                    <img src="{{ post.unique_icon }}" alt="Icon for {{ post.title }}" class="archive-post-icon">
                    {% endif %}
                    <div class="archive-post-content">
                        <p><strong><a href="{{ post.url }}">{{ post.title }}</a></strong>
                        {% if post.pub_date %}
                            <span class="post-date">{{ post.pub_date.strftime('%B %d, %Y') }}</span>
                        {% endif %}
                        <br>
                        {% if post.description %}
                            {{ post.description }}
                        {% endif %}
                        </p>
                    </div>
                </div>
            {% endfor %}
        </section>
    {% endfor %}
{% else %}
    <p>No posts found in this archive.</p>
    <p><a href="/essays">Browse Essays</a> • <a href="/artificial-intelligence">Browse AI Writings</a></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;
}

.year-picker p {
    margin: 0;
    font-size: 0.95rem;
}

.jump-to-year {
    margin-top: 0.5rem;
    font-size: 0.9em;
}

.browse-by-type {
    margin-top: 1rem;
    font-size: 0.9em;
}

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

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

.year-links a,
.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;
}

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


.post-date {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    margin-left: 0.5rem;
}

section {
    margin-bottom: 2.5rem;
    scroll-margin-top: 2rem; /* Offset for smooth scrolling to anchors */
}

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

/* Archive post layout with icons */
.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;
}

/* Legacy styles for backward compatibility */
section p {
    margin-bottom: 1.5rem;
    padding-left: 1rem;
}

section p:last-child {
    margin-bottom: 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;
    }
    
    .year-picker p {
        font-size: 0.9rem;
    }
    
    .archive-post-icon {
        margin-left: -2rem;
        width: 20px;
        height: 20px;
    }
}
</style>
{% endblock %}