Skip to content

Commit 4312ac6

Browse files
author
Stuart Reilly
committed
Split main page into columns, add 3rd featured post, split metadata onto two lines
1 parent 5361eac commit 4312ac6

File tree

11 files changed

+111
-88
lines changed

11 files changed

+111
-88
lines changed

‎README.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,16 +127,18 @@ gem update
127127
gem install jekyll bundler nokogiri
128128
```
129129

130-
Thirdly, configure Bundler to store project dependencies in `vendor/bundle`, and,
131-
when in the root directory of your clone of the blog, install the project dependencies.
132-
130+
Optionally, configure Bundler to store project dependencies in `vendor/bundle`
133131
```shell
134132
bundle config path vendor/bundle
133+
```
134+
135+
When in the root directory of your clone of the blog, install the project dependencies.
136+
```shell
135137
cd PATH/TO/BLOG
136138
bundle install
137139
```
138140

139-
Finally, run `jekyll -v` to check whether Jekyll is working. If so, you're good to run the blog!
141+
Finally, run `bundle exec jekyll -v` to check whether Jekyll is working. If so, you're good to run the blog!
140142

141143
#### Running in the native environment
142144

@@ -146,8 +148,9 @@ Navigate to the root directory of your clone of the blog and execute Jekyll usin
146148
```shell
147149
bundle exec jekyll serve
148150
```
151+
See [jekyll's docs](https://jekyllrb.com/docs/configuration/options/) for command line flags.
149152

150-
The blog will then be available on [localhost][localhost].
153+
The blog will then be available on [localhost:4000](http://localhost:4000).
151154

152155
If you are working on fixes or new features, and need to re-compile the scripts or SCSS, you can use these npm scripts:
153156

@@ -157,6 +160,10 @@ npm run scripts
157160
npm run style
158161
```
159162

163+
##### Useful Command Line Flags
164+
* `--livereload` - trigger a build on file change (excluding SCSS or JS) and refresh the brower once built
165+
* `--incremental` - use the experimental incremental build mode which after the initial build, only builds changed files
166+
160167
### Running with Docker
161168

162169
Use a bash-compatible shell; Git bash on Windows should work fine.

‎_includes/featured_post.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{% assign post = include.post %}
2+
{% assign shape = include.shape %}
3+
4+
<div class="summary cell large-9 medium-10 small-11 grid-y align-center">
5+
<div class="cell">{% include category_display.html post = post %}</div>
6+
<h3 class="cell">
7+
<a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>
8+
{% include post_summary_social.html post=post %}
9+
</h3>
10+
<div class="cell">{{ post.summary | truncatewords:25 }}</div>
11+
<div class="avatar-metadata cell">
12+
{% assign author = site.data.authors.authors[post.author] %}
13+
{% include author_picture.html %}
14+
{% include post_metadata.html post=post %}
15+
</div>
16+
</div>
17+
<div class="shape cell large-3 medium-2 small-1 grid-y align-center">
18+
<!-- Allow shape to be overridden during include -->
19+
{% if shape == nil %}
20+
{% capture shape %}{% include post_shape.html post=post %}{% endcapture %}
21+
{% assign shape = shape | strip %}
22+
{% endif %}
23+
{% case shape %}
24+
{% when "shape1" %}
25+
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 465" preserveAspectRatio="none">
26+
<polygon points="0 0 650 132.977 499.388 465 0 465"/>
27+
</svg>
28+
{% when "shape2" %}
29+
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
30+
<polygon points="0 0 350 0 650 300 650 410 0 410"/>
31+
</svg>
32+
{% when "shape3" %}
33+
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
34+
<polygon points="0,0 400,0 850,500 0,950"/>
35+
</svg>
36+
{% when "shape4" %}
37+
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
38+
<path d="M0 0h542l108 87v183L420 465H0z" />
39+
</svg>
40+
{% else %}
41+
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
42+
<polygon points="0 0 650 0 650 109.736 353 410 0 410"/>
43+
</svg>
44+
{% endcase %}
45+
{% if post.image and post.featuredImage %}
46+
{% capture image-path %}{{ site.baseurl }}/{{post.image}}{% endcapture %}
47+
<img class="cell show-for-large" alt="thumbnail of post: '{{post.title}}'" src="{{ image-path | replace: "//", "/" }}"/>
48+
{% endif %}
49+
</div>

‎_includes/featured_posts.html‎

