parent
b51a3ef5ad
commit
492a367d87
@ -1,112 +1,76 @@ |
|||||||
.section{ |
.section { |
||||||
@include desktop{ |
@include desktop { |
||||||
padding: 50px 0; |
padding: 50px 0; |
||||||
} |
} |
||||||
.svg-img{ |
.svg-img { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 30%; |
top: 30%; |
||||||
left: -7%; |
left: -7%; |
||||||
animation: move_top 5s infinite linear; |
animation: move_top 5s infinite linear; |
||||||
@include desktop{ |
@include desktop { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
} |
} |
||||||
.animate-shape{ |
.animate-shape { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 29%; |
top: 29%; |
||||||
right: 4%; |
right: 4%; |
||||||
height: 300px; |
height: 300px; |
||||||
width: 300px; |
width: 300px; |
||||||
svg{ |
svg { |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
@include desktop{ |
@include desktop { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
} |
} |
||||||
.animate-pattern{ |
.animate-pattern { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 46%; |
top: 46%; |
||||||
right: 12%; |
right: 12%; |
||||||
height: 100px; |
height: 100px; |
||||||
width: 100px; |
width: 100px; |
||||||
animation: move_top 3s infinite linear; |
animation: move_top 3s infinite linear; |
||||||
img{ |
img { |
||||||
height: 100%; |
height: 100%; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
@include desktop{ |
@include desktop { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
} |
} |
||||||
.singleBlog{ |
.singleBlog { |
||||||
&__feature{ |
&__feature { |
||||||
margin: 0 100px; |
margin: 0 100px; |
||||||
@include desktop{ |
@include desktop { |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
img{ |
img { |
||||||
height: 100%; |
height: 100%; |
||||||
width: 100%; |
width: 100%; |
||||||
border-radius: 20px; |
border-radius: 20px; |
||||||
} |
} |
||||||
} |
} |
||||||
&__content{ |
&__content { |
||||||
margin: 0 200px 0 200px; |
margin: 0 200px 0 200px; |
||||||
@include desktop{ |
@include desktop { |
||||||
margin: 0; |
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; |
margin-bottom: 60px; |
||||||
img{ |
img { |
||||||
float: right; |
float: right; |
||||||
mask: url("../images/hero/hero-mask-svg.png"); |
mask: url("../images/hero/hero-mask-svg.png"); |
||||||
-webkit-mask-repeat: no-repeat; |
-webkit-mask-repeat: no-repeat; |
||||||
-webkit-mask-size: contain; |
-webkit-mask-size: contain; |
||||||
-webkit-mask-position: center center; |
-webkit-mask-position: center center; |
||||||
@include tablet{ |
@include tablet { |
||||||
width: 100%; |
width: 100%; |
||||||
float: none; |
float: none; |
||||||
margin-bottom: 40px; |
margin-bottom: 40px; |
||||||
} |
} |
||||||
} |
} |
||||||
h3{ |
|
||||||
font-family: $primary-font; |
|
||||||
color: $secondary-color; |
|
||||||
font-size: 25px; |
|
||||||
line-height: 40px; |
|
||||||
margin: 0 0 20px 0; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -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* |
||||||
|
::: |
Loading…
Reference in new issue