Skip to content

Commit

Permalink
Markup home page content lists and tags as lists (daattali#950)
Browse files Browse the repository at this point in the history 
* Markup home page content lists and tags as lists

* Fix styling after markup changes

* Fix typo

* fix a couple visual issues

* make sure the divider line between posts shows up

Co-authored-by: Dean Attali <dean@attalitech.com>
  • Loading branch information
@JeffersonBledsoe @daattali
JeffersonBledsoe and daattali committed Jul 4, 2022
1 parent 5420dbd commit 5253e38
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 66 deletions.
140 changes: 74 additions & 66 deletions _layouts/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,88 +6,96 @@

{% assign posts = paginator.posts | default: site.posts %}

<div class="posts-list">
<!-- role="list" needed so that `list-style: none` in Safari doesn't remove the list semantics -->
<ul class="posts-list list-unstyled" role="list">
{% for post in posts %}
<article class="post-preview">
<li class="post-preview">
<article>

{%- capture thumbnail -%}
{% if post.thumbnail-img %}
{{ post.thumbnail-img }}
{% elsif post.cover-img %}
{% if post.cover-img.first %}
{{ post.cover-img[0].first.first }}
{%- capture thumbnail -%}
{% if post.thumbnail-img %}
{{ post.thumbnail-img }}
{% elsif post.cover-img %}
{% if post.cover-img.first %}
{{ post.cover-img[0].first.first }}
{% else %}
{{ post.cover-img }}
{% endif %}
{% else %}
{{ post.cover-img }}
{% endif %}
{% else %}
{% endcapture %}
{% assign thumbnail=thumbnail | strip %}

{% if site.feed_show_excerpt == false %}
{% if thumbnail != "" %}
<div class="post-image post-image-normal">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
</a>
</div>
{% endif %}
{% endif %}
{% endcapture %}
{% assign thumbnail=thumbnail | strip %}

{% if site.feed_show_excerpt == false %}
{% if thumbnail != "" %}
<div class="post-image post-image-normal">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
<a href="{{ post.url | absolute_url }}">
<h2 class="post-title">{{ post.title | strip_html }}</h2>

{% if post.subtitle %}
<h3 class="post-subtitle">
{{ post.subtitle | strip_html }}
</h3>
{% endif %}
</a>
</div>
{% endif %}
{% endif %}

<a href="{{ post.url | absolute_url }}">
<h2 class="post-title">{{ post.title | strip_html }}</h2>
<p class="post-meta">
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
Posted on {{ post.date | date: date_format }}
</p>

{% if post.subtitle %}
<h3 class="post-subtitle">
{{ post.subtitle | strip_html }}
</h3>
{% if thumbnail != "" %}
<div class="post-image post-image-small">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
</a>
</div>
{% endif %}
</a>

<p class="post-meta">
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
Posted on {{ post.date | date: date_format }}
</p>

{% if thumbnail != "" %}
<div class="post-image post-image-small">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
</a>
</div>
{% endif %}
{% unless site.feed_show_excerpt == false %}
{% if thumbnail != "" %}
<div class="post-image post-image-short">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
</a>
</div>
{% endif %}

{% unless site.feed_show_excerpt == false %}
{% if thumbnail != "" %}
<div class="post-image post-image-short">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
</a>
</div>
{% endif %}
<div class="post-entry">
{% assign excerpt_length = site.excerpt_length | default: 50 %}
{{ post.excerpt | strip_html | truncatewords: excerpt_length }}
{% assign excerpt_word_count = post.excerpt | number_of_words %}
{% if post.content != post.excerpt or excerpt_word_count > excerpt_length %}
<a href="{{ post.url | absolute_url }}" class="post-read-more">[Read&nbsp;More]</a>
{% endif %}
</div>
{% endunless %}

<div class="post-entry">
{% assign excerpt_length = site.excerpt_length | default: 50 %}
{{ post.excerpt | strip_html | truncatewords: excerpt_length }}
{% assign excerpt_word_count = post.excerpt | number_of_words %}
{% if post.content != post.excerpt or excerpt_word_count > excerpt_length %}
<a href="{{ post.url | absolute_url }}" class="post-read-more">[Read&nbsp;More]</a>
{% if site.feed_show_tags != false and post.tags.size > 0 %}
<div class="blog-tags">
<span>Tags:</span>
<!-- role="list" needed so that `list-style: none` in Safari doesn't remove the list semantics -->
<ul class="d-inline list-inline" role="list">
{% for tag in post.tags %}
<li class="list-inline-item">
<a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% endunless %}

{% if site.feed_show_tags != false and post.tags.size > 0 %}
<div class="blog-tags">
<span>Tags:</span>
{% for tag in post.tags %}
<a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a>
{% endfor %}
</div>
{% endif %}

</article>
</article>
</li>
{% endfor %}
</div>
</ul>

{% if paginator.total_pages > 1 %}
<ul class="pagination main-pager">
Expand Down
8 changes: 8 additions & 0 deletions assets/css/beautifuljekyll.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,10 @@ footer .footer-custom-content {

/* --- Post preview (feed) --- */

.posts-list {
margin: 0;
}

.post-preview {
padding: 1.25rem 0;
border-bottom: 1px solid #eee;
Expand Down Expand Up @@ -562,6 +566,10 @@ footer .footer-custom-content {
opacity: 0.8;
}

.blog-tags .list-inline-item {
margin-right: 0;
}

.blog-tags a {
color: {{ site.text-col | default: "#404040" }};
text-decoration: none;
Expand Down

0 comments on commit 5253e38

Please sign in to comment.