Feature/fix design

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": [
     "prettier",
     "prettier/react"

gatsby-node.js

@@ -1,7 +1,7 @@
 const each = require('lodash/each')
 const Promise = require('bluebird')
 const path = require('path')
-const PostTemplate = path.resolve('./src/components/templates/PostTemplate.js')
+const PostTemplate = path.resolve('./src/components/templates/post-template.js')
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions
@@ -66,7 +66,10 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
+        '~': __dirname,
         components: path.resolve(__dirname, 'src/components'),
+        plugins: path.resolve(__dirname, 'src/plugins'),
+        styles: path.resolve(__dirname, 'src/styles'),
       },
     },
   })

package.json

@@ -45,6 +45,7 @@
     "gh-pages": "2.0.1",
     "husky": "1.3.1",
     "lint-staged": "8.1.5",
+    "localforage": "^1.7.3",
     "lodash": "4.17.11",
     "modern-normalize": "0.5.0",
     "prettier": "1.16.4",

src/components/molecules/Animate.js → src/components/atoms/animate.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-const Animate = styled.div`
+const Animate = styled.span`
   &[data-emergence='visible'] {
     opacity: 1;
     animation: ${props => props.animation} 1s;

src/components/atoms/Button.js → src/components/atoms/button.js

@@ -6,18 +6,20 @@ const Btn = styled.button`
   background-color: transparent;
   background-image: none;
   border-radius: 0.25rem;
-  border: 0.5px solid
+  border: 2px solid
     ${props => (props.primary ? props.theme.main : props.theme.sub)};
   color: ${props => (props.primary ? props.theme.main : props.theme.sub)};
   display: block;
   font-size: 1rem;
-  font-weight: 300;
+  font-weight: 800;
   line-height: 1.5;
-  padding: 0.375rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   text-align: center;
+  transition: 0.2s;
   user-select: none;
   white-space: nowrap;
   width: 100%;
+
   :hover {
     background-color: ${props =>
       props.primary ? props.theme.main : props.theme.sub};

src/components/atoms/Display.js → src/components/atoms/display.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 const SectionHead = styled.h2`
-  font-size: ${props => props.size || 2}rem;
+  font-size: ${props => props.size || 2.8}rem;
   font-weight: 800;
   line-height: 1.4;
   padding: 0 2rem;

src/components/atoms/Hr.js → src/components/atoms/hr.js

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 const Hr = styled.hr`
   max-width: 50px;
-  margin: 1rem auto;
+  margin: 2rem auto;
   border: 0;
   border-top: 3px solid ${props => props.theme.main};
 `

src/components/atoms/Icon.js → src/components/atoms/icon.js

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import Animate from 'components/molecules/Animate'
+import Animate from 'components/atoms/animate'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -44,7 +44,7 @@ export default Icon
 
 const I = styled.i`
   display: block;
-  font-size: ${props => props.size || 4.2}rem;
+  font-size: ${props => props.size || 3}rem;
   padding: 0.4rem;
   text-align: center;
 `

src/components/atoms/Lead.js → src/components/atoms/lead.js

@@ -4,6 +4,7 @@ const Lead = styled.p`
   margin: 2rem auto;
   padding: 0 2rem;
   line-height: 1.8rem;
+  text-align: left;
 `
 
 export default Lead

src/components/atoms/section.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+const gradient = 'linear-gradient(0deg, rgba(0,0,0,.75), rgba(1,1,1,.25) 50%)'
+
+const Section = styled.section`
+  padding: 2rem 0;
+  position: relative;
+  margin: 0 auto;
+  text-align: ${props => (props.center ? 'center' : 'left')};
+  color: ${props =>
+    props.primary || props.dark ? 'white' : props.theme.accent};
+  border-bottom: 1px solid ${props => props.theme.sub};
+
+  background: ${props => {
+    if (props.dark) return gradient
+    if (props.primary) return props.theme.main
+    return 'inherit'
+  }};
+
+  a {
+    color: ${props =>
+      props.primary || props.dark ? 'white' : props.theme.accent};
+  }
+`
+
+export default Section

src/components/molecules/Box.js → src/components/molecules/icon-box.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
-import Icon from 'components/atoms/Icon'
+import Icon from 'components/atoms/icon'
 
 const Box = ({ label, icon }) => (
   <BoxWrap title={label}>
@@ -26,9 +26,11 @@ const move = keyframes`
 const BoxWrap = styled.div`
   width: 25%;
   padding: 2rem 0;
+
   @media (max-width: 700px) {
     width: 50%;
   }
+
   :hover {
     animation: ${move} 0.3s linear;
   }

src/components/molecules/Logo.js → src/components/molecules/navi-logo.js

@@ -18,6 +18,7 @@ const LogoWrap = styled.h1`
   font-feature-settings: 'liga' 1;
   font-size: 1.5rem;
   font-style: italic;
+  font-weight: 800;
   letter-spacing: -0.05rem;
   line-height: 0.5;
   padding: 0 1rem;

src/components/molecules/Menu.js → src/components/molecules/navi-menu.js

@@ -2,15 +2,16 @@ import React from 'react'
 import Link from 'gatsby-link'
 import styled from 'styled-components'
 
-const Menu = () => (
+const Menu = ({ items }) => (
   <MenuWrap>
-    {[{ text: 'Home', to: '/' }, { text: 'Profile', to: '/profile' }].map(
-      (item, index) => (
-        <Link key={index} to={item.to}>
-          <MenuItem>{item.text}</MenuItem>
-        </Link>
-      )
-    )}
+    {(items || []).map((item, index) => {
+      const { action, text, to } = item
+      let menuItem = <MenuItem onClick={action || null}>{text}</MenuItem>
+      if (to) {
+        menuItem = <Link to={to}>{menuItem}</Link>
+      }
+      return <span key={index}>{menuItem}</span>
+    })}
   </MenuWrap>
 )
 export default Menu
@@ -22,6 +23,7 @@ const MenuWrap = styled.div`
 
 const MenuItem = styled.p`
   color: white;
+  cursor: pointer;
   padding: 0 0.5rem;
 
   :hover {

src/components/organisms/Info.js → src/components/molecules/post-info.js

@@ -2,9 +2,9 @@ import React from 'react'
 import Link from 'gatsby-link'
 import styled from 'styled-components'
 
-import Heading from 'components/atoms/Heading'
-import Badges from 'components/atoms/Badges'
-import Time from 'components/atoms/Time'
+import Heading from 'components/atoms/heading'
+import Badges from 'components/atoms/badges'
+import Time from 'components/atoms/time'
 
 const Info = ({ path, title, date, categories, tags }) => (
   <InfoWrap>

src/components/molecules/SlideImage.js → src/components/molecules/slide-image.js

@@ -1,21 +1,22 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import Tumbnail from 'components/atoms/Tumbnail'
-import Animate from 'components/molecules/Animate'
+import Tumbnail from 'components/atoms/tumbnail'
+import Animate from 'components/atoms/animate'
 
 const SlideImage = ({ fluid, src, title, animation }) => {
   return (
     <Animate animation={animation} data-emergence="hidden">
-      <Tumbnail fluid={fluid} src={src} title={title} size="320" />
+      <Tumbnail fluid={fluid} src={src} title={title} size="200" />
       <Capture>{title}</Capture>
     </Animate>
   )
 }
 export default SlideImage
 
 const Capture = styled.p`
-  font-size: 1rem;
+  font-size: 0.6rem;
   font-weight: 900;
   font-family: 'Courier New', Courier, monospace;
+  text-align: center;
 `

src/components/organisms/Article.js → src/components/organisms/article.js

@@ -2,11 +2,11 @@ import Img from 'gatsby-image'
 import React from 'react'
 import get from 'lodash/get'
 
-import Button from 'components/atoms/Button'
-import Adsense from 'components/molecules/Adsense'
-import Container from 'components/molecules/Container'
-import Share from 'components/molecules/Share'
-import PostInfo from 'components/organisms/Info'
+import Button from 'components/atoms/button'
+import Adsense from 'components/molecules/post-ad'
+import Container from 'components/atoms/container'
+import Share from 'components/molecules/icon-share'
+import PostInfo from 'components/molecules/post-info'
 
 const Article = ({ frontmatter, html, site, options }) => {
   const { isIndex, adsense } = options

src/components/organisms/Footer.js → src/components/organisms/footer.js

@@ -2,8 +2,8 @@ import React from 'react'
 import Link from 'gatsby-link'
 import styled from 'styled-components'
 
-import Hr from 'components/atoms/Hr'
-import Container from 'components/molecules/Container'
+import Hr from 'components/atoms/hr'
+import Container from 'components/atoms/container'
 
 const Footer = ({ author }) => (
   <Container>

src/components/organisms/navi.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import Container from 'components/atoms/container'
+import Flex from 'components/atoms/flex'
+import NaviLogo from 'components/molecules/navi-logo'
+import NaviMenu from 'components/molecules/navi-menu'
+
+const Navi = ({ title, isDarkMode, onDarkMode }) => (
+  <Header>
+    <Container>
+      <Flex>
+        <NaviLogo title={title} />
+        <NaviMenu
+          items={[
+            { text: 'Home', to: '/' },
+            { text: 'Profile', to: '/profile' },
+          ]}
+        />
+        <NaviMenu
+          items={[{ text: isDarkMode ? '🌃' : '🌅', action: onDarkMode }]}
+        />
+      </Flex>
+    </Container>
+  </Header>
+)
+
+export default Navi
+
+const Header = styled.header`
+  background-color: ${props => props.theme.main};
+  opacity: 0.8;
+  padding: 0.5rem 0;
+  position: sticky;
+  top: 0;
+  transition: 0.2s;
+  z-index: 1;
+
+  a {
+    text-decoration: none;
+  }
+
+  :hover {
+    opacity: 1;
+  }
+`