Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 62ac9e4

Browse files
WholloranWholloran
authored
Merge pull request #363 from openforge/blog-newsletter-redesign
Blog newsletter redesign
2 parents a807264 + 53911b5 commit 62ac9e4

File tree

8 files changed

+299
-243
lines changed

8 files changed

+299
-243
lines changed

‎src/components/app-blog-card/app-blog-card.scss‎

Lines changed: 35 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,53 @@
11
.blog-card {
2-
min-height: 300px;
3-
margin: 0;
4-
5-
h3 {
6-
color: $black;
7-
font-weight: 600;
8-
9-
&:hover {
10-
text-decoration: underline black;
11-
}
2+
.container {
3+
min-width: 90%;
4+
margin-bottom: 2rem;
5+
}
126

13-
@include media-breakpoint-down(sm) {
14-
padding: 15px;
15-
text-align: center;
7+
.blog-title {
8+
h2 {
9+
color: $gray-dark;
10+
margin-bottom: 2rem;
1611
}
1712
}
1813

1914
.blog-card-image {
20-
border-radius: 15px;
21-
height: 263px;
22-
object-fit: cover;
23-
width: 286px;
15+
justify-content: center;
16+
text-align: center;
2417

2518
img {
26-
height: 300px;
19+
padding: 30px 0;
20+
border-radius: 15px;
21+
object-fit: cover;
2722
}
2823
}
2924

30-
.blog-card-content {
31-
display: flex;
32-
flex-direction: column;
33-
justify-content: space-around;
34-
35-
.blog-card-summary {
36-
color: #827e7d;
37-
}
38-
39-
.blog-card-author {
40-
align-items: center;
41-
display: flex;
42-
flex-direction: row;
43-
44-
@include media-breakpoint-down(sm) {
45-
padding: 14px 0 26px;
46-
text-align: left;
47-
}
48-
49-
.profile-image {
50-
border-radius: 50%;
51-
height: 75px;
52-
margin-right: 15px;
53-
object-fit: cover;
54-
width: 75px;
55-
}
25+
.summary {
26+
margin-top: 25px;
27+
margin-bottom: 25px;
28+
}
5629

57-
.profile-text {
58-
color: #827e7d;
59-
}
60-
}
30+
p {
31+
margin: 25px 0;
32+
font-size: 12px;
33+
}
6134

62-
@include media-breakpoint-down(sm) {
63-
text-align: center;
35+
.author {
36+
display: flex;
37+
flex-direction: row;
38+
align-items: center;
39+
40+
.profile-image {
41+
height: 40px;
42+
width: 40px;
43+
object-fit: cover;
44+
margin-right: 15px;
45+
border-radius: 50%;
6446
}
6547
}
6648

67-
hr {
68-
border: 0;
69-
border-top: 2px solid #f1f3f7;
70-
margin-top: 48px;
71-
margin-bottom: 96px;
72-
width: 100%;
49+
.read-more {
50+
font-size: 18px;
51+
text-decoration: underline;
7352
}
7453
}

‎src/components/app-blog-card/app-blog-card.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,34 @@ export class AppBlogCard {
1717
const publishDate = new Date(this.blogPost.published);
1818
return (
1919
<div class="blog-card">
20-
<div class="row">
21-
<div class="col-md-4 text-center">
22-
<img class="blog-card-image" src={this.blogPost.featured_image} />
23-
</div>
24-
<div class="blog-card-content col-md-8">
25-
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
26-
<h3 class="blog-card-title">{this.blogPost.title}</h3>
27-
</stencil-route-link>
28-
<div class="blog-card-summary">{this.blogPost.summary}</div>
29-
<div class="blog-card-author mt-3">
30-
<img class="profile-image" src={this.blogPost.author.profile_image} />
31-
<div class="profile-text">
32-
Published by &nbsp;
33-
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
34-
&nbsp; on {formatDate(publishDate)}
20+
<div class="container">
21+
<div class="row">
22+
<div class="col-md-12">
23+
<div class="blog-card-image">
24+
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
25+
<img src={this.blogPost.featured_image} />
26+
</stencil-route-link>
27+
</div>
28+
<div class="blog-title">
29+
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
30+
<h2>{this.blogPost.title}</h2>
31+
</stencil-route-link>
32+
</div>
33+
<div class="author">
34+
<img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} />
35+
<div>
36+
By &nbsp;
37+
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
38+
&nbsp; on {formatDate(publishDate)}
39+
</div>
3540
</div>
41+
<div class="summary">{this.blogPost.summary}</div>
42+
<stencil-route-link class="read-more" url={`/blog/${this.blogPost.slug}`}>
43+
Read More
44+
</stencil-route-link>
3645
</div>
3746
</div>
3847
</div>
39-
<hr />
4048
</div>
4149
);
4250
}

‎src/components/app-blog-content/app-blog-content.scss‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
text-align: left;
33

44
padding: 0 6rem;
5-
5+
66
h1 {
77
@include media-breakpoint-down(md) {
88
padding: 20px 0;
@@ -13,12 +13,12 @@
1313
margin-bottom: 10px;
1414
}
1515

16-
.--date {
16+
&--date {
1717
color: #6d6e71;
1818
font-size: 12px;
1919
}
2020

21-
.--author {
21+
&--author {
2222
align-items: center;
2323
display: flex;
2424
flex-direction: row;
@@ -37,7 +37,7 @@
3737
}
3838
}
3939

40-
.--main-image {
40+
&--main-image {
4141
border-radius: 35px;
4242
padding: 2%;
4343
width: 100%;
@@ -47,7 +47,6 @@
4747
text-align: center;
4848
padding: 0 1rem;
4949
}
50-
5150
}
5251

5352
.content {
@@ -123,4 +122,4 @@
123122
img {
124123
width: 20px;
125124
}
126-
}
125+
}

‎src/components/app-blog-content/app-blog-content.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,19 @@ export class AppBlogContent {
7777
<h1>{this.blogPost.title}</h1>
7878
<p>{this.blogPost.summary}</p>
7979
<div>
80-
<div class="--date">{formatDate(publishDate)}</div>
81-
<div class="--author">
80+
<div class="header--date">{formatDate(publishDate)}</div>
81+
<div class="header--author">
8282
<img src={this.blogPost.author.profile_image} />
8383
<div>
8484
By &nbsp;
8585
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
8686
</div>
8787
</div>
8888
</div>
89-
<div class="contact-icons-top" id="contact-icons-top">{contactIconsTop}</div>
90-
<img class="--main-image" src={this.blogPost.featured_image} />
89+
<div class="contact-icons-top" id="contact-icons-top">
90+
{contactIconsTop}
91+
</div>
92+
<img class="header--main-image" src={this.blogPost.featured_image} />
9193
</div>
9294
<div class="content">
9395
<div class="row">

‎src/components/app-blog-featured/app-blog-featured.scss‎

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,37 @@
11
.blog-featured {
2-
32
.container {
43
min-width: 90%;
54
margin-bottom: 2rem;
6-
7-
@include media-breakpoint-down(sm) {
8-
text-align: center;
9-
}
105
}
116

127
.featured-title {
138
h2 {
149
color: $gray-dark;
1510
margin-bottom: 2rem;
1611
}
12+
}
1713

18-
h4 {
19-
@include media-breakpoint-down(sm) {
20-
margin-top: 4rem;
21-
}
14+
.featured-post-title {
15+
h2 {
16+
color: $gray-dark;
17+
margin-bottom: 2rem;
2218
}
2319
}
2420

2521
.featured-image {
26-
border-collapse: separate;
27-
display: flex;
2822
justify-content: center;
2923
text-align: center;
3024

3125
img {
32-
height: 75%;
33-
width: 75%;
34-
35-
@include media-breakpoint-up(sm) {
36-
border-radius: 15px;
37-
margin-top: 2rem;
38-
object-fit: cover;
39-
}
26+
padding: 30px 0;
27+
border-radius: 15px;
28+
object-fit: cover;
4029
}
4130
}
4231

4332
.summary {
4433
margin-top: 25px;
34+
margin-bottom: 25px;
4535
}
4636

4737
p {
@@ -55,30 +45,16 @@
5545
align-items: center;
5646

5747
.profile-image {
58-
height: 75px;
59-
width: 75px;
48+
height: 40px;
49+
width: 40px;
6050
object-fit: cover;
6151
margin-right: 15px;
6252
border-radius: 50%;
6353
}
64-
65-
@include media-breakpoint-down(sm) {
66-
padding-bottom: 20px;
67-
justify-content: center;
68-
}
6954
}
7055

71-
.btn {
72-
&:after {
73-
content: "Read More";
74-
}
75-
76-
@include media-breakpoint-down(sm) {
77-
position: relative;
78-
79-
&:after {
80-
content: "See What's Inside";
81-
}
82-
}
56+
.read-more {
57+
font-size: 18px;
58+
text-decoration: underline;
8359
}
8460
}

‎src/components/app-blog-featured/app-blog-featured.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,36 @@ export class AppBlogFeatured {
1919
<div class="blog-featured">
2020
<div class="container">
2121
<div class="row">
22-
<div class="col-md-6 order-md-2 flex-column featured-image">
23-
<div class="d-block d-sm-block d-md-none">
24-
<h4>What's New in Our Blog</h4>
25-
</div>
26-
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
27-
<img src={this.blogPost.featured_image} />
28-
</stencil-route-link>
29-
</div>
30-
<div class="col-md-6 order-md-1">
22+
<div class="col-md-12">
3123
<div class="featured-title">
3224
<div class="d-none d-md-block">
3325
<h4>What's New in Our Blog</h4>
3426
</div>
35-
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
36-
<h2>{this.blogPost.title}</h2>
37-
</stencil-route-link>
27+
<div class="d-block d-sm-block d-md-none">
28+
<h4>Featured Post</h4>
29+
</div>
30+
</div>
31+
<div class="featured-image">
32+
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
33+
<img src={this.blogPost.featured_image} />
34+
</stencil-route-link>
35+
</div>
36+
<div class="featured-post-title">
37+
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
38+
<h2>{this.blogPost.title}</h2>
39+
</stencil-route-link>
3840
</div>
39-
<div class="summary">{this.blogPost.summary}</div>
40-
<p class="date">{formatDate(publishDate)}</p>
4141
<div class="author">
42-
<img class="profile-image" src={this.blogPost.author.profile_image} />
42+
<img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} />
4343
<div>
4444
By &nbsp;
4545
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
46+
&nbsp; on {formatDate(publishDate)}
4647
</div>
4748
</div>
48-
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
49-
<button class="btn btn-primary mt-5"></button>
49+
<div class="summary">{this.blogPost.summary}</div>
50+
<stencil-route-link class="read-more" url={`/blog/${this.blogPost.slug}`}>
51+
Read More
5052
</stencil-route-link>
5153
</div>
5254
</div>

0 commit comments

Comments
 (0)