yttt/yamatotoma.to
2
0
Fork 0
Code Pull requests Activity Actions

Markup home page content lists and tags as lists (#950)

Browse source 
* 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>
This commit is contained in:
Jefferson Bledsoe 2022-07-04 16:51:19 +01:00 • committed by GitHub
parent 5420dbd899
commit 5253e3866c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

142
_layouts/home.html
View file

@ -6,88 +6,96 @@ layout: page
{% 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 %}
{% 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 %}
<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>
<p class="post-meta">
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
Posted on {{ post.date | date: date_format }}
</p>
<a href="{{ post.url | absolute_url }}">
<h2 class="post-title">{{ post.title | strip_html }}</h2>
{% 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">
{% if post.subtitle %}
<h3 class="post-subtitle">
{{ post.subtitle | strip_html }}
</h3>
{% endif %}
</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 %}
<p class="post-meta">
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
Posted on {{ post.date | date: date_format }}
</p>
<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 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 %}
</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 %}
{% 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 %}
</article>
<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 %}
{% 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 %}
</article>
</li>
{% endfor %}
</div>
</ul>
{% if paginator.total_pages > 1 %}
<ul class="pagination main-pager">

8
assets/css/beautifuljekyll.css
View file

@ -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;
@ -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;