diff --git a/src/css/custom.css b/src/css/custom.css index 0b165221..9844aac7 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -197,7 +197,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; @@ -206,7 +206,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; @@ -215,7 +215,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; @@ -224,7 +224,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; @@ -233,9 +233,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; @@ -243,12 +243,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; @@ -327,7 +327,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; } @@ -358,7 +358,6 @@ 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; @@ -533,7 +532,6 @@ body { /* ===== SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */ @media (min-width: 1300px) { - /* Better spacing for desktop navbar */ .navbar__inner { max-width: 1400px; @@ -558,7 +556,10 @@ body { * Hide all navbar items on small screens except the toggle, brand, * and the Clerk auth control. */ - .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; } @@ -763,8 +764,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 */ } @@ -787,8 +788,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; } @@ -949,9 +950,11 @@ 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; @@ -962,9 +965,11 @@ 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; @@ -974,7 +979,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; @@ -1058,12 +1063,14 @@ 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; } @@ -1079,17 +1086,22 @@ 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; } @@ -1111,14 +1123,15 @@ 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), @@ -1190,7 +1203,6 @@ 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, @@ -1203,12 +1215,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; @@ -1253,7 +1265,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; } @@ -1587,7 +1599,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; @@ -1728,8 +1740,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; @@ -1775,12 +1787,16 @@ 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; } @@ -1832,7 +1848,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; } @@ -1947,9 +1963,11 @@ 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; @@ -1993,9 +2011,11 @@ 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; @@ -2030,7 +2050,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; } @@ -2042,7 +2062,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; } @@ -2117,6 +2137,33 @@ html[data-theme="dark"] { scrollbar-color: #334155 transparent !important; } +/* ===== SECTION 15: TABLE OF CONTENTS COLOR ===== */ +/* Issue #1593: Change TOC link color on hover/active */ +.table-of-contents__link:hover, +.table-of-contents__link--active, +.table-of-contents__link--active:hover { + color: #2e8555; + font-weight: normal; + text-decoration: none; +} + +[data-theme="dark"] .table-of-contents__link:hover, +[data-theme="dark"] .table-of-contents__link--active { + color: #2e8555; + font-weight: normal; + text-decoration: none; +} +/* ===== SECTION 16: BLOG AUTHOR NAME COLOR ===== */ +/* Issue #1593: Change blog author name color to #2e8555 */ +.avatar__intro .avatar__name a, +.authorDetails_1V9A .avatar__name a { + color: #2e8555; +} + +[data-theme="dark"] .avatar__intro .avatar__name a, +[data-theme="dark"] .authorDetails_1V9A .avatar__name a { + color: #2e8555; +} /* ===== Section 15 : blog layout ===== */ /* Full width container */ .blog-wrapper .container { @@ -2341,4 +2388,4 @@ html[data-theme="dark"] .blog-post-page .markdown h4 { /* ===================================================== END SECTION 15 - ===================================================== */ \ No newline at end of file + ===================================================== */