Skip to content
This repository was archived by the owner on Jun 14, 2024. It is now read-only.

Commit 1232e14

Browse files
jonwinstanleyjonwinstanley
committed
Move all styles out of components and into a base CSS file
Make images full width Align images in postcards Add simple font-sizing
1 parent 884e417 commit 1232e14

File tree

11 files changed

+419
-488
lines changed

11 files changed

+419
-488
lines changed

‎components/Author.tsx‎

Lines changed: 8 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,17 @@ import { PostData } from '../loader';
55
export const FollowButton = () => {
66
return (
77
<a href="/newsletter">
8-
<div
9-
style={{
10-
display: 'inline-block',
11-
border: `1px solid ${globals.accentColor}`,
12-
borderRadius: '4px',
13-
padding: '2px 10px',
14-
color: globals.accentColor,
15-
fontSize: '10pt',
16-
marginBottom: '2px',
17-
marginLeft: '4px',
18-
}}
19-
>
20-
Follow
21-
</div>
8+
<div className="follow-button">Follow</div>
229
</a>
2310
);
2411
};
2512

2613
export const Author: React.FC<{ post: PostData }> = (props) => {
2714
return (
28-
<div
29-
style={{
30-
margin: '0px',
31-
padding: '0px',
32-
}}
33-
>
34-
<div
35-
style={{
36-
display: 'flex',
37-
flexDirection: 'row',
38-
alignItems: 'center',
39-
justifyContent: 'flex-start',
40-
}}
41-
>
15+
<div className="author-container">
16+
<div className="author">
4217
{props.post.authorPhoto && (
43-
<img
44-
src={props.post.authorPhoto}
45-
style={{
46-
width: '70px',
47-
height: '70px',
48-
borderRadius: '35px',
49-
margin: '0px 10px 0px 0px',
50-
}}
51-
/>
18+
<img src={props.post.authorPhoto} className="author-image" />
5219
)}
5320
<AuthorLines post={props.post} />
5421
</div>
@@ -57,33 +24,21 @@ export const Author: React.FC<{ post: PostData }> = (props) => {
5724
};
5825

5926
export const AuthorLines: React.FC<{ post: PostData }> = (props) => {
60-
const lineStyle = {
61-
margin: '2px',
62-
padding: 0,
63-
lineHeight: 1.2,
64-
fontSize: '11pt',
65-
};
6627
return (
6728
<div>
68-
<p style={{ ...lineStyle }}>
29+
<p className="author-line">
6930
{props.post.author
7031
? props.post.author
7132
: ''}
7233
</p>
73-
<p style={{ opacity: 0.6, ...lineStyle }}>
34+
<p className="author-line subtle">
7435
{props.post.datePublished
7536
? format(new Date(props.post.datePublished), 'MMMM Do, YYYY')
7637
: ''}
7738
</p>
78-
<p style={{ ...lineStyle }}>
39+
<p className="author-line">
7940
{props.post.authorTwitter && (
80-
<a
81-
style={{
82-
textDecoration: 'none',
83-
color: '#3b9488',
84-
}}
85-
href={`https://twitter.com/${props.post.authorTwitter}`}
86-
>{`@${props.post.authorTwitter}`}</a>
41+
<a href={`https://twitter.com/${props.post.authorTwitter}`}>{`@${props.post.authorTwitter}`}</a>
8742
)}
8843
</p>
8944
</div>

‎components/BlogPost.tsx‎

Lines changed: 9 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,34 @@
11
import React from 'react';
2+
import { Author } from './Author';
23
import { Markdown } from './Markdown';
34
import { PostData } from '../loader';
45
import { PostMeta } from './PostMeta';
5-
import { Author } from './Author';
66

77
export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
88
post,
99
}) => {
1010
const { title, subtitle } = post;
1111
return (
12-
<div
13-
style={{
14-
display: 'flex',
15-
flexDirection: 'row',
16-
justifyContent: 'center',
17-
width: '100%',
18-
padding: '0px 0px 100px 0px',
19-
}}
20-
>
12+
<div className="blog-post">
2113
<PostMeta post={post} />
22-
<div style={{ width: '100%', maxWidth: '600px' }}>
2314
{post.bannerPhoto && (
24-
<img
25-
style={{
26-
width: '100%',
27-
maxWidth: '100%',
28-
margin: '0px',
29-
}}
30-
src={post.bannerPhoto}
31-
/>
15+
<img className="blog-post-image" src={post.bannerPhoto} />
3216
)}
33-
<div style={{ padding: '50px 3vw 50px 3vw' }}>
17+
18+
<div className="blog-post-title">
3419
{title && (
35-
<h1
36-
style={{
37-
margin: '10px 0px 10px 0px',
38-
padding: 0,
39-
border: 'none',
40-
}}
41-
>
42-
{title}
43-
</h1>
20+
<h1>{title}</h1>
4421
)}
4522
{subtitle && (
46-
<h2
47-
style={{
48-
margin: '10px 0px',
49-
padding: 0,
50-
border: 'none',
51-
fontWeight: 400,
52-
opacity: '0.6',
53-
}}
54-
>
55-
{subtitle}
56-
</h2>
23+
<h2>{subtitle}</h2>
5724
)}
58-
<hr
59-
style={{
60-
height: '1px',
61-
color: '#eee',
62-
opacity: 0.2,
63-
margin: '25px 0px',
64-
}}
65-
/>
25+
<hr />
6626
<Author post={post} />
6727
</div>
6828

69-
<div style={{ width: '100%', padding: '0px 3vw' }}>
29+
<div className="blog-post-content">
7030
<Markdown source={post.content} />
7131
</div>
72-
</div>
7332
</div>
7433
);
7534
};

‎components/Footer.tsx‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,7 @@ import React from 'react';
22
import { globals } from '../globals';
33

44
export const Footer: React.FC = () => (
5-
<div
6-
style={{
7-
top: 0,
8-
width: '100%',
9-
height: '50px',
10-
display: 'flex',
11-
flexDirection: 'row',
12-
alignItems: 'center',
13-
justifyContent: 'space-between',
14-
backgroundColor: globals.accentColor,
15-
color: 'white',
16-
padding: '30px',
17-
fontSize: '12pt',
18-
}}
19-
>
5+
<div className="footer">
206
<p>{`© ${globals.yourName} ${new Date().getFullYear()}`}</p>
217
<a href="/rss.xml">
228
<img src="/img/rss-white.svg" alt="RSS Feed" height="30" width="30" />

‎components/Header.tsx‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,10 @@ import React from 'react';
22
import { globals } from '../globals';
33

44
export const Header: React.FC = () => (
5-
<div
6-
style={{
7-
top: 0,
8-
width: '100%',
9-
height: '50px',
10-
display: 'flex',
11-
flexDirection: 'row',
12-
alignItems: 'center',
13-
justifyContent: 'space-between',
14-
backgroundColor: globals.accentColor,
15-
padding: '30px',
16-
fontSize: '12pt',
17-
}}
18-
>
19-
<a href="/" style={{ textDecoration: 'none' }}>
20-
<p style={{ color: 'white' }}>{globals.siteName}</p>
21-
</a>
22-
<div style={{ flex: 1 }} />
23-
<a href="https://github.com/vriad/devii" style={{ textDecoration: 'none' }}>
24-
<p style={{ padding: '0px 1em', color: 'white' }}>GitHub</p>
25-
</a>
26-
<a href="/blog/the-ultimate-tech-stack" style={{ textDecoration: 'none' }}>
27-
<p style={{ padding: '0px 1em', color: 'white' }}>Motivation</p>
28-
</a>
5+
<div className="header">
6+
<a href="/">{globals.siteName}</a>
7+
<div className="flex-spacer" />
8+
<a href="https://github.com/vriad/devii">GitHub</a>
9+
<a href="/blog/the-ultimate-tech-stack">Motivation</a>
2910
</div>
3011
);

‎components/Markdown.tsx‎

Lines changed: 0 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -13,115 +13,6 @@ export const Markdown: React.FC<{ source: string }> = (props) => {
1313
}}
1414
escapeHtml={false}
1515
/>
16-
<style jsx global>{`
17-
.devii-markdown p,
18-
.devii-markdown li {
19-
line-height: 1.7;
20-
color: #333;
21-
}
22-
23-
.devii-markdown h1,
24-
.devii-markdown h2,
25-
.devii-markdown h3,
26-
.devii-markdown h4,
27-
.devii-markdown h5,
28-
.devii-markdown h6 {
29-
margin: 0px;
30-
padding: 0px;
31-
}
32-
33-
.devii-markdown h1 > a,
34-
.devii-markdown h2 > a,
35-
.devii-markdown h3 > a,
36-
.devii-markdown h4 > a,
37-
.devii-markdown h5 > a,
38-
.devii-markdown h6 > a {
39-
text-decoration: none;
40-
}
41-
42-
.devii-markdown hr {
43-
margin: 20px 0px;
44-
opacity: 0.35;
45-
}
46-
47-
.devii-markdown h1 {
48-
padding-top: 30px;
49-
padding-bottom: 10px;
50-
margin-top: 30px;
51-
margin-bottom: 30px;
52-
}
53-
54-
.devii-markdown h2 {
55-
padding-top: 25px;
56-
padding-bottom: 10px;
57-
margin-top: 25px;
58-
margin-bottom: 25px;
59-
}
60-
61-
.devii-markdown h3 {
62-
padding-top: 20px;
63-
padding-bottom: 10px;
64-
margin-top: 20px;
65-
margin-bottom: 20px;
66-
}
67-
68-
.devii-markdown h4 {
69-
padding-top: 15px;
70-
padding-bottom: 10px;
71-
margin-top: 15px;
72-
margin-bottom: 15px;
73-
}
74-
75-
.devii-markdown h5 {
76-
padding-top: 10px;
77-
padding-bottom: 10px;
78-
margin-top: 10px;
79-
margin-bottom: 10px;
80-
}
81-
82-
.devii-markdown h6 {
83-
padding-top: 5px;
84-
padding-bottom: 10px;
85-
margin-top: 5px;
86-
margin-bottom: 5px;
87-
}
88-
89-
.devii-markdown p {
90-
padding: 10px 0px;
91-
margin: 10px 0px;
92-
}
93-
94-
.devii-markdown li {
95-
padding: 10px 0px;
96-
}
97-
98-
.devii-markdown img {
99-
width: 100%;
100-
border-radius: 8px;
101-
box-shadow: 0px 4px 30px #00000040;
102-
}
103-
104-
.devii-markdown code {
105-
background-color: #00000010;
106-
padding: 3px 3px;
107-
border-radius: 2px;
108-
}
109-
110-
.devii-markdown pre {
111-
margin: 20px 0px !important;
112-
}
113-
114-
.devii-markdown ol pre,
115-
.devii-markdown ol p {
116-
margin: 0px 0px !important;
117-
}
118-
119-
.devii-markdown blockquote {
120-
margin: 0px;
121-
padding-left: 1em;
122-
border-left: 4px solid ${globals.accentColor};
123-
}
124-
`}</style>
12516
</div>
12617
);
12718
};

0 commit comments

Comments
 (0)