updates and refactoring

gatsby-browser.js

@@ -1,4 +1,4 @@
-require('./src/styles/base.scss')
+require('./src/styles/global.scss')
 
 exports.onClientEntry = () => {
   // IntersectionObserver polyfill for gatsby-image (Safari, IE)

package.json

@@ -21,14 +21,14 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-beta.105",
+    "gatsby": "^2.0.0-beta.106",
     "gatsby-image": "^2.0.0-beta.8",
     "gatsby-plugin-manifest": "^2.0.2-beta.6",
     "gatsby-plugin-matomo": "^0.5.0",
     "gatsby-plugin-offline": "^2.0.0-beta.9",
     "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
     "gatsby-plugin-sass": "^2.0.0-beta.10",
-    "gatsby-plugin-sharp": "^2.0.0-beta.7",
+    "gatsby-plugin-sharp": "^2.0.0-beta.8",
     "gatsby-plugin-sitemap": "^2.0.0-beta.4",
     "gatsby-source-filesystem": "^2.0.1-beta.10",
     "gatsby-transformer-json": "^2.1.1-beta.5",

src/components/atoms/LogoUnit.jsx

@@ -4,9 +4,7 @@ import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'
 
 const LogoUnit = ({ meta, minimal }) => {
-  const classes = minimal
-    ? `${styles.logounit} ${styles.minimal}`
-    : styles.logounit
+  const classes = minimal ? styles.minimal : styles.logounit
 
   return (
     <div className={classes}>

src/components/atoms/LogoUnit.module.scss

@@ -43,6 +43,7 @@
 }
 
 .minimal {
+    composes: logounit;
     transform: scale(.7);
     transform-origin: top center;
     transform-box: border-box;

src/components/organisms/Header.jsx

@@ -16,11 +16,7 @@ class Header extends PureComponent {
     const { isHomepage, meta } = this.props
 
     return (
-      <header
-        className={
-          isHomepage ? `${styles.header}` : `${styles.header} ${styles.minimal}`
-        }
-      >
+      <header className={isHomepage ? styles.header : styles.minimal}>
         <ThemeSwitch />
 
         <Link className={styles.header__link} to={'/'}>

src/components/organisms/Header.module.scss

@@ -19,6 +19,7 @@
 }
 
 .minimal {
+    composes: header;
     height: auto;
     padding-top: $spacer * 2;
     padding-bottom: 0;