Table of Contents
Update 08/16/2019
This post is outdated as this blog has been through a few iterations of design. Hopefully I will write another blog that covers what has changed. In the meantime you can read to get some context about my blog’s old design.
The stock theme that I am currently using is from https://github.com/jekyll/minima. I like it for its cleanliness and simplicty as the name implies.
But as you know I enjoy customizing things my way so I did make a few changes to make this blog a bit more to my liking (for now. After all I have switched themes a few times). Here are a couple of new additions that I added.
Added subscribe feature through email or RSS
I am currently trying out feedburner to handle subscription for the blog.
Use excerpt and introduce hover effects on the post.
If you visit my homepage, you will notice each post contains an excerpt and if you hover over the post, you’ll see a fading effect. The suggestion was made my the maintainer of Jekyll’s theme and I ended up implementing it.
You can see my PR here: https://github.com/jekyll/minima/pull/382
Added next and previous post link
IF you view a post, at the end of the post there is are hyperlinks to the next and previous posts to save you some clicks.
Added pagination and style each post as a card view.
Kudos to prashanthmadi.github.io for adding pagination and the card view that looks really nice.
You can see the changes to add pagination here and the card view here.
Below is the snippet of my homepage changes:
| $post-color: #faf5ef; | |
| $link-color: #00a79d; | |
| .post { | |
| background-color: $post-color; | |
| padding: 15px; | |
| } | |
| a { | |
| color: $link-color; | |
| &:visited { | |
| color: darken($link-color, 10%); | |
| } | |
| } | |
| .excerpt:hover { | |
| opacity: 0.8; | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| .excerpt { | |
| background-color: $post-color; | |
| border: 1px solid #d3d3d3; | |
| border-radius: .25rem; | |
| margin-top: 15px; | |
| p { | |
| text-decoration: none; | |
| color: $text-color; | |
| padding: 15px; | |
| } | |
| span { | |
| padding: 15px 15px 0px 15px; | |
| color: #672f2f; | |
| } | |
| } | |
| .site-nav { | |
| z-index: 99999; | |
| } | |
| .bg-img { | |
| background-size: cover; | |
| min-height: 180px; | |
| background-position: center; | |
| background-color: #ccc; | |
| } | |
| .page-nav { | |
| display: block; | |
| width: auto; | |
| overflow: hidden; | |
| } | |
| .page-nav a { | |
| display: block; | |
| width: 50%; | |
| float: left; | |
| margin: 1em 0; | |
| } | |
| .page-nav .next { | |
| text-align: right; | |
| } | |
| .section-nav { | |
| background-color: #fff; | |
| margin: 5px 0; | |
| padding: 10px 30px; | |
| border: 1px solid #e8e8e8; | |
| border-radius: 3px; | |
| } |
| --- | |
| layout: default | |
| --- | |
| {%- if site.show_excerpts -%} | |
| {% assign excerptClass = "excerpt" %} | |
| {%- else -%} | |
| {% assign excerptClass = "" %} | |
| {%- endif -%} | |
| {% assign posts = site.posts %} | |
| {% if site.paginate %} | |
| {% assign posts = paginator.posts %} | |
| {% endif %} | |
| <div class="home"> | |
| {%- if page.title -%} | |
| <h1 class="page-heading"> | |
| {{ page.title }} | |
| </h1> | |
| {%- endif -%} | |
| {%- include top-center-ads.html -%} | |
| {{ content }} | |
| {%- if posts.size > 0 -%} | |
| <h2 class="post-list-heading"> | |
| {{ page.list_title | default: "Posts" }} | |
| </h2> | |
| <ul class="post-list"> | |
| {%- for post in posts -%} | |
| <li class="{{ excerptClass }}"> | |
| {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%} | |
| <a href="{{ post.url | relative_url }}"> | |
| <div> | |
| <div class="bg-img" style="background-image: url({{post.featured_img}})"> | |
| </div> | |
| <span class="post-link"> | |
| {{ post.title | escape }} | |
| </span> | |
| <span class="post-meta"> | |
| {{ post.date | date: date_format }} | |
| </span> | |
| {%- if site.show_excerpts -%} | |
| <p> | |
| {{ post.excerpt | strip_html | truncatewords: 100 }} | |
| </p> | |
| {%- endif -%} | |
| </div> | |
| </a> | |
| </li> | |
| {%- endfor -%} | |
| </ul> | |
| {% if site.paginate %} | |
| <div class="pagination" style="text-align: center"> | |
| {% if paginator.previous_page %} | |
| <a class="previous" href="{{ paginator.previous_page_path }}"> | |
| « Previous | |
| </a> | |
| {% endif %} | |
| <span class="page_number"> | |
| Page: {{ paginator.page }} of {{ paginator.total_pages }} | |
| </span> | |
| {% if paginator.next_page %} | |
| <a class="next" href="{{ paginator.next_page_path }}"> | |
| Next » | |
| </a> | |
| {% endif %} | |
| </div> | |
| {% endif %} | |
| <p class="feed-subscribe"> | |
| <a href="{{ 'feed.xml' | relative_url }}"> | |
| <svg class="svg-icon orange"> | |
| <use xlink:href="{{ 'assets/minima-social-icons.svg#rss' | relative_url }}"> | |
| </use> | |
| </svg> | |
| <span> | |
| Subscribe | |
| </span> | |
| </a> | |
| </p> | |
| {%- endif -%} | |
| </div> |
Added all posts page grouped by year-month
This is a nice way to view all the available posts on the same page. Here is the code to render this page:
| {% assign postsByYearMonth = site.posts | group_by_exp:"post", "post.date | date: '%Y %B'" %} | |
| {% for yearMonth in postsByYearMonth %} | |
| <h3> | |
| {{ yearMonth.name }} | |
| </h3> | |
| <ul> | |
| {% for post in yearMonth.items %} | |
| <li> | |
| <a href="{{ post.url }}"> | |
| {{ post.title }} | |
| </a> | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| {% endfor %} |