diff --git a/assets/scss/components/_single-blog-post.scss b/assets/scss/components/_single-blog-post.scss index 98bbac0..5cdd10e 100644 --- a/assets/scss/components/_single-blog-post.scss +++ b/assets/scss/components/_single-blog-post.scss @@ -1,112 +1,76 @@ -.section{ - @include desktop{ +.section { + @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{ - &__feature{ + .singleBlog { + &__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{ - 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{ + .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; - } } } } -} \ No newline at end of file +} diff --git a/exampleSite/content/blog/markdown-formatting-demo.md b/exampleSite/content/blog/markdown-formatting-demo.md new file mode 100644 index 0000000..65cbccd --- /dev/null +++ b/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) + + + + +## 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 + + +### [\](https://github.com/markdown-it/markdown-it-ins) + +++Inserted text++ + + +### [\](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* +:::