feat: set lighter colors on anchors

closses: #16

src/layouts/Article.jsx

@@ -1,7 +1,5 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
-import { globalHistory } from '@reach/router'
-import { scroller } from 'react-scroll'
 
 const Article = ({ children, mdx, slug }) => {
   const props = {
@@ -12,19 +10,6 @@ const Article = ({ children, mdx, slug }) => {
     itemRef: 'hero',
   }
 
-  useEffect(() => {
-    const hash = globalHistory.location.hash
-    if (hash) {
-      setTimeout(() => {
-        scroller.scrollTo(hash.substr(1), {
-          offset: -50,
-          duration: 200,
-          smooth: true,
-        })
-      }, 300)
-    }
-  })
-
   // console.log(props.toc)
   // const toc = props.toc && (
   //   <div

src/layouts/index.jsx

@@ -1,29 +1,44 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { Helmet } from 'react-helmet-async'
 import { MDXProvider } from '@mdx-js/react'
+import { globalHistory } from '@reach/router'
+import { scroller } from 'react-scroll'
 
 import { ThemeContext } from '../provider/theme'
 import Header from './Header'
 import Footer from './Footer'
 import ScrollToTop from '../components/ScrollToTop'
 import mdxElements from '../components/MDXElements'
 
-const Index = ({ children }) => {
-  const { theme } = useContext(ThemeContext)
+export default class Index extends React.Component {
+  static contextType = ThemeContext
 
-  return (
-    <>
-      <Helmet htmlAttributes={{ theme }} />
-      <Header></Header>
-      <MDXProvider components={mdxElements}>
-        <main role="main" id="main">
-          {children}
-        </main>
-      </MDXProvider>
-      <Footer></Footer>
-      <ScrollToTop />
-    </>
-  )
-}
+  componentDidMount() {
+    const hash = globalHistory.location.hash
+    if (hash) {
+      setTimeout(() => {
+        scroller.scrollTo(hash.substr(1), {
+          offset: -30,
+          duration: 200,
+          smooth: true,
+        })
+      }, 300)
+    }
+  }
 
-export default Index
+  render() {
+    return (
+      <>
+        <Helmet htmlAttributes={{ theme: this.context.theme }} />
+        <Header></Header>
+        <MDXProvider components={mdxElements}>
+          <main role="main" id="main">
+            {this.props.children}
+          </main>
+        </MDXProvider>
+        <Footer></Footer>
+        <ScrollToTop />
+      </>
+    )
+  }
+}

src/styles/components/_anchor.scss

@@ -21,7 +21,11 @@ $size: 15px;
   svg {
     width: $size;
     height: $size;
-    fill: var(--text-color-light);
+    fill: var(--text-color-dark);
+
+    @include breakpoint-up(md) {
+      fill: var(--text-color-light);
+    }
   }
 }