diff --git a/.nvmrc b/.nvmrc index e1fcd1ea2..66df3b7ab 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/erbium +12.16.1 diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index cc26b8242..0112f9a8f 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -237,7 +237,7 @@ function Comment(props) { [CodePen에서 시험해보기](codepen://components-and-props/extracting-components-continued) -처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있습니다. 하지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나 (`Button`, `Panel`, `Avatar`), UI 일부가 자체적으로 복잡한 (`App`, `FeedStory`, `Comment`) 경우에는 재사용 가능한 컴포넌트로 만드는 것이 좋습니다. +처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있습니다. 하지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나 (`Button`, `Panel`, `Avatar`), UI 일부가 자체적으로 복잡한 (`App`, `FeedStory`, `Comment`) 경우에는 별도의 컴포넌트로 만드는 게 좋습니다. ## props는 읽기 전용입니다. {#props-are-read-only} diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js index 8ed280c58..36c932eac 100644 --- a/src/components/Container/Container.js +++ b/src/components/Container/Container.js @@ -22,7 +22,6 @@ const Container = ({children}: {children: Node}) => ( paddingRight: 20, marginLeft: 'auto', marginRight: 'auto', - [media.greaterThan('medium')]: { width: '90%', }, diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index cfe3e77d0..9a49192e6 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -33,6 +33,34 @@ const Header = ({location}: {location: Location}) => ( display: 'none', }, }}> + +
+ Black Lives Matter.{' '} + + Support the Equal Justice Initiative. + +
+
( css={{ color: colors.dark, marginBottom: 0, - marginTop: 40, + marginTop: 100, // BLM ...fonts.header, [media.size('medium')]: { - marginTop: 60, + marginTop: 100, // BLM }, [media.greaterThan('large')]: { - marginTop: 80, + marginTop: 100, // BLM }, }}> {title} diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index 49b64a5a1..4df224688 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -84,7 +84,10 @@ const MarkdownPage = ({ {(date || hasAuthors) && ( -
+
{date}{' '} {hasAuthors && ( diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js index fc5d074d8..9f31cdd68 100644 --- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js +++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js @@ -43,7 +43,7 @@ class StickyResponsiveSidebar extends Component { render() { const {open} = this.state; const smallScreenSidebarStyles = { - top: 0, + top: 60, left: 0, bottom: 0, right: 0, @@ -117,18 +117,18 @@ class StickyResponsiveSidebar extends Component { transition: 'transform 0.5s ease', }} css={{ - marginTop: 60, + marginTop: 80, [media.size('xsmall')]: { - marginTop: 40, + marginTop: 60, }, [media.between('small', 'medium')]: { - marginTop: 0, + marginTop: 70, }, [media.between('medium', 'large')]: { - marginTop: 50, + marginTop: 70, }, [media.greaterThan('small')]: { diff --git a/src/css/reset.css b/src/css/reset.css index 5db3eed63..2046181f5 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -13,7 +13,6 @@ html { body { overflow-x: hidden; position: relative; - filter: grayscale(100%); } * { diff --git a/src/pages/index.js b/src/pages/index.js index b26783275..d0f839734 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -53,7 +53,11 @@ class Home extends Component { title="React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" canonicalUrl={createCanonicalUrl('/')} /> -
+