refactored single blog typography

assets/scss/components/_single-blog-post.scss

@@ -1,111 +1,75 @@
-.section{
+.section {
-    @include desktop{
+    @include desktop {
         padding: 50px 0;
     }
-    .svg-img{
+    .svg-img {
         position: absolute;
         top: 30%;
         left: -7%;
         animation: move_top 5s infinite linear;
-        @include desktop{
+        @include desktop {
             display: none;
         }
     }
-    .animate-shape{
+    .animate-shape {
         position: absolute;
         top: 29%;
         right: 4%;
         height: 300px;
         width: 300px;
-        svg{
+        svg {
             width: 100%;
         }
-        @include desktop{
+        @include desktop {
             display: none;
         }
     }
-    .animate-pattern{
+    .animate-pattern {
         position: absolute;
         top: 46%;
         right: 12%;
         height: 100px;
         width: 100px;
         animation: move_top 3s infinite linear;
-        img{
+        img {
             height: 100%;
             width: 100%;
         }
-        @include desktop{
+        @include desktop {
             display: none;
         }
     }
-    .singleBlog{
+    .singleBlog {
-        &__feature{
+        &__feature {
             margin: 0 100px;
-            @include desktop{
+            @include desktop {
                 margin: 0;
             }
-            img{
+            img {
                 height: 100%;
                 width: 100%;
                 border-radius: 20px;
             }
         }
-        &__content{
+        &__content {
             margin: 0 200px 0 200px;
-            @include desktop{
+            @include desktop {
                 margin: 0;
             }
-            p{
+            .blog-section {
-                font-family: $secondary-font;
-                font-size: 16px;
-                line-height: 30px;
-                margin-bottom: 40px;
-                color: #7E7E8A;
-            }
-            dl, ul, ol{
-                margin-top: 0;
-                margin-bottom: 40px;
-                font-family: $secondary-font;
-                font-size: 16px;
-                line-height: 30px;
-                color: #7E7E8A;
-            }
-            blockquote{
-                font-family: $secondary-font;
-                font-size: 16px;
-                line-height: 30px;
-                color: $secondary-color;
-                padding: 30px;
-                background: $white;
-                box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.07);
-                border-radius: 5px;
-                margin: 0 0 50px 0;
-                cite{
-                    display: block;
-                }
-            }
-            .blog-section{
                 margin-bottom: 60px;
-                img{
+                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{
+                    @include tablet {
                         width: 100%;
                         float: none;
                         margin-bottom: 40px;
                     }
                 }
-                h3{
-                    font-family: $primary-font;
-                    color: $secondary-color;
-                    font-size: 25px;
-                    line-height: 40px;
-                    margin: 0 0 20px 0;
-                }
             }
         }
     }

exampleSite/content/blog/markdown-formatting-demo.md

@@ -0,0 +1,247 @@
+---
+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
+---
+
+This example Markdown file compliments of [markdown-it.github.io](https://markdown-it.github.io/)
+
+---
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,,  -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold 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...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ 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
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+``` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| 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. |
+
+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. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+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")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+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:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+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].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+:   Definition 1
+with lazy continuation.
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+*here be dragons*
+:::