Tweak site template

naoki8ster · Sep 25, 2019 · 69cb275 · 69cb275
1 parent 820eb3d
commit 69cb275
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 1,179 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
  "gatsby-transformer-remark": "^2.3.12",
  "lodash": "^4.17.11",
  "pluralize": "^8.0.0",
+ "polished": "^3.4.1",
  "prismjs": "^1.13.0",
  "prop-types": "^15.6.1",
  "react": "^16.8.6",

diff --git a/src/components/basics/BoxLink.js b/src/components/basics/BoxLink.js
@@ -1,24 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Link, styles } from '@storybook/design-system';
-import GatsbyLink from './GatsbyLink';
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { Link, styles } from "@storybook/design-system";
+import GatsbyLink from "./GatsbyLink";
+import { rgba } from "polished";
 
 const boxLinkStyles = `
  && {
  display: block;
  background: ${styles.color.lightest};
- border: 1px solid ${styles.color.medium};
+ border: 1px solid ${styles.color.border};
  border-radius: 4px;
  transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
 
  &:hover {
- background: ${styles.color.light};
- border: 1px solid ${styles.color.mediumdark};
+ border-color: ${rgba(styles.color.secondary, 0.5)};
+ transform: translate3d(0, -3px, 0);
+ box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
  }
 
  &:active {
- border: 1px solid ${styles.color.dark};
+ border-color: ${rgba(styles.color.secondary, 1)};
+ transform: translate3d(0, 0, 0);
  }
  }
 `;
@@ -27,20 +30,27 @@ const InternalBoxLink = styled(GatsbyLink)`
  ${boxLinkStyles}
 `;
 
-const ExternalBoxLink = styled(Link).attrs({ target: '_blank', rel: 'noopener' })`
+const ExternalBoxLink = styled(Link).attrs({
+ target: "_blank",
+ rel: "noopener"
+})`
  ${boxLinkStyles}
 `;
 
 const BoxLink = ({ isInternal, to, ...rest }) =>
- isInternal ? <InternalBoxLink to={to} {...rest} /> : <ExternalBoxLink href={to} {...rest} />;
+ isInternal ? (
+ <InternalBoxLink to={to} {...rest} />
+ ) : (
+ <ExternalBoxLink href={to} {...rest} />
+ );
 
 BoxLink.propTypes = {
  isInternal: PropTypes.bool,
- to: PropTypes.string.isRequired,
+ to: PropTypes.string.isRequired
 };
 
 BoxLink.defaultProps = {
- isInternal: false,
+ isInternal: false
 };
 
 export default BoxLink;
diff --git a/src/components/screens/GuideScreen/Contributors.js b/src/components/screens/GuideScreen/Contributors.js
@@ -44,7 +44,7 @@ const Contributors = ({ authors, contributors }) => (
  </CommunityDetailItem>
  )}
 
- {contributors && (
+ {contributors && contributors.length > 0 && (
  <CommunityDetailItem>
  <Subheading>{pluralize('Contributor', contributors.length)}</Subheading>
 

diff --git a/src/components/screens/GuideScreen/Hero.js b/src/components/screens/GuideScreen/Hero.js
@@ -55,17 +55,18 @@ const Pitch = styled.div`
  }
 `;
 
-const PitchTitle = styled.div`
- font-size: 36px;
+const PitchTitle = styled.h1`
+ font-size: ${typography.size.l2}px;
  font-weight: ${typography.weight.black};
- letter-spacing: -0.37px;
+
  line-height: 40px;
 `;
 
 const PitchDescription = styled.div`
- margin-top: 17px;
- letter-spacing: -0.33px;
- line-height: 26px;
+ font-size: ${typography.size.m1}px;
+ line-height: 36px;
+
+ margin-top: 1rem;
 `;
 
 const GetStartedButton = styled(Button)`
@@ -84,9 +85,8 @@ const GetStartedButton = styled(Button)`
 const Languages = styled.div`
  color: ${color.lightest};
  font-size: ${typography.size.s1}px;
- letter-spacing: -0.25px;
  line-height: 16px;
- margin-top: 11px;
+ margin-top: 1rem;
 `;
 
 const LanguagesLabel = styled.span`

diff --git a/src/components/screens/GuideScreen/TableOfContents.js b/src/components/screens/GuideScreen/TableOfContents.js
@@ -9,7 +9,6 @@ const { color, typography } = styles;
 
 const BoxLinkWrapper = styled(BoxLink).attrs({ isInternal: true })`
  padding: 20px 28px;
