Add a new fix to the pagination and a slight overhaul

This commit is contained in:
foo-dogsquared 2018-08-19 14:42:58 +08:00
parent 26462f6a75
commit 675838e396
13 changed files with 226 additions and 80 deletions

View File

@ -19,7 +19,7 @@ description: >- # this means to ignore newlines until "baseurl:"
A blog that serves as a documentation of my progress
learning anything tech-related, mostly programming and
engineering. Yes, one of those blogs...
baseurl: "/blog/" # the subpath of your site, e.g. /blog
baseurl: "/blog" # the subpath of your site, e.g. /blog
url: "https://foo-dogsquared.github.io" # the base hostname & protocol for your site, e.g. http://example.com
codepen_username: foo-dogsquared
@ -29,7 +29,7 @@ gitlab_username: foo-dogsquared
linkedin_username: gabriel-arazas
twitter_username: foo_dogsquared
paginate: 10
paginate_path: '/blog/page:num/'
paginate_path: '/page:num/'
# Enabling Disqus
disqus:

View File

@ -3,7 +3,6 @@
function insertHeaderLink() {
const HEADINGS = document.querySelectorAll(`article.post div[itemprop="articleBody"] h1[id], h2[id]`);
const MAIN_NODE_LIST = document.querySelector('div.post-content[itemprop="articleBody"]');
console.log(HEADINGS);
if (HEADINGS.length === 0) return null;
// creating an element containing the links to the selected headers
@ -36,14 +35,37 @@
function resourcesLink() {
const RESOURCES = document.querySelector("article.post .post-content h2#resources");
if (RESOURCES === null) return;
if (RESOURCES === null) return null;
else if (RESOURCES.nextElementSibling.tagName === 'UL') {
const LIST_OF_LINKS = Array.from(RESOURCES.nextElementSibling.children)
LIST_OF_LINKS.forEach(listedLinks => listedLinks.children[0].setAttribute("target", "_blank"));
const LIST_OF_HEADERS = Array.from(RESOURCES.nextElementSibling.children);
console.log(LIST_OF_HEADERS)
LIST_OF_HEADERS.forEach(source_li => {
const INNER_LIST_OF_LINKS = source_li.children[1];
if (INNER_LIST_OF_LINKS === undefined) return null;
INNER_LIST_OF_LINKS.setAttribute("class", "resources-link");
const LIST_OF_LINKS = Array.from(INNER_LIST_OF_LINKS.children);
console.log(LIST_OF_LINKS);
LIST_OF_LINKS.forEach(li => {
li.children[0].innerHTML = `<img src="{{ 'assets/main/icons/open-in-new-window.svg' | relative_url}}" style="height: 1em; width: 1em; padding: 0;"><span style="margin-left: 0.75em">${li.children[0].innerHTML}</span>`;
li.children[0].setAttribute("target", "_blank");
})
});
};
}
function convert_to_wpm(number_of_words = document.querySelectorAll(".no-of-mins")) {
// const imgs = document.querySelectorAll("main > .wrapper .post-content[itemprop='articleBody'] center > img");
number_of_words.forEach((num) => {
const wpm = 225 /* avg wpm for an adult */
num.textContent = Math.round((Number(num.textContent) / wpm) + 1 /*+ (imgs.length * 0.2) */);
return;
})
}
insertHeaderLink();
// insertCenterTags();
resourcesLink();
convert_to_wpm();
</script>

View File

@ -33,9 +33,17 @@
</div>
</div>
<div class="site-icon-credits">
<p>Resources used:</p>
<p><a href="https://thenounproject.com/term/tag/88707">Tag</a>, by <a href="https://thenounproject.com/cengizsari">Cengiz SARI</a></p>
<p><a href="https://thenounproject.com/term/calendar/689869/">Calendar</a>, <a href="https://thenounproject.com/term/catalog/972336">Catalog</a>, <a href="https://thenounproject.com/term/open-in-new-window/972169/">Open in New Window</a>, and <a href="https://thenounproject.com/term/update/514116">Update</a> by <a href="https://thenounproject.com/monstercritic">✦ Shmidt Sergey ✦</a></p>
<p><a href="https://thenounproject.com/term/time/1286627">Time</a>, by <a href="https://thenounproject.com/icondesk">Icondesk</a></p>
</div>
<div class="site-credits">
Built with <a href="https://jekyllrb.com/">Jekyll</a> and hosted by <a href="https://github.com">GitHub</a> <br>
<span class="copyright">Copyright (I think?) © <span class="date-year"></span></span>
<p>Built with <a href="https://jekyllrb.com/">Jekyll</a> and hosted by <a href="https://github.com">GitHub</a></p>
<p>Icons from <a href="https://thenounproject.com">The Noun Project</a></p>
<p class="copyright">© <span class="date-year"></span> Gabriel Arazas</p>
</div>
</div>

22
_includes/post_meta.html Normal file
View File

@ -0,0 +1,22 @@
<p class="post-meta">
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
<img src="{{ 'assets/main/icons/calendar.svg' | relative_url }}" style="width: 1.5em; height: 1.5em">
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span title="{{ page.date }}"> {{ page.date | date: date_format }}</span>
</time>
<span class="reading-minutes" style="margin-left: 1.25em">
<img src="{{ 'assets/main/icons/time-clock.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;"> <span class="no-of-mins">{{ page.content | number_of_words }}</span> minutes
</span>
{%- if page.categories -%}
<span class="post-category" style="margin-left: 1.25em">
<img src="{{ 'assets/main/icons/categories.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
{{ page.categories }}
</span>
{%- endif -%}
{%- if page.updatedOn -%}
<p class="dt-updated">Updated: <span>{{ page.updatedOn | escape }}</span></p>
{%- endif -%}
</p>

View File

@ -18,51 +18,68 @@ layout: default
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{% for post in paginator.posts %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta" title="{{ post.date }}">{{ post.date | date: date_format }}</span>
<h3 style="margin:0">
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{% if post.alt_title %}
<h4 class="alt-title home" style="margin: 0">
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.alt_title | escape }}</a>
</h4>
{% endif %}
<!-- {%- if post.tags -%}
<span class="list-tags home-tags">Tags: &nbsp;{{ post.tags | sort | join: ', ' }}</span>
{%- endif -%} -->
<!-- Pagination links -->
{% for post in paginator.posts %}
<div class="home-post">
<h2><a href="{{ post.url | relative_url }}" class="post-link">{{ post.title }}</a></h2>
{% if post.alt_title %}
<h3><a href="{{ post.url | relative_url }}" class="post-alt-link">{{ post.alt_title }}</a></h3>
{% endif %}
<p class="post-meta">
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">
<img src="{{ 'assets/main/icons/calendar.svg' | relative_url }}" style="width: 1.5em; height: 1.5em">
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span title="{{ post.date }}"> {{ post.date | date: date_format }}</span>
</time>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<span class="reading-minutes" style="margin-left: 1.25em">
<img src="{{ 'assets/main/icons/time-clock.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;"> <span class="no-of-mins">{{ post.content | number_of_words }}</span> minutes
</span>
<!-- Pagination links -->
{% if paginator %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">Previous</a>
{% else %}
<span class="previous disabled">Previous</span>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }} <br>
</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="next">Next</a>
{% else %}
<span class="next disabled">Next</span>
{% endif %}
{%- if post.categories -%}
<span class="home-post-category" style="margin-left: 1.25em">
<img src="{{ 'assets/main/icons/categories.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
{{ post.categories }}
</span>
{%- endif -%}
{%- if post.updatedOn -%}
<span class="dt-updated" style="margin-left: 1.25em">
<img src="{{ 'assets/main/icons/update.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
{{ post.updatedOn }}
</span>
{%- endif -%}
</p>
</div>
{% endfor %}
<script>
function convert_to_wpm(number_of_words = document.querySelectorAll(".no-of-mins")) {
number_of_words.forEach((num) => {
const wpm = 225 /* avg wpm for an adult */
num.textContent = Math.round((Number(num.textContent) / wpm) + 1);
return;
})
}
convert_to_wpm();
</script>
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}" class="previous">Previous</a>
{% else %}
<span class="previous disabled">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}" class="next">Next</a>
{% else %}
<span class="next disabled">Next</span>
{% endif %}
</div>
{% endif %}
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}