Lines changed: 22 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,28 @@
11
{% if include.categoryName == "Latest Articles" %}
2-
{% assign featuredPosts = site.tags.featured %}
2+
{% assign featuredPosts = site.tags.featured %}
33
{% else %}
4-
{% assign featuredPosts = '' | split: '' %}
5-
{% for post in include.postsToFilter %}
6-
{% if post.tags contains 'featured' %}
7-
{% assign featuredPosts = featuredPosts | push: post %}
8-
{% endif %}
9-
{% endfor %}
4+
{% assign featuredPosts = '' | split: '' %}
5+
{% for post in include.postsToFilter %}
6+
{% if post.tags contains 'featured' %}
7+
{% assign featuredPosts = featuredPosts | push: post %}
8+
{% endif %}
9+
{% endfor %}
1010
{% endif %}
1111
{% assign numPosts = featuredPosts | size %}
12-
{% if numPosts >= 2 %}
13-
<div class="featured-posts grid-x grid-margin-x grid-margin-y">
14-
{% for post in featuredPosts limit:2 %}
15-
<div class="featured-post {% include post_colour.html post=post %} cell large-6 grid-x">
16-
<div class="summary cell large-8 medium-10 small-11 grid-y align-center">
17-
<div class="cell">{% include category_display.html post = post %}</div>
18-
<h3 class="cell">
19-
<a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>
20-
{% include post_summary_social.html post=post %}
21-
</h3>
22-
<div class="cell">{{ post.summary }}</div>
23-
<div class="avatar-metadata cell">
24-
{% assign author = site.data.authors.authors[post.author] %}
25-
{% include author_picture.html %}
26-
{% include post_metadata.html post=post %}
27-
</div>
12+
{% if numPosts > 0 %}
13+
<div class="featured-posts grid-x grid-margin-x grid-margin-y">
14+
{% assign topPost = featuredPosts[0] %}
15+
<div class="featured-post {% include post_colour.html post=topPost %} cell large-12 grid-x">
16+
{% include featured_post.html post=topPost %}
17+
</div>
18+
19+
{% if numPosts >= 3 %}
20+
{% assign splitPosts = featuredPosts | slice: 1, 2 %}
21+
{% for post in splitPosts %}
22+
<div class="featured-post {% include post_colour.html post=post %} cell large-6 grid-x">
23+
{% include featured_post.html post=post %}
24+
</div>
25+
{% endfor %}
26+
{% endif %}
2827
</div>
29-
<div class="shape cell large-4 medium-2 small-1 grid-y align-center">
30-
{% capture shape %}{% include post_shape.html post=post %}{% endcapture %}
31-
{% assign shape = shape | strip %}
32-
{% case shape %}
33-
{% when "shape1" %}
34-
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 465" preserveAspectRatio="none">
35-
<polygon points="0 0 650 132.977 499.388 465 0 465"/>
36-
</svg>
37-
{% when "shape2" %}
38-
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
39-
<polygon points="0 0 350 0 650 300 650 410 0 410"/>
40-
</svg>
41-
{% when "shape3" %}
42-
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
43-
<polygon points="0,0 400,0 850,500 0,950"/>
44-
</svg>
45-
{% when "shape4" %}
46-
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
47-
<path d="M0 0h542l108 87v183L420 465H0z" />
48-
</svg>
49-
{% else %}
50-
<svg class="bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 410" preserveAspectRatio="none">
51-
<polygon points="0 0 650 0 650 109.736 353 410 0 410"/>
52-
</svg>
53-
{% endcase %}
54-
{% if post.image and post.featuredImage %}
55-
{% capture image-path %}{{ site.baseurl }}/{{post.image}}{% endcapture %}
56-
<img class="cell show-for-large" alt="thumbnail of post: '{{post.title}}'" src="{{ image-path | replace: "//", "/" }}"/>
57-
{% endif %}
58-
</div>
59-
</div>
60-
{% endfor %}
61-
</div>
6228
{% endif %}