- margin-bottom: 10px;
  letter-spacing: -0.26px;
  line-height: 20px;
 
@@ -18,10 +17,6 @@ const BoxLinkWrapper = styled(BoxLink).attrs({ isInternal: true })`
  &&:focus {
  color: ${color.darkest};
  }
-
- &:last-of-type {
- margin-bottom: 0;
- }
 `;
 
 const Chapter = styled.div`
@@ -46,22 +41,41 @@ const ChapterDescription = styled.div`
  font-size: ${typography.size.s2}px;
 `;
 
+const ChapterItem = styled.li`
+ list-style-type: none;
+ margin-bottom: 10px;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+`;
+
+const ChapterList = styled.ol`
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+`;
+
 const TableOfContents = ({ entries }) => (
  <>
  <Subheading>Table of Contents</Subheading>
 
- {entries.map((entry, index) => (
- <BoxLinkWrapper to={entry.slug} key={entry.slug}>
- <Chapter>
- <ChapterNumber>{index + 1}</ChapterNumber>
+ <ChapterList>
+ {entries.map((entry, index) => (
+ <ChapterItem>
+ <BoxLinkWrapper to={entry.slug} key={entry.slug}>
+ <Chapter>
+ <ChapterNumber>{index + 1}</ChapterNumber>
 
- <div>
- <ChapterTitle>{entry.tocTitle || entry.title}</ChapterTitle>
- <ChapterDescription>{entry.description}</ChapterDescription>
- </div>
- </Chapter>
- </BoxLinkWrapper>
- ))}
+ <div>
+ <ChapterTitle>{entry.tocTitle || entry.title}</ChapterTitle>
+ <ChapterDescription>{entry.description}</ChapterDescription>
+ </div>
+ </Chapter>
+ </BoxLinkWrapper>
+ </ChapterItem>
+ ))}
+ </ChapterList>
  </>
 );
 

diff --git a/src/components/screens/GuideScreen/index.js b/src/components/screens/GuideScreen/index.js
@@ -12,7 +12,7 @@ import TableOfContents from './TableOfContents';
 import { guideFormatting } from '../../../styles/formatting';
 import tocEntries from '../../../lib/tocEntries';
 
-const { breakpoint, pageMargins } = styles;
+const { breakpoint, pageMargins, typography } = styles;
 
 const Content = styled.div`
  ${guideFormatting}
@@ -32,9 +32,21 @@ const Overview = styled.div`
  }
 `;
 
+const OverviewTitle = styled.h2`
+ font-size: ${typography.size.m2}px;
+ font-weight: ${typography.weight.black};
+`;
+
+const OverviewDesc = styled.p``;
+
 const Detail = styled.div`
  margin-top: 66px;
 
+ h2 {
+ font-size: ${typography.size.m2}px;
+ font-weight: ${typography.weight.black};
+ }
+
  @media (min-width: ${breakpoint * 1.5}px) {
  margin-top: 0;
  width: 50%;
@@ -94,8 +106,8 @@ const Guide = ({ data }) => {
  <Overview>
  {overview && (
  <>
- <h1>Overview</h1>
- <p>{overview}</p>
+ <OverviewTitle>Overview</OverviewTitle>
+ <OverviewDesc>{overview}</OverviewDesc>
  </>
  )}
 

diff --git a/src/components/screens/IndexScreen/index.js b/src/components/screens/IndexScreen/index.js
@@ -18,7 +18,7 @@ const { breakpoint, color, pageMargin } = styles;
 const DotBackground = styled.div`
  background: url('bg-dots.svg?t=${props => props.time}');
  background-repeat: repeat-x;
- background-position-y: 80px;
+ background-position-y: 20vh;
 `;
 
 const BottomSection = styled.div`

diff --git a/src/styles/formatting.js b/src/styles/formatting.js
@@ -12,15 +12,14 @@ export const guideFormatting = css`
 
  p {
  letter-spacing: -0.33px;
- line-height: 26px;
+ line-height: 28px;
  }
 
  img {
  display: block;
  padding: 0;
  max-width: 100%;
  position: relative;
- vertical-align: top;
  margin: 0 auto;
  }