···
144
-
padding-right: var(--sidebar-width);
144
+
padding-left: var(--sidebar-width);
top: var(--header-height);
width: var(--sidebar-width);
height: calc(100vh - var(--header-height));
background-color: var(--bg-alt-color);
154
-
border-left: 1px solid var(--border-color);
154
+
border-right: 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);
290
+
white-space: nowrap;
294
-
position: absolute;
297
-
font-family: 'JetBrains Mono', monospace;
298
-
color: var(--text-muted);
301
-
padding-left: 15px;
293
+
/* .date-column removed as part of sidebar simplification */
306
-
top: var(--header-height);
307
-
background-color: var(--bg-color);
310
-
margin-left: -110px;
311
-
padding-left: 110px;
298
+
margin-bottom: 5px;
···
322
-
padding-left: 110px; /* Make room for date column */
309
+
padding-left: 15px; /* Reduced from 110px since we don't need space for date column anymore */
···
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
638
+
white-space: nowrap;
···
742
-
.link-item-date, .link-item-source {
730
+
margin-bottom: 6px;
735
+
.link-item-source {
···
height: calc(100vh - 140px);
777
+
width: 60px; /* Make the sidebar a bit narrower on mobile */
···
918
-
margin-right: 10px;
913
+
margin-bottom: 5px;
917
+
flex-direction: column;
918
+
align-items: flex-start;
···
height: calc(100vh - 150px);
946
+
width: 50px; /* Even narrower on very small screens */
950
+
padding-left: 50px; /* Match the sidebar width on small screens */
···
1053
-
// Fixed month header overlap issue
1054
-
// First hide all month headers
1055
-
document.querySelectorAll('.month-year-header').forEach(header => {
1056
-
header.style.visibility = 'hidden';
1059
-
// Only show the current month header
1060
-
const currentHeader = document.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`);
1061
-
if (currentHeader) {
1062
-
currentHeader.style.visibility = 'visible';
1058
+
// Month headers are now simple inline elements, no need to toggle visibility
···
const tabContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
tabContent.classList.add('active');
1088
-
// Reset month header visibility when switching tabs
1089
-
if (tabName === 'posts' || tabName === 'links') {
1090
-
const monthHeaders = tabContent.querySelectorAll('.month-year-header');
1091
-
monthHeaders.forEach((header, index) => {
1092
-
header.style.visibility = index === 0 ? 'visible' : 'hidden';
1083
+
// Month headers are now simple inline elements, no need to toggle visibility
// Show or hide timeline sidebar based on active tab
if (tabName === 'people') {
timeline.style.display = 'none';
1099
-
document.querySelector('.content').style.paddingRight = '0';
1088
+
document.querySelector('.content').style.paddingLeft = '0';
timeline.style.display = 'flex';
1102
-
document.querySelector('.content').style.paddingRight = 'var(--sidebar-width)';
1091
+
document.querySelector('.content').style.paddingLeft = '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();
1294
-
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
1295
-
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
1283
+
'January', 'February', 'March', 'April', 'May', 'June',
1284
+
'July', 'August', 'September', 'October', 'November', 'December'
const shortMonthNames = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
···
<div class="month-year-header" ${dateAttr}>
1348
-
<div class="date-column">
1349
-
<div class="month-year-label">${monthNames[month]} ${year}</div>
1337
+
<div class="month-year-label">${monthNames[month]} ${year}</div>
···
<article id="${entry.articleId}" class="feed-item" ${dateAttr}>
<div class="feed-item-row">
1372
-
<div class="feed-item-date">${getDayWithOrdinal(date)}</div>
1359
+
<div class="feed-item-date">${monthNames[month]} ${getDayWithOrdinal(date)}, ${year}</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;
1598
-
// Initialize month headers - hide all except first one
1599
-
const monthHeaders = document.querySelectorAll('.month-year-header');
1600
-
monthHeaders.forEach((header, index) => {
1601
-
header.style.visibility = index === 0 ? 'visible' : 'hidden';
1585
+
// Month headers are now all visible
// If we have entries, set the most recent (first) entry's date as active in the timeline
if (entriesArray.length > 0) {
···
1630
-
// Show the month header for the most recent month
1631
-
document.querySelectorAll('.month-year-header').forEach(header => {
1632
-
header.style.visibility = 'hidden';
1634
-
const recentHeader = document.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`);
1635
-
if (recentHeader) {
1636
-
recentHeader.style.visibility = 'visible';
1613
+
// Month headers are now simple inline elements, no need to toggle visibility
// 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';
1660
-
document.querySelector('.content').style.paddingRight = '0';
1636
+
document.querySelector('.content').style.paddingLeft = '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}">
1749
-
<div class="date-column">
1750
-
<div class="month-year-label">${monthNames[month]} ${year}</div>
1725
+
<div class="month-year-label">${monthNames[month]} ${year}</div>
···
<div class="link-item" data-year="${date.getFullYear()}" data-month="${date.getMonth()}">
1865
-
<div class="link-item-date">${getLinkDayWithOrdinal(date)}</div>
1839
+
<div class="link-item-date">${monthNames[date.getMonth()]} ${getLinkDayWithOrdinal(date)}, ${date.getFullYear()}</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;
1890
-
// Initialize month headers in links view - hide all except first one
1891
-
const linkMonthHeaders = document.querySelectorAll('#link-items .month-year-header');
1892
-
linkMonthHeaders.forEach((header, index) => {
1893
-
header.style.visibility = index === 0 ? 'visible' : 'hidden';
1864
+
// Month headers in links view are now all visible
// 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');
2048
-
// Update month header visibility when clicking timeline
2049
-
// Hide all headers
2050
-
activeTab.querySelectorAll('.month-year-header').forEach(header => {
2051
-
header.style.visibility = 'hidden';
2054
-
// Show only the clicked month header
2055
-
if (month !== null && month !== undefined) {
2056
-
const clickedHeader = activeTab.querySelector(`.month-year-header[data-year="${year}"][data-month="${month}"]`);
2057
-
if (clickedHeader) {
2058
-
clickedHeader.style.visibility = 'visible';
2018
+
// Month headers are now simple inline elements, no need to toggle visibility
anil.recoil.org