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

Commit 8f4a4c3

Browse files
author
Colin McDonnell
committed
Added proper padding
1 parent d113820 commit 8f4a4c3

File tree

3 files changed

+65
-82
lines changed

3 files changed

+65
-82
lines changed

‎components/BlogPost.tsx‎

Lines changed: 52 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -11,74 +11,66 @@ export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
1111
const { title, subtitle } = post;
1212

1313
return (
14-
<div>
14+
<div
15+
style={{
16+
display: 'flex',
17+
flexDirection: 'row',
18+
justifyContent: 'center',
19+
width: '100%',
20+
padding: '0px 0px 100px 0px',
21+
}}
22+
>
1523
<PostMeta post={post} />
16-
17-
<div
18-
style={{
19-
display: 'flex',
20-
flexDirection: 'row',
21-
justifyContent: 'center',
22-
width: '100%',
23-
padding: '0px 0px 100px 0px',
24-
}}
25-
>
26-
<div style={{ width: '100%', maxWidth: '600px' }}>
27-
{post.bannerPhoto && (
28-
<img
24+
<div style={{ width: '100%', maxWidth: '600px' }}>
25+
{post.bannerPhoto && (
26+
<img
27+
style={{
28+
width: '100%',
29+
// maxHeight: '350px',
30+
maxWidth: '100%',
31+
margin: '0px',
32+
}}
33+
src={post.bannerPhoto}
34+
/>
35+
)}
36+
<div style={{ padding: '50px 3vw 50px 3vw' }}>
37+
{title && (
38+
<h1
2939
style={{
30-
width: '100%',
31-
// maxHeight: '350px',
32-
maxWidth: '100%',
33-
margin: '0px 0px 0px 0px',
40+
margin: '10px 0px 10px 0px',
41+
padding: 0,
42+
border: 'none',
3443
}}
35-
src={post.bannerPhoto}
36-
/>
44+
>
45+
{title}
46+
</h1>
3747
)}
38-
<div style={{ margin: '50px 0px 50px 0px' }}>
39-
{title && (
40-
<h1
41-
style={{
42-
margin: '10px 0px 10px 0px',
43-
padding: 0,
44-
border: 'none',
45-
}}
46-
>
47-
{title}
48-
</h1>
49-
)}
50-
{subtitle && (
51-
<h2
52-
style={{
53-
margin: '10px 0px',
54-
padding: 0,
55-
border: 'none',
56-
fontWeight: 400,
57-
opacity: '0.6',
58-
}}
59-
>
60-
{subtitle}
61-
</h2>
62-
)}
63-
<hr
64-
style={{
65-
height: '1px',
66-
color: '#eee',
67-
opacity: 0.2,
68-
margin: '25px 0px',
69-
}}
70-
/>
71-
72-
<div
48+
{subtitle && (
49+
<h2
7350
style={{
74-
margin: '0px',
75-
padding: '0px',
51+
margin: '10px 0px',
52+
padding: 0,
53+
border: 'none',
54+
fontWeight: 400,
55+
opacity: '0.6',
7656
}}
7757
>
78-
<Author post={post} />
79-
</div>
80-
</div>
58+
{subtitle}
59+
</h2>
60+
)}
61+
<hr
62+
style={{
63+
height: '1px',
64+
color: '#eee',
65+
opacity: 0.2,
66+
margin: '25px 0px',
67+
}}
68+
/>
69+
70+
<Author post={post} />
71+
</div>
8172

73+
<div style={{ width: '100%', padding: '0px 3vw' }}>
8274
<Markdown source={post.content} />
8375
</div>
8476
</div>

‎components/Header.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,7 @@ export const Header: React.FC = () => (
2323
<a href="https://github.com/vriad/devii" style={{ textDecoration: 'none' }}>
2424
<p style={{ padding: '0px 1em', color: 'white' }}>GitHub</p>
2525
</a>
26-
<a
27-
href="https://devii.dev/blog/the-ultimate-tech-stack/"
28-
style={{ textDecoration: 'none' }}
29-
>
26+
<a href="/blog/the-ultimate-tech-stack" style={{ textDecoration: 'none' }}>
3027
<p style={{ padding: '0px 1em', color: 'white' }}>Motivation</p>
3128
</a>
3229
</div>

‎pages/index.tsx‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { config } from '../globals';
88

99
const sectionStyle = {
1010
width: '100%',
11-
padding: '100px 10vw',
11+
padding: '100px 3vw',
1212
display: 'flex',
1313
flexDirection: 'column',
1414
alignItems: 'center',
@@ -28,23 +28,24 @@ const Home = (props: {
2828
<title>Introducing Devii</title>
2929
<link rel="icon" href="/favicon.ico" />
3030
</Head>
31-
<div style={{ maxWidth: '500px', margin: 'auto', padding: '50px 0px' }}>
31+
<div style={{ maxWidth: '550px', margin: 'auto', padding: '50px 3vw' }}>
3232
<Markdown source={props.introduction} />
3333
</div>
3434
<div style={sectionStyle}>
3535
<h2 style={{ margin: '4px 0px', fontSize: '34pt' }}>Features</h2>
36-
<div style={{ maxWidth: '600px' }}>
36+
<div style={{ maxWidth: '550px' }}>
3737
<Markdown source={props.features} />
3838
</div>
3939
</div>
4040
<div style={sectionStyle}>
4141
<h2 style={{ margin: '4px 0px', fontSize: '34pt' }}>My blog posts</h2>
42-
<p style={{ maxWidth: '600px', paddingBottom: '30px', ...pStyle }}>
42+
<p style={{ maxWidth: '550px', paddingBottom: '30px', ...pStyle }}>
4343
This section demonstrates the power of dynamic imports. Every Markdown
4444
file under <code>/md/blog</code> is automatically parsed into a
45-
structured TypeScript object and available in the `props.posts` array.
46-
These blog post "cards" are implemented in the
47-
`/components/PostCard.tsx` component.
45+
structured TypeScript object and available in the{' '}
46+
<code>props.posts</code> array. These blog post "cards" are
47+
implemented in the
48+
<code>/components/PostCard.tsx</code> component.
4849
</p>
4950
<div
5051
style={{
@@ -53,6 +54,7 @@ const Home = (props: {
5354
gridRowGap: '8px',
5455
gridColumnGap: '8px',
5556
width: '100%',
57+
padding: '0px 7vw',
5658
}}
5759
>
5860
{props.posts.map((post, j) => {
@@ -61,15 +63,7 @@ const Home = (props: {
6163
</div>
6264
</div>
6365

64-
<div
65-
style={{
66-
width: '100%',
67-
padding: '100px 0px',
68-
display: 'flex',
69-
flexDirection: 'column',
70-
alignItems: 'center',
71-
}}
72-
>
66+
<div style={{ ...sectionStyle }}>
7367
<h2 style={{ textAlign: 'center', fontSize: '34pt' }}>Testimonials</h2>
7468
<blockquote
7569
style={{
@@ -90,7 +84,7 @@ const Home = (props: {
9084
</blockquote>
9185
</div>
9286

93-
<div style={{ width: '100%', margin: '100px 0px' }}>
87+
<div style={{ ...sectionStyle }}>
9488
<h2 style={{ textAlign: 'center', fontSize: '34pt' }}>README.md</h2>
9589
<p
9690
style={{
@@ -114,7 +108,7 @@ const Home = (props: {
114108
style={{
115109
width: '100%',
116110
backgroundColor: '#eeeeee',
117-
paddingBottom: '50px',
111+
padding: '0px 3vw 50px 3vw',
118112
}}
119113
>
120114
<div

0 commit comments

Comments
 (0)