mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-21 06:50:56 +00:00
kennethreitz
b42be29601
- Added comprehensive dark mode styling to outlines, connections, and terms archive pages - New essay: "Conscious Recursion: When Programmers Realize They're in the Loop" exploring how code shapes consciousness and the responsibility of recognizing you're in the recursive feedback loop 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
274 lines
9.5 KiB
HTML
274 lines
9.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<article>
|
|
<header>
|
|
<h1>Connections Index</h1>
|
|
<p class="subtitle">The knowledge web — {{ total_outgoing or total_count }} outgoing and {{ total_incoming or 0 }} incoming cross-references revealing the interconnected nature of ideas.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<p>Every internal link from across the site, extracted and presented as a map of intellectual connections. These cross-references reveal how ideas build on each other, creating a web of meaning that transcends individual essays.</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">
|
|
{% endif %}
|
|
<h3 class="article-title">
|
|
<a href="{{ article.url }}">{{ article.title }}</a>
|
|
</h3>
|
|
</div>
|
|
<div class="article-meta">
|
|
{{ article.category }}
|
|
{% if article.date %}
|
|
· {{ article.date.strftime('%B %Y') if article.date.day == 1 else article.date.strftime('%B %d, %Y') }}
|
|
{% endif %}
|
|
· {{ article.outgoing_connections|length or article.connections|length }} outgoing, {{ article.incoming_connections|length }} incoming
|
|
</div>
|
|
|
|
{% if article.outgoing_connections or article.connections %}
|
|
<div class="connections-section">
|
|
<h4 class="connections-heading">Outgoing Links</h4>
|
|
<div class="connections-list">
|
|
{% for connection in article.outgoing_connections or article.connections %}
|
|
<div class="connection-entry outgoing">
|
|
<div class="connection-arrow">→</div>
|
|
<div class="connection-target">
|
|
<strong><a href="{{ connection.target_url }}">{{ connection.link_text }}</a></strong>
|
|
<div class="connection-url">{{ connection.target_url }}</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if article.incoming_connections %}
|
|
<div class="connections-section">
|
|
<h4 class="connections-heading">Incoming Links</h4>
|
|
<div class="connections-list">
|
|
{% for connection in article.incoming_connections %}
|
|
<div class="connection-entry incoming">
|
|
<div class="connection-arrow">←</div>
|
|
<div class="connection-target">
|
|
<strong><a href="{{ connection.source_url }}">{{ connection.source_title }}</a></strong>
|
|
<div class="connection-url">{{ connection.source_url }}</div>
|
|
{% if connection.link_text %}
|
|
<div class="connection-context">Links as: "{{ connection.link_text }}"</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p>No connections found across the site.</p>
|
|
{% endif %}
|
|
</section>
|
|
</article>
|
|
|
|
<style>
|
|
.subtitle {
|
|
font-style: italic;
|
|
color: #666;
|
|
margin-top: -1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.article-group {
|
|
margin-bottom: 3rem;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.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.4rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.article-title a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.article-title a:hover {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.article-meta {
|
|
font-size: 0.9rem;
|
|
color: #888;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.connections-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.connections-heading {
|
|
font-size: 1.1rem;
|
|
color: #444;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.connections-list {
|
|
padding-left: 0;
|
|
max-width: 65%;
|
|
}
|
|
|
|
.connection-entry {
|
|
margin-bottom: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
background: #fafafa;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.connection-entry:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.connection-arrow {
|
|
font-size: 1.2rem;
|
|
color: #666;
|
|
margin-top: 0.1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.connection-target {
|
|
flex: 1;
|
|
}
|
|
|
|
.connection-target strong a {
|
|
color: #2563eb;
|
|
text-decoration: none;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.connection-target strong a:hover {
|
|
color: #1d4ed8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.connection-url {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
font-family: monospace;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.connection-context {
|
|
font-size: 0.85rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.connection-entry.incoming {
|
|
border-left: 3px solid #e0e0e0;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.connection-entry.outgoing {
|
|
border-left: 3px solid #2563eb;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.connections-list {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.connection-entry {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.connection-arrow {
|
|
align-self: center;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.connection-target {
|
|
flex: none;
|
|
}
|
|
}
|
|
|
|
body.light-mode .subtitle { color: #666 !important; }
|
|
body.light-mode .article-group { border-bottom-color: #e0e0e0 !important; }
|
|
body.light-mode .article-title a { color: #333 !important; }
|
|
body.light-mode .article-title a:hover { color: #000 !important; }
|
|
body.light-mode .article-meta { color: #888 !important; }
|
|
body.light-mode .connections-heading { color: #444 !important; }
|
|
body.light-mode .connection-entry { border-color: #e0e0e0 !important; background: #fafafa !important; }
|
|
body.light-mode .connection-arrow { color: #666 !important; }
|
|
body.light-mode .connection-target strong a { color: #2563eb !important; }
|
|
body.light-mode .connection-target strong a:hover { color: #1d4ed8 !important; }
|
|
body.light-mode .connection-url { color: #888 !important; }
|
|
body.light-mode .connection-context { color: #666 !important; }
|
|
body.light-mode .connection-entry.incoming { border-left-color: #e0e0e0 !important; background: #f9f9f9 !important; }
|
|
body.light-mode .connection-entry.outgoing { border-left-color: #2563eb !important; }
|
|
|
|
body.dark-mode .subtitle { color: #999; }
|
|
body.dark-mode .article-group { border-bottom-color: #2a2a2a; }
|
|
body.dark-mode .article-title a { color: #ccc; }
|
|
body.dark-mode .article-title a:hover { color: #fff; }
|
|
body.dark-mode .article-meta { color: #666; }
|
|
body.dark-mode .connections-heading { color: #ccc; }
|
|
body.dark-mode .connection-entry { border-color: #333; background: #1a1a1a; }
|
|
body.dark-mode .connection-arrow { color: #999; }
|
|
body.dark-mode .connection-target strong a { color: #60a5fa; }
|
|
body.dark-mode .connection-target strong a:hover { color: #93c5fd; }
|
|
body.dark-mode .connection-url { color: #666; }
|
|
body.dark-mode .connection-context { color: #888; }
|
|
body.dark-mode .connection-entry.incoming { border-left-color: #333; background: #151515; }
|
|
body.dark-mode .connection-entry.outgoing { border-left-color: #60a5fa; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.subtitle { color: #999; }
|
|
.article-group { border-bottom-color: #2a2a2a; }
|
|
.article-title a { color: #ccc; }
|
|
.article-title a:hover { color: #fff; }
|
|
.article-meta { color: #666; }
|
|
.connections-heading { color: #ccc; }
|
|
.connection-entry { border-color: #333; background: #1a1a1a; }
|
|
.connection-arrow { color: #999; }
|
|
.connection-target strong a { color: #60a5fa; }
|
|
.connection-target strong a:hover { color: #93c5fd; }
|
|
.connection-url { color: #666; }
|
|
.connection-context { color: #888; }
|
|
.connection-entry.incoming { border-left-color: #333; background: #151515; }
|
|
.connection-entry.outgoing { border-left-color: #60a5fa; }
|
|
}
|
|
</style>
|
|
{% endblock %} |