Skip to content

Commit 966693d

Browse files
velopertvelopert
committed
Resize header and set default font to Spoqa Han Sans
1 parent 0624eaa commit 966693d

File tree

16 files changed

+143
-27
lines changed

16 files changed

+143
-27
lines changed

‎src/components/base/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const HeaderBlock = styled.div<{
1717
width: 100%;
1818
> .wrapper {
1919
width: ${breakpoints.xlarge};
20-
height: 6rem;
20+
height: 5rem;
2121
margin: 0 auto;
2222
padding-left: 1rem;
2323
padding-right: 1rem;
@@ -43,7 +43,7 @@ const HeaderBlock = styled.div<{
4343

4444
const Placeholder = styled.div`
4545
width: 100%;
46-
height: 4rem;
46+
height: 5rem;
4747
`;
4848

4949
interface HeaderProps {

‎src/components/common/MarkdownRender.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import htmlPlugin from 'remark-html';
55
import prismPlugin from '../../lib/remark/prismPlugin';
66
import prismThemes from '../../lib/styles/prismThemes';
77
import breaks from 'remark-breaks';
8+
import Typography from './Typography';
89

910
export interface MarkdownRenderProps {
1011
markdown: string;
1112
codeTheme?: string;
1213
}
1314

1415
const MarkdownRenderBlock = styled.div`
15-
font-size: 1.3125rem;
1616
&.atom-one-dark {
1717
${prismThemes['atom-one-dark']}
1818
}
@@ -30,13 +30,14 @@ const MarkdownRenderBlock = styled.div`
3030
}
3131
3232
pre {
33-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
34-
monospace;
33+
font-family: 'Fira Mono', source-code-pro, Menlo, Monaco, Consolas,
34+
'Courier New', monospace;
3535
font-size: 1rem;
3636
padding: 1rem;
3737
border-radius: 4px;
3838
line-height: 1.5;
3939
overflow-x: auto;
40+
letter-spacing: 0px;
4041
}
4142
4243
img {
@@ -67,10 +68,12 @@ const MarkdownRender: React.SFC<MarkdownRenderProps> = ({
6768

6869
const markup = { __html: html };
6970
return (
70-
<MarkdownRenderBlock
71-
dangerouslySetInnerHTML={markup}
72-
className={codeTheme}
73-
/>
71+
<Typography>
72+
<MarkdownRenderBlock
73+
dangerouslySetInnerHTML={markup}
74+
className={codeTheme}
75+
/>
76+
</Typography>
7477
);
7578
};
7679

‎src/components/common/Typography.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
import palette from '../../lib/styles/palette';
4+
5+
const TypographyBlock = styled.div`
6+
font-size: 1.125rem;
7+
color: ${palette.gray7};
8+
line-height: 1.75;
9+
letter-spacing: -0.4px;
10+
word-break: keep-all;
11+
word-wrap: break-word;
12+
font-family: 'Spoqa Han Sans';
13+
a {
14+
color: ${palette.teal7};
15+
text-decoration: none;
16+
&:hover {
17+
color: ${palette.teal6};
18+
text-decoration: underline;
19+
}
20+
}
21+
code {
22+
font-family: 'Fira Mono', source-code-pro, Menlo, Monaco, Consolas,
23+
'Courier New', monospace;
24+
}
25+
26+
hr {
27+
border: none;
28+
height: 1px;
29+
width: 100%;
30+
background: #dedede;
31+
margin-top: 2rem;
32+
margin-bottom: 2rem;
33+
}
34+
`;
35+
36+
export interface TypographyProps {}
37+
38+
const Typography: React.FC<TypographyProps> = ({ children }) => {
39+
return <TypographyBlock>{children}</TypographyBlock>;
40+
};
41+
42+
export default Typography;

‎src/components/post/PostContent.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
import MarkdownRender from '../common/MarkdownRender';
4+
import palette from '../../lib/styles/palette';
5+
6+
const PostContentBlock = styled.div`
7+
width: 768px;
8+
margin: 0 auto;
9+
margin-top: 5rem;
10+
`;
11+
12+
export interface PostContentProps {
13+
isMarkdown: boolean;
14+
body: string;
15+
}
16+
17+
const PostContent: React.FC<PostContentProps> = ({ isMarkdown, body }) => {
18+
return (
19+
<PostContentBlock>
20+
{isMarkdown ? <MarkdownRender markdown={body} /> : null}
21+
</PostContentBlock>
22+
);
23+
};
24+
25+
export default PostContent;

‎src/components/post/PostHead.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import PostTags from './PostTags';
88
const PostHeadBlock = styled(VelogResponsive)`
99
margin-top: 5.5rem;
1010
h1 {
11+
font-family: 'Spoqa Han Sans';
1112
font-size: 3rem;
1213
line-height: 1.25;
1314
letter-spacing: -0.02rem;
@@ -21,6 +22,7 @@ const PostHeadBlock = styled(VelogResponsive)`
2122
const SubInfo = styled.div`
2223
font-size: 1rem;
2324
color: ${palette.gray7};
25+
font-family: 'Spoqa Han Sans';
2426
.username {
2527
color: ${palette.gray8};
2628
font-weight: bold;

‎src/components/post/PostHtmlContent.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
4+
const PostHtmlContentBlock = styled.div``;
5+
6+
export interface PostHtmlContentProps {}
7+
8+
const PostHtmlContent: React.FC<PostHtmlContentProps> = props => {
9+
return <PostHtmlContentBlock />;
10+
};
11+
12+
export default PostHtmlContent;

‎src/components/post/PostTags.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const Tag = styled(Link)`
2424
&:hover {
2525
background: ${palette.gray0};
2626
}
27+
font-size: 0.875rem;
2728
`;
2829

2930
export interface PostTagsProps {

‎src/components/post/__tests__/PostContent.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import { render } from 'react-testing-library';
3+
import PostContent, { PostContentProps } from '../PostContent';
4+
5+
describe('PostContent', () => {
6+
const setup = (props: Partial<PostContentProps> = {}) => {
7+
const initialProps: PostContentProps = {
8+
isMarkdown: true,
9+
body: '# Hello World!\n안녕하세요.',
10+
};
11+
const utils = render(<PostContent {...initialProps} {...props} />);
12+
return {
13+
...utils,
14+
};
15+
};
16+
it('renders markdown post', () => {
17+
const { getByText } = setup();
18+
getByText('Hello World!');
19+
getByText('안녕하세요.');
20+
});
21+
});

‎src/components/post/__tests__/PostsTags.tsx renamed to ‎src/components/post/__tests__/PostsTags.test.tsx

File renamed without changes.

‎src/components/write/MarkdownEditor.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import CodeMirror, { EditorFromTextArea } from 'codemirror';
66
import TitleTextarea from './TitleTextarea';
77
require('codemirror/mode/markdown/markdown');
88
require('codemirror/mode/javascript/javascript');
9+
require('codemirror/mode/jsx/jsx');
910
require('codemirror/addon/display/placeholder');
1011
import './atom-one-light.css';
1112
import palette from '../../lib/styles/palette';
@@ -65,10 +66,11 @@ const MarkdownEditorBlock = styled.div`
6566
}
6667
.CodeMirror {
6768
height: auto;
68-
font-size: 1.3125rem;
69+
font-size: 1.125rem;
6970
line-height: 1.5;
7071
color: ${palette.gray8};
71-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
72+
font-family: 'Fira Mono', 'Spoqa Han Sans', monospace;
73+
/* font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', */
7274
monospace;
7375
.cm-header {
7476
line-height: 2;

‎src/components/write/__tests__/__snapshots__/MarkdownPreview.test.tsx.snap

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,20 @@
33
exports[`MarkdownPreview matches snapshot 1`] = `
44
<div>
55
<div
6-
class="sc-bwzfXH iQyFQe"
6+
class="sc-htpNat dTEJyc"
77
>
88
<h1
9-
class="sc-htpNat gQoHLP"
9+
class="sc-bxivhb cFXJHm"
1010
/>
1111
<div
12-
class="atom-one-light sc-bdVaJa bITRcW"
12+
class="sc-bdVaJa hURxoK"
1313
>
14-
14+
<div
15+
class="atom-one-light sc-bwzfXH cEirwM"
16+
>
17+
1518
19+
</div>
1620
</div>
1721
</div>
1822
</div>

‎src/containers/base/HeaderContainer.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@ const HeaderContainer: React.SFC<HeaderContainerProps> = ({
3434

3535
const [floating, setFloating] = useState(false);
3636
const [baseY, setBaseY] = useState(0);
37-
const [floatingMargin, setFloatingMargin] = useState(-60);
37+
const [floatingMargin, setFloatingMargin] = useState(-80);
3838
const onScroll = useCallback(() => {
3939
const scrollTop = getScrollTop();
4040

4141
// turns floating OFF
4242
if (floating && scrollTop === 0) {
4343
setFloating(false);
44-
setFloatingMargin(-60);
44+
setFloatingMargin(-80);
4545
return;
4646
}
4747

4848
if (floating) {
49-
const calculated = -60 + baseY - scrollTop;
49+
const calculated = -80 + baseY - scrollTop;
5050
setFloatingMargin(calculated > 0 ? 0 : calculated);
5151
}
5252

@@ -55,9 +55,9 @@ const HeaderContainer: React.SFC<HeaderContainerProps> = ({
5555
// Fixes flickering issue
5656
if (
5757
d !== direction.current &&
58-
(floatingMargin === 0 || floatingMargin <= -60)
58+
(floatingMargin === 0 || floatingMargin <= -80)
5959
) {
60-
setBaseY(scrollTop + (d === 'DOWN' ? 60 : 0));
60+
setBaseY(scrollTop + (d === 'DOWN' ? 80 : 0));
6161
}
6262

6363
// turns floating ON

‎src/containers/post/PostViewer.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { Query, QueryResult } from 'react-apollo';
33
import { READ_POST, SinglePost } from '../../lib/graphql/post';
44
import PostHead from '../../components/post/PostHead';
5+
import PostContent from '../../components/post/PostContent';
56

67
export interface PostViewerProps {
78
username: string;
@@ -37,6 +38,7 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
3738
!!post.thumbnail && post.body.includes(post.thumbnail)
3839
}
3940
/>
41+
<PostContent isMarkdown={post.is_markdown} body={post.body} />
4042
</>
4143
);
4244
}}

‎src/containers/write/__tests__/__snapshots__/ActiveEditor.test.tsx.snap

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
exports[`ActiveEditor matches snapshot 1`] = `
44
<div>
55
<div
6-
class="sc-hSdWYo lcVLLB"
6+
class="sc-eHgmQL yjeCB"
77
data-testid="quill"
88
>
99
<textarea
10-
class="sc-htpNat sc-iAyFgw kYImpO"
10+
class="sc-htpNat sc-hSdWYo vlAbZ"
1111
placeholder="제목을 입력하세요"
1212
style="height: 0px;"
1313
tabindex="1"
1414
/>
1515
<div
16-
class="sc-eHgmQL qfjoV"
16+
class="sc-cvbbAY btkKsm"
1717
/>
1818
<div
1919
class="sc-chPdSV drnliS"
@@ -264,14 +264,14 @@ exports[`ActiveEditor matches snapshot 1`] = `
264264
</div>
265265
</div>
266266
<div
267-
class="sc-cvbbAY jwSZfN"
267+
class="sc-jWBwVP bbFtdm"
268268
>
269269
<div
270270
tabindex="2"
271271
/>
272272
</div>
273273
<div
274-
class="sc-jWBwVP gTJngf"
274+
class="sc-brqgnP hWMpZm"
275275
>
276276
<div
277277
class="sc-dxgOiQ jULWpa"

‎src/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/%3C/span%3Ecss%3Cspan%20class="x x-first x-last">?family=Noto+Serif+KR:400,700&subset=korean');
1+
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
22
@import url('https://fonts.googleapis.com/css?family=Fira+Mono');
33

44
body {

‎src/lib/styles/prismThemes.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,10 @@ const prismThemes = {
187187
color: #24292e;
188188
}
189189
pre {
190+
box-shadow: 0px 0px 2px #00000005;
191+
background: #fbfcfd;
190192
color: #24292e;
191-
background: white;
193+
/* background: white; */
192194
}
193195
.token.builtin {
194196
color: #0184bc;

0 commit comments

Comments
 (0)