View File

@ -9,19 +9,8 @@ layout: default
{% if page.alt_title %}
<h2 class="post-alt-title">{{ page.alt_title | escape }}</h2>
{% endif %}
<p class="post-meta">
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span title="{{ page.date }}">{{ page.date | date: date_format }}</span>
</time>
{%- if page.author -%}
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
{%- endif -%}
{%- if page.updatedOn -%}
<div class="dt-updated">Updated: <span>{{ page.updatedOn | escape }}</span></div>
{%- endif -%}
</p>
{%- include post_meta.html -%}
</header>
<div class="post-content e-content" itemprop="articleBody">
@ -36,7 +25,7 @@ layout: default
{%- endif -%}
{%- if page.tags -%}
<div class="post-tags">
Tags: &nbsp;
<img src="{{ 'assets/main/icons/tag.svg' | relative_url }}" style="width: 2em; height: 2em">
{% for tag in page.tags %}
<a class="link-tag" href="{{site.baseurl}}/tags/#{{tag|slugize}}">{{tag}}</a>
{% unless forloop.last %}&nbsp;{% endunless %}
@ -44,6 +33,21 @@ layout: default
</div>
{%- endif -%}
<div class="relative-posts">
<div class="previous-post">
{%- if page.previous -%}
<span style="font-size: 2em"></span> Previous
<a href="{{ page.previous.url | relative_url }}" class="post-link" style="display: block;">{{page.previous.title}}</a>
{%- endif -%}
</div>
<div class="next-post">
{%- if page.next -%}
Next <span style="font-size: 2em"></span>
<a href="{{ page.next.url | relative_url }}" class="post-link" style="display: block;">{{page.next.title}}</a>
{%- endif -%}
</div>
</div>
{%- if site.disqus.shortname -%}
{%- include disqus_comments.html -%}
{%- endif -%}

