diff options
| -rw-r--r-- | _includes/views/pagination-item.html | 32 | ||||
| -rw-r--r-- | _includes/views/pagination.html | 48 | ||||
| -rw-r--r-- | _includes/views/post-badges.html | 4 | ||||
| -rw-r--r-- | _includes/views/post-item.html | 1 | ||||
| -rw-r--r-- | _includes/views/segments.html | 8 | ||||
| -rw-r--r-- | _layouts/post.html | 13 | ||||
| -rw-r--r-- | _sass/yat/_dark.scss | 36 | ||||
| -rw-r--r-- | _sass/yat/_layout.scss | 103 |
8 files changed, 130 insertions, 115 deletions
diff --git a/_includes/views/pagination-item.html b/_includes/views/pagination-item.html new file mode 100644 index 0000000..bea6d91 --- /dev/null +++ b/_includes/views/pagination-item.html @@ -0,0 +1,32 @@ +{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%} + +{% assign article = post.content %} +{% assign lang = post.lang %} +{%- include functions.html func='get_reading_time' -%} +{% assign reading_time = return %} +{%- include functions.html func='get_article_excerpt' -%} +{% assign excerpt = return %} +{%- assign post_url = post.url | relative_url -%} + +<li class="{{ post_item_class }}"> + <h2 class="post-title"> + <a class="post-link" href="{{ post_url }}"> + {{ post.title | escape }} + {%- include views/post-badges.html -%} + </a> + </h2> + <div class="post-meta"> + <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span> + <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span> + </div> + <a class="post-excerpt" href="{{ post_url }}"> + <p> + {{ excerpt }} <span class="read_more">Read More</span> + </p> + </a> + <div class="post-tags"> + {%- for tag in post.tags -%} + <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a> + {%- endfor -%} + </div> +</li> diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html index 88be011..014df85 100644 --- a/_includes/views/pagination.html +++ b/_includes/views/pagination.html @@ -8,38 +8,24 @@ <div class="pagination"> <!-- Post list links --> <ul class="post-list"> - {%- for post in paginator.posts -%} - <li> - {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%} - - {% assign article = post.content %} - {% assign lang = post.lang %} - {%- include functions.html func='get_reading_time' -%} - {% assign reading_time = return %} - {%- include functions.html func='get_article_excerpt' -%} - {% assign excerpt = return %} - {%- assign post_url = post.url | relative_url -%} + <!-- Top list item --> + {%- if paginator == site or paginator.page == 1 -%} + {%- assign post_item_class = "top-post" -%} + {%- assign posts = site.posts + | where_exp: "item", "item.top > 0" + | sort: "top" -%} + {%- for post in posts -%} + {%- include views/pagination-item.html -%} + {%- endfor -%} + {%- endif -%} - <h2 class="post-title"> - <a class="post-link" href="{{ post_url }}"> - {{ post.title | escape }} - </a> - </h2> - <div class="post-meta"> - <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span> - <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span> - </div> - <a class="post-excerpt" href="{{ post_url }}"> - <p> - {{ excerpt }} <span class="read_more">Read More</span> - </p> - </a> - <div class="post-tags"> - {%- for tag in post.tags -%} - <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a> - {%- endfor -%} - </div> - </li> + <!-- Normal list item --> + {%- assign post_item_class = "" -%} + {%- for post in paginator.posts -%} + {%- if post.top -%} + {%- continue -%} + {%- endif -%} + {%- include views/pagination-item.html -%} {%- endfor -%} </ul> diff --git a/_includes/views/post-badges.html b/_includes/views/post-badges.html new file mode 100644 index 0000000..932781a --- /dev/null +++ b/_includes/views/post-badges.html @@ -0,0 +1,4 @@ +<span class="post-badges"> + <span class="post-badge badge-top">TOP</span> + <span class="post-badge badge-new">NEW</span> +</span> diff --git a/_includes/views/post-item.html b/_includes/views/post-item.html index 0d6d129..0cad1f4 100644 --- a/_includes/views/post-item.html +++ b/_includes/views/post-item.html @@ -9,5 +9,6 @@ <span> <a class="post-link" href="{{ post.url | relative_url }}"> {{ post.title | escape }} + {%- include views/post-badges.html -%} </a> </span> diff --git a/_includes/views/segments.html b/_includes/views/segments.html index 2c92dc1..0cf9414 100644 --- a/_includes/views/segments.html +++ b/_includes/views/segments.html @@ -13,7 +13,13 @@ {% assign items = site.posts | where: field, key %} {% for item in items %} {% if item != nil %} - <li> {% include views/post-item.html %} </li> + {%- assign post_item_class = "" -%} + {%- if item.top -%} + {%- assign post_item_class = "top-post" -%} + {%- endif -%} + <li class="{{ post_item_class }}"> + {%- include views/post-item.html -%} + </li> {% endif %} {% endfor %} {% endfor %} diff --git a/_layouts/post.html b/_layouts/post.html index c561308..442cfe6 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -50,7 +50,18 @@ sidebar: <ul> {% assign posts = site[page.collection] | sample:4 %} {%- for post in posts -%} - <li><a class="post-link" href="{{post.url | relative_url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li> + {%- assign post_item_class = "" -%} + {%- if post.top -%} + {%- assign post_item_class = "top-post" -%} + {%- endif -%} + <li class="{{ post_item_class }}"> + <a class="post-link" + href="{{ post.url | relative_url }}" + title="{{ post.title | escape }}"> + {{ post.title | escape | truncatewords: 12 }} + {%- include views/post-badges.html -%} + </a> + </li> {%- endfor -%} </ul> </div> diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss index 11bd327..a23896d 100644 --- a/_sass/yat/_dark.scss +++ b/_sass/yat/_dark.scss @@ -101,16 +101,6 @@ html[data-theme="dark"] { } .pagination { - .post-title { - a:visited:after { - background-color: $dark-background-color; - } - - a:after { - color: $dark-background-color; - } - } - .post-link { color: #bbb; } @@ -135,14 +125,6 @@ html[data-theme="dark"] { a { color: #ddd; } - - a:visited:after { - background-color: $dark-background-color; - } - - a:after { - color: $dark-background-color; - } } } @@ -166,15 +148,6 @@ html[data-theme="dark"] { color: #d7d7d7; } - a:visited:after { - color: $dark-background-color; - background-color: $dark-background-color; - } - - a:after { - color: $dark-background-color; - } - a:hover { color: #aaa; } @@ -223,5 +196,14 @@ html[data-theme="dark"] { } } } + + a .post-badges .post-badge { + color: $dark-background-color !important; + } + + a:visited .post-badges .post-badge.badge-new { + display: none; + background-color: $dark-background-color; + } } diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index 3931258..8398ca8 100644 --- a/_sass/yat/_layout.scss +++ b/_sass/yat/_layout.scss @@ -285,25 +285,6 @@ html { a { text-decoration: none; - - &:after { - content: 'NEW'; - position: absolute; - margin-left: 8px; - margin-top: 3px; - padding: 0px 3px; - background-color: $brand-color; - color: #fff; - font-size: 10px; - font-weight: 600; - border-radius: 2px; - transition-duration: $base-transition-duration; - } - - &:visited:after { - color: $background-color; - background-color: $background-color; - } } } @@ -477,24 +458,6 @@ html { &:hover { color: darken($grey-color, 50%); } - - &:after { - content: 'NEW'; - position: absolute; - margin-left: 8px; - margin-top: 3px; - padding: 0px 3px; - background-color: $brand-color; - color: $background-color; - font-size: 10px; - font-weight: 600; - border-radius: 2px; - } - - &:visited:after { - color: $background-color; - background-color: $background-color; - } } } } @@ -503,7 +466,6 @@ html { padding-top: 25px; } - /** * Posts misc */ @@ -754,23 +716,6 @@ html { &:hover { color: #000; } - - &:after { - content: 'NEW'; - position: absolute; - margin-left: 8px; - margin-top: 3px; - padding: 0px 3px; - background-color: $brand-color; - color: #fff; - font-size: 10px; - font-weight: 600; - border-radius: 2px; - } - - &:visited:after { - background-color: #fff; - } } } @@ -783,3 +728,51 @@ html { background-color: #e3e3e3e3; vertical-align: baseline; } + +/** + * Post badge + */ +.post-badges { + display: inline-block; + position: relative; + margin-left: 8px; + margin-top: 3px; + user-select: none; +} + +.pagination .post-badges { + bottom: 0.5em; +} + +.post-related .post-badges { + bottom: 0.1em; +} + +.page-segments .post-badges { + bottom: 0.1em; +} + +.post-badge { + display: none; + padding: 0px 3px; + background-color: $brand-color; + color: #fff; + font-size: 10px; + font-weight: 600; + border-radius: 2px; + transition-duration: $base-transition-duration; +} + +.post-badge.badge-new { + display: inline-block; +} + +.top-post .post-badges .post-badge.badge-top { + display: inline-block; +} + +a:visited .post-badges .post-badge.badge-new { + display: none; + color: $background-color; + background-color: $background-color; +} |