Skip to content

Commit 23b3501

Browse files
BlargianBlargian
committed
styling improvements for light mode
1 parent 3d8db29 commit 23b3501

File tree

5 files changed

+74
-52
lines changed

5 files changed

+74
-52
lines changed

‎src/css/default.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
--icon: none;
115115
}
116116

117+
117118
/* Add dark theme */
118119
[data-theme='dark'] {
119120
--ifm-menu-color: #FFFFF;

‎src/hooks/useAnchorFix.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export function useAnchorFix() {
1212
if (hash) {
1313
// Wait for content to load, then scroll
1414
setTimeout(() => {
15-
const element = document.querySelector(hash);
15+
// CSS selectors that start with a digit are invalid, so we need to escape them
16+
const escapedHash = hash.replace(/^#(\d)/, '#\\3$1 ');
17+
const element = document.querySelector(escapedHash);
1618
if (element) {
1719
element.scrollIntoView({ behavior: 'smooth' });
1820
}

‎src/pages/index.js‎

Lines changed: 63 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -257,12 +257,12 @@ const HeroSection = () => {
257257
backgroundColor: '#faff69',
258258
color: '#000000',
259259
whiteSpace: 'nowrap',
260-
boxShadow: 'none',
260+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
261261
fontWeight: 600,
262262
flexShrink: 0,
263263
'&:hover': {
264264
backgroundColor: '#f5f464',
265-
boxShadow: 'none',
265+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
266266
},
267267
}}
268268
>
@@ -342,9 +342,9 @@ const ExploreDocs = () => {
342342
</div>
343343
<div style={{ marginTop: 'auto', paddingTop: '12px' }}>
344344
<Link to="/getting-started/quick-start/cloud" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>Quick start</Link>
345+
<Link to="/cloud/get-started" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>ClickHouse Cloud</Link>
345346
<Link to="/install" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>Installation</Link>
346347
<Link to="/deployment-modes" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>Deployment modes</Link>
347-
<Link to="/cloud/get-started" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>ClickHouse Cloud</Link>
348348
<Link to="/getting-started/example-datasets" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>Example datasets</Link>
349349
</div>
350350
</CardContent>
@@ -579,19 +579,25 @@ const ExploreDocs = () => {
579579
</Box>
580580

581581
{/* Featured Card 1 - Row 4, Column 1 */}
582-
<Card sx={{
583-
gridRow: 4,
584-
gridColumn: 1,
585-
height: '300px',
586-
backgroundColor: 'background.paper',
587-
color: 'text.primary',
588-
boxShadow: 3,
589-
'&:hover': {
590-
boxShadow: 6,
591-
},
592-
display: 'flex',
593-
flexDirection: 'column'
594-
}}>
582+
<Card
583+
component={Link}
584+
to="/integrations/clickpipes/mongodb"
585+
sx={{
586+
gridRow: 4,
587+
gridColumn: 1,
588+
height: '300px',
589+
backgroundColor: 'background.paper',
590+
color: 'text.primary',
591+
boxShadow: 3,
592+
textDecoration: 'none',
593+
'&:hover': {
594+
boxShadow: 6,
595+
textDecoration: 'none',
596+
color: 'inherit',
597+
},
598+
display: 'flex',
599+
flexDirection: 'column'
600+
}}>
595601
<CardActionArea sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
596602
<CardMedia
597603
component="img"
@@ -630,7 +636,7 @@ const ExploreDocs = () => {
630636
<Link
631637
to="/integrations/clickpipes/mongodb"
632638
style={{
633-
color: '#faff69',
639+
color: 'var(--click-color-link)',
634640
textDecoration: 'none',
635641
fontSize: '14px',
636642
fontWeight: 600,
@@ -646,19 +652,25 @@ const ExploreDocs = () => {
646652
</Card>
647653

648654
{/* Featured Card 2 - Row 4, Column 2 */}
649-
<Card sx={{
650-
gridRow: 4,
651-
gridColumn: 2,
652-
height: '300px',
653-
backgroundColor: 'background.paper',
654-
color: 'text.primary',
655-
boxShadow: 3,
656-
'&:hover': {
657-
boxShadow: 6,
658-
},
659-
display: 'flex',
660-
flexDirection: 'column'
661-
}}>
655+
<Card
656+
component={Link}
657+
to="/use-cases/AI/MCP/remote_mcp"
658+
sx={{
659+
gridRow: 4,
660+
gridColumn: 2,
661+
height: '300px',
662+
backgroundColor: 'background.paper',
663+
color: 'text.primary',
664+
boxShadow: 3,
665+
textDecoration: 'none',
666+
'&:hover': {
667+
boxShadow: 6,
668+
textDecoration: 'none',
669+
color: 'inherit',
670+
},
671+
display: 'flex',
672+
flexDirection: 'column'
673+
}}>
662674
<CardActionArea sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
663675
<CardMedia
664676
component="img"
@@ -697,7 +709,7 @@ const ExploreDocs = () => {
697709
<Link
698710
to="/use-cases/AI/MCP/remote_mcp"
699711
style={{
700-
color: '#faff69',
712+
color: 'var(--click-color-link)',
701713
textDecoration: 'none',
702714
fontSize: '14px',
703715
fontWeight: 600,
@@ -713,19 +725,25 @@ const ExploreDocs = () => {
713725
</Card>
714726

715727
{/* Featured Card 3 - Row 4, Column 3 */}
716-
<Card sx={{
717-
gridRow: 4,
718-
gridColumn: 3,
719-
height: '300px',
720-
backgroundColor: 'background.paper',
721-
color: 'text.primary',
722-
boxShadow: 3,
723-
'&:hover': {
724-
boxShadow: 6,
725-
},
726-
display: 'flex',
727-
flexDirection: 'column'
728-
}}>
728+
<Card
729+
component={Link}
730+
to="/best-practices/use-json-where-appropriate"
731+
sx={{
732+
gridRow: 4,
733+
gridColumn: 3,
734+
height: '300px',
735+
backgroundColor: 'background.paper',
736+
color: 'text.primary',
737+
boxShadow: 3,
738+
textDecoration: 'none',
739+
'&:hover': {
740+
boxShadow: 6,
741+
textDecoration: 'none',
742+
color: 'inherit',
743+
},
744+
display: 'flex',
745+
flexDirection: 'column'
746+
}}>
729747
<CardActionArea sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
730748
<CardMedia
731749
component="img"
@@ -764,7 +782,7 @@ const ExploreDocs = () => {
764782
<Link
765783
to="/best-practices/use-json-where-appropriate"
766784
style={{
767-
color: '#faff69',
785+
color: 'var(--click-color-link)',
768786
textDecoration: 'none',
769787
fontSize: '14px',
770788
fontWeight: 600,

‎src/theme/SearchBar/index.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,21 +69,22 @@ function ResultsFooter({ state, onClose }) {
6969
justifyContent: 'center',
7070
width: '100%',
7171
padding: '12px 16px',
72-
backgroundColor: '#5b4cfe',
72+
backgroundColor: 'var(--click-color-link)',
7373
color: 'white',
74-
border: 'none',
74+
border: '1px solid var(--palette_info_500)',
7575
borderRadius: '6px',
7676
fontSize: '14px',
7777
cursor: 'pointer',
7878
fontWeight: 600,
79-
transition: 'all 0.2s ease'
79+
transition: 'all 0.2s ease',
80+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
8081
}}
8182
onMouseEnter={(e) => {
82-
e.target.style.backgroundColor = '#4a3dcc';
83+
e.target.style.backgroundColor = 'var(--palette_info_500)';
8384
e.target.style.transform = 'translateY(-1px)';
8485
}}
8586
onMouseLeave={(e) => {
86-
e.target.style.backgroundColor = '#5b4cfe';
87+
e.target.style.backgroundColor = 'var(--click-color-link)';
8788
e.target.style.transform = 'translateY(0)';
8889
}}
8990
>

‎src/theme/SearchBar/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818

1919
[data-theme="light"] .DocSearch-Button {
20-
background-color: rgb(250, 250, 250);
20+
background-color: rgb(240, 240, 240);
2121
color: black;
2222
}
2323
.DocSearch-Button-Placeholder {

0 commit comments

Comments
 (0)