View File

@ -20,6 +20,9 @@ a:visited {
&.post-link:visited {
color: $brown;
}
&.post-alt-link:visited {
color: $brown;
}
}
blockquote {
@ -92,6 +95,41 @@ table:not(.rouge-table) {
}
}
.relative-posts {
color: $grey-color-dark;
display: flex;
font-size: $small-font-size;
justify-content: space-between;
margin-top: 2em;
a {
font-size: $base-font-size * 1.2;
}
.previous-post {
text-align: left;
}
.next-post {
text-align: right;
}
@include media-query($on-laptop) {
flex-flow: column wrap;
align-content: center;
justify-content: center;
text-align: center;
> * {
margin-top: 2em;
}
.previous-post, .next-post {
text-align: center;
}
}
}
// code syntax table
figure.highlight {
border: 1px solid $grey-color-light;
@ -118,16 +156,13 @@ figure.highlight {
}
// alt title properties
.alt-title {
color: $grey-color;
&.home {
&::before {
content: "ALT TITLE: "
}
a.post-link {
display: inline;
font-size: $base-font-size * 1.05;
}
main .home {
> .home-post:not(:first-of-type) {
margin-top: 3em;
}
> .home-post > * {
margin: 0;
}
}
@ -144,10 +179,6 @@ h2.post-alt-title {
}
.post-content {
// h1, h2, h3, h4, h5, h6 {
// font-family: "Georgia", $base-font-family;
// }
> h1:not(:first-child){
margin-top: $spacing-unit * 1.65;
}
@ -159,6 +190,19 @@ h2.post-alt-title {
h3:not(:first-child) {
margin-top: $spacing-unit * 1.15;
}
ul.resources-link {
list-style: none;
margin-left: 1.9em;
@include media-query($on-palm) {
margin-left: 0;
> li {
margin-bottom: 0.75em;
}
}
}
}
}
}
@ -166,6 +210,7 @@ h2.post-alt-title {
// notes.md
.entry-list-item {
display: flex;
align-items: center;
justify-content: space-between;
margin: .25em;
padding: .5em;
@ -180,6 +225,7 @@ h2.post-alt-title {
}
@include media-query($on-palm) {
flex-flow: column;
align-items: baseline;
}
}
@ -301,7 +347,7 @@ code.fileName {
}
}
.dt-updated {
.dt-updated, .reading-minutes {
color: $grey-color;
font-size: $small-font-size;
margin-top: 0;
@ -385,11 +431,30 @@ code.fileName {
fill: $super-platinum;
}
}
.site-credits {
text-align: center;
.site-icon-credits {
font-size: $small-font-size;
margin-bottom: 1.5em;
p {
margin: 0;
}
a {
color: $footer-link;
}
}
.site-credits {
text-align: center;
> p {
margin: 0;
}
a {
color: $footer-link;
}
.copyright {
font-size: $small-font-size;
}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40" enable-background="new 0 0 32 32" x="0px" y="0px"><g><path d="M29.496 32h-26.992c-1.38 0-2.504-1.123-2.504-2.504v-24.991c0-1.381 1.124-2.505 2.505-2.505h26.99c1.381 0 2.505 1.124 2.505 2.505v24.991c0 1.381-1.123 2.504-2.504 2.504zm-26.991-28c-.278 0-.505.227-.505.505v24.991c0 .278.226.504.504.504h26.992c.278 0 .504-.226.504-.504v-24.991c0-.278-.227-.505-.505-.505h-26.99zM31 10h-30c-.552 0-1-.448-1-1s.448-1 1-1h30c.553 0 1 .448 1 1s-.447 1-1 1zM6 6c-.552 0-1-.448-1-1v-4c0-.552.448-1 1-1s1 .448 1 1v4c0 .552-.448 1-1 1zM26 6c-.553 0-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4c0 .552-.447 1-1 1z"/><circle cx="6" cy="18" r="1"/><circle cx="6" cy="22" r="1"/><circle cx="6" cy="26" r="1"/><circle cx="22" cy="14" r="1"/><circle cx="22" cy="18" r="1"/><circle cx="22" cy="22" r="1"/><circle cx="22" cy="26" r="1"/><circle cx="26" cy="14" r="1"/><circle cx="26" cy="18" r="1"/><circle cx="26" cy="22" r="1"/><circle cx="14" cy="14" r="1"/><circle cx="14" cy="18" r="1"/><circle cx="14" cy="22" r="1"/><circle cx="14" cy="26" r="1"/><circle cx="10" cy="14" r="1"/><circle cx="10" cy="18" r="1"/><circle cx="10" cy="22" r="1"/><circle cx="10" cy="26" r="1"/><circle cx="18" cy="14" r="1"/><circle cx="18" cy="18" r="1"/><circle cx="18" cy="22" r="1"/><circle cx="18" cy="26" r="1"/></g><text x="0" y="47" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by ✦ Shmidt Sergey ✦</text><text x="0" y="52" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 30" style="enable-background:new 0 0 24 24;" xml:space="preserve"><g><path d="M13.745,24h-4.49C8.563,24,8,23.438,8,22.745L8,1.252C8,0.562,8.562,0,9.252,0h4.496C14.438,0,15,0.562,15,1.252v21.493 C15,23.438,14.438,24,13.745,24z M9.252,1C9.113,1,9,1.113,9,1.252l0,21.493C9,22.886,9.115,23,9.255,23h4.49 C13.886,23,14,22.886,14,22.745V1.252C14,1.113,13.887,1,13.748,1H9.252z"/><path d="M5.745,24H1.255C0.563,24,0,23.438,0,22.745L0,1.252C0,0.562,0.562,0,1.252,0h4.497C6.439,0,7,0.562,7,1.252l0,21.493 C7,23.438,6.437,24,5.745,24z M1.252,1C1.113,1,1,1.113,1,1.252l0,21.493C1,22.886,1.115,23,1.255,23h4.489 C5.885,23,6,22.886,6,22.745L6,1.252C6,1.113,5.888,1,5.749,1H1.252z"/><path d="M21.745,24h-4.49C16.562,24,16,23.438,16,22.745V1.252C16,0.562,16.562,0,17.252,0h4.496C22.438,0,23,0.562,23,1.252 v21.493C23,23.438,22.438,24,21.745,24z M17.252,1C17.113,1,17,1.113,17,1.252v21.493C17,22.886,17.114,23,17.255,23h4.49 C21.886,23,22,22.886,22,22.745V1.252C22,1.113,21.887,1,21.748,1H17.252z"/><rect x="0.855" y="17" width="5.133" height="1"/><rect x="0.875" y="5" width="5.25" height="1"/><rect x="8.875" y="17" width="5.25" height="1"/><rect x="8.875" y="5" width="5.25" height="1"/><rect x="17.011" y="17" width="5.134" height="1"/><rect x="16.875" y="5" width="5.25" height="1"/></g><text x="0" y="39" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by ✦ Shmidt Sergey ✦</text><text x="0" y="44" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,3 @@
<svg stroke="#b3411d" fill="#b3411d" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 30" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g><path d="M15.505,24H2.495C1.119,24,0,22.881,0,21.505V8.495C0,7.119,1.119,6,2.495,6H11v1H2.495C1.671,7,1,7.671,1,8.495v13.01 C1,22.329,1.671,23,2.495,23h13.01C16.329,23,17,22.329,17,21.505V13h1v8.505C18,22.881,16.881,24,15.505,24z"/><rect x="23" width="1" height="8"/><rect x="16" width="8" height="1"/><rect x="4.571" y="7.841" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.3114 13.5157)" width="22.177" height="1"/></g>
</svg>

After

Width:  |  Height:  |  Size: 668 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M94.4,54.6L42.6,2.4C41.1,0.8,39,0,36.9,0H8C3.6,0,0,3.6,0,8v28.7c0,2.1,0.8,4.1,2.3,5.6l52,52c1.6,1.6,3.6,2.3,5.7,2.3 c2,0,4.1-0.8,5.6-2.3l28.7-28.5C97.5,62.8,97.5,57.7,94.4,54.6z M91.5,63L62.8,91.5c-0.8,0.8-1.8,1.2-2.8,1.2 c-1.1,0-2.1-0.4-2.8-1.2l-52-52C4.4,38.8,4,37.8,4,36.7V8c0-2.2,1.8-4,4-4h28.9C38,4,39,4.4,39.8,5.2l51.8,52.2 C93.1,59,93.1,61.5,91.5,63z"/><path d="M20,12c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8s8-3.6,8-8C28,15.6,24.4,12,20,12z M20,24c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4 s4,1.8,4,4C24,22.2,22.2,24,20,24z"/></svg>

After

Width:  |  Height:  |  Size: 729 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40" x="0px" y="0px"><title>18-Time</title><g data-name="18-Time"><path d="M16,32A16,16,0,1,1,32,16,16,16,0,0,1,16,32ZM16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"/><path d="M26,18H16a1,1,0,0,1-1-1V7h2v9h9Z"/></g><text x="0" y="47" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Iconstock</text><text x="0" y="52" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

After

Width:  |  Height:  |  Size: 616 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 60" x="0px" y="0px"><g><path d="M46 24c0 12.131-9.869 22-22 22-7.192 0-13.963-3.411-18.107-9h10.107v-2h-13.000000000000002v13h2v-8.881c4.559 5.542 11.58 8.881 19 8.881 13.233 0 24-10.767 24-24h-2zM24 2c7.213 0 13.985 3.411 18.112 9h-10.112v2h13v-2h-.005l-.057-11.005-2 .011.046 8.846c-4.545-5.525-11.556-8.852-18.984-8.852-13.233 0-24 10.767-24 24h2c0-12.131 9.869-22 22-22z"/></g><text x="0" y="63" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Shmidt Sergey</text><text x="0" y="68" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

After

Width:  |  Height:  |  Size: 792 B