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

Commit

Permalink
Move all styles out of components and into a base CSS file
Browse files Browse the repository at this point in the history 
Make images full width
Align images in postcards
Add simple font-sizing
  • Loading branch information
@jonwinstanley
jonwinstanley committed Oct 27, 2020
1 parent 884e417 commit 1232e14
Show file tree
Hide file tree
Showing 11 changed files with 419 additions and 488 deletions.
61 changes: 8 additions & 53 deletions components/Author.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,17 @@ import { PostData } from '../loader';
export const FollowButton = () => {
return (
<a href="/newsletter">
<div
style={{
display: 'inline-block',
border: `1px solid ${globals.accentColor}`,
borderRadius: '4px',
padding: '2px 10px',
color: globals.accentColor,
fontSize: '10pt',
marginBottom: '2px',
marginLeft: '4px',
}}
>
Follow
</div>
<div className="follow-button">Follow</div>
</a>
);
};

export const Author: React.FC<{ post: PostData }> = (props) => {
return (
<div
style={{
margin: '0px',
padding: '0px',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
}}
>
<div className="author-container">
<div className="author">
{props.post.authorPhoto && (
<img
src={props.post.authorPhoto}
style={{
width: '70px',
height: '70px',
borderRadius: '35px',
margin: '0px 10px 0px 0px',
}}
/>
<img src={props.post.authorPhoto} className="author-image" />
)}
<AuthorLines post={props.post} />
</div>
Expand All @@ -57,33 +24,21 @@ export const Author: React.FC<{ post: PostData }> = (props) => {
};

export const AuthorLines: React.FC<{ post: PostData }> = (props) => {
const lineStyle = {
margin: '2px',
padding: 0,
lineHeight: 1.2,
fontSize: '11pt',
};
return (
<div>
<p style={{ ...lineStyle }}>
<p className="author-line">
{props.post.author
? props.post.author
: ''}
</p>
<p style={{ opacity: 0.6, ...lineStyle }}>
<p className="author-line subtle">
{props.post.datePublished
? format(new Date(props.post.datePublished), 'MMMM Do, YYYY')
: ''}
</p>
<p style={{ ...lineStyle }}>
<p className="author-line">
{props.post.authorTwitter && (
<a
style={{
textDecoration: 'none',
color: '#3b9488',
}}
href={`https://twitter.com/${props.post.authorTwitter}`}
>{`@${props.post.authorTwitter}`}</a>
<a href={`https://twitter.com/${props.post.authorTwitter}`}>{`@${props.post.authorTwitter}`}</a>
)}
</p>
</div>
Expand Down
59 changes: 9 additions & 50 deletions components/BlogPost.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,34 @@
import React from 'react';
import { Author } from './Author';
import { Markdown } from './Markdown';
import { PostData } from '../loader';
import { PostMeta } from './PostMeta';
import { Author } from './Author';

export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
post,
}) => {
const { title, subtitle } = post;
return (
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
width: '100%',
padding: '0px 0px 100px 0px',
}}
>
<div className="blog-post">
<PostMeta post={post} />
<div style={{ width: '100%', maxWidth: '600px' }}>
{post.bannerPhoto && (
<img
style={{
width: '100%',
maxWidth: '100%',
margin: '0px',
}}
src={post.bannerPhoto}
/>
<img className="blog-post-image" src={post.bannerPhoto} />
)}
<div style={{ padding: '50px 3vw 50px 3vw' }}>

<div className="blog-post-title">
{title && (
<h1
style={{
margin: '10px 0px 10px 0px',
padding: 0,
border: 'none',
}}
>
{title}
</h1>
<h1>{title}</h1>
)}
{subtitle && (
<h2
style={{
margin: '10px 0px',
padding: 0,
border: 'none',
fontWeight: 400,
opacity: '0.6',
}}
>
{subtitle}
</h2>
<h2>{subtitle}</h2>
)}
<hr
style={{
height: '1px',
color: '#eee',
opacity: 0.2,
margin: '25px 0px',
}}
/>
<hr />
<Author post={post} />
</div>

<div style={{ width: '100%', padding: '0px 3vw' }}>
<div className="blog-post-content">
<Markdown source={post.content} />
</div>
</div>
</div>
);
};
16 changes: 1 addition & 15 deletions components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,7 @@ import React from 'react';
import { globals } from '../globals';

