Add more class to specify image position.

cotes2020 · cotes2020 · commit 2d1b77a39905 · 2020-10-10T20:18:24.000+08:00
diff --git 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
@@ -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
@@ -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;
+      }
+
     }
   }
 
