···
-
padding-right: var(--sidebar-width);
top: var(--header-height);
width: var(--sidebar-width);
height: calc(100vh - var(--header-height));
background-color: var(--bg-alt-color);
-
border-left: 1px solid var(--border-color);
···
.timeline-month::before {
···
transform: translateY(-50%);
···
transform: translateY(-50%);
···
.timeline-year.active::after {
box-shadow: 0 0 8px var(--accent-shadow);
.timeline-month.active::after {
···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
-
font-family: 'JetBrains Mono', monospace;
-
color: var(--text-muted);
-
top: var(--header-height);
-
background-color: var(--bg-color);
···
-
padding-left: 110px; /* Make room for date column */
···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
···
-
.link-item-date, .link-item-source {
···
height: calc(100vh - 140px);
···
···
height: calc(100vh - 150px);
···
-
// Fixed month header overlap issue
-
// First hide all month headers
-
document.querySelectorAll('.month-year-header').forEach(header => {
-
header.style.visibility = 'hidden';
-
// Only show the current month header
-
const currentHeader = document.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`);
-
currentHeader.style.visibility = 'visible';
···
const tabContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
tabContent.classList.add('active');
-
// Reset month header visibility when switching tabs
-
if (tabName === 'posts' || tabName === 'links') {
-
const monthHeaders = tabContent.querySelectorAll('.month-year-header');
-
monthHeaders.forEach((header, index) => {
-
header.style.visibility = index === 0 ? 'visible' : 'hidden';
// Show or hide timeline sidebar based on active tab
if (tabName === 'people') {
timeline.style.display = 'none';
-
document.querySelector('.content').style.paddingRight = '0';
timeline.style.display = 'flex';
-
document.querySelector('.content').style.paddingRight = 'var(--sidebar-width)';
// Reset timeline highlighting
document.querySelectorAll('.timeline-year.active, .timeline-month.active').forEach(el => {
···
// Create a timeline structure by year/month
const timeline = new Map();
-
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
const shortMonthNames = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
···
<div class="month-year-header" ${dateAttr}>
-
<div class="date-column">
-
<div class="month-year-label">${monthNames[month]} ${year}</div>
···
<article id="${entry.articleId}" class="feed-item" ${dateAttr}>
<div class="feed-item-row">
-
<div class="feed-item-date">${getDayWithOrdinal(date)}</div>
<div class="feed-item-author">${entry.author}</div>
<div class="feed-item-content-wrapper">
<div class="feed-item-title"><a href="${entry.link}" target="_blank">${entry.title}</a></div><div class="feed-item-preview">${entry.contentHtml}</div>
···
loadingContainer.style.display = 'none';
feedItemsContainer.innerHTML = entriesHTML;
-
// Initialize month headers - hide all except first one
-
const monthHeaders = document.querySelectorAll('.month-year-header');
-
monthHeaders.forEach((header, index) => {
-
header.style.visibility = index === 0 ? 'visible' : 'hidden';
// If we have entries, set the most recent (first) entry's date as active in the timeline
if (entriesArray.length > 0) {
···
-
// Show the month header for the most recent month
-
document.querySelectorAll('.month-year-header').forEach(header => {
-
header.style.visibility = 'hidden';
-
const recentHeader = document.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`);
-
recentHeader.style.visibility = 'visible';
// Helper function to observe all items with date attributes
···
const initialActiveTab = document.querySelector('.tab-button.active').getAttribute('data-tab');
if (initialActiveTab === 'people') {
document.getElementById('timeline-sidebar').style.display = 'none';
-
document.querySelector('.content').style.paddingRight = '0';
// Initialize the last active date from the first visible item
const selector = initialActiveTab === 'posts' ? '.feed-item' : '.link-item';
···
<div class="month-year-header" data-year="${year}" data-month="${month}">
-
<div class="date-column">
-
<div class="month-year-label">${monthNames[month]} ${year}</div>
···
<div class="link-item" data-year="${date.getFullYear()}" data-month="${date.getMonth()}">
-
<div class="link-item-date">${getLinkDayWithOrdinal(date)}</div>
<div class="link-item-source" title="From: ${link.sourceTitle}">
<a href="${link.sourceLink}" target="_blank" style="color: inherit; text-decoration: none;">
···
// Update the links container
linksContainer.innerHTML = linksHTML;
-
// Initialize month headers in links view - hide all except first one
-
const linkMonthHeaders = document.querySelectorAll('#link-items .month-year-header');
-
linkMonthHeaders.forEach((header, index) => {
-
header.style.visibility = index === 0 ? 'visible' : 'hidden';
// If we have links, set the most recent link's date as active in the timeline for the links tab
if (dedupedLinks.length > 0) {
···
if (yearEl) yearEl.classList.add('active');
if (monthEl) monthEl.classList.add('active');
-
// Update month header visibility when clicking timeline
-
activeTab.querySelectorAll('.month-year-header').forEach(header => {
-
header.style.visibility = 'hidden';
-
// Show only the clicked month header
-
if (month !== null && month !== undefined) {
-
const clickedHeader = activeTab.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`);
-
clickedHeader.style.visibility = 'visible';
anil.recoil.org