move favicons

Author: vojtaholik

src/components/Button.js

@@ -17,9 +17,11 @@ const Button = ({ to, children, secondary, ...restProps }) => {
     padding: '10px 15px',
     cursor: 'pointer',
     transition: 'all 150ms ease',
-    ':hover': {
-      color: theme.colors.white,
-      background: darken(0.1, theme.colors.primary),
+    '@media (hover: hover)': {
+      ':hover': {
+        color: theme.colors.white,
+        background: darken(0.1, theme.colors.primary),
+      },
     },
   })
   return to ? (

src/components/Header.js

@@ -42,8 +42,10 @@ const Header = ({ siteTitle }) => {
             css={css({
               display: 'flex',
               color: theme.colors.text,
-              ':hover': {
-                color: theme.colors.primary,
+              '@media (hover: hover)': {
+                ':hover': {
+                  color: theme.colors.primary,
+                },
               },
               [bpMinXL]: {
                 transform: 'translate(-70px, 0)',

src/components/Layout.js

@@ -62,9 +62,11 @@ const Layout = ({ site, frontmatter = {}, children, noFooter }) => {
             }
             a {
               color: ${theme.colors.primary};
-              &:hover,
-              &:focus {
-                color: ${theme.colors.primary};
+              @media (hover: hover) {
+                &:hover,
+                &:focus {
+                  color: ${theme.colors.primary};
+                }
               }
             }
             blockquote {

src/lib/typography.js

@@ -11,7 +11,7 @@ export const fonts = {
 }
 
 const typography = new Typography({
-  baseFontSize: '20px',
+  baseFontSize: '18px',
   baseLineHeight: 1.55,
   headerLineHeight: 1.4,
   headerFontFamily: [fonts.bold, 'sans-serif'],

src/pages/index.js

@@ -33,8 +33,10 @@ export default function Index({ data: { site, allMdx } }) {
               css={css({
                 marginBottom: rhythm(0.3),
                 transition: theme.transition.ease,
-                ':hover': {
-                  color: theme.brand.primary,
+                '@media (hover: hover)': {
+                  ':hover': {
+                    color: theme.brand.primary,
+                  },
                 },
               })}
             >