style: improve publishing date display

- Use shorter date format (MMM d, yyyy instead of MMMM d, yyyy)
- Add subtle styling with reduced opacity and smaller font
- Make calendar icon smaller and more muted
- Style overlay version for hero images with subtle white text

src/components/ReaderHeader.tsx

@@ -22,7 +22,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   hasHighlights,
   highlightCount
 }) => {
-  const formattedDate = published ? format(new Date(published * 1000), 'MMMM d, yyyy') : null
+  const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
   if (image) {
     return (
       <div className="reader-hero-image">

src/index.css

@@ -524,6 +524,20 @@ body {
   flex-wrap: wrap;
 }
 
+.publish-date {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.813rem;
+  color: rgba(136, 136, 136, 0.7);
+  opacity: 0.85;
+}
+
+.publish-date svg {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+
 .reading-time {
   display: flex;
   align-items: center;
@@ -1116,6 +1130,16 @@ body {
   flex-wrap: wrap;
 }
 
+.reader-header-overlay .publish-date {
+  color: rgba(255, 255, 255, 0.65);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  opacity: 1;
+}
+
+.reader-header-overlay .publish-date svg {
+  opacity: 0.7;
+}
+
 .reader-header-overlay .reading-time,
 .reader-header-overlay .highlight-indicator {
   background: rgba(255, 255, 255, 0.15);