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

src/theme.js

@@ -285,15 +285,24 @@ const sharedStyles = {
     },
 
     '& h2': {
-      borderTop: `1px solid ${colors.divider}`,
-      marginTop: 44,
-      paddingTop: 40,
+      '::before': {
+        content: ' ',
+        display: 'block',
+        borderBottom: `1px solid ${colors.divider}`,
+        paddingTop: 44,
+        marginBottom: 40,
+      },
+
       lineHeight: 1.2,
 
       ':first-child': {
-        borderTop: 0,
-        marginTop: 0,
-        paddingTop: 0,
+        '::before': {
+          content: ' ',
+          display: 'block',
+          borderBottom: 0,
+          paddingTop: 40,
+          marginTop: -80,
+        },
       },
 
       [media.lessThan('large')]: {
@@ -310,7 +319,12 @@ const sharedStyles = {
     },
 
     '& h3': {
-      paddingTop: 45,
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 90,
+        marginTop: -45,
+      },
 
       [media.lessThan('small')]: {
         overflowWrap: 'break-word',
@@ -324,14 +338,25 @@ const sharedStyles = {
     },
 
     '& h2 + h3, & h2 + h3:first-of-type': {
-      paddingTop: 30,
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 60,
+        marginTop: -30,
+      },
     },
 
     '& h4': {
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 100,
+        marginTop: -50,
+      },
+
       fontSize: 20,
       color: colors.subtle,
       lineHeight: 1.3,
-      marginTop: 50,
       fontWeight: 400,
     },
 
@@ -414,6 +439,15 @@ const sharedStyles = {
     '& .gatsby-highlight + blockquote': {
       marginTop: 40,
     },
+
+    '& .gatsby-highlight + h4': {
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 85,
+        marginTop: -60,
+      },
+    },
   },
 };