mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
397 lines
18 KiB
HTML
397 lines
18 KiB
HTML
{% extends "base.html" %} {% block title %}{{ title }}{% endblock %} {% block
|
|
head %}
|
|
<style>
|
|
/* Additional styles for post content that Tailwind doesn't handle well */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.post-header {
|
|
animation: fadeIn 0.8s ease;
|
|
}
|
|
|
|
/* Heroku color variables - subtler purples, stronger greens and amber */
|
|
:root {
|
|
--heroku-purple: 65, 45, 105;
|
|
--heroku-light-purple: 110, 80, 175;
|
|
--heroku-dark-purple: 40, 28, 65;
|
|
--heroku-fuchsia: 200, 50, 130;
|
|
--heroku-blue: 45, 156, 219;
|
|
--heroku-green: 90, 220, 120;
|
|
--heroku-amber: 255, 180, 60;
|
|
}
|
|
|
|
/* Custom styling for post content elements */
|
|
.post-content img {
|
|
transition: transform 0.3s ease;
|
|
max-width: 100%;
|
|
height: auto; /* Ensure responsive images */
|
|
display: block;
|
|
margin: 1.5rem auto;
|
|
}
|
|
|
|
.post-content img:hover {
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
.post-content blockquote::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 10px;
|
|
font-size: 3rem;
|
|
color: rgb(var(--color-primary));
|
|
opacity: 0.2;
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
/* Code highlighting improvements for developer focus */
|
|
.post-content pre code {
|
|
font-family: "JetBrains Mono", "Fira Code", monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
overflow-x: auto; /* Allow horizontal scrolling for code */
|
|
white-space: pre-wrap; /* Respect line breaks but wrap if needed */
|
|
word-break: normal;
|
|
}
|
|
|
|
.post-content pre {
|
|
background-color: rgb(var(--color-background-code)) !important;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
margin: 1.5rem 0;
|
|
padding: 1rem;
|
|
overflow-x: auto; /* Ensure code blocks can scroll horizontally on small screens */
|
|
}
|
|
|
|
/* Responsive adjustments for small screens */
|
|
@media screen and (max-width: 480px) {
|
|
.post-content pre {
|
|
margin-left: -0.75rem;
|
|
margin-right: -0.75rem;
|
|
border-radius: 0;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.post-content pre code {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.post-header h1 {
|
|
font-size: 1.75rem;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.post-content pre {
|
|
background-color: rgb(var(--color-background-code-dark)) !important;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
/* Improved table responsiveness */
|
|
.post-content table {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
display: block;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.post-content table th,
|
|
.post-content table td {
|
|
padding: 0.5rem;
|
|
border: 1px solid rgba(var(--color-border), 1);
|
|
}
|
|
|
|
.dark-theme .post-content table th,
|
|
.dark-theme .post-content table td {
|
|
border-color: rgba(var(--color-border-dark), 1);
|
|
}
|
|
</style>
|
|
{% endblock %} {% block content %}
|
|
<article class="post">
|
|
<header class="post-header mb-12 text-center relative">
|
|
{% if not is_root and path != "contact" and path != "values" and path !=
|
|
"great-books" and path != "mental-health" and path != "family" and path
|
|
!= "yoga-meditation" %}
|
|
<div
|
|
class="flex flex-col text-sm mb-8 bg-background-code dark:bg-background-code-dark p-3 rounded-lg border border-border dark:border-border-dark font-mono"
|
|
>
|
|
<!-- Path navigator with accurate breadcrumbs -->
|
|
<div class="flex items-center flex-wrap">
|
|
<a
|
|
href="/"
|
|
class="text-link no-underline px-1 py-1 transition-colors hover:text-primary flex items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1 opacity-70"
|
|
>
|
|
<path
|
|
d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
|
|
></path>
|
|
</svg>
|
|
<span>root</span>
|
|
</a>
|
|
|
|
<!-- Only show accurate parts of the path -->
|
|
{% set path_parts = request.path.strip('/').split('/') %} {% for
|
|
i in range(path_parts|length) %} {% if i < path_parts|length - 1
|
|
%}
|
|
<span
|
|
class="text-syntax-operator dark:text-syntax-operator mx-1"
|
|
>.</span
|
|
>
|
|
<a
|
|
href="/{{ '/'.join(path_parts[:i+1]) }}"
|
|
class="text-link no-underline px-1 py-1 transition-colors hover:text-primary flex items-center"
|
|
>
|
|
{% if i == path_parts|length - 2 %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1 text-syntax-string dark:text-syntax-string opacity-70"
|
|
>
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
|
></path>
|
|
</svg>
|
|
{% else %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1 text-syntax-number dark:text-syntax-number opacity-70"
|
|
>
|
|
<path
|
|
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
|
|
></path>
|
|
</svg>
|
|
{% endif %}
|
|
<span>{{ path_parts[i] }}</span>
|
|
</a>
|
|
{% endif %} {% endfor %}
|
|
|
|
<!-- Current file with no link -->
|
|
{% if path_parts %}
|
|
<span
|
|
class="text-syntax-operator dark:text-syntax-operator mx-1"
|
|
>.</span
|
|
>
|
|
<span
|
|
class="flex items-center px-1 py-1 text-syntax-string dark:text-syntax-string font-medium"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1 opacity-70"
|
|
>
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
|
></path>
|
|
</svg>
|
|
<span>{{ path_parts[-1] }}</span>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Title is already in the content for most markdown files, so we'll hide it in the template -->
|
|
{% if metadata %}
|
|
<div
|
|
class="text-text/60 dark:text-text-light/60 text-sm mb-6 font-sans"
|
|
>
|
|
{% if metadata.date %}
|
|
<span>{{ metadata.date }}</span>
|
|
{% endif %} {% if metadata.author %}
|
|
<span> • {{ metadata.author }}</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div
|
|
class="w-20 h-1 bg-gradient-to-r from-primary to-primary-light/50 mx-auto mb-10 rounded-sm"
|
|
></div>
|
|
</header>
|
|
|
|
<div
|
|
class="post-content text-lg leading-relaxed text-text dark:text-text-light"
|
|
>
|
|
{% if is_root %}
|
|
<!-- Special styling for homepage content -->
|
|
<div
|
|
class="prose prose-xl dark:prose-invert mx-auto prose-headings:text-text dark:prose-headings:text-text-light prose-headings:font-medium prose-p:mb-8 prose-p:max-w-[80ch] prose-p:text-xl prose-p:leading-relaxed prose-img:mx-auto prose-img:my-10 prose-img:rounded-lg prose-img:shadow-md prose-img:block prose-img:max-w-full prose-img:h-auto prose-a:text-accent dark:prose-a:text-accent-light prose-a:font-medium prose-a:transition-colors prose-a:no-underline prose-a:border-b-2 prose-a:border-accent/30 dark:prose-a:border-accent-light/30 hover:prose-a:border-accent hover:dark:prose-a:border-accent-light"
|
|
>
|
|
{{ content | safe }}
|
|
</div>
|
|
{% elif path == "contact" or path == "values" or path == "great-books"
|
|
or path == "mental-health" or path == "family" or path ==
|
|
"yoga-meditation" %}
|
|
<!-- Special styling for key pages without path bar -->
|
|
<div
|
|
class="prose prose-xl dark:prose-invert mx-auto prose-headings:text-text dark:prose-headings:text-text-light prose-headings:font-medium prose-h1:text-4xl prose-h1:mb-8 prose-h1:mt-0 prose-h1:text-center prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:font-semibold prose-p:mb-6 prose-p:max-w-[70ch] prose-p:text-lg prose-p:leading-relaxed prose-img:mx-auto prose-img:my-10 prose-img:rounded-lg prose-img:shadow-md prose-img:block prose-img:max-w-full prose-img:h-auto prose-a:text-accent dark:prose-a:text-accent-light prose-a:font-medium prose-a:transition-colors prose-ul:my-6 prose-ul:pl-8 prose-li:mb-3 prose-li:text-lg prose-code:font-mono prose-code:text-sm prose-code:bg-background-code dark:prose-code:bg-background-code-dark prose-code:py-1 prose-code:px-2 prose-code:rounded prose-code:border prose-code:border-border/30 dark:prose-code:border-border-dark/30"
|
|
>
|
|
{{ content | safe }}
|
|
</div>
|
|
{% else %}
|
|
<!-- Standard post styling with developer-focused code styling -->
|
|
<div
|
|
class="prose prose-lg dark:prose-invert max-w-prose mx-auto prose-headings:text-text dark:prose-headings:text-text-light prose-headings:font-medium prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-4 prose-h2:relative prose-h2:inline-block prose-h2:after:content-[''] prose-h2:after:absolute prose-h2:after:bottom-[-8px] prose-h2:after:left-0 prose-h2:after:w-[50px] prose-h2:after:h-[3px] prose-h2:after:bg-primary prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-4 prose-p:mb-6 prose-p:max-w-[70ch] prose-img:mx-auto prose-img:my-10 prose-img:rounded-lg prose-img:shadow-md prose-img:block prose-img:max-w-full prose-img:h-auto prose-blockquote:my-10 prose-blockquote:py-6 prose-blockquote:px-10 prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-primary-light/50 dark:prose-blockquote:bg-primary-dark/20 prose-blockquote:rounded-r prose-blockquote:italic prose-blockquote:relative prose-pre:my-8 prose-pre:p-4 prose-pre:bg-background-code dark:prose-pre:bg-background-code-dark prose-pre:rounded-lg prose-pre:overflow-x-auto prose-pre:border-l-4 prose-pre:border-primary prose-pre:font-mono prose-pre:text-sm prose-code:font-mono prose-code:text-sm prose-code:bg-background-code dark:prose-code:bg-background-code-dark prose-code:py-0.5 prose-code:px-1.5 prose-code:rounded prose-code:border prose-code:border-border/30 dark:prose-code:border-border-dark/30 prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-ul:my-6 prose-ul:pl-8 prose-ol:my-6 prose-ol:pl-8 prose-li:mb-2 prose-table:w-full prose-table:my-8 prose-table:border-collapse prose-table:overflow-x-auto prose-table:block prose-th:bg-primary-light/50 dark:prose-th:bg-primary-dark/20 prose-th:text-primary-dark dark:prose-th:text-primary-light prose-th:font-semibold prose-th:text-left prose-th:p-3 prose-th:border prose-th:border-border dark:prose-th:border-border-dark prose-td:p-3 prose-td:border prose-td:border-border dark:prose-td:border-border-dark prose-tr:even:bg-primary-light/10 dark:prose-tr:even:bg-primary-dark/10"
|
|
>
|
|
{{ content | safe }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<footer
|
|
class="mt-16 pt-8 border-t border-border dark:border-border-dark font-mono"
|
|
>
|
|
<!-- Tags section with developer-style indicators -->
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
{% if metadata and metadata.tags %}
|
|
<div
|
|
class="text-sm text-syntax-function dark:text-syntax-function mr-2 flex items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1.5"
|
|
>
|
|
<path
|
|
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
|
|
></path>
|
|
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
|
</svg>
|
|
<span>Tags:</span>
|
|
</div>
|
|
{% for tag in metadata.tags %}
|
|
<a
|
|
href="/tags/{{ tag }}"
|
|
class="inline-block py-1 px-3 bg-primary-light/30 dark:bg-primary-dark/20 text-primary-dark dark:text-primary-light text-sm rounded no-underline hover:bg-primary-light/50 dark:hover:bg-primary-dark/30 transition-all hover:-translate-y-0.5 border border-primary-light/20 dark:border-primary-dark/20"
|
|
>{{ tag }}</a
|
|
>
|
|
{% endfor %} {% endif %}
|
|
</div>
|
|
|
|
<!-- IDE-style status bar with file metadata -->
|
|
<div
|
|
class="flex flex-wrap justify-between items-center text-xs text-text/60 dark:text-text-light/60 bg-background-code/50 dark:bg-background-code-dark/50 p-2 rounded border border-border/30 dark:border-border-dark/30"
|
|
>
|
|
<div class="flex items-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1.5 text-syntax-comment dark:text-syntax-comment"
|
|
>
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
<span
|
|
>Modified: {{ date_created|datetime if date_created else
|
|
'Unknown date' }}</span
|
|
>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<span class="flex items-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1.5 text-syntax-constant dark:text-syntax-constant"
|
|
>
|
|
<polygon
|
|
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
></polygon>
|
|
</svg>
|
|
<span>{{path}}</span>
|
|
</span>
|
|
|
|
<span
|
|
class="flex items-center bg-primary/10 dark:bg-primary-dark/20 px-2 py-0.5 rounded"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="mr-1.5"
|
|
>
|
|
<path
|
|
d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"
|
|
></path>
|
|
<polygon
|
|
points="18 2 22 6 12 16 8 16 8 12 18 2"
|
|
></polygon>
|
|
</svg>
|
|
<span>markdown</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
{% endblock %}
|