updated: content meta design

14 files changed, 346 insertions, 247 deletions

diff --git a/assets/scss/components/_single-blog-post.scss b/assets/scss/components/_single-blog-post.scss
index 5cdd10e..7b1a5d1 100644
--- a/assets/scss/components/_single-blog-post.scss
+++ b/assets/scss/components/_single-blog-post.scss
@@ -1,76 +1,95 @@
 .section {
+  padding-top: 70px;
+  @include desktop {
+    padding: 50px 0;
+  }
+  .svg-img {
+    position: absolute;
+    top: 30%;
+    left: -7%;
+    animation: move_top 5s infinite linear;
     @include desktop {
-        padding: 50px 0;
+      display: none;
     }
-    .svg-img {
-        position: absolute;
-        top: 30%;
-        left: -7%;
-        animation: move_top 5s infinite linear;
-        @include desktop {
-            display: none;
-        }
+  }
+  .animate-shape {
+    position: absolute;
+    top: 29%;
+    right: 4%;
+    height: 300px;
+    width: 300px;
+    svg {
+      width: 100%;
     }
-    .animate-shape {
-        position: absolute;
-        top: 29%;
-        right: 4%;
-        height: 300px;
-        width: 300px;
-        svg {
-            width: 100%;
-        }
-        @include desktop {
-            display: none;
-        }
+    @include desktop {
+      display: none;
+    }
+  }
+  .animate-pattern {
+    position: absolute;
+    top: 46%;
+    right: 12%;
+    height: 100px;
+    width: 100px;
+    animation: move_top 3s infinite linear;
+    img {
+      height: 100%;
+      width: 100%;
+    }
+    @include desktop {
+      display: none;
+    }
+  }
+  .singleBlog {
+    &__feature {
+      margin: 0 100px;
+      @include desktop {
+        margin: 0;
+      }
+      img {
+        height: 100%;
+        width: 100%;
+        border-radius: 20px;
+      }
     }
-    .animate-pattern {
-        position: absolute;
-        top: 46%;
-        right: 12%;
-        height: 100px;
-        width: 100px;
-        animation: move_top 3s infinite linear;
+    &__content {
+      margin: 0 200px 0 200px;
+      @include desktop {
+        margin: 0;
+      }
+      .blog-section {
+        margin-bottom: 60px;
         img {
-            height: 100%;
+          float: right;
+          mask: url("../images/hero/hero-mask-svg.png");
+          -webkit-mask-repeat: no-repeat;
+          -webkit-mask-size: contain;
+          -webkit-mask-position: center center;
+          @include tablet {
             width: 100%;
+            float: none;
+            margin-bottom: 40px;
+          }
         }
-        @include desktop {
-            display: none;
-        }
+      }
     }
-    .singleBlog {
-        &__feature {
-            margin: 0 100px;
-            @include desktop {
-                margin: 0;
-            }
-            img {
-                height: 100%;
-                width: 100%;
-                border-radius: 20px;
-            }
-        }
-        &__content {
-            margin: 0 200px 0 200px;
-            @include desktop {
-                margin: 0;
-            }
-            .blog-section {
-                margin-bottom: 60px;
-                img {
-                    float: right;
-                    mask: url("../images/hero/hero-mask-svg.png");
-                    -webkit-mask-repeat: no-repeat;
-                    -webkit-mask-size: contain;
-                    -webkit-mask-position: center center;
-                    @include tablet {
-                        width: 100%;
-                        float: none;
-                        margin-bottom: 40px;
-                    }
-                }
-            }
-        }
+  }
+}
+.post-meta {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 10px;
+  li {
+    list-style: none;
+    z-index: 2;
+    i {
+      padding-right: 7px;
+    }
+    a {
+      color: #7e7e8a;
+      &:hover {
+        color: $primary;
+      }
     }
+  }
 }
diff --git a/exampleSite/content/blog/benjamin-franklins-thoughts-about-new-designers.md b/exampleSite/content/blog/benjamin-franklins-thoughts-about-new-designers.md
index 5025015..84a9568 100644
--- a/exampleSite/content/blog/benjamin-franklins-thoughts-about-new-designers.md
+++ b/exampleSite/content/blog/benjamin-franklins-thoughts-about-new-designers.md
@@ -3,6 +3,8 @@ title: "Benjamin Franklins thoughts about new designers"
 date: 2020-07-13T12:49:27+06:00
 featureImage: images/allpost/allPost-7.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: website
+categories: blog
 ---
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/exampleSite/content/blog/designer-conference-at-florida-2020.md b/exampleSite/content/blog/designer-conference-at-florida-2020.md
index c06c0ec..4066482 100644
--- a/exampleSite/content/blog/designer-conference-at-florida-2020.md
+++ b/exampleSite/content/blog/designer-conference-at-florida-2020.md
@@ -3,6 +3,8 @@ title: "Designer Conference at Florida 2020"
 date: 2020-07-13T13:06:26+06:00
 featureImage: images/allpost/allPost-2.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: mobile
+categories: documentation
 ---
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/exampleSite/content/blog/designers-thoughts-about-mobile-UI.md b/exampleSite/content/blog/designers-thoughts-about-mobile-UI.md
index 0d025da..703c898 100644
--- a/exampleSite/content/blog/designers-thoughts-about-mobile-UI.md
+++ b/exampleSite/content/blog/designers-thoughts-about-mobile-UI.md
@@ -3,6 +3,8 @@ title: "Designers thoughts about mobile UI"
 date: 2020-07-13T12:49:27+06:00
 featureImage: images/allpost/allPost-5.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: mobile
+categories: blog
 ---
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/exampleSite/content/blog/how-to-become-acreative-designer.md b/exampleSite/content/blog/how-to-become-acreative-designer.md
index 407d85d..99b3c40 100644
--- a/exampleSite/content/blog/how-to-become-acreative-designer.md
+++ b/exampleSite/content/blog/how-to-become-acreative-designer.md
@@ -3,8 +3,13 @@ title: "How to become acreative designer"
 date: 2020-07-13T12:49:27+06:00
 featureImage: images/allpost/allPost-9.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: fun
+categories: documentation
+toc: true
 ---
 
+## Introduction
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -12,6 +17,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 > "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
 > -- <cite>Benjamin Franklin</cite>
 
+## Why and How
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 - ROFL means Rolling on floor laughing.
@@ -21,6 +28,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 - YOLO means You only live once.
 - SMH means Shaking my head.
 
+## When and Where
+
 The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
 
 {{< blogsection image="images/single-blog/blog-img.jpg" title="Creative Design" >}}
@@ -31,4 +40,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 
+## Conclusion
+
 Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
diff --git a/exampleSite/content/blog/markdown-formatting-demo.md b/exampleSite/content/blog/markdown-formatting-demo.md
index 65cbccd..222d4a5 100644
--- a/exampleSite/content/blog/markdown-formatting-demo.md
+++ b/exampleSite/content/blog/markdown-formatting-demo.md
@@ -3,6 +3,8 @@ title: "Markdown Formatting Demo"
 date: 2020-09-13T12:49:27+06:00
 featureImage: images/allpost/allPost-6.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: website
+categories: blog
 ---
 
 This example Markdown file compliments of [markdown-it.github.io](https://markdown-it.github.io/)
@@ -10,21 +12,24 @@ This example Markdown file compliments of [markdown-it.github.io](https://markdo
 ---
 
 # h1 Heading 8-)
+
 ## h2 Heading
+
 ### h3 Heading
+
 #### h4 Heading
+
 ##### h5 Heading
-###### h6 Heading
 
+###### h6 Heading
 
 ## Horizontal Rules
 
-___
-
 ---
 
-***
+---
 
+---
 
 ## Typographic replacements
 
@@ -34,43 +39,41 @@ Enable typographer option to see result.
 
 test.. test... test..... test?..... test!....
 
-!!!!!! ???? ,,  -- ---
+!!!!!! ???? ,, -- ---
 
 "Smartypants, double quotes" and 'single quotes'
 
-
 ## Emphasis
 
 **This is bold text**
 
-__This is bold text__
+**This is bold text**
 
-*This is italic text*
+_This is italic text_
 
 _This is italic text_
 
 ~~Strikethrough~~
 
-
 ## Blockquotes
 
-
 > Blockquotes can also be nested...
->> ...by using additional greater-than signs right next to each other...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
 > > > ...or with spaces between arrows.
 
-
 ## Lists
 
 Unordered
 
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
   - Marker character change forces new list start:
-    * Ac tristique libero volutpat at
-    + Facilisis in pretium nisl aliquet
+    - Ac tristique libero volutpat at
+    * Facilisis in pretium nisl aliquet
     - Nulla volutpat aliquam velit
-+ Very easy!
+- Very easy!
 
 Ordered
 
@@ -78,16 +81,14 @@ Ordered
 2. Consectetur adipiscing elit
 3. Integer molestie lorem at massa
 
-
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
+4. You can use sequential numbers...
+5. ...or keep all the numbers as `1.`
 
 Start numbering with offset:
 
 57. foo
 1. bar
 
-
 ## Code
 
 Inline `code`
@@ -99,7 +100,6 @@ Indented code
     line 2 of code
     line 3 of code
 
-
 Block code "fences"
 
 ```
@@ -108,7 +108,7 @@ Sample text here...
 
 Syntax highlighting
 
-``` js
+```js
 var foo = function (bar) {
   return bar++;
 };
@@ -118,20 +118,19 @@ console.log(foo(5));
 
 ## Tables
 
-| Option | Description |
-| ------ | ----------- |
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
 | data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
 
 Right aligned columns
 
-| Option | Description |
-| ------:| -----------:|
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |
 
 ## Links
 
@@ -141,12 +140,11 @@ Right aligned columns
 
 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
-
 ## Images
 
 (note: redacted this section cause images were too big)
 
-<!-- 
+<!--
 ![Minion](https://octodex.github.com/images/minion.png)
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
 
@@ -158,13 +156,11 @@ With a reference later in the document defining the URL location:
 
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat" -->
 
-
 ## Plugins
 
 The killer feature of `markdown-it` is very effective support of
 [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
 
-
 ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
 
 > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
@@ -173,23 +169,19 @@ The killer feature of `markdown-it` is very effective support of
 
 see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
 
-
 ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
 
 - 19^th^
 - H~2~O
 
-
 ### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
 
 ++Inserted text++
 
-
 ### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
 
 ==Marked text==
 
-
 ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
 
 Footnote 1 link[^first].
@@ -206,17 +198,16 @@ Duplicated footnote reference[^second].
 
 [^second]: Footnote text.
 
-
 ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
 
 Term 1
 
-:   Definition 1
+: Definition 1
 with lazy continuation.
 
-Term 2 with *inline markup*
+Term 2 with _inline markup_
 
-:   Definition 2
+: Definition 2
 
         { some code, part of Definition 2 }
 
@@ -225,12 +216,11 @@ Term 2 with *inline markup*
 _Compact style:_
 
 Term 1
-  ~ Definition 1
+~ Definition 1
 
 Term 2
-  ~ Definition 2a
-  ~ Definition 2b
-
+~ Definition 2a
+~ Definition 2b
 
 ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
 
@@ -238,10 +228,10 @@ This is HTML abbreviation example.
 
 It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
 
-*[HTML]: Hyper Text Markup Language
+\*[HTML]: Hyper Text Markup Language
 
 ### [Custom containers](https://github.com/markdown-it/markdown-it-container)
 
 ::: warning
-*here be dragons*
+_here be dragons_
 :::
diff --git a/exampleSite/content/blog/new-designers-limitations.md b/exampleSite/content/blog/new-designers-limitations.md
index d1391bd..1a90385 100644
--- a/exampleSite/content/blog/new-designers-limitations.md
+++ b/exampleSite/content/blog/new-designers-limitations.md
@@ -3,8 +3,13 @@ title: "New designers limitations"
 date: 2020-07-13T12:49:27+06:00
 featureImage: images/allpost/allPost-3.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: website
+categories: documentation
+toc: true
 ---
 
+## Introduction
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -12,6 +17,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 > "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
 > -- <cite>Benjamin Franklin</cite>
 
+## Why and How
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 - ROFL means Rolling on floor laughing.
@@ -21,6 +28,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 - YOLO means You only live once.
 - SMH means Shaking my head.
 
+## When and Where
+
 The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
 
 {{< blogsection image="images/single-blog/blog-img.jpg" title="Creative Design" >}}
@@ -31,4 +40,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 
+## Conclusion
+
 Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
diff --git a/exampleSite/content/blog/things-you-must-know-as-a-designer.md b/exampleSite/content/blog/things-you-must-know-as-a-designer.md
index 28765df..6d94bf8 100644
--- a/exampleSite/content/blog/things-you-must-know-as-a-designer.md
+++ b/exampleSite/content/blog/things-you-must-know-as-a-designer.md
@@ -3,8 +3,13 @@ title: "Things you must know as a designer"
 date: 2020-07-13T12:49:27+06:00
 featureImage: images/allpost/allPost-4.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: mobile
+categories: blog
+toc: true
 ---
 
+## Introduction
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -12,6 +17,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 > "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
 > -- <cite>Benjamin Franklin</cite>
 
+## Why and How
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 - ROFL means Rolling on floor laughing.
@@ -21,6 +28,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 - YOLO means You only live once.
 - SMH means Shaking my head.
 
+## When and Where
+
 The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
 
 {{< blogsection image="images/single-blog/blog-img.jpg" title="Creative Design" >}}
@@ -31,4 +40,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 
+## Conclusion
+
 Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
diff --git a/exampleSite/content/blog/world-most-famous-app-developers-and-designers.md b/exampleSite/content/blog/world-most-famous-app-developers-and-designers.md
index 5fb58e1..0ecaeac 100644
--- a/exampleSite/content/blog/world-most-famous-app-developers-and-designers.md
+++ b/exampleSite/content/blog/world-most-famous-app-developers-and-designers.md
@@ -3,8 +3,13 @@ title: "World's Most Famous App Developers and Designers"
 date: 2020-07-13T12:49:27+06:00
 featureImage: images/allpost/allPost-1.jpg
 postImage: images/single-blog/feature-image.jpg
+tags: fun
+categories: blog
+toc: true
 ---
 
+## Introduction
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -12,6 +17,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 > "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
 > -- <cite>Benjamin Franklin</cite>
 
+## Why and How
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 - ROFL means Rolling on floor laughing.
@@ -21,6 +28,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 - YOLO means You only live once.
 - SMH means Shaking my head.
 
+## When and Where
+
 The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
 
 {{< blogsection image="images/single-blog/blog-img.jpg" title="Creative Design" >}}
@@ -31,4 +40,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 
+## Conclusion
+
 Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
diff --git a/exampleSite/content/blog/you-must-know-this-before-becoming-a-designer.md b/exampleSite/content/blog/you-must-know-this-before-becoming-a-designer.md
index 35a2a23..cb0b06c 100644
--- a/exampleSite/content/blog/you-must-know-this-before-becoming-a-designer.md
+++ b/exampleSite/content/blog/you-must-know-this-before-becoming-a-designer.md
@@ -3,8 +3,13 @@ title: You must know this before becoming a designer
 date: 2020-07-13T12:49:27.000+06:00
 featureImage: images/allpost/allPost-8.jpg
 postImage: images/single-blog/feature-image.jpg
-
+tags: fun
+categories: documentation
+toc: true
 ---
+
+## Introduction
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -12,6 +17,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 > "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
 > -- <cite>Benjamin Franklin</cite>
 
+## Why and How
+
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 - ROFL means Rolling on floor laughing.
@@ -21,6 +28,8 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 - YOLO means You only live once.
 - SMH means Shaking my head.
 
+## When and Where
+
 The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
 
 {{< blogsection image="images/single-blog/blog-img.jpg" title="Creative Design" >}}
@@ -31,4 +40,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 
-Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
\ No newline at end of file
+## Conclusion
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index eb9bb75..36225b8 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -15,32 +15,32 @@
       </div>
     </div>
 
-    <div class="row p-3">
-      <div class="col-lg-10 col-md-10 offset-lg-1 offset-md-0 text-center">
-        <i class="fa fa-calendar"></i> &ensp;
+    <ul class="post-meta">
+      <li>
+        <i class="fa fa-calendar"></i>
         {{ .PublishDate.Format "January 2, 2006" }}
-      </div>
-      <div class="col-lg-10 col-md-12 offset-lg-1 offset-md-0 text-center">
-        <i class="fa fa-clock-o"></i> &ensp;
+      </li>
+      <li>
+        <i class="fa fa-clock-o"></i>
         {{ .ReadingTime }} mins read
-      </div>
+      </li>
       {{ if .Params.tags }}
-      <div class="col-lg-10 col-md-12 offset-lg-1 offset-md-0 text-center">
-        <i class="fa fa-tag"></i> &ensp;
+      <li>
+        <i class="fa fa-tag"></i>
         {{ range (.GetTerms "tags") }}
-        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>;
+          <a class="text-capitalize" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
         {{ end }}
-      </div>
+      </li>
       {{ end }}
       {{ if .Params.categories }}
-      <div class="col-lg-10 col-md-12 offset-lg-1 offset-md-0 text-center">
-        <i class="fa fa-folder-open"></i> &ensp;
+      <li>
+        <i class="fa fa-folder-open"></i>
         {{ range (.GetTerms "categories") }}
-        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>;
+          <a class="text-capitalize" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
         {{ end }}
-      </div>
+      </li>
       {{ end }}
-    </div>
+    </ul>
   </div>
   </div>
   </div>
@@ -82,9 +82,10 @@
         <div class="singleBlog__content">
 
           {{ if .Params.toc }}
-          <h3>Table of Contents</h3>
-          {{ .TableOfContents | replaceRE "<ul>[[:space:]]*<li>[[:space:]]*<ul>" "<ul>" | replaceRE "</ul>[[:space:]]*</li>[[:space:]]*</ul>" "</ul>" |  safeHTML }}
+            <h3>Table of Contents</h3>
+            {{ .TableOfContents | replaceRE "<ul>[[:space:]]*<li>[[:space:]]*<ul>" "<ul>" | replaceRE "</ul>[[:space:]]*</li>[[:space:]]*</ul>" "</ul>" |  safeHTML }}
           {{ end }}
+
           {{ .Content }}
         </div>
       </div>
diff --git a/layouts/categories/taxonomy.html b/layouts/categories/taxonomy.html
index 8f7941b..6264968 100644
--- a/layouts/categories/taxonomy.html
+++ b/layouts/categories/taxonomy.html
@@ -1,62 +1,76 @@
 {{ define "main" }}
 
 <header class="breadCrumb">
- <div class="svg-img">
-  <img src={{"images/hero/figure-svg.svg" | absURL }} alt="">
- </div>
- <div class="animate-shape">
-   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
-     <defs>
-       <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
-         <stop offset="0" stop-color="#f1f6f9" />
-         <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
-       </linearGradient>
-     </defs>
-     <g data-name="blob-shape (3)">
-       <path class="blob" fill="url(#d)"
-         d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
-     </g>
-   </svg>
- </div>
- <div class="animate-pattern">
-   <img src={{"images/service/background-pattern.svg" | absURL }} alt="background-shape">
- </div>
- <div class="container">
-   <div class="row">
-     <div class="col-12 text-center">
-       <h3 class="breadCrumb__title">{{ .Title }}</h3>
-       <nav aria-label="breadcrumb" class="d-flex justify-content-center">
-         <ol class="breadcrumb align-items-center">
-          Showing all posts with the category "{{.Title}}"
-         </ol>
-       </nav>
-     </div>
-   </div>
- </div>
+  <div class="svg-img">
+    <img src={{"images/hero/figure-svg.svg" | absURL }} alt="">
+  </div>
+  <div class="animate-shape">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 600 600"
+    >
+      <defs>
+        <linearGradient
+          id="d"
+          x1="0.929"
+          y1="0.111"
+          x2="0.263"
+          y2="0.935"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#f1f6f9" />
+          <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g data-name="blob-shape (3)">
+        <path
+          class="blob"
+          fill="url(#d)"
+          d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z"
+        />
+      </g>
+    </svg>
+  </div>
+  <div class="animate-pattern">
+    <img src={{"images/service/background-pattern.svg" | absURL }}
+    alt="background-shape">
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-12 text-center">
+        <h3 class="breadCrumb__title text-capitalize">{{ .Title }}</h3>
+        <nav aria-label="breadcrumb" class="d-flex justify-content-center">
+          <ol class="breadcrumb align-items-center">
+            <li>Showing all posts with the category "{{.Title}}"</li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </div>
 </header>
 
-
 <section class="section blog-page">
-	<div class="container">
-		<div class="row">
-			{{ range .Paginator.Pages }}
-			<div class="col-lg-4">
-				<div class="blog-page__item">
-					<div class="blog-page__item-thumb">
-						<img src="{{ .Params.featureImage | absURL }}" alt="post-image">
-					</div>
-					<div class="blog-page__item-content bg-white">
-						<span class="small">{{ .PublishDate.Format "January 2, 2006" }}</span>
-						<h5 class="mb-0">
-							<a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a>
-						</h5>
-					</div>
-				</div>
-			</div>
-			{{ end }}
-			{{ partial "pagination" .}}
-		</div>
-	</div>
+  <div class="container">
+    <div class="row">
+      {{ range .Paginator.Pages }}
+      <div class="col-lg-4">
+        <div class="blog-page__item">
+          <div class="blog-page__item-thumb">
+            <img src="{{ .Params.featureImage | absURL }}" alt="post-image" />
+          </div>
+          <div class="blog-page__item-content bg-white">
+            <span class="small"
+              >{{ .PublishDate.Format "January 2, 2006" }}</span
+            >
+            <h5 class="mb-0">
+              <a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a>
+            </h5>
+          </div>
+        </div>
+      </div>
+      {{ end }} {{ partial "pagination" .}}
+    </div>
+  </div>
 </section>
 {{ end }}
-
diff --git a/layouts/tags/taxonomy.html b/layouts/tags/taxonomy.html
index 1deaf94..27bd0b9 100644
--- a/layouts/tags/taxonomy.html
+++ b/layouts/tags/taxonomy.html
@@ -1,62 +1,76 @@
- {{ define "main" }}
+{{ define "main" }}
 
- <header class="breadCrumb">
-	<div class="svg-img">
-		<img src={{"images/hero/figure-svg.svg" | absURL }} alt="">
-	</div>
-	<div class="animate-shape">
-		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
-			<defs>
-				<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
-					<stop offset="0" stop-color="#f1f6f9" />
-					<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
-				</linearGradient>
-			</defs>
-			<g data-name="blob-shape (3)">
-				<path class="blob" fill="url(#d)"
-					d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
-			</g>
-		</svg>
-	</div>
-	<div class="animate-pattern">
-		<img src={{"images/service/background-pattern.svg" | absURL }} alt="background-shape">
-	</div>
-	<div class="container">
-		<div class="row">
-			<div class="col-12 text-center">
-				<h3 class="breadCrumb__title">{{ .Title }}</h3>
-				<nav aria-label="breadcrumb" class="d-flex justify-content-center">
-					<ol class="breadcrumb align-items-center">
-						Showing all posts with the tag "{{.Title}}"
-					</ol>
-				</nav>
-			</div>
-		</div>
-	</div>
+<header class="breadCrumb">
+  <div class="svg-img">
+    <img src={{"images/hero/figure-svg.svg" | absURL }} alt="">
+  </div>
+  <div class="animate-shape">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 600 600"
+    >
+      <defs>
+        <linearGradient
+          id="d"
+          x1="0.929"
+          y1="0.111"
+          x2="0.263"
+          y2="0.935"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#f1f6f9" />
+          <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g data-name="blob-shape (3)">
+        <path
+          class="blob"
+          fill="url(#d)"
+          d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z"
+        />
+      </g>
+    </svg>
+  </div>
+  <div class="animate-pattern">
+    <img src={{"images/service/background-pattern.svg" | absURL }}
+    alt="background-shape">
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-12 text-center">
+        <h3 class="breadCrumb__title text-capitalize">{{ .Title }}</h3>
+        <nav aria-label="breadcrumb" class="d-flex justify-content-center">
+          <ol class="breadcrumb align-items-center">
+            <li>Showing all posts with the tag "{{.Title}}"</li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </div>
 </header>
 
-
 <section class="section blog-page">
-	<div class="container">
-		<div class="row">
-			{{ range .Paginator.Pages }}
-			<div class="col-lg-4">
-				<div class="blog-page__item">
-					<div class="blog-page__item-thumb">
-						<img src="{{ .Params.featureImage | absURL }}" alt="post-image">
-					</div>
-					<div class="blog-page__item-content bg-white">
-						<span class="small">{{ .PublishDate.Format "January 2, 2006" }}</span>
-						<h5 class="mb-0">
-							<a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a>
-						</h5>
-					</div>
-				</div>
-			</div>
-			{{ end }}
-			{{ partial "pagination" .}}
-		</div>
-	</div>
+  <div class="container">
+    <div class="row">
+      {{ range .Paginator.Pages }}
+      <div class="col-lg-4">
+        <div class="blog-page__item">
+          <div class="blog-page__item-thumb">
+            <img src="{{ .Params.featureImage | absURL }}" alt="post-image" />
+          </div>
+          <div class="blog-page__item-content bg-white">
+            <span class="small"
+              >{{ .PublishDate.Format "January 2, 2006" }}</span
+            >
+            <h5 class="mb-0">
+              <a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a>
+            </h5>
+          </div>
+        </div>
+      </div>
+      {{ end }} {{ partial "pagination" .}}
+    </div>
+  </div>
 </section>
 {{ end }}
-
diff --git a/theme.toml b/theme.toml
index daf4a64..b89b47e 100644
--- a/theme.toml
+++ b/theme.toml
@@ -1,4 +1,4 @@
-name = "Portio"
+name = "portio"
 license = "MIT"
 licenselink = "https://github.com/StaticMania/portio-hugo/blob/master/LICENSE"
 description = "Portio is a simple, minimal and responsive Portfolio Hugo Theme. Portio is well organized, well-formatted and named accordingly so it’s easy to change any and all of the design. Portio is built with Bootstrap 4. You can customize it very easy to fit your needs."