gatsby v3 updates

.stylelintrc

@@ -5,7 +5,7 @@
     "stylelint-prettier/recommended"
   ],
   "plugins": ["stylelint-prettier"],
-  "syntax": "scss",
+  "syntax": "css",
   "rules": {
     "prettier/prettier": true,
     "property-no-unknown": [

package.json

@@ -41,39 +41,39 @@
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.28.0",
     "fraction.js": "^4.0.13",
-    "gatsby": "^2.32.8",
-    "gatsby-image": "^2.11.0",
-    "gatsby-plugin-catch-links": "^2.10.0",
-    "gatsby-plugin-feed": "^2.13.1",
+    "gatsby": "^3.0.3",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-catch-links": "^3.0.0",
+    "gatsby-plugin-feed": "^3.0.0",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^2.12.0",
+    "gatsby-plugin-manifest": "^3.0.0",
     "gatsby-plugin-matomo": "^0.9.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-offline": "^3.10.2",
-    "gatsby-plugin-react-helmet": "^3.10.0",
-    "gatsby-plugin-sharp": "^2.14.3",
-    "gatsby-plugin-sitemap": "^2.12.0",
-    "gatsby-plugin-svgr": "^2.1.0",
-    "gatsby-plugin-use-dark-mode": "^1.2.0",
+    "gatsby-plugin-offline": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-plugin-sitemap": "^3.0.0",
+    "gatsby-plugin-svgr": "^3.0.0-beta.0",
+    "gatsby-plugin-use-dark-mode": "^1.3.0",
     "gatsby-plugin-webpack-size": "^1.0.0",
     "gatsby-redirect-from": "^0.3.0",
-    "gatsby-remark-autolink-headers": "^2.11.0",
+    "gatsby-remark-autolink-headers": "^3.0.0",
     "gatsby-remark-breaks": "^1.0.0",
-    "gatsby-remark-copy-linked-files": "^2.10.0",
-    "gatsby-remark-images": "^3.11.1",
+    "gatsby-remark-copy-linked-files": "^3.0.0",
+    "gatsby-remark-images": "^4.0.0",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-smartypants": "^2.10.0",
+    "gatsby-remark-smartypants": "^3.0.0",
     "gatsby-remark-vscode": "^3.2.0",
-    "gatsby-source-filesystem": "^2.11.1",
-    "gatsby-source-graphql": "^2.14.0",
-    "gatsby-transformer-remark": "^2.16.1",
-    "gatsby-transformer-sharp": "^2.12.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-source-graphql": "^3.0.0",
+    "gatsby-transformer-remark": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
     "node-fetch": "^2.6.1",
     "pigeon-maps": "^0.17.1",
     "pigeon-marker": "^0.3.4",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-clipboard.js": "^2.0.16",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
     "react-feather": "^2.0.9",
     "react-helmet": "^6.1.0",
     "react-qr-svg": "^2.3.0",
@@ -117,6 +117,7 @@
     "node-iptc": "^1.0.5",
     "npm-run-all": "^4.1.5",
     "ora": "^5.3.0",
+    "postcss": "^8.2.7",
     "prettier": "^2.2.1",
     "shortid": "^2.2.16",
     "stylelint": "^13.11.0",

src/@types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string }
+  export default classes
+}

src/@types/global.d.ts

