PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Specify the image location gracefully.

This commit is contained in:
Cotes Chung 2020-10-07 20:19:57 +08:00
parent cb908bbb2b
commit ea5b6cf1f6
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_posts/2019-08-08-text-and-typography.md
View File

@ -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

16
assets/css/_addon/main.scss
View File

@ -817,14 +817,26 @@ 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]) {
&:not(.left):not(.right) {
margin: .5rem 0; margin: .5rem 0;
@include align-center; @include align-center;
@if $caption {
@include img-caption; @include img-caption;
} }
} }
&.left {
float: left;
margin: .75rem 1rem 1rem 0;
}
&.right {
float: right;
margin: .75rem 0 1rem 1rem;
}
}
}
} }
@mixin img-caption { @mixin img-caption {
@ -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
} }