Beautify the pin label on home page
This commit is contained in:
parent
b9ffe15ffb
commit
5ffbfaec26
6 changed files with 71 additions and 41 deletions
|
@ -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
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue