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

Commit 59fee80

Browse files
Fdom92Fdom92
committed
feat(blog): started new designs
1 parent a696bc6 commit 59fee80

File tree

5 files changed

+55
-34
lines changed

5 files changed

+55
-34
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
.blog-card {
2+
a {
3+
color: #4099a8;
4+
}
5+
6+
.author a {
7+
text-decoration: underline;
8+
}
9+
210
.container {
311
min-width: 90%;
412
margin-bottom: 2rem;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
.blog-featured {
2+
a {
3+
color: #4099a8;
4+
}
5+
6+
.author a {
7+
text-decoration: underline;
8+
}
9+
210
.container {
311
min-width: 90%;
412
margin-bottom: 2rem;

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,9 @@ export class AppBlogFeatured {
1919
<div class="row">
2020
<div class="col-md-12">
2121
<div class="featured-title">
22-
<div class="d-none d-md-block">
22+
<div>
2323
<h4>What's New in Our Blog</h4>
2424
</div>
25-
<div class="d-block d-sm-block d-md-none">
26-
<h4>Featured Post</h4>
27-
</div>
2825
</div>
2926
<div class="featured-image">
3027
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>

‎src/pages/app-blog/app-blog.scss‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
.blog-container {
22
font-family: 'Muli';
3-
margin-top: 70px;
4-
max-width: 95%;
3+
margin-top: 76px;
54

65
h4 {
7-
color: $orange;
6+
color: #c65300;
87
}
98

109
.posts-row {
@@ -14,6 +13,12 @@
1413
@include media-breakpoint-down(lg) {
1514
margin: 0;
1615
}
16+
17+
.post-row-container {
18+
@include media-breakpoint-down(md) {
19+
order: 2;
20+
}
21+
}
1722
}
1823

1924
.form-row {
@@ -24,6 +29,11 @@
2429
text-align: center;
2530
}
2631

32+
@include media-breakpoint-down(md) {
33+
display: flex;
34+
justify-content: space-between;
35+
}
36+
2737
.hidden {
2838
display: none;
2939
}
@@ -35,7 +45,7 @@
3545

3646
label {
3747
font-size: 18px;
38-
color: #e88212;
48+
color: #121212;
3949
font-weight: bold;
4050
}
4151

@@ -52,14 +62,14 @@
5262
}
5363

5464
button {
55-
background: #e88212;
65+
background: #c65300;
5666
padding: 12px 15px;
5767
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
5868
color: #fff;
5969

6070
@include media-breakpoint-down(sm) {
6171
background: #fff;
62-
border: solid 1px #e88212;
72+
border: solid 1px #c65300;
6373
padding: 4px 15px;
6474
}
6575

@@ -167,7 +177,7 @@
167177
}
168178

169179
.blog-filter-item .active {
170-
color: #e88212;
180+
color: #c65300;
171181
text-decoration: underline;
172182
cursor: auto;
173183

@@ -212,12 +222,12 @@
212222

213223
.blog-page-item {
214224
padding: 7px;
225+
color: #b9c3c4;
215226
}
216227

217228
.blog-page-item .active {
218229
padding: 7px;
219-
color: $orange;
220-
text-decoration: underline $orange;
230+
color: #c65300;
221231
}
222232
}
223233
}

‎src/pages/app-blog/app-blog.tsx‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ export class AppBlog {
332332
}
333333

334334
return (
335-
<div class="blog-container">
335+
<div class="blog-container container">
336336
<div id="blog-filters" class="blog-filters">
337337
<div class="blog-filters-nav">
338338
<ul class="blog-filters-list">
@@ -349,15 +349,12 @@ export class AppBlog {
349349
</div>
350350
</div>
351351
<div class="row posts-row">
352-
<div class="col-md-8 col-sm-12">
352+
<div class="col-lg-7 col-md-12 col-sm-12 post-row-container">
353353
<div class="featured-post">{featuredPost}</div>
354-
<div class="blog-posts">
355-
{postData}
356-
<div class="blog-pagination">{pagination}</div>
357-
</div>
354+
<div class="blog-posts">{postData}</div>
358355
</div>
359-
<div class="col-md-3 col-sm-12 form-row">
360-
<div class="form-row-content">
356+
<div class="col-lg-4 col-md-12 col-sm-12 form-row">
357+
<div class="d-none d-md-block form-row-content">
361358
<form
362359
action="https://openforge.us8.list-manage.com/subscribe/post?u=7e95d70b390d0adf7aaa31ad6&amp;id=78738bfcb4"
363360
method="post"
@@ -383,23 +380,24 @@ export class AppBlog {
383380
</div>
384381
</div>
385382
</form>
386-
387-
<p class="contact-icons-label">Follow Us:</p>
388-
<div class="contact-icons">
389-
<a href="https://twitter.com/openforgemobile" target="_blank" rel="noopener">
390-
<app-img class="contact-icon" src="/assets/blog/twitter.png" alt="twitter" />
391-
</a>
392-
<a href="https://www.facebook.com/openforgemobile/" target="_blank" rel="noopener">
393-
<app-img class="contact-icon" src="/assets/blog/facebook.png" alt="facebook" />
394-
</a>
395-
<a href="https://www.linkedin.com/company/openforge/" target="_blank" rel="noopener">
396-
<app-img class="contact-icon" src="/assets/blog/linkedin.png" alt="linkedin" />
397-
</a>
383+
<div class="social-links-container">
384+
<p class="contact-icons-label">Follow Us:</p>
385+
<div class="contact-icons">
386+
<a href="https://twitter.com/openforgemobile" target="_blank" rel="noopener">
387+
<app-img class="contact-icon" src="/assets/blog/twitter.png" alt="twitter" />
388+
</a>
389+
<a href="https://www.facebook.com/openforgemobile/" target="_blank" rel="noopener">
390+
<app-img class="contact-icon" src="/assets/blog/facebook.png" alt="facebook" />
391+
</a>
392+
<a href="https://www.linkedin.com/company/openforge/" target="_blank" rel="noopener">
393+
<app-img class="contact-icon" src="/assets/blog/linkedin.png" alt="linkedin" />
394+
</a>
395+
</div>
398396
</div>
399397
</div>
400398
</div>
401399
</div>
402-
400+
<div class="blog-pagination">{pagination}</div>
403401
<stencil-route-link url="/blog-index" />
404402
<app-footer />
405403
</div>

0 commit comments

Comments
 (0)