Files
kennethreitz.org/templates/base.html
T

187 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" class="antialiased">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ title }} - Kenneth Reitz{% endblock %}</title>
<!-- Load Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Load Tufte CSS -->
<link rel="stylesheet" href="/static/et-book.css">
<link rel="stylesheet" href="/static/tufte/tufte.css">
<link rel="stylesheet" href="/static/custom-tufte.css">
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
heroku: {
50: '#f8f7fd',
100: '#f0eef9',
200: '#e3e0f4',
300: '#d0c8ec',
400: '#b5a7e0',
500: '#9b86d3',
600: '#8265c4',
700: '#6f52b0',
800: '#5c4394',
900: '#4e3979',
950: '#3a2b5c',
},
primary: {
DEFAULT: '#4e3979',
50: '#f8f7fd',
100: '#f0eef9',
200: '#e3e0f4',
300: '#d0c8ec',
400: '#b5a7e0',
500: '#9b86d3',
600: '#8265c4',
700: '#6f52b0',
800: '#5c4394',
900: '#4e3979',
950: '#3a2b5c',
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
'serif': ['Crimson Text', 'Charter', 'Georgia', 'Times New Roman', 'serif'],
'mono': ['JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'monospace'],
}
}
}
}
</script>
{% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-900 font-serif text-gray-100 selection:bg-primary-700 selection:text-white tufte dark-mode" id="tufte-body">
<!-- Header -->
<header class="border-b border-gray-700 bg-gray-900/90 backdrop-blur-xl sticky top-0 z-50 shadow-lg">
<div class="max-w-6xl mx-auto px-6 py-8">
<div class="flex flex-col space-y-4">
<!-- Main brand -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-5xl font-bold tracking-tight">
<a href="/" class="text-gray-100 hover:text-primary-400 transition-colors duration-200 no-underline font-serif bg-gradient-to-r from-primary-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
Kenneth Reitz
</a>
</h1>
<p class="text-xl text-gray-400 font-serif italic mt-2 et-book tracking-wide">
Creator of <span class="text-primary-400 font-semibold">Requests</span> • Python Advocate • Making Complex Things Simple
</p>
</div>
<!-- Mobile-friendly navigation -->
<nav class="hidden md:flex space-x-6">
<a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30">
📁 Explore Files
</a>
<a href="https://github.com/psf/requests" target="_blank" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30">
🌐 Requests
</a>
</nav>
</div>
<!-- Mobile navigation -->
<div class="flex md:hidden">
<!-- Mobile nav links -->
<nav class="flex space-x-4">
<a href="/directory" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30">
📁 Files
</a>
<a href="https://github.com/psf/requests" target="_blank" class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-4 py-2 rounded-lg hover:bg-primary-900/30">
🌐 Requests
</a>
</nav>
</div>
</div>
</div>
</header>
<!-- Breadcrumbs -->
{% if breadcrumbs %}
<nav class="max-w-4xl mx-auto px-6 py-4 text-sm text-gray-400 bg-gray-900/30 backdrop-blur-sm">
<div class="flex items-center space-x-2">
<a href="/" class="hover:text-primary-400 transition-colors duration-200">Home</a>
{% for crumb in breadcrumbs %}
<span class="text-gray-600"></span>
<a href="{{ crumb.url }}" class="hover:text-primary-400 transition-colors duration-200">{{ crumb.name }}</a>
{% endfor %}
{% if current_page %}
<span class="text-gray-600"></span>
<span class="text-gray-200 font-medium">{{ current_page }}</span>
{% endif %}
</div>
</nav>
{% endif %}
<!-- Main Content -->
<main class="max-w-4xl mx-auto px-6 py-8 tufte-content font-serif bg-gray-900/40 backdrop-blur-sm rounded-lg my-4">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="border-t border-gray-800/60 mt-20 bg-gradient-to-t from-gray-900 to-gray-900/60 backdrop-blur-sm">
<div class="max-w-6xl mx-auto px-6 py-16">
<div class="text-center">
<!-- Impact Statement -->
<div class="mb-8">
<p class="text-lg text-gray-300 font-medium mb-2">
Empowering developers worldwide with elegant, human-centered code
</p>
<p class="text-sm text-gray-500">
16M downloads daily • Touching every Python project on Earth
</p>
</div>
<!-- Social Links -->
<div class="flex justify-center space-x-8 mb-8">
<a href="https://github.com/kennethreitz" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
<svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
</svg>
<span class="hidden sm:inline font-medium">GitHub</span>
</a>
<a href="https://twitter.com/kennethreitz" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
<svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
</svg>
<span class="hidden sm:inline font-medium">Twitter</span>
</a>
<a href="https://github.com/psf/requests" target="_blank" class="text-gray-400 hover:text-primary-400 transition-all duration-300 flex items-center space-x-2 group">
<svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2L3 7v11h14V7l-7-5z"/>
</svg>
<span class="hidden sm:inline font-medium">Requests</span>
</a>
</div>
<!-- Copyright -->
<div class="border-t border-gray-800/40 pt-8">
<p class="text-sm text-gray-500">
&copy; {{ current_year }} Kenneth Reitz. Crafted with passion for beautiful, human-centered design.
</p>
<p class="text-xs text-gray-600 mt-2">
"Beautiful is better than ugly. Simple is better than complex."
</p>
</div>
</div>
</div>
</footer>
<script src="/static/tufte-converter.js"></script>
{% block extra_scripts %}{% endblock %}
</body>
</html>