diff --git a/content/assets/icon-libraryFinder-pulldown.png b/content/assets/icon-libraryFinder-pulldown.png new file mode 100644 index 0000000..1b8460c Binary files /dev/null and b/content/assets/icon-libraryFinder-pulldown.png differ diff --git a/content/assets/icon-libraryFinder-search.png b/content/assets/icon-libraryFinder-search.png new file mode 100644 index 0000000..1d0f6f5 Binary files /dev/null and b/content/assets/icon-libraryFinder-search.png differ diff --git a/content/assets/lp-fukidashi-arrow.png b/content/assets/lp-fukidashi-arrow.png new file mode 100644 index 0000000..ab8a7b7 Binary files /dev/null and b/content/assets/lp-fukidashi-arrow.png differ diff --git a/content/assets/lp-header-icon.png b/content/assets/lp-header-icon.png new file mode 100644 index 0000000..430b0ef Binary files /dev/null and b/content/assets/lp-header-icon.png differ diff --git a/content/assets/lp-header-logo.png b/content/assets/lp-header-logo.png new file mode 100644 index 0000000..e76c9f0 Binary files /dev/null and b/content/assets/lp-header-logo.png differ diff --git a/content/assets/lp-nav-arrow.png b/content/assets/lp-nav-arrow.png new file mode 100644 index 0000000..0c5539b Binary files /dev/null and b/content/assets/lp-nav-arrow.png differ diff --git a/content/assets/lp-nav-logo.png b/content/assets/lp-nav-logo.png new file mode 100644 index 0000000..b1f66dc Binary files /dev/null and b/content/assets/lp-nav-logo.png differ diff --git a/content/assets/wis-logo-main-green.png b/content/assets/wis-logo-main-green.png new file mode 100644 index 0000000..84de743 Binary files /dev/null and b/content/assets/wis-logo-main-green.png differ diff --git a/gatsby-browser.js b/gatsby-browser.js index 98806da..b776350 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,6 +1,7 @@ // custom typefaces // import 'typeface-montserrat'; // import 'typeface-merriweather'; +import './src/styles/reset.scss'; import './src/styles/syntax-highlight.scss'; require('prismjs/themes/prism-solarizedlight.css'); diff --git a/src/components/molecules/AppFooter/index.js b/src/components/molecules/AppFooter/index.js new file mode 100644 index 0000000..ec55732 --- /dev/null +++ b/src/components/molecules/AppFooter/index.js @@ -0,0 +1,30 @@ +import React from 'react'; +import styles from './index.module.scss'; + +const AppFooter = () => { + return ( + + ); +}; + +export default AppFooter; diff --git a/src/components/molecules/AppFooter/index.module.scss b/src/components/molecules/AppFooter/index.module.scss new file mode 100644 index 0000000..bd8d8e7 --- /dev/null +++ b/src/components/molecules/AppFooter/index.module.scss @@ -0,0 +1,120 @@ +@import '../../../styles/variables.scss'; +@import '../../../styles/media-queries.scss'; +@import '../../../styles/mixin.scss'; +@import '../../../styles/layout.scss'; + +.footer { + padding: 80px 0 24px; + background-color: $color-grayBackground; + + @include mq($vp-s) { + padding: 80px 0 12px; + } +} + +.inner { + @include layout-maxContent; + display: flex; + align-items: flex-end; + flex-wrap: wrap; + + @include mq($vp-s) { + align-items: center; + flex-direction: column; + } +} + +.logo { + flex-shrink: 0; + @include image-replacement(114px, 30px, '../../../../content/assets/wis-logo-main-green.png', 0, 0); + background-size: 114px 30px; + margin-bottom: 16px; + + @include mq($vp-s) { + order: 1; + width: 144px; + height: 38px; + margin: 0 auto 60px; + background-size: 144px 38px; + } +} + +.contact { + flex-grow: 1; + width: calc(100% - 114px); + margin-bottom: 16px; + font-size: 1rem; + color: $color-grayText; + text-align: right; + + @include mq($vp-s) { + order: 3; + width: 100%; + text-align: center; + } +} + +.contactLink { + color: $color-grayText; + + &:hover { + color: $color-grayText; + text-decoration: underline; + } +} + +.copy { + font-size: 1rem; + color: $color-grayText; + + @include mq($vp-s) { + order: 4; + font-size: 1rem; + } +} + +.navi { + display: flex; + margin-left: auto; + + @include mq($vp-s) { + order: 2; + flex-direction: column; + margin-bottom: 42px; + margin-right: auto; + text-align: center; + } +} + +.naviItem { + font-size: 1rem; + + &:not(:last-child) { + margin-right: 16px; + padding-right: 16px; + border-right: 1px solid $color-grayText; + + + @include mq($vp-s) { + margin-right: 0; + padding-right: 0; + margin-bottom: 24px; + border-right: none; + } + } +} + +.naviLink { + font-size: 1rem; + color: $color-grayText; + cursor: pointer; + + @include mq($vp-s) { + font-size: 1.2rem; + } + + &:hover { + color: $color-grayText; + text-decoration: underline; + } +} diff --git a/src/components/molecules/AppHeader/index.js b/src/components/molecules/AppHeader/index.js new file mode 100644 index 0000000..f1ab5d3 --- /dev/null +++ b/src/components/molecules/AppHeader/index.js @@ -0,0 +1,79 @@ +import React from 'react'; +import styles from './index.module.scss'; + +const AppHeader = () => { + return ( +
+ +
+

