Update the post meta design.

This commit is contained in:
Cotes Chung 2020-04-07 02:11:50 +08:00
parent 2423dbc726
commit caf8dec568
10 changed files with 76 additions and 55 deletions

View file

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

View file

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

View file

@ -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 %}

View file

@ -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 %}

View file

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

View file

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

View file

@ -1,5 +1,6 @@
---
title: Getting Started
author: Cotes Chung
date: 2019-08-09 20:55:00 +0800
categories: [Blogging, Tutorial]
tags: [getting started]

View file

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

View file

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

View file

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