From 184ee4f19fe55ea8d088d7d0d7368cd34cabe273 Mon Sep 17 00:00:00 2001 From: Darshana0906 Date: Sun, 17 May 2026 11:58:15 +0530 Subject: [PATCH 1/2] Enhanced blog section --- src/components/blogCarousel/blogCard.tsx | 24 +- src/components/blogCarousel/blogCarousel.css | 388 +++++++++---------- src/components/blogCarousel/blogCarousel.tsx | 49 ++- 3 files changed, 221 insertions(+), 240 deletions(-) diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx index 562fa5c9..225ed7b1 100644 --- a/src/components/blogCarousel/blogCard.tsx +++ b/src/components/blogCarousel/blogCard.tsx @@ -1,13 +1,13 @@ "use client"; import * as React from "react"; -import { useState } from "react"; + import { motion } from "framer-motion"; import Link from "@docusaurus/Link"; -import { Card, CardContent } from "../ui/card"; + import { getAuthorNames } from "../../utils/authors"; const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => { - const [isHovered, setIsHovered] = useState(false); + if (!id || !type) { return
data not fetched properly, imageId and entryId not found
; @@ -45,16 +45,16 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => { scale: 1.02, transition: { duration: 0.4, ease: "easeOut" }, }} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + className="relative h-full overflow-hidden transition-all duration-300" > -
+ to={`/blog/${id}`} + className="block h-full" + style={{ textDecoration: "none" }} + aria-label={`Read article: ${title}`} // ← add this +> +
{/* Category Badge */}
{category}
@@ -83,7 +83,9 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
{/* Read More Button */} -
Read Article →
+ + Read Article → +
diff --git a/src/components/blogCarousel/blogCarousel.css b/src/components/blogCarousel/blogCarousel.css index bc9923a0..66a8f1e9 100644 --- a/src/components/blogCarousel/blogCarousel.css +++ b/src/components/blogCarousel/blogCarousel.css @@ -1,88 +1,93 @@ -/* Blog Carousel Card Styles - Matching Blog Page Design */ - -/* Article Card */ +/* ── Article Card ─────────────────────────────────────── */ .article-card { - background: white; + background: #ffffff; border-radius: 20px; overflow: hidden; - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.08), - 0 1px 3px rgba(0, 0, 0, 0.1); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), + border-color 0.35s ease; position: relative; - border: 1px solid rgba(255, 255, 255, 0.8); + border: 1px solid rgba(147, 51, 234, 0.3); height: 100%; display: flex; flex-direction: column; + cursor: pointer; +} + +/* ── Hover: lift + purple glow ── */ +.article-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 48px rgba(147, 51, 234, 0.22), + 0 4px 12px rgba(147, 51, 234, 0.15); + border-color: rgba(147, 51, 234, 0.8); } +/* ── Dark mode base ── */ [data-theme="dark"] .article-card { - background: #242526; - border: 1px solid rgba(74, 85, 104, 0.3); - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.4), - 0 1px 3px rgba(0, 0, 0, 0.3); + background: #1e1f20; + border: 1px solid rgba(192, 132, 252, 0.2); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } +[data-theme="dark"] .article-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 48px rgba(192, 132, 252, 0.28), + 0 4px 12px rgba(192, 132, 252, 0.18); + border-color: rgba(192, 132, 252, 0.8); +} + +/* ── Subtle overlay on hover ── */ .article-card::before { content: ""; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background: linear-gradient( 135deg, - rgba(99, 102, 241, 0.02) 0%, - rgba(168, 85, 247, 0.02) 100% + rgba(147, 51, 234, 0.04) 0%, + rgba(217, 70, 239, 0.04) 100% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; + z-index: 0; } .article-card:hover::before { opacity: 1; } +/* ── Category badge ── */ .card-category { position: absolute; - top: 20px; - left: 20px; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(255, 255, 255, 0.9) 100% - ); + top: 14px; + left: 14px; + background: rgba(255, 255, 255, 0.92); color: #6366f1; - padding: 8px 16px; + padding: 5px 13px; border-radius: 25px; - font-size: 12px; + font-size: 11px; font-weight: 700; z-index: 2; - backdrop-filter: blur(20px); - border: 1px solid rgba(99, 102, 241, 0.1); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; + backdrop-filter: blur(12px); + border: 1px solid rgba(99, 102, 241, 0.15); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + transition: all 0.25s ease; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.6px; } [data-theme="dark"] .card-category { - background: linear-gradient( - 135deg, - rgba(36, 37, 38, 0.95) 0%, - rgba(26, 32, 44, 0.9) 100% - ); + background: rgba(30, 31, 32, 0.92); color: #a78bfa; - border: 1px solid rgba(167, 139, 250, 0.2); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(167, 139, 250, 0.25); } .article-card:hover .card-category { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; - transform: scale(1.05); + border-color: transparent; + transform: scale(1.04); } [data-theme="dark"] .article-card:hover .card-category { @@ -90,6 +95,7 @@ color: #1a202c; } +/* ── Card image ── */ .card-image { height: 200px; overflow: hidden; @@ -98,24 +104,21 @@ flex-shrink: 0; } -.card-image::before { +.card-image::after { content: ""; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background: linear-gradient( - 135deg, - rgba(99, 102, 241, 0.1) 0%, - rgba(168, 85, 247, 0.1) 100% + to bottom, + transparent 50%, + rgba(99, 102, 241, 0.08) 100% ); opacity: 0; - transition: opacity 0.3s ease; + transition: opacity 0.35s ease; z-index: 1; } -.article-card:hover .card-image::before { +.article-card:hover .card-image::after { opacity: 1; } @@ -123,43 +126,38 @@ width: 100%; height: 100%; object-fit: cover; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - filter: brightness(1) saturate(1); + transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), + filter 0.45s ease; } .article-card:hover .card-image img { - transform: scale(1.08); - filter: brightness(1.1) saturate(1.2); + transform: scale(1.07); + filter: brightness(1.06) saturate(1.15); } +/* ── Card content ── */ .card-content { - padding: 24px; + padding: 20px 22px 18px; position: relative; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(248, 250, 252, 0.95) 100% - ); + z-index: 1; flex: 1; display: flex; flex-direction: column; + background: #ffffff; } [data-theme="dark"] .card-content { - background: linear-gradient( - 135deg, - rgba(36, 37, 38, 0.95) 0%, - rgba(26, 32, 44, 0.95) 100% - ); + background: #1e1f20; } +/* ── Title ── */ .card-title { - font-size: 18px; + font-size: 17px; font-weight: 700; - color: #1e293b; - margin: 0 0 12px 0; - line-height: 1.3; - letter-spacing: -0.01em; + color: #0f172a; + margin: 0 0 10px 0; + line-height: 1.35; + letter-spacing: -0.015em; transition: color 0.2s ease; display: -webkit-box; -webkit-line-clamp: 2; @@ -168,7 +166,7 @@ } .article-card:hover .card-title { - color: #6366f1; + color: #9333ea; } [data-theme="dark"] .card-title { @@ -176,19 +174,19 @@ } [data-theme="dark"] .article-card:hover .card-title { - color: #a78bfa; + color: #c084fc; } +/* ── Description ── */ .card-description { - font-size: 14px; + font-size: 13.5px; color: #64748b; - line-height: 1.6; - margin: 0 0 20px 0; + line-height: 1.65; + margin: 0 0 16px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; - font-weight: 400; flex: 1; } @@ -196,39 +194,44 @@ color: #94a3b8; } +/* ── Meta row ── */ .card-meta { display: flex; align-items: center; justify-content: space-between; - margin-bottom: 16px; - padding-bottom: 16px; - border-bottom: 1px solid rgba(226, 232, 240, 0.8); + margin-bottom: 14px; + padding-bottom: 14px; + border-bottom: 1px solid rgba(226, 232, 240, 0.7); position: relative; - gap: 12px; + gap: 10px; } [data-theme="dark"] .card-meta { - border-bottom-color: rgba(74, 85, 104, 0.3); + border-bottom-color: rgba(74, 85, 104, 0.25); } -.card-meta::before { +/* Animated underline on hover */ +.card-meta::after { content: ""; position: absolute; bottom: -1px; left: 0; - width: 40px; + width: 0; height: 2px; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - border-radius: 1px; - opacity: 0; - transition: all 0.3s ease; + background: linear-gradient(90deg, #9333ea 0%, #c084fc 100%); + border-radius: 2px; + transition: width 0.35s ease; } -.article-card:hover .card-meta::before { - opacity: 1; - width: 60px; +.article-card:hover .card-meta::after { + width: 52px; } +[data-theme="dark"] .card-meta::after { + background: linear-gradient(90deg, #c084fc 0%, #d946ef 100%); +} + +/* ── Author ── */ .card-author { display: flex; align-items: center; @@ -245,17 +248,17 @@ display: flex; align-items: center; justify-content: center; - font-size: 14px; + font-size: 12px; color: white; - font-weight: 600; + font-weight: 700; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); flex-shrink: 0; - transition: all 0.3s ease; + transition: box-shadow 0.3s ease, transform 0.3s ease; } -.author-avatar:hover { +.article-card:hover .author-avatar { transform: scale(1.1); - box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); + box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45); } .author-name { @@ -268,48 +271,49 @@ transition: color 0.2s ease; } -.author-name:hover { +.article-card:hover .author-name { color: #6366f1; } [data-theme="dark"] .author-name { - color: #cbd5e1; + color: #94a3b8; } -[data-theme="dark"] .author-name:hover { +[data-theme="dark"] .article-card:hover .author-name { color: #a78bfa; } +/* ── Read time pill ── */ .card-read-time { font-size: 11px; - color: #94a3b8; - font-weight: 500; - background: rgba(148, 163, 184, 0.1); - padding: 4px 8px; - border-radius: 12px; + color: #6366f1; + font-weight: 600; + background: rgba(99, 102, 241, 0.08); + padding: 3px 10px; + border-radius: 20px; flex-shrink: 0; + border: 1px solid rgba(99, 102, 241, 0.15); } [data-theme="dark"] .card-read-time { - color: #64748b; - background: rgba(100, 116, 139, 0.2); + color: #a78bfa; + background: rgba(167, 139, 250, 0.1); + border-color: rgba(167, 139, 250, 0.2); } +/* ── Read more button ── */ .card-read-more { display: inline-flex; align-items: center; - gap: 8px; + gap: 6px; + align-self: flex-start; /* ← fixes full-width stretch */ color: #6366f1; text-decoration: none; font-size: 13px; font-weight: 700; - padding: 10px 16px; + padding: 9px 18px; border-radius: 12px; - background: linear-gradient( - 135deg, - rgba(99, 102, 241, 0.1) 0%, - rgba(139, 92, 246, 0.1) 100% - ); + background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; @@ -320,137 +324,91 @@ .card-read-more::before { content: ""; position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - transition: left 0.3s ease; - z-index: -1; + inset: 0; + background: linear-gradient(135deg, #9333ea 0%, #d946ef 100%); + transform: translateX(-101%); + transition: transform 0.3s ease; + z-index: 0; +} + +.card-read-more span { + position: relative; + z-index: 1; } .card-read-more:hover { color: white; + border-color: transparent; + box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4); transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); } .card-read-more:hover::before { - left: 0; + transform: translateX(0); } [data-theme="dark"] .card-read-more { - color: #a78bfa; - background: linear-gradient( - 135deg, - rgba(167, 139, 250, 0.1) 0%, - rgba(192, 132, 252, 0.1) 100% - ); - border-color: rgba(167, 139, 250, 0.2); + color: #c084fc; + background: rgba(192, 132, 252, 0.08); + border-color: rgba(192, 132, 252, 0.2); } -[data-theme="dark"] .card-read-more:hover { - color: white; +[data-theme="dark"] .card-read-more::before { + background: linear-gradient(135deg, #c084fc 0%, #d946ef 100%); } -/* Responsive adjustments for carousel cards */ -@media (max-width: 768px) { - .card-image { - height: 160px; - } - - .card-content { - padding: 20px; - } - - .card-title { - font-size: 16px; - margin-bottom: 10px; - } - - .card-description { - font-size: 13px; - margin-bottom: 16px; - -webkit-line-clamp: 2; - } - - .card-meta { - margin-bottom: 12px; - padding-bottom: 12px; - } - - .author-avatar { - width: 24px; - height: 24px; - font-size: 12px; - } - - .author-name { - font-size: 11px; - } - - .card-read-time { - font-size: 10px; - padding: 3px 6px; - } - - .card-read-more { - font-size: 12px; - padding: 8px 12px; - } -} - -/* Smooth page transitions */ -.page-transition-enter { - opacity: 0; - transform: translateY(20px); -} - -.page-transition-enter-active { - opacity: 1; - transform: translateY(0); - transition: - opacity 0.6s ease-out, - transform 0.6s ease-out; -} - -.page-transition-exit { - opacity: 1; - transform: translateY(0); -} - -.page-transition-exit-active { - opacity: 0; - transform: translateY(-20px); - transition: - opacity 0.4s ease-in, - transform 0.4s ease-in; +[data-theme="dark"] .card-read-more:hover { + color: white; } -/* Blog Carousel Section Enhancements */ +/* ── Blog carousel section ── */ .blog-carousel-section { - background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%); - padding: 5px; + background: linear-gradient(160deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%); + padding: 48px 24px; position: relative; overflow: hidden; } [data-theme="dark"] .blog-carousel-section { - background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%); + background: linear-gradient(160deg, #131314 0%, #18181b 50%, #1a1f2e 100%); } -/* Enhanced Focus States */ +/* ── Focus state ── */ .article-card:focus-within { outline: 2px solid #6366f1; outline-offset: 4px; border-radius: 24px; } -/* Smooth Link Transitions */ -a[href*="/blog/"] { - transition: all 0.3s ease; +/* ── Responsive ── */ +@media (max-width: 768px) { + .card-image { height: 160px; } + .card-content { padding: 16px 18px 14px; } + .card-title { font-size: 15px; } + .card-description { font-size: 12.5px; -webkit-line-clamp: 2; } + .card-meta { margin-bottom: 10px; padding-bottom: 10px; } + .author-avatar { width: 24px; height: 24px; font-size: 10px; } + .author-name { font-size: 11px; } + .card-read-time { font-size: 10px; } + .card-read-more { font-size: 12px; padding: 7px 14px; } +} + +/* ── Page transitions ── */ +.page-transition-enter { + opacity: 0; + transform: translateY(20px); } - -a[href*="/blog/"]:hover { - text-decoration: none; +.page-transition-enter-active { + opacity: 1; + transform: translateY(0); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} +.page-transition-exit { + opacity: 1; + transform: translateY(0); } +.page-transition-exit-active { + opacity: 0; + transform: translateY(-20px); + transition: opacity 0.4s ease-in, transform 0.4s ease-in; +} \ No newline at end of file diff --git a/src/components/blogCarousel/blogCarousel.tsx b/src/components/blogCarousel/blogCarousel.tsx index c63a55be..ae78ed59 100644 --- a/src/components/blogCarousel/blogCarousel.tsx +++ b/src/components/blogCarousel/blogCarousel.tsx @@ -9,11 +9,11 @@ import { CarouselPrevious, type CarouselApi, } from "../ui/carousel"; -import { Button } from "../ui/button"; import { useEffect, useState } from "react"; import BlogCard from "./blogCard"; import blogs from "../../database/blogs"; import Autoplay from "embla-carousel-autoplay"; +import Link from "@docusaurus/Link"; import "./blogCarousel.css"; export function BlogCarousel() { @@ -34,6 +34,25 @@ export function BlogCarousel() { return (
+ {/* Section Header */} +
+
+

+ From the Blog +

+

+ Latest articles from our contributors +

+
+ + View all → + +
+ - {blogs.map((blog, index) => ( + {blogs.map((blog) => ( - {/* Enhanced Carousel controls */} + {/* Carousel Controls */}
- -
+ + + {/* Dot indicators */} +
{Array.from({ length: count }).map((_, index) => ( -
- + +
); -} +} \ No newline at end of file From e9f79fe10d14ca217f87851dc2ae56f79c7a9523 Mon Sep 17 00:00:00 2001 From: Darshana0906 Date: Mon, 18 May 2026 12:52:19 +0530 Subject: [PATCH 2/2] clickable blogs issue fixed --- src/css/custom.css | 220 +++++++++++++++++++++------------------------ 1 file changed, 100 insertions(+), 120 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index b60e9371..378bd008 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -50,28 +50,28 @@ transition: all 0.25s ease-in-out; } -/* Force high visibility for active sidebar items - Green Theme */ +/* Force high visibility for active sidebar items - Blue Theme */ .menu__link--active { - background-color: #ecfdf5; - /* Light green background */ - color: #2f855a; - /* Strong green text */ + background-color: #eff6ff; + /* Light blue background */ + color: #1d4ed8; + /* Strong blue text */ font-weight: bold; position: relative; - box-shadow: 0 2px 8px rgba(56, 161, 105, 0.2); + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); } /* Make the active icon stand out in the sidebar */ .menu__link--active .categoryIcon, .menu__link--active .linkIcon { - color: #38a169; + color: #2563eb; } /* Make active text bold and larger */ .menu__link--active span { font-weight: 700; - color: #2f855a; - /* Strong green color */ + color: #1d4ed8; + /* Strong blue color */ font-size: 1.05em; } @@ -79,14 +79,14 @@ /* Style the existing dot for active pages */ a.menu__link.menu__link--active div span:first-child { - background-color: #38a169 !important; - /* Green dot */ + background-color: #2563eb !important; + /* Blue dot */ opacity: 1 !important; width: 8px !important; height: 8px !important; - box-shadow: 0 0 6px #38a169 !important; + box-shadow: 0 0 6px #2563eb !important; /* Add glow effect */ - animation: breatheGreen 2s infinite; + animation: breatheBlue 2s infinite; } /* Add arrow indicator to the right */ @@ -96,12 +96,12 @@ a.menu__link.menu__link--active div span:first-child { right: 8px; top: 50%; transform: translateY(-50%); - color: #38a169; + color: #2563eb; font-weight: bold; } /* Breathing animation for active indicators */ -@keyframes breatheGreen { +@keyframes breatheBlue { 0% { opacity: 0.7; transform: translateY(-50%) scale(1); @@ -121,7 +121,7 @@ a.menu__link.menu__link--active div span:first-child { /* ================= SECTION 4: CUSTOM SIDEBAR CATEGORY THEMES ================= */ /* GitHub theme */ -.custom-sidebar-github > .menu__list-item-collapsible > .menu__link { +.custom-sidebar-github>.menu__list-item-collapsible>.menu__link { background: linear-gradient(135deg, #24292e, #586069); color: white; border-radius: 8px; @@ -130,7 +130,7 @@ a.menu__link.menu__link--active div span:first-child { } /* Python theme */ -.custom-sidebar-python > .menu__list-item-collapsible > .menu__link { +.custom-sidebar-python>.menu__list-item-collapsible>.menu__link { background: linear-gradient(135deg, #3776ab, #ffd43b); color: white; border-radius: 8px; @@ -139,7 +139,7 @@ a.menu__link.menu__link--active div span:first-child { } /* SQL theme */ -.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link { +.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link { background: linear-gradient(135deg, #336791, #4479a1); color: white; border-radius: 8px; @@ -148,7 +148,7 @@ a.menu__link.menu__link--active div span:first-child { } /* Technical theme */ -.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link { +.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; border-radius: 8px; @@ -157,9 +157,9 @@ a.menu__link.menu__link--active div span:first-child { } /* Custom subcategory styling */ -.custom-sidebar-setup > .menu__list-item-collapsible > .menu__link, -.custom-sidebar-basics > .menu__list-item-collapsible > .menu__link, -.custom-sidebar-maintainer > .menu__list-item-collapsible > .menu__link { +.custom-sidebar-setup>.menu__list-item-collapsible>.menu__link, +.custom-sidebar-basics>.menu__list-item-collapsible>.menu__link, +.custom-sidebar-maintainer>.menu__list-item-collapsible>.menu__link { background: rgba(36, 41, 46, 0.1); border-left: 3px solid #24292e; padding-left: 16px; @@ -167,12 +167,12 @@ a.menu__link.menu__link--active div span:first-child { } /* Hover effects for all custom categories */ -.custom-sidebar-github > .menu__list-item-collapsible > .menu__link:hover, -.custom-sidebar-python > .menu__list-item-collapsible > .menu__link:hover, -.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link:hover, -.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link:hover, -.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link:hover, -.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link:hover { +.custom-sidebar-github>.menu__list-item-collapsible>.menu__link:hover, +.custom-sidebar-python>.menu__list-item-collapsible>.menu__link:hover, +.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link:hover, +.custom-sidebar-nextjs>.menu__list-item-collapsible>.menu__link:hover, +.custom-sidebar-gsa>.menu__list-item-collapsible>.menu__link:hover, +.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; @@ -182,24 +182,24 @@ a.menu__link.menu__link--active div span:first-child { /* Dark mode styles for active items */ html[data-theme="dark"] .menu__link--active { - background-color: rgba(72, 187, 120, 0.15); - color: #9ae6b4; + background-color: rgba(96, 165, 250, 0.15); + color: #93c5fd; } /* Dark mode text color */ html[data-theme="dark"] .menu__link--active span { - color: #9ae6b4; + color: #93c5fd; } /* Dark mode dot styling */ html[data-theme="dark"] a.menu__link.menu__link--active div span:first-child { - background-color: #9ae6b4 !important; - box-shadow: 0 0 8px #68d391 !important; + background-color: #93c5fd !important; + box-shadow: 0 0 8px #60a5fa !important; } /* Dark mode indicator colors */ html[data-theme="dark"] .menu__link--active::after { - color: #68d391; + color: #60a5fa; } /* Navbar styling and alignment */ @@ -251,7 +251,7 @@ html[data-theme="dark"] .menu__link--active::after { } /* ======== SECTION 7 : Adjust individual navbar items ==========*/ -.navbar__items > .navbar__item { +.navbar__items>.navbar__item { padding: 0.2rem 0.3rem !important; margin: 0 !important; } @@ -282,6 +282,7 @@ html[data-theme="dark"] .menu__link--active::after { /* Ensure dropdowns are visible on big screens */ @media (min-width: 1300px) { + .navbar__item.dropdown, .navbar__item:has(.dropdown-content) { position: relative !important; @@ -355,13 +356,13 @@ html[data-theme="dark"] .menu__link--active::after { } :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #1d4ed8; + --ifm-color-primary-dark: #1e40af; + --ifm-color-primary-darker: #1e3a8a; + --ifm-color-primary-darkest: #172554; + --ifm-color-primary-light: #2563eb; + --ifm-color-primary-lighter: #3b82f6; + --ifm-color-primary-lightest: #60a5fa; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-transition-fast: 150ms; @@ -416,13 +417,13 @@ body { } [data-theme="dark"] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; + --ifm-color-primary: #60a5fa; + --ifm-color-primary-dark: #3b82f6; + --ifm-color-primary-darker: #2563eb; + --ifm-color-primary-darkest: #1d4ed8; + --ifm-color-primary-light: #93c5fd; + --ifm-color-primary-lighter: #bfdbfe; + --ifm-color-primary-lightest: #dbeafe; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); /* Global dark theme tokens used across feature pages (courses, broadcasts, sponsors, etc.) */ @@ -456,6 +457,7 @@ body { /* ===== SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */ @media (min-width: 1300px) { + /* Better spacing for desktop navbar */ .navbar__inner { max-width: 1400px; @@ -480,10 +482,7 @@ body { * This hides all navbar items on small screens, *except* for the * toggle, brand, and the item :has() the GitHub auth button. */ - .navbar__items - .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( - :has(#firebase-auth-github-navbar) - ) { + .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( :has(#firebase-auth-github-navbar)) { display: none !important; } @@ -688,8 +687,8 @@ body { } /* Prevent grid content from forcing overflow in the dropdown rows */ -.dropdown__menu .grid > .col-span-2, -.dropdown-content .grid > .col-span-2 { +.dropdown__menu .grid>.col-span-2, +.dropdown-content .grid>.col-span-2 { min-width: 0 !important; /* allow the icon column to shrink inside the 3-col grid */ } @@ -712,8 +711,8 @@ body { } /* Add breathing room between the left label and the vertical separator */ -.dropdown__menu .grid > .border-r.col-span-1, -.dropdown-content .grid > .border-r.col-span-1 { +.dropdown__menu .grid>.border-r.col-span-1, +.dropdown-content .grid>.border-r.col-span-1 { padding-right: 0.5rem !important; } @@ -874,11 +873,9 @@ html.theme-light .text-gray-900 { /* Ensure the specific block is forced light in light mode */ html[data-theme="light"] .interview-prep-page .technical-outer { - background-image: linear-gradient( - 135deg, - #eff6ff 0%, - #f8fafc 100% - ) !important; + background-image: linear-gradient(135deg, + #eff6ff 0%, + #f8fafc 100%) !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; @@ -889,11 +886,9 @@ html[data-theme="light"] .interview-prep-page .technical-outer { /* Companies tab: use white gradients in light mode and remove overlays */ [data-theme="light"] .company-outer { - background-image: linear-gradient( - 135deg, - #ffffff 0%, - #f8fafc 100% - ) !important; + background-image: linear-gradient(135deg, + #ffffff 0%, + #f8fafc 100%) !important; background-color: #ffffff !important; color: #0f172a !important; isolation: isolate !important; @@ -903,7 +898,7 @@ html[data-theme="light"] .interview-prep-page .technical-outer { } /* hide the subtle pattern overlay added inside the component */ -[data-theme="light"] .company-outer > .absolute.inset-0, +[data-theme="light"] .company-outer>.absolute.inset-0, [data-theme="light"] .company-outer .absolute.inset-0.opacity-5 { display: none !important; background: none !important; @@ -987,14 +982,12 @@ html { /* ===== FOOTER BACKGROUND PROTECTION ===== */ /* Ensure footer maintains its gradient background in dark mode */ [data-theme="dark"] .enhanced-footer { - background: linear-gradient( - 135deg, - #0f0f23 0%, - #1a1a2e 25%, - #16213e 50%, - #0f3460 75%, - #533483 100% - ) !important; + background: linear-gradient(135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100%) !important; color: #e2e8f0 !important; } @@ -1010,22 +1003,17 @@ html { /* ===== STEP 6: MAXIMUM SPECIFICITY PROTECTION ===== */ /* Override the exact problematic global rule with same specificity */ -[data-theme="dark"] - body:not(:has(.community-page)) - .enhanced-footer - .container { +[data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer .container { background-color: transparent !important; } [data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer { - background: linear-gradient( - 135deg, - #0f0f23 0%, - #1a1a2e 25%, - #16213e 50%, - #0f3460 75%, - #533483 100% - ) !important; + background: linear-gradient(135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100%) !important; color: #e2e8f0 !important; } @@ -1047,15 +1035,14 @@ html { /* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR AS THERE IS ONE ON THE NAVBAR ===== */ @media (max-width: 1200px) { + /* Aggressively hide theme toggle in mobile sidebar */ - .navbar-sidebar__brand - button:not(.navbar-sidebar__close):not([class*="close"]), + .navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]), .navbar-sidebar__brand .colorModeToggle, .navbar-sidebar .colorModeToggle, .navbar-sidebar__brand button[class*="colorModeToggle"], .navbar-sidebar button[class*="colorModeToggle"], - .navbar-sidebar__brand - .clean-btn[class*="toggle"]:not(.navbar-sidebar__close), + .navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close), .navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close), .navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close), .navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close), @@ -1127,6 +1114,7 @@ html { /* Mobile-only visibility & spacing fixes for Tutorials icons (320–768px) */ @media screen and (max-width: 768px) { + /* Ensure the label + icons row inside Docs dropdown uses the full width */ .navbar-sidebar .grid, .navbar-sidebar .dropdown__menu .grid, @@ -1139,12 +1127,12 @@ html { } /* So the icon column doesn't get clipped in the 3-col layout */ - .navbar-sidebar .grid > .col-span-2 { + .navbar-sidebar .grid>.col-span-2 { min-width: 0 !important; } /* Tighten label space and drop the border on very small screens */ - .navbar-sidebar .grid > .border-r.col-span-1 { + .navbar-sidebar .grid>.border-r.col-span-1 { border-right: 0 !important; padding-right: 0.25rem !important; font-weight: 600; @@ -1189,7 +1177,7 @@ html { } /* Add vertical space between Tutorials, Courses, Interview Prep blocks */ - .navbar-sidebar .dropdown__menu > .grid { + .navbar-sidebar .dropdown__menu>.grid { padding: 1rem 0 !important; margin: 1rem 0 !important; } @@ -1464,7 +1452,7 @@ html { flex-shrink: 0; } -.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut > * { +.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut>* { min-width: 0 !important; height: auto !important; padding: 0 !important; @@ -1605,8 +1593,8 @@ html { padding-right: var(--ifm-navbar-padding-horizontal) !important; } -.navbar > .container, -.navbar > .container-fluid { +.navbar>.container, +.navbar>.container-fluid { max-width: none !important; width: 100% !important; padding: 0 !important; @@ -1652,16 +1640,12 @@ main { right: 0; bottom: 0; background: - radial-gradient( - circle at 20% 30%, + radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.08) 0%, - transparent 40% - ), - radial-gradient( - circle at 80% 70%, + transparent 40%), + radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.06) 0%, - transparent 45% - ); + transparent 45%); pointer-events: none; } @@ -1713,7 +1697,7 @@ a { /* ================= MISCELLANEOUS ================= */ /* Fix Home icon alignment with text in breadcrumbs [Docs] */ -.theme-doc-breadcrumbs a.breadcrumbs__link > svg { +.theme-doc-breadcrumbs a.breadcrumbs__link>svg { display: inline-block; } @@ -1828,11 +1812,9 @@ html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 { /* Companies: force white/near-white surface in light mode for .company-outer */ html[data-theme="light"] .company-outer { - background-image: linear-gradient( - 135deg, - #ffffff 0%, - #f8fafc 100% - ) !important; + background-image: linear-gradient(135deg, + #ffffff 0%, + #f8fafc 100%) !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; @@ -1876,11 +1858,9 @@ html[data-theme="light"] a.company-tab-link { /* If any Tailwind gradient utility still applies, remove it for these containers in light mode */ html[data-theme="light"] .company-outer.bg-gradient-to-br, html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { - background-image: linear-gradient( - 135deg, - #ffffff 0%, - #f8fafc 100% - ) !important; + background-image: linear-gradient(135deg, + #ffffff 0%, + #f8fafc 100%) !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; @@ -1915,7 +1895,7 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { /* Issue #980: Fix inconsistent padding and margins across sections */ /* Standard section spacing: 2rem vertical, 1.5rem horizontal on smaller screens */ -main > div:not(.m-0) { +main>div:not(.m-0) { margin-top: 2rem; margin-bottom: 2rem; } @@ -1927,7 +1907,7 @@ main > div:not(.m-0) { /* Responsive: reduce spacing on mobile devices */ @media (max-width: 768px) { - main > div:not(.m-0) { + main>div:not(.m-0) { margin-top: 1.5rem; margin-bottom: 1.5rem; } @@ -1958,4 +1938,4 @@ h2:first-child, h3:first-child { margin-top: 0; margin-bottom: 1rem; -} +} \ No newline at end of file