fix: position reading progress bar as dividing line in cards

- Move progress indicator between summary and meta sections
- Replace the border-top dividing line with progress bar
- Show 3px progress bar when reading position exists
- Show 1px gray divider when no progress (maintains original look)
- Remove absolute positioning from bottom of card
- Remove border-top from meta section to avoid double lines

src/components/BlogPostCard.tsx

@@ -32,7 +32,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
     <Link 
       to={href}
       className={`blog-post-card ${level ? `level-${level}` : ''}`}
-      style={{ textDecoration: 'none', color: 'inherit', position: 'relative' }}
+      style={{ textDecoration: 'none', color: 'inherit' }}
     >
       <div className="blog-post-card-image">
         {post.image ? (
@@ -52,30 +52,17 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
         {post.summary && (
           <p className="blog-post-card-summary">{post.summary}</p>
         )}
-        <div className="blog-post-card-meta">
-          <span className="blog-post-card-author">
-            <FontAwesomeIcon icon={faUser} />
-            {displayName}
-          </span>
-          <span className="blog-post-card-date">
-            <FontAwesomeIcon icon={faCalendar} />
-            {formattedDate}
-          </span>
-        </div>
-      </div>
         
-      {/* Reading progress indicator */}
+        {/* Reading progress indicator - replaces the dividing line */}
-      {readingProgress !== undefined && readingProgress > 0 && (
+        {readingProgress !== undefined && readingProgress > 0 ? (
           <div 
             className="blog-post-reading-progress"
             style={{
-            position: 'absolute',
+              height: '3px',
-            bottom: 0,
-            left: 0,
-            height: '4px',
               width: '100%',
               background: 'var(--color-border)',
-            overflow: 'hidden'
+              overflow: 'hidden',
+              marginTop: '1rem'
             }}
           >
             <div
@@ -87,7 +74,25 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
               }}
             />
           </div>
+        ) : (
+          <div style={{ 
+            height: '1px', 
+            background: 'var(--color-border)', 
+            marginTop: '1rem' 
+          }} />
         )}
+        
+        <div className="blog-post-card-meta" style={{ borderTop: 'none', paddingTop: '0.75rem' }}>
+          <span className="blog-post-card-author">
+            <FontAwesomeIcon icon={faUser} />
+            {displayName}
+          </span>
+          <span className="blog-post-card-date">
+            <FontAwesomeIcon icon={faCalendar} />
+            {formattedDate}
+          </span>
+        </div>
+      </div>
     </Link>
   )
 }