Skip to content

Commit 16d699e

Browse files
kimsaucekimsauce
committed
Correct home page font - Lab Grotesque
1 parent d9c0370 commit 16d699e

File tree

1 file changed

+37
-57
lines changed

1 file changed

+37
-57
lines changed

‎src/pages/index.tsx‎

Lines changed: 37 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,22 @@ export const Home = () => {
3939
<Typography
4040
bgcolor='#0045BE'
4141
color='#e3e3e3'
42-
fontFamily='Lab Grotesque'
4342
fontSize={28}
4443
fontWeight={700}
4544
pt={3}
4645
px={2}
4746
pb={1}
4847
sx={{
4948
backgroundImage: 'linear-gradient(to right, rgb(0,0,153), rgb(0,70,190) 30%)',
49+
fontFamily:
50+
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
5051
}}
5152
textAlign='center'
5253
>
5354
<Box
5455
component={SumoLogicDocsLogo}
55-
alt="Sumo Logic Docs logo"
56-
role="<img>"
57-
aria-hidden="true"
56+
role='img'
57+
aria-label='Sumo Logic Docs logo'
5858
height={{
5959
md: 36,
6060
xs: 28,
@@ -78,6 +78,8 @@ export const Home = () => {
7878
md: '100% 200%',
7979
xs: '100% 100%',
8080
},
81+
fontFamily:
82+
'var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif)',
8183
}}
8284
height={{
8385
md: 'auto',
@@ -111,19 +113,23 @@ export const Home = () => {
111113
>
112114
<Typography
113115
color='white'
114-
fontFamily='Lab Grotesque'
115116
fontSize={32}
116117
fontWeight={700}
117118
variant='h2'
119+
sx={{
120+
fontFamily:
121+
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
122+
}}
118123
>
119124
New to Sumo?
120125
</Typography>
121126
<Typography
122127
color='#e3e3e3'
123-
fontFamily='Lab Grotesque'
124128
pb={2}
125129
textAlign='left'
126-
variant='p'
130+
component='p'
131+
variant='body1'
132+
sx={{ fontFamily: 'inherit' }}
127133
>
128134
Get started quickly with our search, visualization, analytics, and security capabilities.
129135
</Typography>
@@ -151,12 +157,12 @@ export const Home = () => {
151157
border: '.5px solid',
152158
borderColor: '#e3e3e3',
153159
borderRadius: 2,
154-
fontFamily: 'Lab Grotesque',
155160
textTransform: 'none',
156161
width: {
157162
md: 'auto',
158163
xs: '100%',
159164
},
165+
fontFamily: 'inherit',
160166
'&:hover': {
161167
bgcolor: '#0045BE',
162168
borderColor: '#0045BE',
@@ -191,7 +197,6 @@ export const Home = () => {
191197

192198
{/* Main */}
193199
<Container maxWidth='xl'>
194-
195200
{/* Product Guides */}
196201
<Stack
197202
alignItems='center'
@@ -201,7 +206,6 @@ export const Home = () => {
201206
>
202207
<Typography
203208
component='h2'
204-
fontFamily='Lab Grotesque'
205209
fontWeight={900}
206210
mb={{
207211
md: 'inherit',
@@ -210,15 +214,19 @@ export const Home = () => {
210214
}}
211215
textAlign='center'
212216
variant='h4'
217+
sx={{
218+
fontFamily:
219+
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
220+
}}
213221
>
214222
Explore our product guides
215223
</Typography>
216224
<Typography
217225
component='p'
218-
fontFamily='Lab Grotesque'
219226
mb={4}
220227
textAlign='center'
221228
variant='subtitle1'
229+
sx={{ fontFamily: 'inherit' }}
222230
>
223231
Ensure app reliability and security with modern cloud-native monitoring and observability.
224232
</Typography>
@@ -229,24 +237,11 @@ export const Home = () => {
229237
onChange={(_, newTab) => setTab(newTab)}
230238
sx={{
231239
'& .MuiTabs-flexContainer': {
232-
flexWrap: {
233-
sm: 'wrap',
234-
xs: 'wrap',
235-
},
236-
justifyContent: {
237-
sm: 'center',
238-
xs: 'center',
239-
}
240-
},
241-
}}
242-
TabIndicatorProps={{
243-
sx: {
244-
display: {
245-
sm: 'none',
246-
xs: 'none',
247-
},
240+
flexWrap: { sm: 'wrap', xs: 'wrap' },
241+
justifyContent: { sm: 'center', xs: 'center' },
248242
},
249243
}}
244+
TabIndicatorProps={{ sx: { display: { sm: 'none', xs: 'none' } } }}
250245
value={tab}
251246
>
252247
{[
@@ -268,46 +263,31 @@ export const Home = () => {
268263
{
269264
label: 'Other Solutions',
270265
},
271-
].map(({ label, ...rest }, index) => (
266+
].map(({ label }, index) => (
272267
<Tab
273268
key={label}
269+
value={String(index)}
274270
label={label}
275271
sx={{
276272
color: 'grey.700',
277-
fontFamily: 'Lab Grotesque',
278273
fontWeight: 'bold',
274+
fontFamily:
275+
'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))',
279276
}}
280-
value={String(index)}
281-
{...rest}
282277
/>
283278
))}
284279
</Tabs>
285-
{features.map((feature, index) => tab === String(index) && (
286-
<Grid
287-
component={TabPanel}
288-
container
289-
direction='row'
290-
justifyContent='center'
291-
key={index}
292-
py={6}
293-
spacing={4}
294-
value={String(index)}
295-
>
296-
{feature.map((config) => (
297-
<Grid
298-
item
299-
key={config.link}
300-
lg={4}
301-
md={6}
302-
xs={12}
303-
>
304-
<Feature
305-
length={feature.length}
306-
{...config}
307-
/>
308-
</Grid>
309-
))}
310-
</Grid>
280+
281+
{features.map((feature, index) => (
282+
<TabPanel key={index} value={String(index)} sx={{ px: 0 }}>
283+
<Grid container direction="row" justifyContent="center" spacing={4} py={6}>
284+
{feature.map((config) => (
285+
<Grid item key={config.link} lg={4} md={6} xs={12}>
286+
<Feature length={feature.length} {...config} />
287+
</Grid>
288+
))}
289+
</Grid>
290+
</TabPanel>
311291
))}
312292
</TabContext>
313293
</Stack>

0 commit comments

Comments
 (0)