mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
834 lines
21 KiB
HTML
834 lines
21 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block og_title %}{{ title }}{% endblock %}
|
|
{% block og_description %}{% if description %}{{ description[:160] }}{% else %}{{ content | striptags | truncate(160) }}{% endif %}{% endblock %}
|
|
{% block og_type %}article{% endblock %}
|
|
{% block og_url %}https://kennethreitz.org{{ request.path }}{% endblock %}
|
|
|
|
{% block twitter_title %}{{ title }}{% endblock %}
|
|
{% block twitter_description %}{% if description %}{{ description[:160] }}{% else %}{{ content | striptags | truncate(160) }}{% endif %}{% endblock %}
|
|
|
|
{% block description %}{% if description %}{{ description }}{% else %}{{ content | striptags | truncate(200) }}{% endif %}{% endblock %}
|
|
|
|
{% block schema_type %}Article{% endblock %}
|
|
{% block schema_name %}{{ title }}{% endblock %}
|
|
{% block schema_url %}{{ current_path }}{% endblock %}
|
|
{% block schema_description %}{% if metadata.description %}{{ metadata.description }}{% else %}{{ title }} - An essay by Kenneth Reitz{% endif %}{% endblock %}
|
|
|
|
{% block schema_extra %},
|
|
"headline": "{{ title }}",
|
|
"articleSection": "{% if 'artificial-intelligence' in current_path %}AI & Consciousness{% elif 'essays' in current_path %}Essays{% else %}Writing{% endif %}",
|
|
"wordCount": {{ (content | length / 5) | int }},
|
|
{% if metadata and metadata.date %}
|
|
"datePublished": "{{ metadata.date[0] if metadata.date is iterable and metadata.date is not string else metadata.date }}",
|
|
"dateModified": "{{ metadata.date[0] if metadata.date is iterable and metadata.date is not string else metadata.date }}",
|
|
{% endif %}
|
|
"keywords": [
|
|
"{% if 'artificial-intelligence' in current_path %}artificial intelligence, consciousness, philosophy{% elif 'mental-health' in current_path %}mental health, bipolar disorder, tech industry{% elif 'essays' in current_path %}technology, software development, python{% else %}writing, thoughts{% endif %}"
|
|
],
|
|
"mainEntityOfPage": {
|
|
"@type": "WebPage",
|
|
"@id": "https://kennethreitz.org{{ current_path }}"
|
|
}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
/* Post-specific enhancements */
|
|
.post-header {
|
|
margin-bottom: 4rem;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
padding-bottom: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
.post-header h1 {
|
|
font-family: et-book, 'Times New Roman', Georgia, serif;
|
|
font-size: clamp(2.5rem, 5.5vw, 3.5rem);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin-bottom: 1.8rem;
|
|
margin-left: 0;
|
|
line-height: 1.1;
|
|
color: #1a1a1a;
|
|
letter-spacing: -0.025em;
|
|
text-shadow: none;
|
|
text-wrap: balance;
|
|
max-width: 90%;
|
|
|
|
/* Advanced font features */
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "swsh" 1, "clig" 1;
|
|
font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
|
|
}
|
|
|
|
.post-meta {
|
|
color: #888;
|
|
font-size: 0.95rem;
|
|
font-style: normal;
|
|
margin-top: 0.8rem;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.02em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.reading-time {
|
|
color: #888;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.post-tags {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tag {
|
|
background: transparent;
|
|
color: #999;
|
|
padding: 0.1rem 0.3rem;
|
|
border-radius: 3px;
|
|
font-size: 0.85rem;
|
|
font-weight: 400;
|
|
font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Reading Progress Indicator */
|
|
.reading-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0%;
|
|
height: 3px;
|
|
background: linear-gradient(to right, #666, #999);
|
|
z-index: 100;
|
|
transition: width 0.1s ease-out;
|
|
opacity: 0;
|
|
}
|
|
|
|
.reading-progress.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Only show progress bar for longer posts */
|
|
.reading-progress.long-post {
|
|
opacity: 1;
|
|
}
|
|
|
|
.post-content {
|
|
max-width: 55rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.post-content > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.post-content h1,
|
|
.post-content h2,
|
|
.post-content h3,
|
|
.post-content h4,
|
|
.post-content h5,
|
|
.post-content h6 {
|
|
max-width: none; /* Allow full width within the content container */
|
|
width: 100%; /* Ensure they fill the content container */
|
|
}
|
|
|
|
.post-content h1,
|
|
article h1 {
|
|
font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
|
|
font-size: 2.2rem;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
margin-top: 3rem;
|
|
margin-bottom: 1.5rem;
|
|
margin-left: 0 !important;
|
|
color: #333;
|
|
letter-spacing: -0.01em;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.post-content h2 {
|
|
font-size: 1.9rem;
|
|
font-weight: 500;
|
|
margin-top: 3rem;
|
|
margin-bottom: 1.2rem;
|
|
color: #222;
|
|
font-style: italic;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.post-content h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
color: #333;
|
|
font-style: italic;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.series-collection {
|
|
width: 65%;
|
|
margin: 3rem 0 2rem 0;
|
|
padding: 2rem;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 8px;
|
|
background: #fbfbfb;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.series-collection h3 {
|
|
font-size: 1.2rem;
|
|
margin: 0 0 1rem 0;
|
|
color: #444;
|
|
font-style: italic;
|
|
}
|
|
|
|
.series-collection p {
|
|
margin: 0 0 1.5rem 0;
|
|
font-size: 0.95rem;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.series-list {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
list-style: decimal;
|
|
}
|
|
|
|
.series-item {
|
|
margin: 1rem 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.series-link {
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
background: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.series-link:hover {
|
|
color: #666;
|
|
}
|
|
|
|
.series-description {
|
|
color: #777;
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.related-posts {
|
|
width: 65%;
|
|
margin: 3rem 0 2rem 0;
|
|
padding: 2rem 0;
|
|
border-top: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.related-posts h3 {
|
|
font-size: 1.2rem;
|
|
margin: 0 0 1.5rem 0;
|
|
color: #555;
|
|
font-style: italic;
|
|
}
|
|
|
|
.related-posts p {
|
|
margin: 1.2rem 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.related-posts a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
background: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.related-posts a:hover {
|
|
color: #666;
|
|
}
|
|
|
|
|
|
.adjacent-posts {
|
|
width: 65%;
|
|
margin: 2rem 0;
|
|
padding: 2rem 0;
|
|
border-top: 1px solid #e8e8e8;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.prev-next-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.nav-spacer {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ccc;
|
|
font-size: 1.2rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.prev-post, .next-post {
|
|
flex: 0 0 auto;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.prev-post {
|
|
text-align: center;
|
|
}
|
|
|
|
.next-post {
|
|
text-align: center;
|
|
}
|
|
|
|
.prev-link, .next-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: #666;
|
|
background: none;
|
|
text-shadow: none;
|
|
transition: color 0.2s ease;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.prev-link:hover, .next-link:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.nav-label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.25rem;
|
|
color: #999;
|
|
}
|
|
|
|
.nav-title {
|
|
display: block;
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
color: #666;
|
|
}
|
|
|
|
.prev-link:hover .nav-title, .next-link:hover .nav-title {
|
|
color: #333;
|
|
}
|
|
|
|
.post-navigation {
|
|
width: 65%;
|
|
margin-top: 3rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.back-link {
|
|
color: #666;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.back-link::before {
|
|
content: '←';
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
@media (max-width: 1400px) {
|
|
.series-collection {
|
|
width: 75%;
|
|
}
|
|
|
|
.related-posts {
|
|
width: 75%;
|
|
}
|
|
|
|
.post-navigation {
|
|
width: 75%;
|
|
}
|
|
|
|
.adjacent-posts {
|
|
width: 75%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.series-collection {
|
|
width: 85%;
|
|
}
|
|
|
|
.related-posts {
|
|
width: 85%;
|
|
}
|
|
|
|
.post-navigation {
|
|
width: 85%;
|
|
}
|
|
|
|
.adjacent-posts {
|
|
width: 85%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.series-collection {
|
|
width: 100%;
|
|
}
|
|
|
|
.related-posts {
|
|
width: 100%;
|
|
}
|
|
|
|
.adjacent-posts {
|
|
width: 100%;
|
|
}
|
|
|
|
.prev-next-container {
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.prev-post, .next-post {
|
|
max-width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
}
|
|
|
|
/* Enhanced typography within posts */
|
|
.post-content p:not(.sidenote):not(.marginnote) {
|
|
font-size: 1.35rem;
|
|
line-height: 1.9rem;
|
|
margin: 1.5rem 0;
|
|
color: #2a2a2a;
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphenate-limit-chars: 6 3 2;
|
|
hyphenate-limit-lines: 2;
|
|
hyphenate-limit-zone: 8%;
|
|
font-weight: 400;
|
|
width: 70%;
|
|
}
|
|
|
|
.post-content li {
|
|
font-size: 1.3rem;
|
|
line-height: 1.9rem;
|
|
margin: 0.25rem 0;
|
|
width: 85%;
|
|
}
|
|
|
|
.post-content > ul, .post-content > ol {
|
|
width: 65%;
|
|
-webkit-padding-start: 5%;
|
|
list-style-position: outside;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.post-content li p {
|
|
width: 100% !important;
|
|
margin: 0.5rem 0 !important;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.post-content > ul, .post-content > ol {
|
|
width: 100% !important;
|
|
-webkit-padding-start: 1.5rem !important;
|
|
padding-inline-start: 1.5rem !important;
|
|
}
|
|
|
|
.post-content h1 {
|
|
font-size: 2.4rem !important;
|
|
}
|
|
|
|
.post-content h2 {
|
|
font-size: 2rem !important;
|
|
}
|
|
|
|
.post-content h3 {
|
|
font-size: 1.7rem !important;
|
|
}
|
|
}
|
|
|
|
.sidenote, .marginnote {
|
|
text-align: left;
|
|
font-size: 1.05rem !important;
|
|
line-height: 1.4 !important;
|
|
margin: 0.2rem 0 1rem 0 !important;
|
|
width: 35% !important;
|
|
margin-right: -38% !important;
|
|
margin-left: 2% !important;
|
|
color: #333 !important;
|
|
}
|
|
|
|
.post-content blockquote p {
|
|
width: 75% !important;
|
|
}
|
|
|
|
|
|
/* Better first paragraph styling */
|
|
.post-content > p:first-of-type {
|
|
font-size: 1.45rem !important;
|
|
line-height: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* Elegant section breaks */
|
|
.post-content hr {
|
|
border: none;
|
|
text-align: center;
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.post-content hr::after {
|
|
content: '* * *';
|
|
color: #bbb;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 1rem;
|
|
}
|
|
|
|
/* Subtle margin annotations for dates/context */
|
|
.post-content .margin-note {
|
|
position: absolute;
|
|
left: -8rem;
|
|
width: 6rem;
|
|
font-size: 0.8rem;
|
|
color: #999;
|
|
text-align: right;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Enhanced emphasis styling */
|
|
.post-content strong {
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.post-content em {
|
|
font-style: italic;
|
|
color: #2a2a2a;
|
|
}
|
|
|
|
/* Better list typography */
|
|
.post-content ul li::marker {
|
|
color: #bbb;
|
|
}
|
|
|
|
.post-content ol li::marker {
|
|
color: #888;
|
|
font-variant: small-caps;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Refined link hover effects */
|
|
.post-content a:hover {
|
|
color: #000;
|
|
text-decoration-color: #666;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
/* Better paragraph spacing in lists */
|
|
.post-content ul li p,
|
|
.post-content ol li p,
|
|
.post-content li p {
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
width: 85% !important;
|
|
}
|
|
|
|
/* Subtle reading rhythm improvements */
|
|
.post-content p + h2,
|
|
.post-content p + h3 {
|
|
margin-top: 3.5rem;
|
|
}
|
|
|
|
.post-content h2 + p,
|
|
.post-content h3 + p {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
|
|
/* Better sidenote positioning from lists */
|
|
.post-content li .sidenote,
|
|
.post-content li .marginnote {
|
|
margin-top: -0.5rem;
|
|
}
|
|
|
|
/* Adjust sidenote positioning to be more flexible */
|
|
.sidenote, .marginnote {
|
|
position: relative !important;
|
|
top: -0.2rem;
|
|
margin-bottom: 1rem !important;
|
|
clear: right !important;
|
|
}
|
|
|
|
/* Prevent sidenote overlaps by ensuring proper spacing */
|
|
.sidenote + .sidenote,
|
|
.marginnote + .marginnote,
|
|
.sidenote + .marginnote,
|
|
.marginnote + .sidenote {
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
|
|
/* Table of contents styling if present */
|
|
.toc {
|
|
background: #f8f8f8;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
padding: 1.5rem;
|
|
margin: 2rem 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.toc h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
color: #555;
|
|
}
|
|
|
|
.toc ul {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.toc li {
|
|
margin: 0.4rem 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.toc a {
|
|
color: #666;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.toc a:hover {
|
|
color: #333;
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 760px) {
|
|
.post-header h1 {
|
|
font-size: 2rem;
|
|
line-height: 1.2;
|
|
text-shadow: none !important;
|
|
-webkit-text-stroke: 0;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.post-content p:not(.sidenote):not(.marginnote) {
|
|
width: 100% !important;
|
|
padding-right: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.post-content p {
|
|
font-size: 1.05rem;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.post-content h1 {
|
|
font-size: 1.8rem;
|
|
text-shadow: none !important;
|
|
-webkit-text-stroke: 0;
|
|
}
|
|
|
|
.post-content h2 {
|
|
font-size: 1.5rem;
|
|
text-shadow: none !important;
|
|
-webkit-text-stroke: 0;
|
|
}
|
|
|
|
.post-content h3 {
|
|
font-size: 1.3rem;
|
|
text-shadow: none !important;
|
|
-webkit-text-stroke: 0;
|
|
}
|
|
|
|
/* Force clean font rendering on mobile */
|
|
* {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Reading Progress Bar -->
|
|
<div class="reading-progress" id="reading-progress"></div>
|
|
|
|
|
|
<article>
|
|
<div class="post-header">
|
|
<h1>{{ title }}</h1>
|
|
{% if metadata and metadata.date %}
|
|
<div class="post-meta">
|
|
{{ metadata.date if metadata.date is string else metadata.date[0] }}
|
|
{% if reading_time %}
|
|
<span class="reading-time"> • {{ reading_time }} min read</span>
|
|
{% endif %}
|
|
</div>
|
|
{% elif reading_time %}
|
|
<div class="post-meta">
|
|
{{ reading_time }} min read
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if tags %}
|
|
<div class="post-tags">
|
|
{% for tag in tags %}
|
|
<span class="tag">#{{ tag.lower() }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
{{ content | safe }}
|
|
</div>
|
|
|
|
{% if series_posts and series_name %}
|
|
<aside class="series-collection">
|
|
<h3>{{ series_name }} Series</h3>
|
|
<p>This post is part of a series on {{ series_name.lower() }}. Here are all the posts in this collection:</p>
|
|
<ol class="series-list">
|
|
{% for post in series_posts %}
|
|
<li class="series-item">
|
|
<a href="{{ post.url }}" class="series-link">{{ post.title }}</a>
|
|
{% if post.description %}<br><span class="series-description">{{ post.description }}</span>{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</aside>
|
|
{% endif %}
|
|
|
|
|
|
{% if prev_post or next_post %}
|
|
<nav class="adjacent-posts">
|
|
<div class="prev-next-container">
|
|
{% if prev_post %}
|
|
<div class="prev-post">
|
|
<a href="{{ prev_post.url }}" class="prev-link">
|
|
<span class="nav-label">← Previous</span>
|
|
<span class="nav-title">{{ prev_post.title }}</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if prev_post and next_post %}
|
|
<div class="nav-spacer"></div>
|
|
{% endif %}
|
|
|
|
{% if next_post %}
|
|
<div class="next-post">
|
|
<a href="{{ next_post.url }}" class="next-link">
|
|
<span class="nav-label">Next →</span>
|
|
<span class="nav-title">{{ next_post.title }}</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
<nav class="post-navigation">
|
|
{% if breadcrumbs %}
|
|
{% set parent_path = breadcrumbs[-1].url if breadcrumbs else '/directory' %}
|
|
{% else %}
|
|
{% set parent_path = '/directory' %}
|
|
{% endif %}
|
|
|
|
<a href="{{ parent_path }}" class="back-link">Back to Directory</a>
|
|
</nav>
|
|
</article>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const progressBar = document.getElementById('reading-progress');
|
|
const article = document.querySelector('article');
|
|
const readingTime = {{ reading_time or 0 }};
|
|
|
|
// Only show progress bar for posts longer than 3 minutes
|
|
const isLongPost = readingTime >= 3;
|
|
|
|
if (isLongPost) {
|
|
progressBar.classList.add('long-post');
|
|
}
|
|
|
|
function updateProgress() {
|
|
const articleRect = article.getBoundingClientRect();
|
|
const windowHeight = window.innerHeight;
|
|
const articleHeight = article.offsetHeight;
|
|
const articleTop = articleRect.top;
|
|
|
|
// Calculate how much of the article has been scrolled past
|
|
let scrolled = 0;
|
|
|
|
if (articleTop < 0) {
|
|
// Article has started scrolling past the top
|
|
const scrolledDistance = Math.abs(articleTop);
|
|
const scrollableDistance = articleHeight - windowHeight;
|
|
scrolled = Math.min(scrolledDistance / scrollableDistance, 1);
|
|
}
|
|
|
|
// Update progress bar width
|
|
const progressPercent = scrolled * 100;
|
|
progressBar.style.width = progressPercent + '%';
|
|
|
|
// Show/hide based on scroll position and post length
|
|
if (isLongPost && scrolled > 0.05) {
|
|
progressBar.classList.add('visible');
|
|
} else if (!isLongPost) {
|
|
progressBar.classList.remove('visible');
|
|
}
|
|
|
|
if (scrolled >= 0.95) {
|
|
// Near the end, fade out
|
|
setTimeout(() => {
|
|
progressBar.classList.remove('visible');
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
// Update progress on scroll
|
|
let ticking = false;
|
|
window.addEventListener('scroll', function() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(function() {
|
|
updateProgress();
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
|
|
// Initial update
|
|
updateProgress();
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |