Beautify the pin label on home page

This commit is contained in:
Cotes Chung 2020-12-17 15:18:02 +08:00
parent b9ffe15ffb
commit 5ffbfaec26
6 changed files with 71 additions and 41 deletions

View file

@ -4,16 +4,17 @@
# © 2017-2019 Cotes Chung
# MIT Licensed
panel:
lastmod: "Recent Update"
trending_tags: "Trending Tags"
toc: "Contents"
lastmod: Recent Update
trending_tags: Trending Tags
toc: Contents
post:
relate_posts: "Further Reading"
relate_posts: Further Reading
button:
next: Newer
previous: Older
search_hint: "Search" # text show on search bar
search_hint: Search # text show on search bar
pin_prompt: Pinned # pinned prompt

View file

@ -49,13 +49,10 @@ layout: page
{% for post in posts %}
<div class="post-preview">
<div class="d-flex justify-content-between pr-xl-2">
<h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
{% if post.pin == true %}
<i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
title="Pinned"></i>
{% endif %}
</div>
<a href="{{ post.url | relative_url }}">
<h1>{{ post.title }}</h1>
</a>
<div class="post-content">
<p>
{% include no-linenos.html content=post.content %}
@ -63,24 +60,35 @@ layout: page
</p>
</div>
<div class="post-meta text-muted">
<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
{% include timeago.html date=post.date tooltip=true %}
<div class="post-meta text-muted d-flex justify-content-between">
<!-- time to read -->
<i class="far fa-clock fa-fw"></i>
<span>{% include read-time.html content=post.content %}</span>
<div>
<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
{% include timeago.html date=post.date tooltip=true %}
<!-- page views -->
{% if site.google_analytics.pv.enabled %}
<i class="far fa-eye fa-fw"></i>
<span id="pv_{{-post.title-}}" class="pageviews">
<i class="fas fa-spinner fa-spin fa-fw"></i>
</span>
<!-- time to read -->
<i class="far fa-clock fa-fw"></i>
{% include read-time.html content=post.content %}
<!-- page views -->
{% if site.google_analytics.pv.enabled %}
<i class="far fa-eye fa-fw"></i>
<span id="pv_{{-post.title-}}" class="pageviews">
<i class="fas fa-spinner fa-spin fa-fw"></i>
</span>
{% endif %}
</div>
{% if post.pin %}
<div class="pin">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.label.pin_prompt }}</span>
</div>
{% endif %}
</div>
</div> <!-- .post-meta -->
</div> <!-- .post-review -->
{% endfor %}

View file

@ -51,6 +51,8 @@
--btn-text-color: var(--text-color);
--btn-paginator-border-color: var(--btn-border-color);
--btn-paginator-shadow: var(--main-wrapper-bg);
--pin-bg: rgb(34 35 37);
--pin-color: iherit;
/* Posts */
--toc-highlight: rgb(116, 178, 243);

View file

@ -53,6 +53,8 @@
--btn-text-color: #f8f8f8;
--btn-paginator-border-color: #f1f1f1;
--btn-paginator-shadow: #4b92d2;
--pin-bg: #f5f5f5;
--pin-color: #999fa4;
/* Posts */
--btn-share-hover-color: var(--link-color);

View file

@ -20,17 +20,14 @@
h1 {
font-size: 1.4rem;
margin: 0;
~i { // pinned icon
font-size: 0.86rem;
}
}
.post-meta {
i {
font-size: 0.73rem;
&:not(:first-child) { // post-meta icons on the homepage
margin-left: 1rem;
}
}
span:not(:last-child) {
margin-right: 1.2rem;
}
}
@ -38,7 +35,7 @@
margin-top: 0.6rem;
margin-bottom: 0.6rem;
color: var(--post-list-text-color);
>p {
> p {
/* Make preview shorter on the homepage */
margin: 0;
overflow: hidden;
@ -49,6 +46,17 @@
}
}
.pin {
> i {
transform: rotate(45deg);
padding-left: 3px;
color: var(--pin-color);
}
> span {
display: none;
}
}
} // .post-preview
} // #post-list
@ -107,12 +115,6 @@
} // .pagination
@media all and (max-width: 576px) {
#post-list .post-meta>span i:not(:first-child) {
margin-left: 1rem;
}
}
/* Hide SideBar and TOC */
@media all and (max-width: 830px) {
.pagination {
@ -125,6 +127,21 @@
#post-list {
margin-top: 1.5rem;
.post-preview .post-meta {
.pin {
background: var(--pin-bg);
border-radius: 5px;
line-height: 1.4rem;
height: 1.3rem;
margin-top: 3px;
padding-left: 1px;
padding-right: 6px;
> span {
display: inline;
}
}
}
}
.pagination {

View file

@ -145,7 +145,7 @@ function displayPageviews(data) {
if ($("#post-list").length > 0) { /* the Home page */
$(".post-preview").each(function() {
var path = $(this).children("div").children("h1").children("a").attr("href");
var path = $(this).find("a").attr("href");
tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
});