+ Wistant +

+ + + +
+ ログイン +
+ +
+ お問い合わせはこちら +
+ +
+
+
+
+
+
+ +
+ ); +}; + +export default AppHeader; diff --git a/src/components/molecules/AppHeader/index.module.scss b/src/components/molecules/AppHeader/index.module.scss new file mode 100644 index 0000000..df24e76 --- /dev/null +++ b/src/components/molecules/AppHeader/index.module.scss @@ -0,0 +1,369 @@ +@import '../../../styles/variables.scss'; +@import '../../../styles/media-queries.scss'; +@import '../../../styles/mixin.scss'; +@import '../../../styles/layout.scss'; + +.header { + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 100%; + height: 80px; + padding: 18px 0; + + @include mq($vp-s) { + height: 56px; + padding: 12px 0; + } + + // &.is-fixed { + // background-color: #fff; + // box-shadow: $shadow-petit; + // } +} + +.inner { + @include layout-maxContent; + display: flex; + align-items: center; + justify-content: space-between; + height: 44px; + + @include mq($vp-s) { + height: 32px; + } +} + +.logo { + flex-shrink: 0; + width: 147px; + height: 32px; + margin-right: 32px; + + @include mq($vp-changeNavi) { + width:135px; + margin-right: 0; + } + + @include mq($vp-s) { + width: 104px; + height: 24px; + } +} + +.logoLink { + @include image-replacement(147px, 32px, '../../../../content/assets/lp-header-logo.png', right, center); + display: block; + background-size: 91px 24px; + + @include mq($vp-changeNavi) { + width:135px; + } + + @include mq($vp-s) { + width: 104px; + height: 24px; + background-size: 68px 18px; + } + + &:before { + content: ''; + display: block; + @include image-replacement(32px, 32px, '../../../../content/assets/lp-header-icon.png', left, center); + background-size: 32px 32px; + + + @include mq($vp-s) { + width: 24px; + height: 24px; + background-size: 24px 24px; + } + } +} + +.nav { + flex-grow: 1; + padding-right: 32px; + border-right: 1px solid #000; + border-left: 1px solid #000; + + @include mq($vp-changeNavi) { + flex-grow: 0; + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + padding: 0; + background: $color-darkGrayBackground url('../../../../content/assets/lp-nav-logo.png') no-repeat 16px 24px / 135px 32px; + border: none; + transform: translateX(100%); + transition: .3s; + + // &.is-showMenu { + // transform: translateX(0); + // } + } + + @include mq($vp-s) { + background-image: url('../../../../content/assets/lp-nav-logo.png'); + background-position: 16px 16px; + background-size: 104px 24px; + } +} + +.navInner { + display: flex; + align-items: center; + + @include mq($vp-changeNavi) { + display: block; + width: 100%; + height: 100%; + padding-top: 80px; + overflow-y: scroll; + } + + @include mq($vp-s) { + padding-top: 56px; + } +} + +.navItem, +.navItemTrial, +.navItemLogin { + position: relative; + font-size: 1.5rem; + font-weight: bold; + line-height: 44px; + cursor: pointer; + + @include mq($vp-changeNavi) { + margin: 0 16px; + border-bottom: 1px solid $color-border; + } + + & + & { + margin-left: 32px; + + @include mq($vp-changeNavi) { + margin-left: 16px; + } + } +} + +.navItemTrial { + display: none; + + @include mq($vp-changeNavi) { + display: block; + padding: 10px 0 32px; + } +} + +.navItemLogin { + display: none; + + @include mq($vp-changeNavi) { + display: block; + border: none; + } +} + +.navButton { + width: 100%; + margin: 0 auto; + + & + & { + margin-top: 16px; + } +} + +.navButtonTrialDemonstration { + @include button-default($color-sub); +} + +.navButtonTrialDocument { + @include button-default($color-base); +} + +.navSubMenu { + display: none; + position: absolute; + top: 44px; + left: 50%; + width: 188px; + margin-left: -94px; + padding: 7px 0; + background-color: $color-darkGrayBackground; + border-radius: 2px; + box-shadow: 0 2px 4px $color-darkShadow; + + + @include mq($vp-changeNavi) { + display: block; + position: static; + width: 100%; + margin-left: 0; + padding: 0; + border-radius: 0; + box-shadow: none; + } + + // &.is-showSubMenu { + // display: block; + // } + + &:before { + content: ''; + display: block; + position: absolute; + top: -10px; + left: 50%; + margin-left: -5px; + @include image-replacement(10px, 10px, '../../../../content/assets/lp-fukidashi-arrow.png', center, top); + background-size: 10px 10px; + + @include mq($vp-changeNavi) { + display: none; + } + } +} + +.navSubItem { + line-height: 1; + + @include mq($vp-changeNavi) { + background: url('../../../../content/assets/lp-nav-arrow.png') no-repeat right center / 24px 24px; + } + + & + & { + @include mq($vp-changeNavi) { + border-top: 1px solid $color-border; + } + } +} + +.navSubLink { + display: block; + padding: 9px 16px; + font-size: 1.2rem; + color: $color-lightText; + + @include mq($vp-changeNavi) { + padding: 0 0 0 44px; + background-position: 16px center; + line-height: 44px; + } + + &:hover { + background-color: $color-main; + + @include mq($vp-changeNavi) { + background-color: transparent; + } + } +} + +.navLink { + font-size: 1.5rem; + font-weight: bold; + line-height: 44px; + + @include mq($vp-changeNavi) { + display: block; + background: url('../../../../content/assets/lp-nav-arrow.png') no-repeat right center / 24px 24px; + color: $color-lightText; + border-bottom: 1px solid $color-border; + } +} + +.textButton { + padding: 0 32px; + + @include mq($vp-changeNavi) { + display: none; + } +} + +.textButtonLogin { + display: block; + font-size: 1.5rem; + font-weight: bold; + line-height: 44px; + cursor: pointer; +} + +.button { + width: 212px; + + @include mq($vp-changeNavi) { + margin-right: 16px; + margin-left: auto; + } + + @include mq($vp-s) { + width: 130px; + margin-right: 10px; + } +} + +.buttonTrial { + @include button-default($color-main); +} + +.hbButton { + flex-shrink: 0; + display: none; + position: relative; + width: 32px; + height: 32px; + cursor: pointer; + + @include mq($vp-changeNavi) { + display: block; + + // &.is-showMenu { + // z-index: 10; + // } + } +} + +.hbButtonBar { + position: absolute; + left: 4px; + width: 24px; + height: 2px; + background-color: #000; + + &:first-child { + top: 8px; + + // .is-showMenu & { + // top: 15px; + // left: 5px; + // background-color: #fff; + // transform: rotate(45deg); + // } + } + + &:nth-child(2) { + top: 15px; + + // .is-showMenu & { + // display: none; + // } + } + + &:last-child { + top: 22px; + + // .is-showMenu & { + // top: 15px; + // left: 5px; + // background-color: #fff; + // transform: rotate(-45deg); + // } + } +} diff --git a/src/components/molecules/LibraryFinder/index.js b/src/components/molecules/LibraryFinder/index.js new file mode 100644 index 0000000..106ea0f --- /dev/null +++ b/src/components/molecules/LibraryFinder/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import styles from './index.module.scss'; + +export default class LibraryFinder extends React.Component { + render() { + return ( +
+
+
+ +
+
+ +
+
+ +
+
+
+ ); + } +}; diff --git a/src/components/molecules/LibraryFinder/index.module.scss b/src/components/molecules/LibraryFinder/index.module.scss new file mode 100644 index 0000000..a14ba91 --- /dev/null +++ b/src/components/molecules/LibraryFinder/index.module.scss @@ -0,0 +1,73 @@ +@import '../../../styles/variables.scss'; +@import '../../../styles/media-queries.scss'; +@import '../../../styles/mixin.scss'; +@import '../../../styles/layout.scss'; + +.libraryFinder { + +} + +.inner { + @include layout-maxContent; + display: flex; + align-items: center; + padding: 64px 0 24px; + border-bottom: 1px solid #ccc; + + @include mq($vp-s) { + flex-direction: column; + } +} + +.item { + &:nth-child(2) { + margin-left: 16px; + margin-right: auto; + + @include mq($vp-s) { + margin: 10px auto; + } + } + + @include mq($vp-s) { + width: 100%; + } +} + +.select { + width: 201px; + padding: 9px 29px 9px 10px; + background: url('../../../../content/assets/icon-libraryFinder-pulldown.png') no-repeat calc(100% - 8px) center; + background-size: 16px 16px; + font-size: 1.2rem; + color: #666; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, .15); + cursor: pointer; + + @include mq($vp-intro-movie) { + width: 170px; + } + + @include mq($vp-s) { + width: 100%; + } +} + +.input { + @include customPlaceholder; + width: 224px; + padding: 0 34px 0 14px; + background: url('../../../../content/assets/icon-libraryFinder-search.png') no-repeat calc(100% - 8px) center; + background-size: 16px 16px; + font-size: 1.6rem; + line-height: 30px; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .15); + + @include mq($vp-s) { + width: 100%; + } +} diff --git a/src/components/molecules/LibraryFrame/index.js b/src/components/molecules/LibraryFrame/index.js new file mode 100644 index 0000000..2ee5713 --- /dev/null +++ b/src/components/molecules/LibraryFrame/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './index.module.scss'; + +const LibraryFrame = ({ label, children }) => ( +
+
+

{label}

+
+ {children} +
+
+
+); + +export default LibraryFrame; \ No newline at end of file diff --git a/src/components/molecules/LibraryFrame/index.module.scss b/src/components/molecules/LibraryFrame/index.module.scss new file mode 100644 index 0000000..ffd2a24 --- /dev/null +++ b/src/components/molecules/LibraryFrame/index.module.scss @@ -0,0 +1,36 @@ +@import '../../../styles/media-queries.scss'; +@import '../../../styles/layout.scss'; + +.libraryFrame { + padding: 64px 0; + overflow-x: hidden; +} + +.inner { + @include layout-maxContent; + + & + & { + margin-top: 128px; + } +} + +.label { + margin-bottom: 64px; + font-size: 3.2rem; + + @include mq($vp-s) { + margin-bottom: 32px; + font-size: 2.4rem; + } +} + +.posts { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + margin: 0 -18px; // 投稿のマージンをかわす + + @include mq($vp-s) { + margin: 0; + } +} diff --git a/src/components/molecules/LibraryHeader/index.js b/src/components/molecules/LibraryHeader/index.js new file mode 100644 index 0000000..5a053e4 --- /dev/null +++ b/src/components/molecules/LibraryHeader/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import styles from './index.module.scss'; + +export default class LibraryHeader extends React.Component { + render() { + return ( +
+
+

ケーススタディ・ライブラリ

+

+ ピープルマネジメント、チーム課題のソリューションなど
+ 最新ニュースやWistantの導入事例などをご紹介いたします。 +

+
+
+ ); + } +} diff --git a/src/components/molecules/LibraryHeader/index.module.scss b/src/components/molecules/LibraryHeader/index.module.scss new file mode 100644 index 0000000..ef67982 --- /dev/null +++ b/src/components/molecules/LibraryHeader/index.module.scss @@ -0,0 +1,31 @@ +@import '../../../styles/media-queries.scss'; +@import '../../../styles/layout.scss'; + +.libraryHeader { + padding: 172px 0 64px; +} + +.inner { + @include layout-content; +} + +.heading { + margin-bottom: 64px; + font-size: 3.8rem; + line-height: 1; + text-align: center; + + @include mq($vp-s) { + font-size: 3rem; + } +} + +.lede { + font-size: 2.4rem; + line-height: 2.33; + text-align: center; + + @include mq($vp-s) { + font-size: 1.6rem; + } +} diff --git a/src/components/pages/Root/Posts.js b/src/components/pages/Root/Posts.js index 8de1b30..c37df72 100644 --- a/src/components/pages/Root/Posts.js +++ b/src/components/pages/Root/Posts.js @@ -8,13 +8,14 @@ import styles from './Posts.module.scss'; const PostItem = ({ node, title }) => (
-
+ {node.frontmatter.hero && } +
+ {/* */}

{title}

-

( }} /> - -

