mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-10-24 06:29:15 +00:00
336 lines
8.0 KiB
HTML
336 lines
8.0 KiB
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 browse-by-type-secondary">
|
|
<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 class="archive-toolbar">
|
|
<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 class="h2-note" style="color: var(--ink-faint); 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 {
|
|
padding: 1.15rem 1.35rem;
|
|
margin: 2rem 0 1.25rem;
|
|
width: 65%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.browse-by-type {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.browse-by-type + .browse-by-type {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.browse-by-type strong {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.type-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.type-links a {
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
|
|
border: 1px solid var(--line-soft);
|
|
padding: 0.28rem 0.65rem;
|
|
font-size: 0.85rem;
|
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.type-links a:hover {
|
|
color: var(--ink);
|
|
background: color-mix(in srgb, var(--accent) 7%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
|
}
|
|
|
|
.reading-time,
|
|
.word-count,
|
|
.post-date {
|
|
color: var(--ink-muted);
|
|
font-size: 0.85rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.reading-time {
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
padding: 0.15rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.word-count {
|
|
font-style: italic;
|
|
}
|
|
|
|
.post-date {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
.archive-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
width: 65%;
|
|
box-sizing: border-box;
|
|
margin: 0 0 2rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
section h2 {
|
|
border-bottom: 1px solid var(--line-soft);
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
max-width: 65%;
|
|
}
|
|
|
|
.archive-post {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
width: 65%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 0;
|
|
padding: 0.85rem 0 0.85rem 1rem;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.archive-post:hover {
|
|
background: color-mix(in srgb, var(--surface) 72%, transparent);
|
|
}
|
|
|
|
.archive-post:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.archive-post-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
margin-top: 0.3rem;
|
|
margin-left: -3rem;
|
|
}
|
|
|
|
.archive-post-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-post-content p {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
width: auto !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box;
|
|
line-height: 1.42;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
@media (max-width: 1400px) {
|
|
.year-picker {
|
|
width: 80%;
|
|
}
|
|
|
|
.archive-toolbar,
|
|
.archive-post,
|
|
section h2 {
|
|
width: 80%;
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.year-picker {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.year-picker,
|
|
.archive-toolbar,
|
|
.archive-post,
|
|
section h2 {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.year-picker {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.8rem 1rem;
|
|
}
|
|
|
|
.archive-toolbar {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
section h2,
|
|
.archive-post {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.archive-post {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.archive-post-icon {
|
|
margin-left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.reading-time,
|
|
.word-count,
|
|
.post-date {
|
|
display: block;
|
|
margin-left: 0;
|
|
margin-top: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* Each special pill keeps its own category hue (tokens adapt to dark mode). */
|
|
.themes-link {
|
|
background: color-mix(in srgb, var(--cat-poetry) 12%, transparent) !important;
|
|
color: var(--cat-poetry) !important;
|
|
}
|
|
.search-link {
|
|
background: color-mix(in srgb, var(--cat-music) 12%, transparent) !important;
|
|
color: var(--cat-music) !important;
|
|
}
|
|
.directory-link {
|
|
background: color-mix(in srgb, var(--cat-software) 12%, transparent) !important;
|
|
color: var(--cat-software) !important;
|
|
}
|
|
.random-link {
|
|
background: color-mix(in srgb, var(--cat-ai) 12%, transparent) !important;
|
|
color: var(--cat-ai) !important;
|
|
}
|
|
|
|
.themes-link:hover {
|
|
background: color-mix(in srgb, var(--cat-poetry) 22%, transparent) !important;
|
|
color: var(--cat-poetry) !important;
|
|
}
|
|
.search-link:hover {
|
|
background: color-mix(in srgb, var(--cat-music) 22%, transparent) !important;
|
|
color: var(--cat-music) !important;
|
|
}
|
|
.directory-link:hover {
|
|
background: color-mix(in srgb, var(--cat-software) 22%, transparent) !important;
|
|
color: var(--cat-software) !important;
|
|
}
|
|
.random-link:hover {
|
|
background: color-mix(in srgb, var(--cat-ai) 22%, transparent) !important;
|
|
color: var(--cat-ai) !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sort-toggle {
|
|
font-size: 0.85rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const button = document.getElementById('toggleOrder');
|
|
const sections = Array.from(document.querySelectorAll('section'));
|
|
let isDescending = true;
|
|
|
|
if (button && sections.length > 0) {
|
|
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 %}
|