Update the post meta design.
This commit is contained in:
parent
2423dbc726
commit
caf8dec568
10 changed files with 76 additions and 55 deletions
|
@ -7,15 +7,11 @@
|
|||
|
||||
|
||||
license:
|
||||
link: "https://creativecommons.org/licenses/by/4.0/"
|
||||
prompt: This post is licensed under
|
||||
name: CC BY 4.0
|
||||
icons:
|
||||
- "fab fa-creative-commons"
|
||||
- "fab fa-creative-commons-by"
|
||||
link: "https://creativecommons.org/licenses/by/4.0/"
|
||||
|
||||
brief: Some rights reserved.
|
||||
|
||||
verbose: >-
|
||||
The blog posts on this site are licensed
|
||||
under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.
|
||||
Except where otherwise noted, the blog posts on this site are licensed
|
||||
under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
|
|
@ -12,9 +12,9 @@
|
|||
<p class="mb-0">
|
||||
© {{ 'now' | date: "%Y" }}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.right.brief %}
|
||||
{% if site.data.rights.brief %}
|
||||
<span data-toggle="tooltip" data-placement="top"
|
||||
title="{{ site.data.right.verbose }}">{{ site.data.right.brief }}</span>
|
||||
title="{{ site.data.rights.verbose }}">{{ site.data.rights.brief }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
-->
|
||||
|
||||
<div class="share-wrapper">
|
||||
<span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
|
||||
<span class="share-label mr-1">{{ site.data.share.label }}</span>
|
||||
<span class="share-icons">
|
||||
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
|
||||
{% assign url = page.url | relative_url | prepend: site.url %}
|
||||
|
|
|
@ -16,24 +16,42 @@ layout: default
|
|||
<h1 data-toc-skip>{{ page.title }}</h1>
|
||||
|
||||
<div class="post-meta text-muted d-flex flex-column">
|
||||
<!-- Published Date and Categoreis -->
|
||||
<!-- Published date and author -->
|
||||
<div>
|
||||
Posted
|
||||
<span class="timeago" data-toggle="tooltip" data-placement="bottom"
|
||||
title="{{ page.date | date: site.data.date_format.tooltip }}">
|
||||
{{ page.date | date: site.data.date_format.post }}
|
||||
<i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
|
||||
</span>
|
||||
{% if page.categories.size > 0 %}on{% endif %}
|
||||
{% for category in page.categories %}
|
||||
<a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
|
||||
{%- unless forloop.last -%}, {%- endunless -%}
|
||||
{% endfor %}
|
||||
by
|
||||
<span class="author">
|
||||
{% if page.author %}
|
||||
{{ page.author }}
|
||||
{% else%}
|
||||
{{ site.author }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- lastmod -->
|
||||
{% if page.seo.date_modified > page.date %}
|
||||
<div>
|
||||
Updated
|
||||
<span class="timeago lastmod"
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
title="{{ page.seo.date_modified | date: site.data.date_format.tooltip }}">
|
||||
{{ page.seo.date_modified | date: site.data.date_format.post }}
|
||||
<i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- page views -->
|
||||
{% if site.google_analytics.pv.enabled %}
|
||||
<div>
|
||||
<span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span> views
|
||||
<span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
|
||||
views
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
@ -57,22 +75,21 @@ layout: default
|
|||
|
||||
<div class="post-tail-wrapper text-muted">
|
||||
|
||||
<!-- lastmod -->
|
||||
{% if page.seo.date_modified > page.date %}
|
||||
<div>
|
||||
Updated
|
||||
<span class="timeago lastmod"
|
||||
data-toggle="tooltip" data-placement="top"
|
||||
title="{{ page.seo.date_modified | date: site.data.date_format.tooltip }}">
|
||||
{{ page.seo.date_modified | date: site.data.date_format.post }}
|
||||
<i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
|
||||
</span>
|
||||
<!-- categories -->
|
||||
{% if page.categories.size > 0 %}
|
||||
<div class="post-meta mb-3">
|
||||
<i class="far fa-folder-open fa-fw mr-1"></i>
|
||||
{% for category in page.categories %}
|
||||
<a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
|
||||
{%- unless forloop.last -%}, {%- endunless -%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Tags -->
|
||||
<!-- tags -->
|
||||
{% if page.tags.size > 0 %}
|
||||
<div class="pt-3">
|
||||
<div class="post-tags">
|
||||
<i class="fa fa-tags fa-fw mr-1"></i>
|
||||
{% for tag in page.tags %}
|
||||
<a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
|
||||
class="post-tag no-text-decoration" >
|
||||
|
@ -84,18 +101,11 @@ layout: default
|
|||
|
||||
<div class="post-tail-bottom
|
||||
d-flex justify-content-between align-items-center pt-5 pb-2">
|
||||
|
||||
{% if site.data.right.license %}
|
||||
{% if site.data.rights.license %}
|
||||
<div class="license-wrapper">
|
||||
<span class="license-text ml-1 mr-1">
|
||||
{{ site.data.right.license.prompt }}
|
||||
<a href="{{ site.data.right.license.link }}">
|
||||
{{ site.data.right.license.name }}
|
||||
{% for icon in site.data.right.license.icons %}
|
||||
<i class="{{ icon }}"></i>
|
||||
{% endfor %}
|
||||
</a>
|
||||
</span>
|
||||
This post is licensed under
|
||||
<a href="{{ site.data.rights.license.link }}">{{ site.data.rights.license.name }}</a>
|
||||
by the author.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: "Text and Typography"
|
||||
title: Text and Typography
|
||||
author: Cotes Chung
|
||||
date: 2019-08-08 11:33:00 +0800
|
||||
categories: [Blogging, Demo]
|
||||
tags: [typography]
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: "Writing a New Post"
|
||||
title: Writing a New Post
|
||||
author: Cotes Chung
|
||||
date: 2019-08-08 14:10:00 +0800
|
||||
categories: [Blogging, Tutorial]
|
||||
tags: [writing]
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Getting Started
|
||||
author: Cotes Chung
|
||||
date: 2019-08-09 20:55:00 +0800
|
||||
categories: [Blogging, Tutorial]
|
||||
tags: [getting started]
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: "Customize the Favicon"
|
||||
title: Customize the Favicon
|
||||
author: Cotes Chung
|
||||
date: 2019-08-11 00:34:00 +0800
|
||||
categories: [Blogging, Tutorial]
|
||||
tags: [favicon]
|
||||
|
|
|
@ -752,9 +752,6 @@ a {
|
|||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
.license-wrapper .license-text &:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
||||
} // a
|
||||
|
||||
|
@ -857,13 +854,14 @@ table {
|
|||
min-width: 2rem;
|
||||
text-align: center;
|
||||
background: var(--tag-bg);
|
||||
border-radius: .34rem;
|
||||
border-radius: .3rem;
|
||||
padding: 0 .4rem;
|
||||
color: #818182;
|
||||
line-height: 1.6rem;
|
||||
&:not(:first-child) {
|
||||
margin-left: .2rem;
|
||||
line-height: 1.3rem;
|
||||
&:not(:last-child) {
|
||||
margin-right: .2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %tag-hover;
|
||||
border-bottom: none;
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
MIT License
|
||||
*/
|
||||
@import "_addon/variables";
|
||||
@import "_addon/module";
|
||||
|
||||
$prompt-older: "{{ site.data.label.post.button.previous }}";
|
||||
$prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
|
@ -26,6 +27,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
border-color: var(--btn-border-color);
|
||||
}
|
||||
|
||||
.author {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post img {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
@ -40,11 +45,15 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
}
|
||||
|
||||
.post-tail-wrapper {
|
||||
margin-top: 5rem;
|
||||
margin-top: 4rem;
|
||||
border-bottom: 1px double var(--main-border-color);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.post-navigation {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 2rem;
|
||||
|
@ -268,8 +277,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
|
||||
.license-wrapper {
|
||||
line-height: 1.2rem;
|
||||
.license-text>a {
|
||||
>a {
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-weight: 400;
|
||||
|
@ -282,10 +294,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
|
||||
@media all and (max-width: 576px) {
|
||||
.post-tail-bottom {
|
||||
-ms-flex-wrap: wrap!important;
|
||||
flex-wrap: wrap!important;
|
||||
-ms-flex-wrap: wrap-reverse!important;
|
||||
flex-wrap: wrap-reverse!important;
|
||||
>div:first-child {
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue