mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-21 06:50:56 +00:00
kennethreitz
8274aeef6c
Changed selectors from 'body.light-mode .random-link' to 'body.light-mode .type-links a.random-link' to match the specificity of the generic gray button rule and ensure colored buttons (Random, Directory, Search, Themes) display correctly in light mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
611 lines
13 KiB
HTML
611 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ archive_title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>{{ archive_title }}</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 'Complete Archive' in archive_title %}
|
|
<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; display: flex; gap: 0.5rem;">
|
|
<button id="toggleOrder" class="sort-toggle">Sort: Newest First ↓</button>
|
|
<div class="year-jump-dropdown">
|
|
<button id="yearJumpButton" class="sort-toggle">Jump to Year</button>
|
|
<div id="yearDropdown" class="year-dropdown-content">
|
|
{% for year in grouped_posts.keys() %}
|
|
<a href="#year-{{ year }}">{{ year }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if grouped_posts %}
|
|
{% for group_name, posts in grouped_posts.items() %}
|
|
<section{% if 'Complete Archive' in archive_title %} 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.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;
|
|
max-width: 65%;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.year-jump-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.year-dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: white !important;
|
|
min-width: 120px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
z-index: 9999;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.year-dropdown-content a {
|
|
color: #333;
|
|
padding: 0.5rem 1rem;
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.year-dropdown-content a:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.year-dropdown-content.show {
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sort-toggle,
|
|
#yearJumpButton {
|
|
font-size: 0.85rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
.year-dropdown-content {
|
|
min-width: 100px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.year-dropdown-content a {
|
|
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.light-mode .type-links a.random-link {
|
|
background: #f3e8ff !important;
|
|
color: #9333ea !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.random-link:hover {
|
|
background: #e9d5ff !important;
|
|
color: #7c3aed !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.directory-link {
|
|
background: #fee2e2 !important;
|
|
color: #ef4444 !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.directory-link:hover {
|
|
background: #fecaca !important;
|
|
color: #dc2626 !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.search-link {
|
|
background: #fefce8 !important;
|
|
color: #ca8a04 !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.search-link:hover {
|
|
background: #fef9c3 !important;
|
|
color: #a16207 !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.themes-link {
|
|
background: #dcfce7 !important;
|
|
color: #16a34a !important;
|
|
}
|
|
|
|
body.light-mode .type-links a.themes-link:hover {
|
|
background: #bbf7d0 !important;
|
|
color: #15803d !important;
|
|
}
|
|
|
|
body.light-mode .year-dropdown-content {
|
|
background-color: white !important;
|
|
border-color: #ddd !important;
|
|
}
|
|
|
|
body.light-mode .year-dropdown-content a {
|
|
color: #333 !important;
|
|
}
|
|
|
|
body.light-mode .year-dropdown-content a:hover {
|
|
background-color: #f0f0f0 !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,
|
|
body.dark-mode #yearJumpButton {
|
|
background: #2a2a2a;
|
|
border-color: #333;
|
|
color: #ccc;
|
|
}
|
|
|
|
body.dark-mode .sort-toggle:hover,
|
|
body.dark-mode #yearJumpButton:hover {
|
|
background: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
body.dark-mode .year-dropdown-content {
|
|
background-color: #1a1a1a !important;
|
|
border-color: #333;
|
|
}
|
|
|
|
body.dark-mode .year-dropdown-content a {
|
|
color: #ccc;
|
|
}
|
|
|
|
body.dark-mode .year-dropdown-content a:hover {
|
|
background-color: #2a2a2a;
|
|
}
|
|
|
|
@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,
|
|
#yearJumpButton {
|
|
background: #2a2a2a;
|
|
border-color: #333;
|
|
color: #ccc;
|
|
}
|
|
|
|
.sort-toggle:hover,
|
|
#yearJumpButton:hover {
|
|
background: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
.year-dropdown-content {
|
|
background-color: #1a1a1a !important;
|
|
border-color: #333;
|
|
}
|
|
|
|
.year-dropdown-content a {
|
|
color: #ccc;
|
|
}
|
|
|
|
.year-dropdown-content a:hover {
|
|
background-color: #2a2a2a;
|
|
}
|
|
}
|
|
</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: Newest First ↓' : 'Sort: Oldest First ↑';
|
|
});
|
|
|
|
// Year jump dropdown
|
|
const yearButton = document.getElementById('yearJumpButton');
|
|
const yearDropdown = document.getElementById('yearDropdown');
|
|
|
|
if (yearButton && yearDropdown) {
|
|
yearButton.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
yearDropdown.classList.toggle('show');
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function() {
|
|
yearDropdown.classList.remove('show');
|
|
});
|
|
|
|
// Close dropdown when clicking a year link
|
|
yearDropdown.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
yearDropdown.classList.remove('show');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |