Skip to content

Commit 57a2f44

Browse files
patmellonbrsoff
patmellon
authored and
brsoff
committed
[PYT-48] Style preliminary Blog Detail page (pytorch#12)
1 parent ce521fa commit 57a2f44

14 files changed

+178
-34
lines changed

‎_config.yml

+3
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ collections:
3333
permalink: /ecosystem/:path/
3434
style_guide:
3535
output: false
36+
posts:
37+
output: true
38+
permalink: /blog/:title/
3639

3740
pagination:
3841
enabled: true

‎_includes/similar-posts-module.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{% assign current_category = page.category.first %}
2+
3+
<div class="container-fluid similar-posts-module">
4+
<div class="container">
5+
6+
<nav class="navbar navbar-expand-lg navbar-light module-content">
7+
<ul class="navbar-nav">
8+
<li class="nav-item">
9+
<p class="module-heading">Similar Posts</p>
10+
</li>
11+
<li class="nav-item">
12+
<a href="{{ site.baseurl }}/blog" class=" see-more-posts with-right-arrow">
13+
See All Posts
14+
</a>
15+
</li>
16+
</ul>
17+
</nav>
18+
19+
<div class="row">
20+
{% for category in current_category %}
21+
{% for post in site.categories[category] limit: 3 %}
22+
{% if post.url != page.url %}
23+
24+
<div class="col-md-4 similar-posts">
25+
<p class="blog-date">{{ post.date | date: '%B %d, %Y' }}</p>
26+
<h4>
27+
<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
28+
</h4>
29+
<p>{{ post.excerpt | remove: '<p>' | remove: '</p>' | truncate: 150 }}</p>
30+
</div>
31+
{% endif %}
32+
{% endfor %}
33+
{% endfor %}
34+
</div>
35+
</div>
36+
</div>

‎_layouts/blog.html

+7-25
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
<div class="main-background {{ page.background-class }}"></div>
99

1010
{% assign posts = paginator.posts %}
11-
{% assign post_categories = site.posts | map: 'categories' | join: ',' | replace: '-', ' ' | split: ',' | uniq | sort %}
11+
{% assign display_post_categories = site.posts | map: 'categories' | join: ',' | replace: '-', ' ' | split: ',' | uniq | sort %}
12+
{% assign current_page = page.url | downcase | remove: ".html" | split: '/' %}
13+
{% assign post_categories = site.posts | map: 'categories' | join: ',' | split: ',' | uniq | sort %}
1214

1315
<div class="jumbotron jumbotron-fluid">
1416
<div class="container">
@@ -39,11 +41,11 @@ <h1>
3941
<div class="collapse navbar-collapse" id="blogPostFilter">
4042
<ul class="navbar-nav">
4143
<li class="nav-item">
42-
<a class="nav-link" data-category="all" href="{{ site.baseurl }}/blog">All</a>
44+
<a class="nav-link {% if current_page[3] == null %} selected {% endif %}" data-category="all" href="{{ site.baseurl }}/blog">All</a>
4345
</li>
44-
{% for category in post_categories %}
46+
{% for category in display_post_categories %}
4547
<li class="nav-item">
46-
<a class="nav-link" data-category="{{ category | slugify }}" href="{{ site.baseurl }}/categories/{{ category | slugify }}">{{ category }}</a>
48+
<a class="nav-link {% if current_page[3] == post_categories[forloop.index0] %} selected {% endif %}" data-category="{{ category | slugify }}" href="{{ site.baseurl }}/blog/categories/{{ category | slugify }}">{{ category }}</a>
4749
</li>
4850
{% endfor %}
4951
<li class="nav-item">
@@ -55,7 +57,7 @@ <h1>
5557

5658
<div class="row">
5759
{% for post in posts %}
58-
<div class="col-md-4 blog-post">
60+
<div class="col-md-4">
5961
<p class="blog-date">{{ post.date | date: '%B %d, %Y' }}</p>
6062
<h4>
6163
<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
@@ -96,26 +98,6 @@ <h4>
9698

9799
{% include footer.html %}
98100

99-
<script type="text/javascript">
100-
var category = window.location.href;
101-
102-
if (category.includes("blog")) {
103-
category = "all";
104-
} else {
105-
var firstMatch = "categories/";
106-
var secondMatch = "/";
107-
category = category
108-
.match(new RegExp(firstMatch + "(.*)" + secondMatch))[1]
109-
.split("/")[0];
110-
}
111-
112-
function updateCategorySelection(category) {
113-
$(".nav-link").removeClass("selected");
114-
$(".nav-link[data-category=" + category + "]").addClass("selected");
115-
}
116-
117-
updateCategorySelection(category);
118-
</script>
119101
</body>
120102

121103
</html>

‎_layouts/blog_detail.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
{% include head.html %}
4+
5+
<body class="blog">
6+
<div class="main-background {{ page.background-class }}"></div>
7+
8+
<div class="container-fluid header-holder">
9+
<div class="container">
10+
{% include nav.html %}
11+
</div>
12+
</div>
13+
14+
<div class="jumbotron jumbotron-fluid">
15+
<div class="container">
16+
<p class="blog-date">{{ page.date | date: '%B %d, %Y' }}</p>
17+
<h1>
18+
<a>{{ page.title }}</a>
19+
</h1>
20+
</div>
21+
</div>
22+
23+
<div class="main-content-wrapper">
24+
<div class="main-content">
25+
<div class="container">
26+
27+
<div class="col-md-12">
28+
<img src="/assets/images/logo-icon.svg" class="img-fluid author-icon">
29+
<article>
30+
<p class="author"> by PyTorch Team</p>
31+
{{ content }}
32+
</article>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
{% include similar-posts-module.html %}
39+
{% include footer.html %}
40+
41+
</body>
42+
43+
</html>

‎_posts/2018-03-01-sample-post.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default
2+
layout: blog_detail
33
title: 'Sample Post'
44
category: [customer-showcase]
55
---

‎_posts/2018-03-15-another-post.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default
2+
layout: blog_detail
33
title: 'Another post'
44
category: [customer-showcase]
55
image: http://via.placeholder.com/400

‎_posts/2018-04-22-pytorch-0_4_0-migration-guide.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default
2+
layout: blog_detail
33
title: 'The road to 1.0: production ready PyTorch'
44
category: [updates]
55
---

‎_posts/2018-05-02-the-road-to-1_0-production-ready-pytorch.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default
2+
layout: blog_detail
33
title: 'The road to 1.0: production ready PyTorch'
44
category: [updates]
55
---

‎_sass/blog.scss

+27-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,20 @@
5252
letter-spacing: 0;
5353
line-height: rem(28px);
5454
}
55+
56+
.author {
57+
color: $red_orange;
58+
font-size: rem(20px);
59+
letter-spacing: 0;
60+
line-height: rem(30px);
61+
}
62+
63+
.author-icon {
64+
position: relative;
65+
top: rem(26px);
66+
height: rem(17px);
67+
width: rem(19px);
68+
}
5569
}
5670