‎_includes/post_index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@
1111
{% assign paginated = false %}
1212
{% endif %}
1313
<div class="post-index grid-container">
14-
{% if categoryName == "Latest Articles" %}
15-
<h1 class="super-title">Blog</h1>
16-
<h2 class="cell sub-title">Our thoughts on technology and design</h2>
17-
{% else %}
18-
<h2 class="super-title"><a href="{{ site.github.url }}">Blog</a></h2>
19-
<h1 class="sub-title">{{ categoryName }}</h1>
20-
{% endif %}
21-
<div class="hide-for-large">{% include category_list_compact.html selectedIndex=categoryIndex %}</div>
22-
{% include featured_posts.html postsToFilter=allPosts categoryName=categoryName %}
23-
<div class="cell grid-x">
24-
<div class="cell large-7 large-offset-1">
25-
{% include post_summary_list.html posts=allPosts paginated=paginated %}
26-
</div>
27-
<div class="side-lists cell large-2 large-offset-2 grid-padding-y grid-margin-y">
28-
{% include category_list.html selectedIndex=categoryIndex %}
29-
{% include author_list.html %}
14+
{% if categoryName == "Latest Articles" %}
15+
<h1 class="super-title">Blog</h1>
16+
<h2 class="cell sub-title">Our thoughts on technology and design</h2>
17+
{% else %}
18+
<h2 class="super-title"><a href="{{ site.github.url }}">Blog</a></h2>
19+
<h1 class="sub-title">{{ categoryName }}</h1>
20+
{% endif %}
21+
<div class="hide-for-large">{% include category_list_compact.html selectedIndex=categoryIndex %}</div>
22+
<div class="cell grid-x">
23+
<div class="cell large-8">
24+
{% include featured_posts.html postsToFilter=allPosts categoryName=categoryName %}
25+
{% include post_summary_list.html posts=allPosts paginated=paginated %}
26+
</div>
27+
<div class="side-lists cell large-3 large-offset-1 grid-padding-y grid-margin-y">
28+
{% include category_list.html selectedIndex=categoryIndex %}
29+
{% include author_list.html %}
30+
</div>
3031
</div>
31-
</div>
3232
</div>
3333

3434
{% include site-footer.html %}

‎_includes/post_metadata.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
{% assign contributor = site.data.authors.authors[contributorId] %}
77
<a href="{{ site.baseurl }}/{{ contributorId }}">{{ contributor.name }}</a>{% unless forloop.last %}, {% endunless %}
88
{% endfor %}
9-
<span> &middot;</span>
109
</span>
10+
<br>
1111
<span class="timestamp" date-published="{{ post.date }}">
1212
{% include format_date.html date=post.date %}
1313
</span>

‎_includes/post_summary.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% assign post = include.post %}
22
{% assign hideCategory = include.hideCategory %}
33
{% assign author = site.data.authors.authors[post.author] %}
4-
<div class="post-summary grid-margin-y grid-padding-y {% include post_colour.html post=post %}">
4+
<div class="post-summary grid-padding-x grid-margin-y grid-padding-y {% include post_colour.html post=post %} cell large-6 small-12">
55
<div class="post-summary cell grid-margin-y">
66
{% unless hideCategory %}
77
{% include category_display.html post = post %}
@@ -12,7 +12,7 @@
1212
</div>
1313
<div class="cell">
1414
{% if post.summary %}
15-
{{ post.summary }}
15+
{{ post.summary | truncatewords:50 }}
1616
{% else %}
1717
{{ post.content | strip_html | truncatewords:50 }}
1818
{% endif %}

‎_includes/post_summary_list.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{% assign posts = include.posts %}
22
{% assign paginated = include.paginated %}
33
{% assign hideCategory = include.hideCategory %}
4-
<div class="post-summary-list">
4+
<div class="post-summary-list grid-container fluid">
55
{% comment %} This container is used by jScroll. When the next page is fetched, the contents of this div are added to the bottom of the page {% endcomment %}
6-
<div class="content">
6+
<div class="content grid-x">
77
{% for post in posts %}
88
{% include post_summary.html post=post hideCategory=hideCategory %}
99
{% endfor %}

‎scss/_featured-posts.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
height: 100%;
4545

4646
.summary {
47-
padding: 2rem;
47+
padding: 2rem 0 2rem 2rem;
4848

4949
h3 > a {
5050
margin-right: 1.5rem;

‎scss/_post-index.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
}
99

1010
h1, h2 {
11-
text-align: center;
11+
text-align: left;
1212
}
1313

1414
h2 {
@@ -17,13 +17,14 @@
1717

1818
.sub-title {
1919
margin-bottom: 2rem;
20+
font-size: $baseFontSize * 2;
2021
@include breakpoint(large) {
2122
margin-bottom: 3rem;
2223
}
2324
}
2425

2526
h2.super-title {
26-
font-size: $baseFontSize;
27+
font-size: $baseFontSize * 3;
2728
> a {
2829
color: colours.$teal;
2930
&:hover {

‎shell/docker-dev-watch.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ set -x
5555
# https://jekyllrb.com/docs/configuration/options/
5656
exec docker run -it --rm --init \
5757
--name sl-jekyll-run \
58-
-v "$REPOROOT/$BLOG_USERNAME":"$CONTAINER_WORKDIR/"$BLOG_USERNAME":ro" \
58+
-v "$REPOROOT/$BLOG_USERNAME":"$CONTAINER_WORKDIR/$BLOG_USERNAME:ro" \
5959
-v "$REPOROOT/container_gem_cache":"$CONTAINER_WORKDIR/.bundle:ro" \
6060
"${SERVE_MOUNT_ARGS[@]}" \
6161
-v "$REPOROOT/dist":/dist \

0 commit comments

Comments
 (0)