From db5a58638de7a438ec05c24b7c7fd66f217cd716 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 10 Oct 2020 20:05:10 +0800 Subject: [PATCH] Add more class to specify image position. --- _posts/2019-08-08-text-and-typography.md | 12 +++++--- _posts/2019-08-09-getting-started.md | 2 +- assets/css/_addon/main.scss | 36 +++++++++++++----------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index 012528c..878fc3c 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -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." diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 10831d9..b196e9b 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -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. diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss index 964e10f..6352dd0 100644 --- a/assets/css/_addon/main.scss +++ b/assets/css/_addon/main.scss @@ -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; + } + } }