Pr11 tommy

.gitignore

@@ -69,3 +69,5 @@ yarn-error.log
 .yarn-integrity
 
 ~$data.xlsx
+
+.idea/

gatsby-browser.js

@@ -8,7 +8,7 @@ module.exports = {
   onInitialClientRender: () => {
     navigator.userAgent.toLowerCase().indexOf('chrome') > -1
       ? window.console.log.apply(console, [
-          '\n %c Made by Tagbangers %c %c %c https://tagbangers.co.jp/ %c %c \n',
+          '\n %c Made by Tagbangers %c %c %c https://www.tagbangers.co.jp/ %c %c \n',
           'color: #fff; background: #ff0000; padding:5px 0;',
           'background: #131419; padding:5px 0;',
           'background: #131419; padding:5px 0;',
@@ -20,3 +20,6 @@ module.exports = {
         window.console.log('Made by Tagbangers - https://tagbangers.co.jp/')
   },
 }
+module.exports.onRouteUpdate = ({ location, prevLocation }) => {
+  prevLocation ? document.body.scroll(0, 0) : document.body.scrollTo(0, 0)
+}

gatsby-config.js

@@ -1,6 +1,6 @@
 module.exports = {
   siteMetadata: {
-    title: `Spring Fest 19`,
+    title: `Spring Fest ’19`,
     description: `Spring FrameworkはJavaの代表的なアプリケーションフレームワークであり、世界中の多くのJavaアプリケーションで利用されています。ユーザ間での情報交換・交流の場を提供し、さらなるSpring Frameworkの認知度の向上、普及促進を図るため、本カンファレンスを開催いたします。`,
     ogDescription: `2019-12-18(水) 日本最大 Spring Framework カンファレンス @御茶ノ水ソラシティ`,
     author: `JSUG`,

package.json

@@ -32,12 +32,12 @@
     "gatsby-source-filesystem": "^2.1.11",
     "gatsby-transformer-json": "^2.2.6",
     "gatsby-transformer-sharp": "^2.2.7",
-    "getskeleton": "^2.0.4-2",
+    "html-react-parser": "^0.9.2",
     "keymirror-nested": "^1.0.3",
     "linkifyjs": "^2.1.8",
     "prop-types": "^15.7.2",
     "ramda": "^0.26.1",
-    "react": "^16.9.0",
+    "react": "^16.11.0",
     "react-dom": "^16.9.0",
     "react-google-maps": "^9.4.5",
     "react-helmet": "^5.2.1",

src/components/blocks/banner.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useStaticQuery, graphql } from 'gatsby'
-import { Icon, Transition } from 'semantic-ui-react'
 
 const Container = styled.div`
   display: flex;
@@ -15,11 +14,11 @@ const Container = styled.div`
   background-attachment: fixed;
   background-size: cover;
   text-align: center;
-  margin-bottom: -${props => props.pseudoMargin}px;
   position: relative;
 
   @media only screen and (max-width: ${props => props.theme.media.tablet}) {
     min-height: ${props => props.viewHeight}px;
+    background-attachment: scroll;
   }
 
   @media only screen and (max-width: ${props => props.theme.media.mobile}) {
@@ -29,28 +28,40 @@ const Container = styled.div`
 
 const Logo = styled.img`
   margin-top: ${props => props.theme.spacing(7)};
-  margin-bottom: ${props => props.theme.spacing(5)};
   margin-bottom: ${props => props.theme.spacing(2)};
 
-  width: 18vh;
+  width: 10rem;
+
+  @media only screen and (max-width: ${props => props.theme.media.tablet}) {
+    width: 8rem;
+    margin-top: ${props => props.theme.spacing(5)};
+    margin-bottom: ${props => props.theme.spacing(4)};
+  }
 
   @media only screen and (max-width: ${props => props.theme.media.mobile}) {
-    width: 13vh;
+    width: 4rem;
+    margin-bottom: ${props => props.theme.spacing(1)};
   }
 `
 
 const Title = styled.h1`
   font-family: ${props => props.theme.typography.types.display};
   margin: 0;
-  font-size: 6.5rem;
+  font-size: 5rem;
   line-height: 5.5rem;
   font-weight: 900;
-  margin-bottom: ${props => props.theme.spacing(2)};
+  margin-bottom: ${props => props.theme.spacing(1)};
 
-  @media only screen and (max-width: ${props => props.theme.media.mobile}) {
-    font-size: 3rem;
+  @media only screen and (max-width: ${props => props.theme.media.tablet}) {
+    font-size: 5rem;
     line-height: 2.7rem;
   }
+
+  @media only screen and (max-width: ${props => props.theme.media.mobile}) {
+    font-size: 1.7rem;
+    line-height: 2rem;
+    margin-bottom: ${props => props.theme.spacing(-0.5)};
+  }
 `
 
 const Center = styled.div`
@@ -59,74 +70,89 @@ const Center = styled.div`
 
 const PlaceText = styled.p`
   font-family: ${props => props.theme.typography.types.display};
-  font-size: 2.3rem;
+  font-size: 2rem;
   margin-bottom: 0;
   letter-spacing: -0.1rem;
   font-weight: 900;
 
   @media only screen and (max-width: ${props => props.theme.media.tablet}) {
-    font-size: 2rem;
+    font-size: 1.7rem;
+    margin-bottom: ${props => props.theme.spacing(0.3)};
   }
 
   @media only screen and (max-width: ${props => props.theme.media.mobile}) {
-    font-size: 1.25rem;
+    font-size: 1rem;
     margin-bottom: ${props => props.theme.spacing(-0.5)};
   }
 `
 
 const DateText = styled.p`
   font-family: ${props => props.theme.typography.types.display};
   margin-top: ${props => props.theme.spacing(-1)};
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: 700;
 
   @media only screen and (max-width: ${props => props.theme.media.tablet}) {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
   }
 
   @media only screen and (max-width: ${props => props.theme.media.mobile}) {
-    font-size: 0.95rem;
+    font-size: 0.75rem;
     margin-top: 0;
   }
 `
 
 const DescriptionText = styled.p`
   width: 60%;
-  margin: 2rem auto;
-  font-size: 1.5rem;
+  font-size: ${props => props.theme.typography.size.rg};
   text-align: center;
-  margin-bottom: ${props => props.theme.spacing(2)};
+  margin: ${props => props.theme.spacing(3, 0, 5)};
 
   @media only screen and (max-width: ${props => props.theme.media.tablet}) {
-    font-size: ${props => props.theme.typography.size.lg};
+    width: 70%;
+    font-size: ${props => props.theme.typography.size.rg};
   }
 
   @media only screen and (max-width: ${props => props.theme.media.mobile}) {
-    width: 80%;
+    width: 85%;
     margin: 1rem auto;
-    font-size: ${props => props.theme.typography.size.md};
+    font-size: ${props => props.theme.typography.size.xs};
   }
 `
 
-const ActionButton = styled.div`
+const ActionButton = styled.a`
   cursor: pointer;
-  font-size: ${props => props.theme.typography.size.lg};
   opacity: 1;
-  position: absolute;
-  bottom: 2.5vh;
+  padding: ${props => props.theme.spacing(2, 5)};
+  background: ${props => props.theme.colors.white};
+  color: ${props => props.theme.colors.primary['300']};
+  transition: all 0.1s ease-in;
+  border-radius: 50px;
+  box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.25);
+  margin-bottom: ${props => props.theme.spacing(2)};
+
+  &:hover {
+    transform: scale(1.05);
+    color: ${props => props.theme.colors.primary['300']};
+    box-shadow: 0px 5px 8px 1px rgba(0, 0, 0, 0.5);
+  }
 
   @media only screen and (max-width: ${props => props.theme.media.tablet}) {
-    display: none;
+    padding: ${props => props.theme.spacing(1.5, 4)};
   }
 `
 
 const ButtonText = styled.p`
-  margin-bottom: ${props => props.theme.spacing(-1)};
-  font-family: ${props => props.theme.typography.types.display};
-  font-weight: 700;
+  font-weight: 600;
+  font-size: 1rem;
+  margin-bottom: ${props => props.theme.spacing(0.25)};
+
+  @media only screen and (max-width: ${props => props.theme.media.tablet}) {
+    font-size: ${props => props.theme.typography.size.md};
+  }
 `
 
-const Banner = ({ scrollToSection, pseudoMargin }) => {
+const Banner = () => {
   const { site, bannerImage, springLogoImage } = useStaticQuery(
     graphql`
       query {
@@ -160,11 +186,9 @@ const Banner = ({ scrollToSection, pseudoMargin }) => {
   )
 
   const { title, description, event } = site.siteMetadata
-  const [visible, setVisible] = useState(false)
   const [viewHeight, setViewHeight] = useState(0)
 
   useEffect(() => {
-    setTimeout(() => setVisible(true), 300)
     updateViewHeight()
   }, [])
 
@@ -174,7 +198,6 @@ const Banner = ({ scrollToSection, pseudoMargin }) => {
 
   return (
     <Container
-      pseudoMargin={pseudoMargin}
       style={{
         backgroundImage: `url(${bannerImage.childImageSharp.original.src})`,
       }}
@@ -187,13 +210,11 @@ const Banner = ({ scrollToSection, pseudoMargin }) => {
         <DateText>{event.date}</DateText>
       </Center>
       <DescriptionText>{description}</DescriptionText>
-      <ActionButton onClick={scrollToSection}>
-        <Transition visible={visible} animation={'fade up'} duration={500}>
-          <>
-            <ButtonText>SESSION</ButtonText>
-            <Icon name="caret down" />
-          </>
-        </Transition>
+      <ActionButton
+        href="https://jsug.doorkeeper.jp/events/99486"
+        target="_blank"
+      >
+        <ButtonText>参加申込</ButtonText>
       </ActionButton>
     </Container>
   )