@@ -1,13 +1,3 @@
-declare module '*.module.css' {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-declare module '*.module.scss' {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
 declare module '*.svg' {
   import * as React from 'react'
   export const ReactComponent: React.FunctionComponent<

src/components/Layout.module.css

@@ -35,6 +35,7 @@
 @media (min-width: 40rem) and (min-height: 500px) {
   .document {
     margin-top: calc(var(--spacer) * 2.5);
+
     /* height of footer */
     margin-bottom: calc(var(--spacer) * 12);
     position: relative;

src/components/Layout.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import Typekit from './atoms/Typekit'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
-import styles from './Layout.module.css'
+import * as styles from './Layout.module.css'
 
 // if (process.env.NODE_ENV !== 'production') {
 //   // eslint-disable-next-line

src/components/atoms/Changelog.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import remark from 'remark'
 import remarkReact from 'remark-react'
-import styles from './Changelog.module.css'
+import * as styles from './Changelog.module.css'
 import { GitHub, GitHubRepo } from '../../@types/GitHub'
 
 export function PureChangelog({

src/components/atoms/Copy.module.css

@@ -17,10 +17,6 @@
   transition: 0.15s ease-out;
 }
 
-.button:hover svg {
-  stroke: var(--text-color-dimmed);
-}
-
 .copied {
   background: green;
 }
@@ -28,3 +24,7 @@
 .copied svg {
   stroke: var(--text-color-dimmed);
 }
+
+.button:hover svg {
+  stroke: var(--text-color-dimmed);
+}

src/components/atoms/Copy.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import loadable from '@loadable/component'
-import styles from './Copy.module.css'
+import * as styles from './Copy.module.css'
 import Icon from './Icon'
 
 const Clipboard = loadable(() => import('react-clipboard.js'))

src/components/atoms/Divider.module.css

@@ -16,6 +16,3 @@
 :global(.dark) .divider::before {
   border-bottom-color: var(--brand-grey);
 }
-
-.dividerTop {
-}

src/components/atoms/Exif.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import ExifMap from './ExifMap'
-import styles from './Exif.module.css'
+import * as styles from './Exif.module.css'
 import { Exif as ExifMeta } from '../../@types/Image'
 import Icon from './Icon'
 

src/components/atoms/Hamburger.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './Hamburger.module.css'
+import * as styles from './Hamburger.module.css'
 
 export default function Hamburger({
   onClick

src/components/atoms/Icon.tsx

@@ -27,7 +27,7 @@ import {
 import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 import { ReactComponent as Stopwatch } from '../../images/stopwatch.svg'
-import styles from './Icon.module.css'
+import * as styles from './Icon.module.css'
 
 const components: any = {
   Download: ArrowDownCircle,

src/components/atoms/Image.module.css

@@ -23,9 +23,16 @@
   border-bottom: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
   border-radius: var(--border-radius);
   overflow: hidden;
+  transition: 0.2s ease-out;
   box-shadow: var(--box-shadow);
 }
 
+@media (min-width: 40rem) {
+  .frame {
+    border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
+  }
+}
+
 .image {
   composes: frame;
   max-width: none;
@@ -33,13 +40,6 @@
   margin-bottom: calc(var(--spacer) * var(--line-height));
   display: block;
   position: relative;
-  transition: 0.2s ease-out;
-}
-
-@media (min-width: 40rem) {
-  .image {
-    border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
-  }
 }
 
 /* single photo post teasers */
@@ -48,13 +48,13 @@
   margin-bottom: 0;
 }
 
-a:hover .image,
-a:focus .image {
+a:hover .frame,
+a:focus .frame {
   border-color: var(--link-color);
 }
 
-a:hover .image .imageTitle,
-a:focus .image .imageTitle {
+a:hover .imageTitle,
+a:focus .imageTitle {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }

src/components/atoms/Image.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import { ImageProps } from '../../@types/Image'
-import styles from './Image.module.css'
+import * as styles from './Image.module.css'
 
 export const Image = ({
   title,

src/components/atoms/Input.module.css

@@ -15,6 +15,13 @@
   appearance: none;
 }
 
+.input::-moz-placeholder,
+.input::-webkit-input-placeholder,
+.input:-ms-input-placeholder {
+  color: var(--input-color-placeholder);
+  opacity: 1;
+}
+
 .input:focus {
   border-color: var(--input-border-focus);
   outline: 0;
@@ -23,10 +30,3 @@
 .input[disabled] {
   color: var(--text-color-dimmed);
 }
-
-.input::-moz-placeholder,
-.input::-webkit-input-placeholder,
-.input:-ms-input-placeholder {
-  color: var(--input-color-placeholder);
-  opacity: 1;
-}

src/components/atoms/Input.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './Input.module.css'
+import * as styles from './Input.module.css'
 
 export default function Input({ className, ...props }: any): ReactElement {
   return <input className={`${styles.input} ${className || ''}`} {...props} />

src/components/atoms/Qr.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { QRCode } from 'react-qr-svg'
-import styles from './Qr.module.css'
+import * as styles from './Qr.module.css'
 import Copy from './Copy'
 
 export default function Qr({

src/components/atoms/Tag.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
-import styles from './Tag.module.css'
+import * as styles from './Tag.module.css'
 
 export default function Tag({
   name,

src/components/molecules/Menu.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { Link } from 'gatsby'
 import Hamburger from '../atoms/Hamburger'
-import styles from './Menu.module.css'
+import * as styles from './Menu.module.css'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 import { MenuItem } from '../../@types/Site'
 

src/components/molecules/Networks.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import Icon from '../atoms/Icon'
-import styles from './Networks.module.css'
+import * as styles from './Networks.module.css'
 
 function NetworkIcon({ link }: { link: string }) {
   let IconComp

src/components/molecules/Pagination.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
-import styles from './Pagination.module.css'
+import * as styles from './Pagination.module.css'
 import shortid from 'shortid'
 import { PageContext } from '../../@types/Post'
 import Icon from '../atoms/Icon'

src/components/molecules/PostDate.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import Time from '../atoms/Time'
-import styles from './PostDate.module.css'
+import * as styles from './PostDate.module.css'
 
 export default function PostDate({
   date,

src/components/molecules/PostTeaser.module.css

@@ -7,25 +7,29 @@
   transition: color 0.2s ease-out;
 }
 
+.title + div {
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
+}
+
 .post {
   display: block;
 }
 
+.post:hover {
+  text-decoration: none;
+}
+
+.post:hover .title {
+  color: var(--link-color);
+}
+
 .post figure {
   margin: 0;
 }
 
-.time {
-  font-style: italic;
-  font-size: var(--font-size-small);
-  color: var(--text-color-light);
-  padding-left: 0.2rem;
-  padding-right: 0.2rem;
-}
-
 .empty {
   composes: frame from '../atoms/Image.module.css';
-
   display: block;
   min-height: 95px;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACaADAAQAAAABAAAACQAAAAAvQpmhAAAAHElEQVQYGWNgoBL4T8gcggoIGcBA0ASCCmhsBQBhFwX7u70C8QAAAABJRU5ErkJggg==);

src/components/molecules/PostTeaser.tsx

@@ -3,7 +3,7 @@ import { Link, graphql } from 'gatsby'
 import { Image } from '../atoms/Image'
 import { Post } from '../../@types/Post'
 import PostTitle from '../templates/Post/Title'
-import styles from './PostTeaser.module.css'
+import * as styles from './PostTeaser.module.css'
 
 export const postTeaserQuery = graphql`
   fragment PostTeaser on MarkdownRemark {

src/components/molecules/RelatedPosts.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import PostTeaser from './PostTeaser'
-import styles from './RelatedPosts.module.css'
+import * as styles from './RelatedPosts.module.css'
 import { Post, Frontmatter } from '../../@types/Post'
 import { PhotoThumb } from '../templates/Photos'
 

src/components/molecules/Search/SearchButton.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './SearchButton.module.css'
+import * as styles from './SearchButton.module.css'
 import Icon from '../../atoms/Icon'
 
 const SearchButton = (props: any): ReactElement => (

src/components/molecules/Search/SearchInput.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import Input from '../../atoms/Input'
 import Icon from '../../atoms/Icon'
-import styles from './SearchInput.module.css'
+import * as styles from './SearchInput.module.css'
 
 export default function SearchInput({
   value,

src/components/molecules/Search/SearchResults.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import { graphql, useStaticQuery } from 'gatsby'
 import PostTeaser from '../PostTeaser'
 import SearchResultsEmpty from './SearchResultsEmpty'
-import styles from './SearchResults.module.css'
+import * as styles from './SearchResults.module.css'
 import { Post } from '../../../@types/Post'
 
 export interface Results {

src/components/molecules/Search/SearchResultsEmpty.module.css

@@ -18,6 +18,7 @@
   display: inline-block;
   vertical-align: bottom;
   animation: ellipsis steps(4, end) 1s infinite;
+
   /* ascii code for the ellipsis character */
   content: '\2026';
   width: 0;

src/components/molecules/Search/SearchResultsEmpty.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './SearchResultsEmpty.module.css'
+import * as styles from './SearchResultsEmpty.module.css'
 import { Results } from './SearchResults'
 
 const SearchResultsEmpty = ({

src/components/molecules/Search/index.tsx

@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group'
 import SearchInput from './SearchInput'
 import SearchButton from './SearchButton'
 import SearchResults from './SearchResults'
-import styles from './index.module.css'
+import * as styles from './index.module.css'
 
 export default function Search(): ReactElement {
   const [searchOpen, setSearchOpen] = useState(false)

src/components/molecules/ThemeSwitch.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
 import useDarkMode from 'use-dark-mode'
-import styles from './ThemeSwitch.module.css'
+import * as styles from './ThemeSwitch.module.css'
 import Icon from '../atoms/Icon'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 

src/components/molecules/Vcard.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
 import IconLinks from './Networks'
-import styles from './Vcard.module.css'
+import * as styles from './Vcard.module.css'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
 const query = graphql`

src/components/molecules/Web3Donation/Account.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import { toDataUrl } from 'ethereum-blockies'
 import { formatEther } from '@ethersproject/units'
 import useWeb3 from '../../../hooks/use-web3'
-import styles from './Account.module.css'
+import * as styles from './Account.module.css'
 
 export default function Account(): ReactElement {
   const { library, account } = useWeb3()

src/components/molecules/Web3Donation/Alert.module.css

@@ -12,6 +12,7 @@
   display: inline-block;
   vertical-align: bottom;
   animation: ellipsis steps(4, end) 1s infinite;
+
   /* ascii code for the ellipsis character */
   content: '\2026';
   width: 0;

src/components/molecules/Web3Donation/Alert.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './Alert.module.css'
+import * as styles from './Alert.module.css'
 
 export function getTransactionMessage(
   transactionHash?: string

src/components/molecules/Web3Donation/Conversion.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import fetch from 'node-fetch'
-import styles from './Conversion.module.css'
+import * as styles from './Conversion.module.css'
 
 export async function getFiat(
   amount: number

src/components/molecules/Web3Donation/InputGroup.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from 'react'
 import Input from '../../atoms/Input'
 import Account from './Account'
 import Conversion from './Conversion'
-import styles from './InputGroup.module.css'
+import * as styles from './InputGroup.module.css'
 
 export default function InputGroup({
   sendTransaction

src/components/molecules/Web3Donation/index.module.css

@@ -19,6 +19,7 @@
   display: inline-block;
   vertical-align: bottom;
   animation: ellipsis steps(4, end) 1s infinite;
+
   /* ascii code for the ellipsis character */
   content: '\2026';
   width: 0;

src/components/molecules/Web3Donation/index.tsx

@@ -3,7 +3,7 @@ import { parseEther } from '@ethersproject/units'
 import useWeb3, { connectors, getErrorMessage } from '../../../hooks/use-web3'
 import InputGroup from './InputGroup'
 import Alert, { getTransactionMessage } from './Alert'
-import styles from './index.module.css'
+import * as styles from './index.module.css'
 
 export default function Web3Donation({
   address

src/components/organisms/Footer.module.css

@@ -17,6 +17,13 @@
   }
 }
 
+.btc code {
+  font-size: 0.6rem;
+  background: none;
+  color: var(--link-color);
+  padding: 0;
+}
+
 .copyright {
   padding-top: calvar(--spacer);
   padding-bottom: var(--spacer);
@@ -32,16 +39,16 @@
   color: var(--text-color-light);
 }
 
-.copyright a:hover,
-.copyright button code {
-  color: var(--link-color);
-}
-
 .copyright a,
 .copyright button {
   margin-left: var(--spacer);
 }
 
+.copyright a:hover,
+.copyright button code {
+  color: var(--link-color);
+}
+
 .copyright a:first-child,
 .copyright button:first-child {
   margin-left: 0;
@@ -56,10 +63,3 @@
   stroke: var(--text-color-light);
   opacity: 0.7;
 }
-
-.btc code {
-  font-size: 0.6rem;
-  background: none;
-  color: var(--link-color);
-  padding: 0;
-}

src/components/organisms/Footer.tsx

@@ -3,7 +3,7 @@ import { Link } from 'gatsby'
 import Icon from '../atoms/Icon'
 import Vcard from '../molecules/Vcard'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
-import styles from './Footer.module.css'
+import * as styles from './Footer.module.css'
 
 function Copyright() {
   const { name, uri, github } = useSiteMetadata().author

src/components/organisms/Header.module.css

@@ -29,12 +29,12 @@
 
 .title a {
   display: block;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
   font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
   border: 0;
-
   width: 60px;
   overflow: hidden;
 }

src/components/organisms/Header.tsx

@@ -4,7 +4,7 @@ import Search from '../molecules/Search'
 import Menu from '../molecules/Menu'
 import ThemeSwitch from '../molecules/ThemeSwitch'
 import { ReactComponent as Logo } from '../../images/logo.svg'
-import styles from './Header.module.css'
+import * as styles from './Header.module.css'
 
 export default class Header extends PureComponent {
   render(): ReactElement {

src/components/templates/Archive.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { graphql } from 'gatsby'
 import { Post, PageContext } from '../../@types/Post'
 import Pagination from '../molecules/Pagination'
-import styles from './Archive.module.css'
+import * as styles from './Archive.module.css'
 import PostTeaser from '../molecules/PostTeaser'
 import Page from './Page'
 

src/components/templates/Page.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react'
 import { Helmet } from 'react-helmet'
 import { Post } from '../../@types/Post'
 import SEO from '../atoms/SEO'
-import styles from './Page.module.css'
+import * as styles from './Page.module.css'
 
 export default function Page({
   title,

src/components/templates/Photos.tsx

@@ -3,7 +3,7 @@ import { graphql, Link, PageProps } from 'gatsby'
 import Page from './Page'
 import { Post, PageContext } from '../../@types/Post'
 import { Image } from '../atoms/Image'
-import styles from './Photos.module.css'
+import * as styles from './Photos.module.css'
 import Pagination from '../molecules/Pagination'
 
 export const PhotoThumb = ({ photo }: { photo: Post }): ReactElement => {

src/components/templates/Post/Actions.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
-import styles from './Actions.module.css'
+import * as styles from './Actions.module.css'
 import Icon from '../../atoms/Icon'
 
 interface ActionProps {

src/components/templates/Post/Content.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import Changelog from '../../atoms/Changelog'
 import { Post } from '../../../@types/Post'
 import PostToc from './Toc'
-import styles from './Content.module.css'
+import * as styles from './Content.module.css'
 
 export default function PostContent({ post }: { post: Post }): ReactElement {
   const separator = '<!-- more -->'

src/components/templates/Post/Lead.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './Lead.module.css'
+import * as styles from './Lead.module.css'
 import { Post } from '../../../@types/Post'
 
 // Extract lead paragraph from content

src/components/templates/Post/LinkActions.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import stylesPostMore from './More.module.css'
-import styles from './LinkActions.module.css'
+import * as styles from './LinkActions.module.css'
 import Icon from '../../atoms/Icon'
 
 const PostLinkActions = ({

src/components/templates/Post/Meta.tsx

@@ -3,7 +3,7 @@ import { Link } from 'gatsby'
 import slugify from 'slugify'
 import Tag from '../../atoms/Tag'
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
-import styles from './Meta.module.css'
+import * as styles from './Meta.module.css'
 import { Post } from '../../../@types/Post'
 import shortid from 'shortid'
 import PostDate from '../../molecules/PostDate'

src/components/templates/Post/More.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import Icon from '../../atoms/Icon'
-import styles from './More.module.css'
+import * as styles from './More.module.css'
 
 const PostMore = ({
   to,

src/components/templates/Post/PrevNext.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import Icon from '../../atoms/Icon'
-import styles from './PrevNext.module.css'
+import * as styles from './PrevNext.module.css'
 
 interface Node {
   title: string

src/components/templates/Post/Title.module.css

@@ -19,7 +19,6 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-
   width: 100%;
   color: var(--text-color);
   font-family: var(--font-family-base);

src/components/templates/Post/Title.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './Title.module.css'
+import * as styles from './Title.module.css'
 import Icon from '../../atoms/Icon'
 import PostDate from '../../molecules/PostDate'
 

src/components/templates/Post/Toc.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './Toc.module.css'
+import * as styles from './Toc.module.css'
 
 const PostToc = ({
   tableOfContents

src/components/templates/Post/index.tsx

@@ -12,7 +12,7 @@ import PostActions from './Actions'
 import PostLinkActions from './LinkActions'
 import PostMeta from './Meta'
 import PrevNext from './PrevNext'
-import styles from './index.module.css'
+import * as styles from './index.module.css'
 import { Image } from '../../atoms/Image'
 
 export default function Post({

src/global/_variables.css

@@ -1,3 +1,5 @@
+/* stylelint-disable custom-property-empty-line-before */
+
 :root {
   /* Colors
   ///////////////////////////////////// */
@@ -121,6 +123,8 @@
   --body-background-color: #161a1b;
   --box-background-color: rgba(255, 255, 255, 0.03);
 
+  --box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 16px rgba(0, 0, 0, 0.1);
+
   --text-color: var(--brand-grey-light);
   --text-color-light: var(--brand-grey);
   --text-color-dimmed: var(--brand-grey-dark);
@@ -130,3 +134,5 @@
   --input-bg: var(--body-background-color);
   --input-color: var(--text-color);
 }
+
+/* stylelint-enable custom-property-empty-line-before */

src/global/global.css

@@ -25,8 +25,6 @@ body {
   color: var(--text-color);
   text-rendering: optimizeLegibility;
   font-feature-settings: 'liga', 'kern';
-  /* -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; */
   min-height: 100vh;
   background: var(--body-background-color);
   transition: 0.4s var(--easing);
@@ -341,9 +339,10 @@ td {
 ///////////////////////////////////// */
 
 @import '_code.css';
+@import '_toast.css';
+
 /* @import '_buttons';
 @import '_alerts'; */
-@import '_toast.css';
 
 .medium-zoom-overlay {
   background-color: var(--body-background-color) !important;

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Link, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
-import styles from './404.module.css'
+import * as styles from './404.module.css'
 
 const page = {
   frontmatter: {

src/pages/index.tsx

@@ -5,7 +5,7 @@ import SEO from '../components/atoms/SEO'
 import PostTeaser from '../components/molecules/PostTeaser'
 import { PhotoThumb } from '../components/templates/Photos'
 import PostMore from '../components/templates/Post/More'
-import styles from './index.module.css'
+import * as styles from './index.module.css'
 
 export default function Home({ data }: PageProps): ReactElement {
   return (

src/pages/tags.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { graphql, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import Tag from '../components/atoms/Tag'
-import styles from './tags.module.css'
+import * as styles from './tags.module.css'
 
 const page = {
   frontmatter: {

src/pages/thanks.tsx

@@ -8,7 +8,7 @@ import { useSiteMetadata } from '../hooks/use-site-metadata'
 import { getLibrary } from '../hooks/use-web3'
 import Qr from '../components/atoms/Qr'
 import Icon from '../components/atoms/Icon'
-import styles from './thanks.module.css'
+import * as styles from './thanks.module.css'
 
 const LazyWeb3Donation = loadable(
   () => import('../components/molecules/Web3Donation')