diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css index 2867b571..b2a1c158 100644 --- a/src/pages/blogs/blogs-new.css +++ b/src/pages/blogs/blogs-new.css @@ -790,6 +790,7 @@ background-image: linear-gradient(rgba(36, 37, 38, 0.95), rgba(36, 37, 38, 0.95)), linear-gradient(135deg, #6366f1, #a855f7, #ec4899); + border: 2px solid rgba(99,102,241,0.3); } @keyframes searchFloat { @@ -1464,6 +1465,7 @@ @media (min-width: 1200px) { .articles-grid { grid-template-columns: repeat(3, 1fr); + padding: 0; gap: 40px; max-width: 1400px; } @@ -2405,8 +2407,9 @@ /* Tablet and below - Stack sidebar on top */ @media (max-width: 991px) { .articles-container-wrapper { - flex-direction: column; - gap: 32px; + display: grid; + grid-template-columns: 280px 1fr; + gap: 40px; } .blog-sidebar { diff --git a/src/pages/blogs/blogs.css b/src/pages/blogs/blogs.css index 4aa0aebd..76ad521e 100644 --- a/src/pages/blogs/blogs.css +++ b/src/pages/blogs/blogs.css @@ -43,17 +43,19 @@ /* Dark Mode Variables - Using standardized colors */ [data-theme="dark"] { - --blog-text-primary: var(--dark-text-primary); - --blog-text-secondary: var(--dark-text-secondary); - --blog-text-muted: var(--dark-text-muted); - --blog-bg-primary: var(--dark-bg-primary); - --blog-bg-secondary: var(--dark-bg-secondary); - --blog-bg-card: var(--dark-card-bg); - --blog-border: var(--dark-border); - --blog-shadow: var(--dark-shadow); - --blog-shadow-lg: var(--dark-shadow-lg); + --blog-text-primary: var(--dark-text-primary, #f7fafc); + --blog-text-secondary: var(--dark-text-secondary, #cbd5e0); + --blog-text-muted: var(--dark-text-muted, #a0aec0); + + --blog-bg-primary: var(--dark-bg-primary, #0f172a); + --blog-bg-secondary: var(--dark-bg-secondary, #111827); + --blog-bg-card: var(--dark-card-bg, #1f2937); + + --blog-border: var(--dark-border, #2d3748); + + --blog-shadow: var(--dark-shadow, 0 4px 6px rgba(0,0,0,0.4)); + --blog-shadow-lg: var(--dark-shadow-lg, 0 20px 25px rgba(0,0,0,0.5)); --blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); -} /* Global Styles */ * { @@ -605,13 +607,15 @@ body { } .blog-card-inner { + display: flex; + flex-direction: column; height: 100%; border-radius: var(--blog-radius-xl); overflow: hidden; background: var(--blog-bg-card); border: 1px solid var(--blog-border); transition: var(--blog-transition); - position: relative; + } .blog-card:hover .blog-card-inner { @@ -631,6 +635,7 @@ body { position: relative; height: 240px; overflow: hidden; + flex-shrink: 0; } .blog-card-image { @@ -695,6 +700,7 @@ body { height: calc(100% - 240px); display: flex; flex-direction: column; + flex: 1; } .blog-card-category {