UI & Dark theme improvements

Author: D4mianWayne

public/og-image.png

@@ -14,7 +14,12 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = FallbackImage } = Astro.props;
+const { title, description, image } = Astro.props;
+
+// Use custom OG image from public folder, or provided image, or fallback
+const ogImageUrl = image 
+  ? new URL(image.src, Astro.url) 
+  : new URL('/og-image.png', Astro.url);
 ---
 
 <!-- Global Metadata -->
@@ -49,11 +54,11 @@ const { title, description, image = FallbackImage } = Astro.props;
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image.src, Astro.url)} />
+<meta property="og:image" content={ogImageUrl} />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
+<meta property="twitter:image" content={ogImageUrl} />

src/components/BaseHead.astro

@@ -381,9 +381,9 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
       /* Layout Grid - Fixed Widths for Proper Alignment */
       .content-grid {
         display: grid;
-        grid-template-columns: 280px 800px 280px; /* Fixed widths for alignment */
+        grid-template-columns: 280px 900px 280px; /* Increased center from 800px to 900px */
         gap: 3rem;
-        max-width: 1460px; /* 280 + 800 + 280 + gaps */
+        max-width: 1560px; /* 280 + 900 + 280 + gaps */
         margin: 0 auto;
         align-items: start;
         padding: 0 2rem;

src/layouts/BlogPost.astro

@@ -205,20 +205,22 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
       }
 
       .tag {
-        background: rgba(255, 255, 255, 0.5);
-        backdrop-filter: blur(4px);
+        background: var(--bg-card);
         padding: 0.25rem 0.6rem;
         border-radius: 12px;
-        color: var(--fg-secondary);
+        color: var(--accent-link);
         font-size: 0.8rem;
         font-weight: 500;
-        transition: all 0.2s ease;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         border: 1px solid var(--border-subtle);
       }
 
       .tag:hover {
-        transform: scale(1.05);
-        background: rgba(0, 0, 0, 0.05);
+        transform: translateY(-1px) scale(1.05);
+        background: rgba(255, 158, 100, 0.12);
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 2px 8px rgba(255, 158, 100, 0.2);
       }
 
       .pagination {