Specify the image location gracefully.
This commit is contained in:
parent
cb908bbb2b
commit
ea5b6cf1f6
2 changed files with 27 additions and 9 deletions
|
@ -8,7 +8,7 @@ math: true
|
||||||
image: /assets/img/sample/devices-mockup.png
|
image: /assets/img/sample/devices-mockup.png
|
||||||
---
|
---
|
||||||
|
|
||||||
This Jekyll template totally compatible with Markdown syntax. Now, let's have a look at the text and typography.
|
This article is to show markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
|
||||||
|
|
||||||
|
|
||||||
## Titles
|
## Titles
|
||||||
|
@ -89,11 +89,17 @@ You can change the size of the picture:
|
||||||
![Desktop View](/assets/img/sample/mockup.png){: width="400"}
|
![Desktop View](/assets/img/sample/mockup.png){: width="400"}
|
||||||
_400px image width_
|
_400px image width_
|
||||||
|
|
||||||
In addition, you can use custom styles to change the image position (do not use caption in this case):
|
In addition, you can use class `left` or `right` to specify the image position (but in this case, the image caption is prohibited), for example:
|
||||||
|
|
||||||
![Desktop View](/assets/img/sample/mockup.png){: width="200" style="float: left; margin: .75rem 1rem 1rem 0"}
|
- To the left
|
||||||
_A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space._
|
|
||||||
|
|
||||||
|
![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
|
||||||
|
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
|
||||||
|
|
||||||
|
- To the right
|
||||||
|
|
||||||
|
![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
|
||||||
|
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
|
||||||
|
|
||||||
## Inline code
|
## Inline code
|
||||||
|
|
||||||
|
|
|
@ -817,12 +817,24 @@ div.post-content .table-wrapper {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
@mixin img {
|
@mixin img($caption: false) {
|
||||||
> img {
|
> img {
|
||||||
&:not([style]) {
|
&:not([style]) {
|
||||||
margin: .5rem 0;
|
&:not(.left):not(.right) {
|
||||||
@include align-center;
|
margin: .5rem 0;
|
||||||
@include img-caption;
|
@include align-center;
|
||||||
|
@if $caption {
|
||||||
|
@include img-caption;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.left {
|
||||||
|
float: left;
|
||||||
|
margin: .75rem 1rem 1rem 0;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
float: right;
|
||||||
|
margin: .75rem 0 1rem 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -854,7 +866,7 @@ div.post-content .table-wrapper {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1.08rem;
|
font-size: 1.08rem;
|
||||||
@include img;
|
@include img(true);
|
||||||
}// p
|
}// p
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue