From 675838e396c06daf50df45b0fb5f423850d6401f Mon Sep 17 00:00:00 2001
From: foo-dogsquared <christiangabrielarazas@gmail.com>
Date: Sun, 19 Aug 2018 14:42:58 +0800
Subject: [PATCH] Add a new fix to the pagination and a slight overhaul

---
 _config.yml                              |  4 +-
 _includes/addl-post-fns.html             | 30 ++++++-
 _includes/footer.html                    | 12 ++-
 _includes/post_meta.html                 | 22 ++++++
 _layouts/home.html                       | 99 ++++++++++++++----------
 _layouts/post.html                       | 32 ++++----
 _sass/_custom.scss                       | 99 ++++++++++++++++++++----
 assets/main/icons/calendar.svg           |  1 +
 assets/main/icons/categories.svg         |  1 +
 assets/main/icons/open-in-new-window.svg |  3 +
 assets/main/icons/tag.svg                |  1 +
 assets/main/icons/time-clock.svg         |  1 +
 assets/main/icons/update.svg             |  1 +
 13 files changed, 226 insertions(+), 80 deletions(-)
 create mode 100644 _includes/post_meta.html
 create mode 100644 assets/main/icons/calendar.svg
 create mode 100644 assets/main/icons/categories.svg
 create mode 100644 assets/main/icons/open-in-new-window.svg
 create mode 100644 assets/main/icons/tag.svg
 create mode 100644 assets/main/icons/time-clock.svg
 create mode 100644 assets/main/icons/update.svg

diff --git a/_config.yml b/_config.yml
index f145151..7bb7837 100644
--- a/_config.yml
+++ b/_config.yml
@@ -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:
diff --git a/_includes/addl-post-fns.html b/_includes/addl-post-fns.html
index 8034657..722382b 100644
--- a/_includes/addl-post-fns.html
+++ b/_includes/addl-post-fns.html
@@ -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>
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index f01168b..11945b6 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -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>
 
diff --git a/_includes/post_meta.html b/_includes/post_meta.html
new file mode 100644
index 0000000..e75f21b
--- /dev/null
+++ b/_includes/post_meta.html
@@ -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>
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
index 15ec0d3..e94ee83 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -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 -%}
diff --git a/_layouts/post.html b/_layouts/post.html
index 33e9782..720dff5 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -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 -%}
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index 67b69b4..c358b36 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -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;
         }
diff --git a/assets/main/icons/calendar.svg b/assets/main/icons/calendar.svg
new file mode 100644
index 0000000..f5a4a22
--- /dev/null
+++ b/assets/main/icons/calendar.svg
@@ -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>
\ No newline at end of file
diff --git a/assets/main/icons/categories.svg b/assets/main/icons/categories.svg
new file mode 100644
index 0000000..0562d04
--- /dev/null
+++ b/assets/main/icons/categories.svg
@@ -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>
\ No newline at end of file
diff --git a/assets/main/icons/open-in-new-window.svg b/assets/main/icons/open-in-new-window.svg
new file mode 100644
index 0000000..e9d8da7
--- /dev/null
+++ b/assets/main/icons/open-in-new-window.svg
@@ -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>
\ No newline at end of file
diff --git a/assets/main/icons/tag.svg b/assets/main/icons/tag.svg
new file mode 100644
index 0000000..6c4818b
--- /dev/null
+++ b/assets/main/icons/tag.svg
@@ -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>
\ No newline at end of file
diff --git a/assets/main/icons/time-clock.svg b/assets/main/icons/time-clock.svg
new file mode 100644
index 0000000..d66b96b
--- /dev/null
+++ b/assets/main/icons/time-clock.svg
@@ -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>
\ No newline at end of file
diff --git a/assets/main/icons/update.svg b/assets/main/icons/update.svg
new file mode 100644
index 0000000..47423f8
--- /dev/null
+++ b/assets/main/icons/update.svg
@@ -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>
\ No newline at end of file