Refactor content details to use tags
This commit is contained in:
parent
ed535626b5
commit
b2df6aa7d2
6 changed files with 45 additions and 39 deletions
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,6 +61,7 @@ section.hero {
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-details {
|
.content-details {
|
||||||
|
font-size: 90%;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue