asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Add more class to specify image position.

Browse source
This commit is contained in:
Cotes Chung 2020-10-10 20:05:10 +08:00
parent 2a2bc1ee65
commit db5a58638d
3 changed files with 28 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
_posts/2019-08-08-text-and-typography.md
View file

@ -8,7 +8,7 @@ math: true
image: /assets/img/sample/devices-mockup.png
---
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.
This post 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
@ -89,14 +89,18 @@ You can change the size of the picture:
![Desktop View](/assets/img/sample/mockup.png){: width="400"}
_400px image width_
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:
In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
- To the left
- Normal position
![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
- Float to the left
![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
- Float 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."

2
_posts/2019-08-09-getting-started.md
View file

@ -123,7 +123,7 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us
1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
2. Browse to your repository on GitHub and choose the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
![gh-pages-sources](/assets/img/sample/gh-pages-sources.png){: width="650"}
![gh-pages-sources](/assets/img/sample/gh-pages-sources.png){: width="650" class="normal"}
3. Visit your website at the address indicated by GitHub.

36
assets/css/_addon/main.scss
View file

@ -85,7 +85,6 @@ $sidebar-display: "sidebar-display";
.site-title {
text-align: center;
a {
// color: var(--site-title-color);
font-weight: 900;
font-size: 1.5rem;
letter-spacing: .5px;
@ -818,24 +817,27 @@ div.post-content .table-wrapper {
word-wrap: break-word;
@mixin img($caption: false) {
> img {
&:not([style]) {
&:not(.left):not(.right) {
margin: .5rem 0;
@include align-center;
@if $caption {
@include img-caption;
}
}
&.left {
float: left;
margin: .75rem 1rem 1rem 0;
}
&.right {
float: right;
margin: .75rem 0 1rem 1rem;
>img:not([style]) {
margin: .5rem 0;
&:not(.normal):not(.left):not(.right) {
@include align-center;
@if $caption {
@include img-caption;
}
}
&.left {
float: left;
margin: .75rem 1rem 1rem 0;
}
&.right {
float: right;
margin: .75rem 0 1rem 1rem;
}
}
}