- -
- {node.frontmatter.hero && } +
+ + 記事を読む + +
); diff --git a/src/components/pages/Root/Posts.module.scss b/src/components/pages/Root/Posts.module.scss index 10e4d85..937c3b1 100644 --- a/src/components/pages/Root/Posts.module.scss +++ b/src/components/pages/Root/Posts.module.scss @@ -1,69 +1,121 @@ @import '../../../styles/media-queries.scss'; .item { - display: flex; - overflow: hidden; - min-height: 128px; - margin: 1.5rem 0; - - @include mq-sp() { - overflow: hidden; - min-height: auto; - max-height: 96px; - margin: 2rem 0; + margin: 0 18px; + + @include mq($vp-s) { + margin: 0; + } + + // 一番目の投稿 + &:first-of-type { + display: flex; + align-items: flex-start; + justify-content: space-between; + width: calc(100% - 36px); + margin-bottom: 64px; + + @include mq($vp-s) { + display: block; + width: 100%; + } + } + + // 二番目以降の投稿 + &:not(:first-of-type) { + width: calc(33.33333% - 36px); + max-width: 360px; + margin-bottom: 32px; + + @include mq($vp-intro-movie) { + width: calc(50% - 36px); + } + + @include mq($vp-s) { + width: 100%; + max-width: none; + margin-bottom: 64px; + } } } -.description { - flex-grow: 1; - width: 100%; +.thumbnail { + border-radius: 8px; + + .item:first-of-type & { + order: 2; + width: 66%; + height: 289px; + margin-left: 36px; + + @include mq($vp-intro-inner) { + width: calc(50% - 18px); + height: 222px; + } + + @include mq($vp-s) { + width: 100%; + margin-bottom: 24px; + margin-left: 0; + } + } + + .item:not(:first-of-type) & { + width: 100%; + height: 222px; + margin-bottom: 24px; + + @include mq($vp-intro-inner) { + height: 200px; + } + + @include mq($vp-intro-movie) { + height: 222px; + } + } } -.imageWrap { - flex-shrink: 0; - width: 128px; - max-height: 128px; +.inner { + .item:first-of-type & { + order: 1; + width: 32%; + max-width: 360px; + + @include mq($vp-intro-inner) { + width: calc(50% - 18px); + max-width: none; + } - @include mq-sp() { - overflow: hidden; - width: 80px; - max-height: 80px; + @include mq($vp-s) { + width: 100%; + max-width: none; + } } } .title { - margin: 0 0 0.25rem; - font-size: 1.25rem; - line-height: 1; + margin-bottom: 20px; + font-size: 1.9rem; + line-height: 1.47; } .link { - box-shadow: none; - color: black; } .linkText { - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 100%; - - @include mq-sp() { - max-height: 1rem; - font-size: 1rem; - } } .excerpt { - margin: 0.5rem 0; - color: #999; - font-size: 0.875rem; - line-height: 1.33; - - @include mq-sp() { - overflow: hidden; - font-size: 0.75rem; - max-height: 2rem; - } + margin-bottom: 24px; + font-size: 1.4rem; + line-height: 1.42; +} + +.more { + +} + +.moreLinkText { + font-size: 1.4rem; + color: #4b95ff; } diff --git a/src/components/templates/BlogPost/index.js b/src/components/templates/BlogPost/index.js index c1b2996..5b5de62 100644 --- a/src/components/templates/BlogPost/index.js +++ b/src/components/templates/BlogPost/index.js @@ -36,23 +36,29 @@ const BlogPostTemplate = ({ location, data, pageContext }) => { return ( - +
+
+
+ + {post.frontmatter.hero && } +
+
Tag
+ {/* */} +

{post.frontmatter.title}

+
0000.00.00
+

{description}

+
+
share
+ {/* */} +
+
-
-

{post.frontmatter.title}

-

{description}

- - -
- {post.frontmatter.hero && } +
+ 関連 + ...post +
- -
- - - - ); }; diff --git a/src/components/templates/BlogPost/index.module.scss b/src/components/templates/BlogPost/index.module.scss index 5be2d7f..06a95e8 100644 --- a/src/components/templates/BlogPost/index.module.scss +++ b/src/components/templates/BlogPost/index.module.scss @@ -1,5 +1,142 @@ @import '../../../styles/media-queries.scss'; +@import '../../../styles/layout.scss'; +.blogPostWrapper { + padding: 64px 0; + overflow-x: hidden; +} + +.blogPostOuter { + @include layout-content; +} + +.mainImage { + width: 100%; + height: auto; + margin-bottom: 64px; +} + +.blogPost { + padding: 80px 0 128px; + + @include mq($vp-s) { + padding: 32px 0 64px; + } +} + +.blogPostInner { + @include layout-narrowContent; +} + +.tag { + margin-bottom: 20px; + font-size: 1.4rem; + + // &.peopleManagement { + // color: #ff7e7e; + // } + + // &.caseStudy { + // color: #00c09a; + // } +} + +.title { + margin-bottom: 28px; + font-size: 3.8rem; + line-height: 1.31; + + @include mq($vp-s) { + font-size: 3rem; + } +} + +.postDate { + margin-bottom: 24px; + font-size: 1.5rem; +} + +.description { + margin-bottom: 28px; + font-size: 1.7rem; + font-weight: bold; + line-height: 1.64; +} + +.article { + font-size: 1.7rem; + line-height: 1.64; + + // 書式 + * + * { + margin-top: 28px; + } + + h2 { + font-size: 2.4rem; + + @include mq($vp-s) { + font-size: 2.2rem; + line-height: 1.4; + } + } + + * + h2 { + margin-top: 64px; + } + + b { + font-weight: bold; + } + + strong { + font-weight: bold; + color: #4b95ff; + } + + a { + display: inline-block; + font-weight: bold; + color: #4b95ff; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + img { + display: inline-block; + width: 100%; + height: auto; + } + + * + img, + img + * { + margin-top: 64px; + } + + blockquote { + padding: 24px 32px; + background-color: #f2f2f2; + border-radius: 8px; + + @include mq($vp-s) { + padding: 24px 20px; + } + } +} + +.shareItems { + display: flex; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; + margin-top: 64px; +} + + +/* .head { position: relative; margin-bottom: 4rem; @@ -21,7 +158,7 @@ border: none; line-height: 1.25; - @include mq-sp() { + @include mq($vp-s) { font-size: 1.5rem; } } @@ -62,7 +199,7 @@ margin-top: 6rem; font-size: 1.75rem; - @include mq-sp() { + @include mq($vp-s) { font-size: 1.5rem; } @@ -81,7 +218,7 @@ margin-top: 2.5rem; font-size: 1.5rem; - @include mq-sp() { + @include mq($vp-s) { font-size: 1.25rem; } } @@ -89,7 +226,7 @@ & h3 { font-size: 1.25rem; - @include mq-sp() { + @include mq($vp-s) { font-size: 1rem; } } @@ -123,3 +260,4 @@ text-align: right; } } +*/ \ No newline at end of file diff --git a/src/components/templates/Layout/index.js b/src/components/templates/Layout/index.js index 07fbce9..770ab72 100644 --- a/src/components/templates/Layout/index.js +++ b/src/components/templates/Layout/index.js @@ -1,46 +1,49 @@ import React from 'react'; -import { Link } from 'gatsby'; +// import { Link } from 'gatsby'; +import AppHeader from '../../molecules/AppHeader'; +import AppFooter from '../../molecules/AppFooter'; import styles from './index.module.scss'; -const HeaderLink = ({ title }) => ( - - {title} - -); +// const HeaderLink = ({ title }) => ( +// +// {title} +// +// ); -const Header = ({ location, title }) => { - const rootPath = `${__PATH_PREFIX__}/`; +// const Header = ({ location, title }) => { +// const rootPath = `${__PATH_PREFIX__}/`; - return location.pathname === rootPath ? ( -
-

- -

-
- ) : ( -
-

- -

-
- ); -}; +// return location.pathname === rootPath ? ( +//
+//

+// +//

+//
+// ) : ( +//
+//

+// +//

+//
+// ); +// }; -const Footer = () => ( -
-

© 2019 by suzukalight

-

- suzukalight.com -

-
-); +// const Footer = () => ( +//
+//

© 2019 by suzukalight

+//

+// suzukalight.com +//

+//
+// ); const Layout = ({ location, title, children }) => (
-
-
{children}
-
+ {/*
*/} + +
{children}
+
); diff --git a/src/components/templates/Layout/index.module.scss b/src/components/templates/Layout/index.module.scss index e762f64..78d2004 100644 --- a/src/components/templates/Layout/index.module.scss +++ b/src/components/templates/Layout/index.module.scss @@ -1,46 +1,57 @@ -@import '../../../styles/media-queries.scss'; - -.root { - margin-left: auto; - margin-right: auto; - max-width: 40rem; - padding: 2.5rem 1.25rem; - - @include mq-sp() { - padding: 1rem 0.75rem; - } -} - -.headerBig { - font-size: 3rem; - line-height: 3.25rem; - margin-bottom: 2rem; - margin-top: 0px; - - @include mq-sp() { - font-size: 2rem; - } -} - -.headerSmall { - margin-top: 0px; -} - -.siteName { - box-shadow: none; - text-decoration: none; - color: inherit; -} - -.footer { - display: flex; -} - -.footerCopyright { - flex-grow: 1; -} - -.footerToHome { - flex-grow: 1; - text-align: right; -} +// @import '../../../styles/media-queries.scss'; + +// .root { +// margin-left: auto; +// margin-right: auto; +// max-width: 40rem; +// padding: 2.5rem 1.25rem; + +// @include mq($vp-s) { +// padding: 1rem 0.75rem; +// } +// } + +// .headerBig { +// font-size: 3rem; +// line-height: 3.25rem; +// margin-bottom: 2rem; +// margin-top: 0px; + +// @include mq($vp-s) { +// font-size: 2rem; +// } +// } + +// .headerSmall { +// margin-top: 0px; +// } + +// .siteName { +// box-shadow: none; +// text-decoration: none; +// color: inherit; +// } + +// .main { +// margin-left: auto; +// margin-right: auto; +// max-width: 40rem; +// padding: 2.5rem 1.25rem; + +// @include mq($vp-s) { +// padding: 1rem 0.75rem; +// } +// } + +// .footer { +// display: flex; +// } + +// .footerCopyright { +// flex-grow: 1; +// } + +// .footerToHome { +// flex-grow: 1; +// text-align: right; +// } diff --git a/src/pages/library.js b/src/pages/library.js new file mode 100644 index 0000000..489c6ec --- /dev/null +++ b/src/pages/library.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { graphql } from 'gatsby'; + +import Seo from '../components/atoms/Seo'; +import Posts from '../components/pages/Root/Posts'; +import Layout from '../components/templates/Layout'; +import LibraryHeader from '../components/molecules/LibraryHeader'; +import LibraryFinder from '../components/molecules/LibraryFinder'; +import LibraryFrame from '../components/molecules/LibraryFrame'; + +const LibraryIndex = ({ location, data }) => ( + + + + + + + + + 人気の記事 + + +); + +export default LibraryIndex; + +export const pageQuery = graphql` + query { + site { + siteMetadata { + title + } + } + allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { + edges { + node { + excerpt + fields { + slug + } + frontmatter { + date(formatString: "YYYY/M/D") + title + description + tags + hero { + childImageSharp { + fixed(width: 128, height: 128) { + ...GatsbyImageSharpFixed + } + } + } + } + } + } + } + } +`; diff --git a/src/styles/layout.scss b/src/styles/layout.scss new file mode 100644 index 0000000..eb3f093 --- /dev/null +++ b/src/styles/layout.scss @@ -0,0 +1,21 @@ +@mixin layout-maxContent { + width: calc(100% - 32px); + max-width: 1152px; + margin: 0 auto; +} + +@mixin layout-content { + width: calc(100% - 32px); + max-width: 1024px; + margin: 0 auto; +} + +@mixin layout-narrowContent { + width: calc(100% - 32px); + max-width: 756px; + margin: 0 auto; + + @include mq($vp-s) { + width: 100%; + } +} diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss index d87be29..a9661c0 100644 --- a/src/styles/media-queries.scss +++ b/src/styles/media-queries.scss @@ -1,15 +1,18 @@ -$mq-lg: 1280px; -$mq-md: 960px; -$mq-sp: 768px; +$vp-intro-content: 1279px; +$vp-intro-inner: 960px; // innerコンテナの幅 +$vp-intro-movie: 800px; // メインイメージの最大幅 +$vp-changeNavi: 720px; // ナビをハンバーガーに格納 +$vp-intro-chat: 420px; // チャット部品が破綻するサイズ +$vp-s: 640px; -@mixin mq-md { - @media screen and (max-width: $mq-md) { +@mixin mq($vp) { + @media (max-width: ($vp)) { @content; } } -@mixin mq-sp { - @media screen and (max-width: $mq-sp) { +@mixin mqh($vph) { + @media screen and (max-height: ($vph)) { @content; } } diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss new file mode 100644 index 0000000..095f8f1 --- /dev/null +++ b/src/styles/mixin.scss @@ -0,0 +1,59 @@ +// element +@mixin button-default($buttonColor) { + display: block; + width: 100%; + height: 44px; + padding: 0 10px; + background-color: $buttonColor; + font-size: 1.5rem; + color: #fff; + line-height: 44px; + text-align: center; + box-shadow: 0px 2px 4px $color-shadow, inset 0px 1px 2px $color-reflectShadow, inset 0px -2px 2px $color-shadow; + border-radius: 3px; + cursor: pointer; + + @include mq($vp-s) { + height: 32px; + padding: 0 4px; + font-size: 1.2rem; + line-height: 32px; + } + + &:hover { + background-color: darken($buttonColor, 10%); + box-shadow: $shadow-petitReverse; + } +} + +// 画像置換 +@mixin image-replacement($w, $h, $img, $posX, $posY) { + width: $w; + height: $h; + background: url($img) no-repeat center center; + background-position: $posX $posY; + font-size: 0; + text-indent: 100%; + white-space: nowrap; + overflow: hidden; +} + +// placeholder +@mixin customPlaceholder($fz:1.2rem, $color:#ccc) { + &:placeholder-shown { + font-size: $fz; + color: $color; + } + &::-webkit-input-placeholder { + font-size: $fz; + color: $color; + } + &::-moz-placeholder { + font-size: $fz; + color: $color; + } + &:-ms-input-placeholder { + font-size: $fz; + color: $color; + } +} \ No newline at end of file diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 0000000..a74bddb --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,74 @@ +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-touch-callout: none; + box-sizing: border-box; +} + +html { + width: 100%; + height: 100%; + font-size: 62.5%; +} + +body { + width: 100%; + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; + font-size: 1rem; + color: #333; + line-height: 1; + margin: 0; + padding: 0; + word-break: normal; +} + +h1, h2, h3, h4 { + margin: 0; +} + +p { + margin: 0; + padding: 0; +} + +ul, li { + list-style: none; + padding: 0; + margin: 0; +} + +input, button, textarea, select { + margin: 0; + padding: 0; + background: none; + line-height: 1; + border: none; + border-radius: 0; + outline: none; + appearance: none; + + &::-ms-clear { + visibility: hidden; + } + + &::-ms-reveal { + visibility: hidden; + } +} + +input { + white-space: nowrap; +} + +textarea { + resize: vertical; +} + +a { + color: #333; + text-decoration: none; +} + +img { + vertical-align: bottom; +} \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..62397b3 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,87 @@ +// +// COLORS +// +$palette-main: #00c09a; +$palette-main80: rgba(0, 192, 154, .8); +$palette-main60: rgba(0, 192, 154, .6); +$palette-main40: rgba(0, 192, 154, .4); +$palette-main20: rgba(0, 192, 154, .2); +$palette-main10: rgba(0, 192, 154, .1); +$palette-main0: rgba(0, 192, 154, 0); + +$palette-sub: #4b95ff; +$palette-sub80: rgba(75, 149, 255, .8); +$palette-sub60: rgba(75, 149, 255, .6); +$palette-sub40: rgba(75, 149, 255, .4); +$palette-sub20: rgba(75, 149, 255, .2); +$palette-sub10: rgba(75, 149, 255, .1); + +$palette-base: #ffbd3a; +$palette-base80: rgba(255, 189, 58, .8); +$palette-base60: rgba(255, 189, 58, .6); +$palette-base40: rgba(255, 189, 58, .4); +$palette-base20: rgba(255, 189, 58, .2); +$palette-base10: rgba(255, 189, 58, .1); + +$palette-white: #fff; +$palette-white50: rgba(255, 255, 255, .5); + +$palette-black: #333; +$palette-black80: rgba(0, 0, 0, .8); +$palette-black60: rgba(0, 0, 0, .6); +$palette-black40: rgba(0, 0, 0, .4); +$palette-black30: rgba(0, 0, 0, .3); +$palette-black20: rgba(0, 0, 0, .2); +$palette-black15: rgba(0, 0, 0, .15); +$palette-black10: rgba(0, 0, 0, .1); +$palette-black5: rgba(0, 0, 0, .05); + +$palette-darkGray: #4a4a4a; +$palette-gray: #ddd; +$palette-lightGray: #f6f6f6; +$palette-whiteGray: #f2f2f2; +$palette-transparentGray: rgba(242, 242, 242, 0); + +$palette-green: #84e5cf; +$palette-limeGreen: #cfefd6; + + +// color +$color-defaultText: $palette-black; +$color-lightText: $palette-white; +$color-grayText: $palette-darkGray; +$color-main: $palette-main; +$color-sub: $palette-sub; +$color-base: $palette-base; + +$color-seleck-tips: $palette-limeGreen; +$color-seleck-interview: $palette-green; +$color-seleck-category: $palette-gray; + +$color-problem-item: $palette-lightGray; + +// background +$color-grayBackground: $palette-whiteGray; +$color-darkGrayBackground: $palette-darkGray; + +// gradient +$color-grayGradientStart: $palette-transparentGray; +$color-grayGradientEnd: $palette-whiteGray; +$color-greenGradientStart: $palette-main10; +$color-greenGradientEnd: $palette-main0; + +// border +$color-border: $palette-black10; + +// shadow +$color-shadow: $palette-black15; +$color-darkShadow: $palette-black30; +$color-reflectShadow: $palette-white50; + + + +$shadow-petit: 0 2px 4px color-shadow; +$shadow-petitReverse: inset 0 2px 4px color-shadow; +$shadow-card: 0 4px 10px color-shadow; + + diff --git a/src/utils/typography.js b/src/utils/typography.js index cfa2e0f..7f274a6 100644 --- a/src/utils/typography.js +++ b/src/utils/typography.js @@ -6,6 +6,9 @@ GitHub.overrideThemeStyles = () => { 'a.gatsby-resp-image-link': { boxShadow: `none`, }, + 'h1, h2': { + borderBottom: 'none', + }, }; };