5771
.jumbotron {
@@ -67,7 +81,7 @@
6781
line-height: rem(64px);
6882
font-weight: 400;
6983
word-wrap: break-word;
70-
text-transform: none;
84+
text-transform: capitalize;
7185
}
7286
}
7387

@@ -124,5 +138,17 @@
124138
.col-md-4 {
125139
margin-bottom: rem(100px);
126140
}
141+
142+
.similar-posts {
143+
margin-bottom: rem(50px);
144+
}
145+
}
146+
147+
@media (max-width: 1050px) {
148+
.main-content-wrapper {
149+
.author-icon {
150+
left: rem(-30px);
151+
}
152+
}
127153
}
128154
}

‎_sass/similar-posts-module.scss

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.similar-posts-module {
2+
background: $light_grey;
3+
4+
p.blog-date {
5+
font-size: rem(18px);
6+
color: $very_dark_grey;
7+
letter-spacing: 0;
8+
line-height: rem(24px);
9+
}
10+
11+
h4 {
12+
a {
13+
font-size: rem(24px);
14+
color: $black;
15+
letter-spacing: 0;
16+
line-height: rem(32px);
17+
font-weight: 400;
18+
}
19+
}
20+
21+
.module-content {
22+
.navbar-nav {
23+
margin-top: rem(60px);
24+
}
25+
26+
.module-heading {
27+
text-transform: uppercase;
28+
color: $black;
29+
font-size: rem(24px);
30+
letter-spacing: rem(1.33px);
31+
line-height: rem(32px);
32+
font-weight: 400;
33+
}
34+
35+
.nav-item:last-of-type {
36+
@include desktop {
37+
position: absolute;
38+
right: 0;
39+
a {
40+
margin-right: 0;
41+
}
42+
}
43+
}
44+
margin-bottom: rem(35px);
45+
}
46+
47+
.see-more-posts {
48+
color: $black;
49+
font-size: rem(18px);
50+
letter-spacing: -0.25px;
51+
line-height: rem(30px);
52+
top: rem(2px);
53+
}
54+
}

‎assets/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ $baseurl:"{{ site.baseurl }}";
2222
@import "features";
2323
@import "quick-start-module";
2424
@import "blog";
25+
@import "similar-posts-module";

‎blog/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
layout: blog
33
title: Blog
44
permalink: /blog/
5-
background-class: blog-background
65
body-class: blog
7-
redirect_from: "/categories/"
6+
redirect_from: "/blog/categories/"
87
pagination:
98
enabled: true
109
permalink: /:num/

‎categories/customer-showcase.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: blog
33
title: Customer Showcase
4-
permalink: /categories/customer-showcase/
4+
permalink: /blog/categories/customer-showcase/
55
background-class: blog-background
66
body-class: blog
77
pagination:

‎categories/updates.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: blog
33
title: Updates
4-
permalink: /categories/updates/
4+
permalink: /blog/categories/updates/
55
background-class: blog-background
66
body-class: blog
77
pagination:

0 commit comments

Comments
 (0)