Refactor content details to use tags

This commit is contained in:
Jake Howard 2022-06-26 15:13:51 +01:00
parent ed535626b5
commit b2df6aa7d2
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 45 additions and 39 deletions

View file

@ -4,26 +4,20 @@ section.content {
} }
.content-details { .content-details {
& > span + span { .tag {
margin-left: 0.5rem; font-size: inherit;
} }
i { .control {
margin-right: 5px; font-size: inherit;
}
.tags { &:not(:last-child) {
display: inline-flex; margin-right: 0.5rem !important;
margin-bottom: 0; }
.tag { &.page-tags {
background-color: unset; .tag:not(:first-child) {
font-size: inherit; padding-right: 0;
margin-bottom: 0;
padding: 0;
& &:not(:last-child) {
margin-right: 0.2rem !important;
} }
} }
} }

View file

@ -61,6 +61,7 @@ section.hero {
} }
.content-details { .content-details {
font-size: 90%;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }

View file

@ -20,8 +20,9 @@
max-height: 175px; max-height: 175px;
} }
.subtitle { .content-details {
margin-bottom: 0.25rem !important; font-size: 80%;
margin-top: $subtitle-negative-margin;
} }
.media-content .content { .media-content .content {

View file

@ -1,20 +1,31 @@
{% if page.date %} <div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
<span title="{{ page.date }}"><i class="far fa-calendar-alt"></i>{{ page.date|date:"Y-m-d" }}</span>
{% endif %}
{% if page.reading_time %} {% if page.date %}
<span title="{{ page.word_count }} words"><i class="far fa-clock"></i>{{ page.reading_time }} minutes</span> <div class="control">
{% endif %} <div class="tags has-addons">
<span class="tag is-dark"><i class="far fa-calendar-alt"></i></span>
{% spaceless %} <span class="tag is-light">{{ page.date|date:"Y-m-d" }}</span>
{% if page.tags.all %}
<span>
<i class="fas fa-tags"></i>
<div class="tags is-family-code">
{% for tag in page.tags.all %}
<span class="tag"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
{% endfor%}
</div> </div>
<span> </div>
{% endif %} {% endif %}
{% endspaceless %}
{% if page.reading_time %}
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark"><i class="far fa-clock"></i></span>
<span class="tag is-light" title="{{ page.word_count }} words">{{ page.reading_time }} minutes</span>
</div>
</div>
{% endif %}
{% if page.tags.all %}
<div class="control page-tags">
<div class="tags has-addons">
<span class="tag is-dark"><i class="fas fa-tags"></i></span>
{% for tag in page.tags.all %}
<span class="tag is-white"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
{% endfor %}
</div>
</div>
{% endif %}
</div>

View file

@ -14,9 +14,8 @@
{% if page.subtitle %} {% if page.subtitle %}
<h2 class="subtitle">{{ page.subtitle }}</h2> <h2 class="subtitle">{{ page.subtitle }}</h2>
{% endif %} {% endif %}
<h3 class="is-size-6 content-details">
{% include "common/content-details.html" %} {% include "common/content-details.html" %}
</h3>
</div> </div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped"> <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
{% if page.table_of_contents %} {% if page.table_of_contents %}

View file

@ -12,7 +12,7 @@
<div class="media-content column"> <div class="media-content column">
<div> <div>
<h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2> <h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2>
<h3 class="subtitle is-6 content-details">{% include "common/content-details.html" %}</h3> {% include "common/content-details.html" %}
{% lorem 1 p %} {% lorem 1 p %}
</div> </div>
</div> </div>