Skip to content

Commit 80a60e6

Browse files
fix: apply #B1E2C5 color to blog author names for issue #1593
1 parent bf2f18f commit 80a60e6

1 file changed

Lines changed: 105 additions & 67 deletions

File tree

src/css/custom.css

Lines changed: 105 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ a.menu__link.menu__link--active div span:first-child {
121121
/* ================= SECTION 4: CUSTOM SIDEBAR CATEGORY THEMES ================= */
122122

123123
/* GitHub theme */
124-
.custom-sidebar-github>.menu__list-item-collapsible>.menu__link {
124+
.custom-sidebar-github > .menu__list-item-collapsible > .menu__link {
125125
background: linear-gradient(135deg, #24292e, #586069);
126126
color: white;
127127
border-radius: 8px;
@@ -130,7 +130,7 @@ a.menu__link.menu__link--active div span:first-child {
130130
}
131131

132132
/* Python theme */
133-
.custom-sidebar-python>.menu__list-item-collapsible>.menu__link {
133+
.custom-sidebar-python > .menu__list-item-collapsible > .menu__link {
134134
background: linear-gradient(135deg, #3776ab, #ffd43b);
135135
color: white;
136136
border-radius: 8px;
@@ -139,7 +139,7 @@ a.menu__link.menu__link--active div span:first-child {
139139
}
140140

141141
/* SQL theme */
142-
.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link {
142+
.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link {
143143
background: linear-gradient(135deg, #336791, #4479a1);
144144
color: white;
145145
border-radius: 8px;
@@ -148,7 +148,7 @@ a.menu__link.menu__link--active div span:first-child {
148148
}
149149

150150
/* Technical theme */
151-
.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link {
151+
.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link {
152152
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
153153
color: white;
154154
border-radius: 8px;
@@ -157,22 +157,22 @@ a.menu__link.menu__link--active div span:first-child {
157157
}
158158

159159
/* Custom subcategory styling */
160-
.custom-sidebar-setup>.menu__list-item-collapsible>.menu__link,
161-
.custom-sidebar-basics>.menu__list-item-collapsible>.menu__link,
162-
.custom-sidebar-maintainer>.menu__list-item-collapsible>.menu__link {
160+
.custom-sidebar-setup > .menu__list-item-collapsible > .menu__link,
161+
.custom-sidebar-basics > .menu__list-item-collapsible > .menu__link,
162+
.custom-sidebar-maintainer > .menu__list-item-collapsible > .menu__link {
163163
background: rgba(36, 41, 46, 0.1);
164164
border-left: 3px solid #24292e;
165165
padding-left: 16px;
166166
margin-left: 8px;
167167
}
168168

169169
/* Hover effects for all custom categories */
170-
.custom-sidebar-github>.menu__list-item-collapsible>.menu__link:hover,
171-
.custom-sidebar-python>.menu__list-item-collapsible>.menu__link:hover,
172-
.custom-sidebar-sql>.menu__list-item-collapsible>.menu__link:hover,
173-
.custom-sidebar-nextjs>.menu__list-item-collapsible>.menu__link:hover,
174-
.custom-sidebar-gsa>.menu__list-item-collapsible>.menu__link:hover,
175-
.custom-sidebar-technical>.menu__list-item-collapsible>.menu__link:hover {
170+
.custom-sidebar-github > .menu__list-item-collapsible > .menu__link:hover,
171+
.custom-sidebar-python > .menu__list-item-collapsible > .menu__link:hover,
172+
.custom-sidebar-sql > .menu__list-item-collapsible > .menu__link:hover,
173+
.custom-sidebar-nextjs > .menu__list-item-collapsible > .menu__link:hover,
174+
.custom-sidebar-gsa > .menu__list-item-collapsible > .menu__link:hover,
175+
.custom-sidebar-technical > .menu__list-item-collapsible > .menu__link:hover {
176176
transform: translateX(4px);
177177
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
178178
transition: all 0.3s ease;
@@ -251,7 +251,7 @@ html[data-theme="dark"] .menu__link--active::after {
251251
}
252252

253253
/* ======== SECTION 7 : Adjust individual navbar items ==========*/
254-
.navbar__items>.navbar__item {
254+
.navbar__items > .navbar__item {
255255
padding: 0.2rem 0.3rem !important;
256256
margin: 0 !important;
257257
}
@@ -282,7 +282,6 @@ html[data-theme="dark"] .menu__link--active::after {
282282

283283
/* Ensure dropdowns are visible on big screens */
284284
@media (min-width: 1300px) {
285-
286285
.navbar__item.dropdown,
287286
.navbar__item:has(.dropdown-content) {
288287
position: relative !important;
@@ -457,7 +456,6 @@ body {
457456

458457
/* ===== SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */
459458
@media (min-width: 1300px) {
460-
461459
/* Better spacing for desktop navbar */
462460
.navbar__inner {
463461
max-width: 1400px;
@@ -482,7 +480,10 @@ body {
482480
* Hide all navbar items on small screens except the toggle, brand,
483481
* and the Clerk auth control.
484482
*/
485-
.navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( :has(#firebase-auth-github-navbar)) {
483+
.navbar__items
484+
.navbar__item:not(.navbar__toggle):not(.navbar__brand):not(
485+
:has(#firebase-auth-github-navbar)
486+
) {
486487
display: none !important;
487488
}
488489

@@ -687,8 +688,8 @@ body {
687688
}
688689

689690
/* Prevent grid content from forcing overflow in the dropdown rows */
690-
.dropdown__menu .grid>.col-span-2,
691-
.dropdown-content .grid>.col-span-2 {
691+
.dropdown__menu .grid > .col-span-2,
692+
.dropdown-content .grid > .col-span-2 {
692693
min-width: 0 !important;
693694
/* allow the icon column to shrink inside the 3-col grid */
694695
}
@@ -711,8 +712,8 @@ body {
711712
}
712713

713714
/* Add breathing room between the left label and the vertical separator */
714-
.dropdown__menu .grid>.border-r.col-span-1,
715-
.dropdown-content .grid>.border-r.col-span-1 {
715+
.dropdown__menu .grid > .border-r.col-span-1,
716+
.dropdown-content .grid > .border-r.col-span-1 {
716717
padding-right: 0.5rem !important;
717718
}
718719

@@ -873,9 +874,11 @@ html.theme-light .text-gray-900 {
873874

874875
/* Ensure the specific block is forced light in light mode */
875876
html[data-theme="light"] .interview-prep-page .technical-outer {
876-
background-image: linear-gradient(135deg,
877-
#eff6ff 0%,
878-
#f8fafc 100%) !important;
877+
background-image: linear-gradient(
878+
135deg,
879+
#eff6ff 0%,
880+
#f8fafc 100%
881+
) !important;
879882
background-color: #ffffff !important;
880883
-webkit-backdrop-filter: none !important;
881884
backdrop-filter: none !important;
@@ -886,9 +889,11 @@ html[data-theme="light"] .interview-prep-page .technical-outer {
886889

887890
/* Companies tab: use white gradients in light mode and remove overlays */
888891
[data-theme="light"] .company-outer {
889-
background-image: linear-gradient(135deg,
890-
#ffffff 0%,
891-
#f8fafc 100%) !important;
892+
background-image: linear-gradient(
893+
135deg,
894+
#ffffff 0%,
895+
#f8fafc 100%
896+
) !important;
892897
background-color: #ffffff !important;
893898
color: #0f172a !important;
894899
isolation: isolate !important;
@@ -898,7 +903,7 @@ html[data-theme="light"] .interview-prep-page .technical-outer {
898903
}
899904

900905
/* hide the subtle pattern overlay added inside the component */
901-
[data-theme="light"] .company-outer>.absolute.inset-0,
906+
[data-theme="light"] .company-outer > .absolute.inset-0,
902907
[data-theme="light"] .company-outer .absolute.inset-0.opacity-5 {
903908
display: none !important;
904909
background: none !important;
@@ -982,12 +987,14 @@ html {
982987
/* ===== FOOTER BACKGROUND PROTECTION ===== */
983988
/* Ensure footer maintains its gradient background in dark mode */
984989
[data-theme="dark"] .enhanced-footer {
985-
background: linear-gradient(135deg,
986-
#0f0f23 0%,
987-
#1a1a2e 25%,
988-
#16213e 50%,
989-
#0f3460 75%,
990-
#533483 100%) !important;
990+
background: linear-gradient(
991+
135deg,
992+
#0f0f23 0%,
993+
#1a1a2e 25%,
994+
#16213e 50%,
995+
#0f3460 75%,
996+
#533483 100%
997+
) !important;
991998
color: #e2e8f0 !important;
992999
}
9931000

@@ -1003,17 +1010,22 @@ html {
10031010

10041011
/* ===== STEP 6: MAXIMUM SPECIFICITY PROTECTION ===== */
10051012
/* Override the exact problematic global rule with same specificity */
1006-
[data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer .container {
1013+
[data-theme="dark"]
1014+
body:not(:has(.community-page))
1015+
.enhanced-footer
1016+
.container {
10071017
background-color: transparent !important;
10081018
}
10091019

10101020
[data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer {
1011-
background: linear-gradient(135deg,
1012-
#0f0f23 0%,
1013-
#1a1a2e 25%,
1014-
#16213e 50%,
1015-
#0f3460 75%,
1016-
#533483 100%) !important;
1021+
background: linear-gradient(
1022+
135deg,
1023+
#0f0f23 0%,
1024+
#1a1a2e 25%,
1025+
#16213e 50%,
1026+
#0f3460 75%,
1027+
#533483 100%
1028+
) !important;
10171029
color: #e2e8f0 !important;
10181030
}
10191031

@@ -1035,14 +1047,15 @@ html {
10351047

10361048
/* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR AS THERE IS ONE ON THE NAVBAR ===== */
10371049
@media (max-width: 1200px) {
1038-
10391050
/* Aggressively hide theme toggle in mobile sidebar */
1040-
.navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]),
1051+
.navbar-sidebar__brand
1052+
button:not(.navbar-sidebar__close):not([class*="close"]),
10411053
.navbar-sidebar__brand .colorModeToggle,
10421054
.navbar-sidebar .colorModeToggle,
10431055
.navbar-sidebar__brand button[class*="colorModeToggle"],
10441056
.navbar-sidebar button[class*="colorModeToggle"],
1045-
.navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
1057+
.navbar-sidebar__brand
1058+
.clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
10461059
.navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
10471060
.navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close),
10481061
.navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close),
@@ -1114,7 +1127,6 @@ html {
11141127

11151128
/* Mobile-only visibility & spacing fixes for Tutorials icons (320–768px) */
11161129
@media screen and (max-width: 768px) {
1117-
11181130
/* Ensure the label + icons row inside Docs dropdown uses the full width */
11191131
.navbar-sidebar .grid,
11201132
.navbar-sidebar .dropdown__menu .grid,
@@ -1127,12 +1139,12 @@ html {
11271139
}
11281140

11291141
/* So the icon column doesn't get clipped in the 3-col layout */
1130-
.navbar-sidebar .grid>.col-span-2 {
1142+
.navbar-sidebar .grid > .col-span-2 {
11311143
min-width: 0 !important;
11321144
}
11331145

11341146
/* Tighten label space and drop the border on very small screens */
1135-
.navbar-sidebar .grid>.border-r.col-span-1 {
1147+
.navbar-sidebar .grid > .border-r.col-span-1 {
11361148
border-right: 0 !important;
11371149
padding-right: 0.25rem !important;
11381150
font-weight: 600;
@@ -1177,7 +1189,7 @@ html {
11771189
}
11781190

11791191
/* Add vertical space between Tutorials, Courses, Interview Prep blocks */
1180-
.navbar-sidebar .dropdown__menu>.grid {
1192+
.navbar-sidebar .dropdown__menu > .grid {
11811193
padding: 1rem 0 !important;
11821194
margin: 1rem 0 !important;
11831195
}
@@ -1511,7 +1523,7 @@ html {
15111523
flex-shrink: 0;
15121524
}
15131525

1514-
.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut>* {
1526+
.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut > * {
15151527
min-width: 0 !important;
15161528
height: auto !important;
15171529
padding: 0 !important;
@@ -1652,8 +1664,8 @@ html {
16521664
padding-right: var(--ifm-navbar-padding-horizontal) !important;
16531665
}
16541666

1655-
.navbar>.container,
1656-
.navbar>.container-fluid {
1667+
.navbar > .container,
1668+
.navbar > .container-fluid {
16571669
max-width: none !important;
16581670
width: 100% !important;
16591671
padding: 0 !important;
@@ -1699,12 +1711,16 @@ main {
16991711
right: 0;
17001712
bottom: 0;
17011713
background:
1702-
radial-gradient(circle at 20% 30%,
1714+
radial-gradient(
1715+
circle at 20% 30%,
17031716
rgba(99, 102, 241, 0.08) 0%,
1704-
transparent 40%),
1705-
radial-gradient(circle at 80% 70%,
1717+
transparent 40%
1718+
),
1719+
radial-gradient(
1720+
circle at 80% 70%,
17061721
rgba(168, 85, 247, 0.06) 0%,
1707-
transparent 45%);
1722+
transparent 45%
1723+
);
17081724
pointer-events: none;
17091725
}
17101726

@@ -1756,7 +1772,7 @@ a {
17561772

17571773
/* ================= MISCELLANEOUS ================= */
17581774
/* Fix Home icon alignment with text in breadcrumbs [Docs] */
1759-
.theme-doc-breadcrumbs a.breadcrumbs__link>svg {
1775+
.theme-doc-breadcrumbs a.breadcrumbs__link > svg {
17601776
display: inline-block;
17611777
}
17621778

@@ -1871,9 +1887,11 @@ html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 {
18711887

18721888
/* Companies: force white/near-white surface in light mode for .company-outer */
18731889
html[data-theme="light"] .company-outer {
1874-
background-image: linear-gradient(135deg,
1875-
#ffffff 0%,
1876-
#f8fafc 100%) !important;
1890+
background-image: linear-gradient(
1891+
135deg,
1892+
#ffffff 0%,
1893+
#f8fafc 100%
1894+
) !important;
18771895
background-color: #ffffff !important;
18781896
-webkit-backdrop-filter: none !important;
18791897
backdrop-filter: none !important;
@@ -1917,9 +1935,11 @@ html[data-theme="light"] a.company-tab-link {
19171935
/* If any Tailwind gradient utility still applies, remove it for these containers in light mode */
19181936
html[data-theme="light"] .company-outer.bg-gradient-to-br,
19191937
html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
1920-
background-image: linear-gradient(135deg,
1921-
#ffffff 0%,
1922-
#f8fafc 100%) !important;
1938+
background-image: linear-gradient(
1939+
135deg,
1940+
#ffffff 0%,
1941+
#f8fafc 100%
1942+
) !important;
19231943
background-color: #ffffff !important;
19241944
-webkit-backdrop-filter: none !important;
19251945
backdrop-filter: none !important;
@@ -1954,7 +1974,7 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
19541974
/* Issue #980: Fix inconsistent padding and margins across sections */
19551975

19561976
/* Standard section spacing: 2rem vertical, 1.5rem horizontal on smaller screens */
1957-
main>div:not(.m-0) {
1977+
main > div:not(.m-0) {
19581978
margin-top: 2rem;
19591979
margin-bottom: 2rem;
19601980
}
@@ -1966,7 +1986,7 @@ main>div:not(.m-0) {
19661986

19671987
/* Responsive: reduce spacing on mobile devices */
19681988
@media (max-width: 768px) {
1969-
main>div:not(.m-0) {
1989+
main > div:not(.m-0) {
19701990
margin-top: 1.5rem;
19711991
margin-bottom: 1.5rem;
19721992
}
@@ -2046,10 +2066,28 @@ html[data-theme="dark"] {
20462066
.table-of-contents__link:hover,
20472067
.table-of-contents__link--active,
20482068
.table-of-contents__link--active:hover {
2049-
color: #B1E2C5;
2069+
color: #b1e2c5;
20502070
}
20512071

20522072
[data-theme="dark"] .table-of-contents__link:hover,
20532073
[data-theme="dark"] .table-of-contents__link--active {
2054-
color: #B1E2C5;
2055-
}
2074+
color: #b1e2c5;
2075+
}
2076+
2077+
/* ===== SECTION 16: BLOG AUTHOR NAME COLOR ===== */
2078+
/* Issue #1593: Change blog author name color to match theme */
2079+
.avatar__intro .avatar__name a,
2080+
.authorDetails_1V9A .avatar__name a {
2081+
color: #b1e2c5;
2082+
}
2083+
2084+
.avatar__intro .avatar__name a:hover,
2085+
.authorDetails_1V9A .avatar__name a:hover {
2086+
color: #b1e2c5;
2087+
opacity: 0.85;
2088+
}
2089+
2090+
[data-theme="dark"] .avatar__intro .avatar__name a,
2091+
[data-theme="dark"] .authorDetails_1V9A .avatar__name a {
2092+
color: #b1e2c5;
2093+
}

0 commit comments

Comments
 (0)