Skip to content

Commit 6042d67

Browse files
DannyRuchtieDannyRuchtie
authored
Blog redesign v2 (codesandbox#3890)
* Design with code - Redesign Blogpages Design with code - Redesign Blogpages * Twead grid for mobile * Fixed 1440 consistancy bug * Fixed mobile ui blog pages * tweak tweak * fixed alignment issue * Added back to blog overview button * forgot hover transition * Fixed the alt tag codesandbox#3890 (comment)
1 parent f57a31f commit 6042d67

File tree

9 files changed

+258
-194
lines changed

9 files changed

+258
-194
lines changed

‎packages/homepage/content/articles/codesandbox-ci-embeds/images/banner.png

-13.6 KB
Loading

‎packages/homepage/content/articles/hello-template-universe-goodbye-project-setup/images/banner.png

188 KB
Loading

‎packages/homepage/content/articles/new-look-editor/images/banner.png

-22.7 KB
Loading

‎packages/homepage/content/articles/redefining-code-collaboration/images/banner.png

-163 KB
Loading

‎packages/homepage/src/components/PageContainer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
44
import Padding from '@codesandbox/common/lib/components/spacing/Padding';
55

66
export default ({ children, ...props }) => (
7-
<MaxWidth responsive width={1440} {...props}>
7+
<MaxWidth responsive width={1200} {...props}>
88
<Padding top={4.5} bottom={1}>
99
{children}
1010
</Padding>

‎packages/homepage/src/pages/blog/_elements.js

Lines changed: 99 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,124 @@
1-
import styled, { css } from 'styled-components';
2-
3-
export const Posts = styled.article`
4-
display: flex;
5-
align-items: flex-start;
6-
background: ${props => props.theme.background2};
7-
border-radius: 4px;
8-
padding: 1rem;
9-
margin-bottom: 30px;
10-
11-
@media screen and (max-width: 1200px) {
12-
flex-direction: column;
1+
import styled from 'styled-components';
2+
3+
export const Header = styled.section`
4+
text-align: center;
5+
padding: 1rem 0rem;
6+
color: rgb(242, 242, 242);
7+
margin-bottom: 2rem;
8+
word-break: normal;
9+
10+
@media screen and (min-width: 768px) {
11+
padding: 4rem 0rem;
12+
}
13+
14+
@media screen and (min-width: 960px) {
15+
padding: 8rem;
1316
}
1417
`;
1518

16-
export const Subtitle = styled.h3`
17-
font-weight: 500;
18-
font-size: 1rem;
19-
line-height: 1.5;
19+
export const PageTitle = styled.h1`
20+
font-size: 2.5rem;
21+
line-height: 3rem;
22+
font-weight: 700;
2023
21-
color: #b8b9ba;
22-
`;
24+
letter-spacing: -0.02rem;
2325
24-
export const Thumbnail = styled.img`
25-
margin-right: 25px;
26+
@media screen and (min-width: 768px) {
27+
font-size: 4rem;
28+
line-height: 5rem;
29+
}
2630
27-
@media screen and (max-width: 1200px) {
28-
margin-bottom: 25px;
29-
width: 100%;
31+
@media screen and (min-width: 960px) {
32+
font-size: 4.5rem;
33+
line-height: 5.5rem;
3034
}
3135
`;
3236

33-
export const Aside = styled.aside`
34-
section {
35-
display: flex;
36-
align-items: center;
37-
}
37+
export const PageSubtitle = styled.h3`
38+
font-size: 1.5rem;
39+
line-height: 1.5;
40+
font-weight: 400;
41+
padding: 0 2rem;
42+
margin: 0 0 1.0875rem;
43+
}
3844
39-
${({ mobile }) =>
40-
!mobile &&
41-
css`
42-
@media screen and (max-width: 850px) {
43-
display: none;
44-
}
45-
`};
46-
${({ mobile }) =>
47-
mobile &&
48-
css`
49-
display: flex;
50-
align-items: flex-start;
51-
justify-content: space-between;
52-
flex-direction: row-reverse;
53-
margin-top: 25px;
54-
width: 100%;
55-
@media screen and (min-width: 851px) {
56-
display: none;
57-
}
58-
`};
45+
@media screen and (min-width: 768px) {
46+
font-size: 2rem;
47+
line-height: 1.5;
48+
}
5949
`;
6050

61-
export const Wrapper = styled.div`
51+
export const Grid = styled.div`
52+
max-width: 960px;
53+
margin: 0 auto;
54+
width: 100%;
6255
display: grid;
63-
grid-template-columns: 250px 1fr;
64-
grid-gap: 90px;
56+
grid-template-columns: 1fr;
57+
grid-column-gap: 2rem;
58+
grid-row-gap: 4rem;
6559
66-
@media screen and (max-width: 850px) {
67-
grid-template-columns: 1fr;
60+
> div {
61+
transform: scale(1);
62+
transition: all 0.2s ease-in-out;
6863
}
69-
`;
7064
71-
export const Header = styled.section`
72-
background-color: #0971f1;
73-
border-radius: 4px;
74-
padding: 30px;
75-
color: #f2f2f2;
76-
77-
margin-bottom: 30px;
65+
> div :hover {
66+
transform: scale(0.98);
67+
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
68+
}
7869
79-
width: calc(100% - 340px);
80-
margin-left: 340px;
70+
@media screen and (min-width: 768px) {
71+
grid-template-columns: 1fr 1fr;
8172
82-
@media screen and (max-width: 850px) {
83-
width: 100%;
84-
margin-left: 0;
73+
> div:nth-child(-n + 1) {
74+
grid-column-start: 1;
75+
grid-column-end: 3;
76+
}
8577
}
8678
`;
8779

88-
export const PageTitle = styled.h1`
89-
font-weight: 600;
90-
font-size: 36px;
91-
letter-spacing: -0.04em;
80+
export const Wrapper = styled.div`
81+
border: 1px solid #242424;
82+
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
83+
overflow: hidden;
84+
border-radius: 0.5rem;
85+
clip-path: inset(0px round 0.5rem);
86+
background: #151515;
87+
`;
88+
89+
export const CardContent = styled.div`
90+
padding: 2.5rem 2rem 3rem 2rem;
91+
`;
92+
93+
export const Thumbnail = styled.img`
94+
border: none;
95+
border-bottom: 1px solid #242424;
96+
min-width: 100%;
97+
background-size: cover;
98+
background-position: center center;
9299
`;
93100

94-
export const PageSubtitle = styled.h2`
95-
font-weight: 600;
96-
font-size: 18px;
101+
export const Posts = styled.article``;
102+
103+
export const Title = styled.h2`
104+
color: #fff;
105+
margin: 0 0 0.5rem 0;
106+
font-size: 23px;
97107
line-height: 1.5;
98-
margin-bottom: 0;
108+
font-weight: 700;
109+
`;
110+
111+
export const Subtitle = styled.p`
112+
color: rgba(255, 255, 255, 0.7);
113+
font-size: 1.1rem;
114+
line-height: 1.6rem;
115+
font-weight: 300;
116+
color: rgba(255, 255, 255, 0.75);
117+
`;
118+
119+
export const PublishDate = styled.p`
120+
color: rgba(255, 255, 255, 0.75);
121+
font-size: 1rem;
122+
line-height: 1;
123+
font-weight: 300;
99124
`;

‎packages/homepage/src/pages/blog/index.js

Lines changed: 34 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,78 @@
1-
import { format } from 'date-fns';
21
import { graphql, Link } from 'gatsby';
2+
33
import React from 'react';
44

55
import Layout from '../../components/layout';
66
import PageContainer from '../../components/PageContainer';
7-
import {
8-
Author,
9-
AuthorImage,
10-
PostDate,
11-
Title,
12-
} from '../../components/PostElements';
7+
138
import TitleAndMetaTags from '../../components/TitleAndMetaTags';
149

1510
import {
1611
Posts,
1712
Subtitle,
18-
Thumbnail,
13+
Grid,
1914
Wrapper,
20-
Aside,
15+
CardContent,
16+
Thumbnail,
17+
Title,
18+
PublishDate,
2119
Header,
2220
PageTitle,
2321
PageSubtitle,
2422
} from './_elements';
2523

26-
const Info = ({ authors, date, mobile, photo, ...props }) => (
27-
<Aside mobile={mobile} {...props}>
28-
<PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
29-
30-
{authors.map(author => (
31-
<section key={author.name}>
32-
<AuthorImage src={photo} alt={author} />
33-
34-
<Author>{author}</Author>
35-
</section>
36-
))}
37-
</Aside>
38-
);
39-
4024
const Blog = ({
4125
data: {
4226
allBlogPosts: { edges: blogPosts },
4327
},
4428
}) => (
4529
<Layout>
46-
<PageContainer width={1440}>
30+
<PageContainer>
4731
<TitleAndMetaTags
4832
description="Here you can find articles written by the team and external contributors"
4933
title="Blog - CodeSandbox"
5034
/>
5135

5236
<Header>
53-
<PageTitle>Blog</PageTitle>
37+
<PageTitle>CodeSandbox Blog</PageTitle>
5438

5539
<PageSubtitle>
56-
Welcome to the CodeSandbox blog. Here you can find posts about new
57-
releases, tips and tricks and how we made CodeSandbox.
40+
Read all about new releases, tips, tricks and how CodeSandbox is build
5841
</PageSubtitle>
5942
</Header>
6043

61-
{blogPosts.map(
62-
({
63-
node: {
64-
fields: { authors, date, description, photo, slug, title },
65-
frontmatter: {
66-
banner: { publicURL: banner },
44+
<Grid>
45+
{blogPosts.map(
46+
({
47+
node: {
48+
fields: { authors, description, slug, title },
49+
frontmatter: {
50+
banner: { publicURL: banner },
51+
},
52+
id,
6753
},
68-
id,
69-
},
70-
}) => (
71-
<Wrapper key={id}>
72-
<Info authors={authors} date={date} photo={photo} />
73-
74-
<Posts>
75-
{banner && (
54+
}) => (
55+
<Wrapper key={id} width={768}>
56+
<Posts>
7657
<Link
7758
css={`
78-
display: contents;
7959
text-decoration: none;
8060
`}
8161
to={`post/${slug}`}
8262
>
83-
<Thumbnail alt={title} src={banner} width="340" />
84-
</Link>
85-
)}
63+
<Thumbnail alt={title} src={banner} />
8664

87-
<div>
88-
<Link
89-
css={`
90-
text-decoration: none;
91-
`}
92-
to={`post/${slug}`}
93-
>
94-
<Title>{title}</Title>
65+
<CardContent>
66+
<Title>{title}</Title>
67+
<PublishDate>{authors}</PublishDate>
68+
<Subtitle>{description}</Subtitle>
69+
</CardContent>
9570
</Link>
96-
97-
<Subtitle>{description}</Subtitle>
98-
</div>
99-
100-
<Info authors={authors} date={date} mobile photo={photo} />
101-
</Posts>
102-
</Wrapper>
103-
)
104-
)}
71+
</Posts>
72+
</Wrapper>
73+
)
74+
)}
75+
</Grid>
10576
</PageContainer>
10677
</Layout>
10778
);
@@ -115,9 +86,9 @@ export const query = graphql`
11586
edges {
11687
node {
11788
fields {
118-
authors
11989
date
12090
description
91+
authors
12192
photo
12293
slug
12394
title

0 commit comments

Comments
 (0)