Skip to content

Commit 0097b38

Browse files
rifaidevlex111
authored andcommitted
Fix anchor link offset with fixed header (#1914)
* Fix anchor link offset with fixed header * handle h3 too * h4 as an anchor * don't affect UI by any means * no need for px * more fixes * consistency * more consistency * pixel perfection * fix h4 after gatsby-highlight * final touch
1 parent 066479b commit 0097b38

File tree

1 file changed

+43
-9
lines changed

1 file changed

+43
-9
lines changed

src/theme.js

+43-9
Original file line numberDiff line numberDiff line change
@@ -285,15 +285,24 @@ const sharedStyles = {
285285
},
286286

287287
'& h2': {
288-
borderTop: `1px solid ${colors.divider}`,
289-
marginTop: 44,
290-
paddingTop: 40,
288+
'::before': {
289+
content: ' ',
290+
display: 'block',
291+
borderBottom: `1px solid ${colors.divider}`,
292+
paddingTop: 44,
293+
marginBottom: 40,
294+
},
295+
291296
lineHeight: 1.2,
292297

293298
':first-child': {
294-
borderTop: 0,
295-
marginTop: 0,
296-
paddingTop: 0,
299+
'::before': {
300+
content: ' ',
301+
display: 'block',
302+
borderBottom: 0,
303+
paddingTop: 40,
304+
marginTop: -80,
305+
},
297306
},
298307

299308
[media.lessThan('large')]: {
@@ -310,7 +319,12 @@ const sharedStyles = {
310319
},
311320

312321
'& h3': {
313-
paddingTop: 45,
322+
'::before': {
323+
content: ' ',
324+
display: 'block',
325+
paddingTop: 90,
326+
marginTop: -45,
327+
},
314328

315329
[media.lessThan('small')]: {
316330
overflowWrap: 'break-word',
@@ -324,14 +338,25 @@ const sharedStyles = {
324338
},
325339

326340
'& h2 + h3, & h2 + h3:first-of-type': {
327-
paddingTop: 30,
341+
'::before': {
342+
content: ' ',
343+
display: 'block',
344+
paddingTop: 60,
345+
marginTop: -30,
346+
},
328347
},
329348

330349
'& h4': {
350+
'::before': {
351+
content: ' ',
352+
display: 'block',
353+
paddingTop: 100,
354+
marginTop: -50,
355+
},
356+
331357
fontSize: 20,
332358
color: colors.subtle,
333359
lineHeight: 1.3,
334-
marginTop: 50,
335360
fontWeight: 400,
336361
},
337362

@@ -414,6 +439,15 @@ const sharedStyles = {
414439
'& .gatsby-highlight + blockquote': {
415440
marginTop: 40,
416441
},
442+
443+
'& .gatsby-highlight + h4': {
444+
'::before': {
445+
content: ' ',
446+
display: 'block',
447+
paddingTop: 85,
448+
marginTop: -60,
449+
},
450+
},
417451
},
418452
};
419453

0 commit comments

Comments
 (0)