export const Footer: React.FC = () => (
<div
style={{
top: 0,
width: '100%',
height: '50px',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: globals.accentColor,
color: 'white',
padding: '30px',
fontSize: '12pt',
}}
>
<div className="footer">
<p>{`© ${globals.yourName} ${new Date().getFullYear()}`}</p>
<a href="/rss.xml">
<img src="/img/rss-white.svg" alt="RSS Feed" height="30" width="30" />
Expand Down
29 changes: 5 additions & 24 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,10 @@ import React from 'react';
import { globals } from '../globals';

export const Header: React.FC = () => (
<div
style={{
top: 0,
width: '100%',
height: '50px',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: globals.accentColor,
padding: '30px',
fontSize: '12pt',
}}
>
<a href="/" style={{ textDecoration: 'none' }}>
<p style={{ color: 'white' }}>{globals.siteName}</p>
</a>
<div style={{ flex: 1 }} />
<a href="https://github.com/vriad/devii" style={{ textDecoration: 'none' }}>
<p style={{ padding: '0px 1em', color: 'white' }}>GitHub</p>
</a>
<a href="/blog/the-ultimate-tech-stack" style={{ textDecoration: 'none' }}>
<p style={{ padding: '0px 1em', color: 'white' }}>Motivation</p>
</a>
<div className="header">
<a href="/">{globals.siteName}</a>
<div className="flex-spacer" />
<a href="https://github.com/vriad/devii">GitHub</a>
<a href="/blog/the-ultimate-tech-stack">Motivation</a>
</div>
);
109 changes: 0 additions & 109 deletions components/Markdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,115 +13,6 @@ export const Markdown: React.FC<{ source: string }> = (props) => {
}}
escapeHtml={false}
/>
<style jsx global>{`
.devii-markdown p,
.devii-markdown li {
line-height: 1.7;
color: #333;
}
.devii-markdown h1,
.devii-markdown h2,
.devii-markdown h3,
.devii-markdown h4,
.devii-markdown h5,
.devii-markdown h6 {
margin: 0px;
padding: 0px;
}
.devii-markdown h1 > a,
.devii-markdown h2 > a,
.devii-markdown h3 > a,
.devii-markdown h4 > a,
.devii-markdown h5 > a,
.devii-markdown h6 > a {
text-decoration: none;
}
.devii-markdown hr {
margin: 20px 0px;
opacity: 0.35;
}
.devii-markdown h1 {
padding-top: 30px;
padding-bottom: 10px;
margin-top: 30px;
margin-bottom: 30px;
}
.devii-markdown h2 {
padding-top: 25px;
padding-bottom: 10px;
margin-top: 25px;
margin-bottom: 25px;
}
.devii-markdown h3 {
padding-top: 20px;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
.devii-markdown h4 {
padding-top: 15px;
padding-bottom: 10px;
margin-top: 15px;
margin-bottom: 15px;
}
.devii-markdown h5 {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.devii-markdown h6 {
padding-top: 5px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.devii-markdown p {
padding: 10px 0px;
margin: 10px 0px;
}
.devii-markdown li {
padding: 10px 0px;
}
.devii-markdown img {
width: 100%;
border-radius: 8px;
box-shadow: 0px 4px 30px #00000040;
}
.devii-markdown code {
background-color: #00000010;
padding: 3px 3px;
border-radius: 2px;
}
.devii-markdown pre {
margin: 20px 0px !important;
}
.devii-markdown ol pre,
.devii-markdown ol p {
margin: 0px 0px !important;
}
.devii-markdown blockquote {
margin: 0px;
padding-left: 1em;
border-left: 4px solid ${globals.accentColor};
}
`}</style>
</div>
);
};
Loading

0 comments on commit 1232e14

Please sign in to comment.