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 %} {% 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 %} {% for post in posts %}
<article class="post-preview"> <li class="post-preview">
<article>
{%- capture thumbnail -%} {%- capture thumbnail -%}
{% if post.thumbnail-img %} {% if post.thumbnail-img %}
{{ post.thumbnail-img }} {{ post.thumbnail-img }}
{% elsif post.cover-img %} {% elsif post.cover-img %}
{% if post.cover-img.first %} {% if post.cover-img.first %}
{{ post.cover-img[0].first.first }} {{ post.cover-img[0].first.first }}
{% else %}
{{ post.cover-img }}
{% endif %}
{% else %} {% else %}
{{ post.cover-img }}
{% endif %} {% 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>
</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 %} {% endif %}
</a>
<p class="post-meta"> <a href="{{ post.url | absolute_url }}">
{% assign date_format = site.date_format | default: "%B %-d, %Y" %} <h2 class="post-title">{{ post.title | strip_html }}</h2>
Posted on {{ post.date | date: date_format }}
</p>
{% if thumbnail != "" %} {% if post.subtitle %}
<div class="post-image post-image-small"> <h3 class="post-subtitle">
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail"> {{ post.subtitle | strip_html }}
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail"> </h3>
{% endif %}
</a> </a>
</div>
{% endif %}
{% unless site.feed_show_excerpt == false %} <p class="post-meta">
{% if thumbnail != "" %} {% assign date_format = site.date_format | default: "%B %-d, %Y" %}
<div class="post-image post-image-short"> Posted on {{ post.date | date: date_format }}
<a href="{{ post.url | absolute_url }}" aria-label="Thumbnail"> </p>
<img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
</a>
</div>
{% endif %}
<div class="post-entry"> {% if thumbnail != "" %}
{% assign excerpt_length = site.excerpt_length | default: 50 %} <div class="post-image post-image-small">
{{ post.excerpt | strip_html | truncatewords: excerpt_length }} <a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
{% assign excerpt_word_count = post.excerpt | number_of_words %} <img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
{% if post.content != post.excerpt or excerpt_word_count > excerpt_length %} </a>
<a href="{{ post.url | absolute_url }}" class="post-read-more">[Read&nbsp;More]</a> </div>
{% endif %} {% endif %}
</div>
{% endunless %}
{% if site.feed_show_tags != false and post.tags.size > 0 %} {% unless site.feed_show_excerpt == false %}
<div class="blog-tags"> {% if thumbnail != "" %}
<span>Tags:</span> <div class="post-image post-image-short">
{% for tag in post.tags %} <a href="{{ post.url | absolute_url }}" aria-label="Thumbnail">
<a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a> <img src="{{ thumbnail | absolute_url }}" alt="Post thumbnail">
{% endfor %} </a>
</div> </div>
{% endif %} {% 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 %} {% endfor %}
</div> </ul>
{% if paginator.total_pages > 1 %} {% if paginator.total_pages > 1 %}
<ul class="pagination main-pager"> <ul class="pagination main-pager">

8
assets/css/beautifuljekyll.css
View file

@ -432,6 +432,10 @@ footer .footer-custom-content {
/* --- Post preview (feed) --- */ /* --- Post preview (feed) --- */
.posts-list {
margin: 0;
}
.post-preview { .post-preview {
padding: 1.25rem 0; padding: 1.25rem 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -562,6 +566,10 @@ footer .footer-custom-content {
opacity: 0.8; opacity: 0.8;
} }
.blog-tags .list-inline-item {
margin-right: 0;
}
.blog-tags a { .blog-tags a {
color: {{ site.text-col | default: "#404040" }}; color: {{ site.text-col | default: "#404040" }};
text-decoration: none; text-decoration: none;