Add shadow effect option for images

Panhx0601 · Apr 17, 2021 · 6d56bd5 · 6d56bd5
1 parent 8cbec5c
commit 6d56bd5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
@@ -57,7 +57,6 @@ Fluttering and dancing in the breeze.
 
 - [ ] TODO
 - [x] Completed
-- Hold on
 - [ ] Defeat COVID-19
   - [x] Vaccine production
   - [ ] Economic recovery
@@ -108,6 +107,11 @@ _Full screen width and center alignment_
 ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="400"}
 _400px image width_
 
+- Shadow
+
+![Shadow Avatar](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/window.png){: .shadow width="90%" }
+_shadow effect (visible in light mode)_
+
 <br>
 
 - Left aligned

diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
@@ -135,7 +135,16 @@ By default, the image is centered, but you can specify the position by using one
   ![Desktop View](/assets/img/sample/mockup.png){: .right}
   ```
 
-**Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+
+### Image shadow
+
+The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: .shadow}
+```
+
 
 ### CDN URL
 

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -363,10 +363,6 @@ footer {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  img[data-src] {
-    margin: 0.5rem 0;
-  }
-
   @mixin img-caption {
     + em {
       display: block;
@@ -378,9 +374,11 @@ footer {
     }
   }
 
-  @mixin img($caption: false) {
+  @mixin img-style($caption: false) {
+
+    img[data-src] {
+      margin: 0.5rem 0;
 
-    > img[data-src] {
       @if $caption {
         @include img-caption;
       }
@@ -395,9 +393,15 @@ footer {
         margin: 0.75rem 0 1rem 1rem;
       }
 
+      &.shadow {
+        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      }
+
     }
   }
 
+  @include img-style(true);
+
   a {
     blockquote & {
       color: var(--link-color);
@@ -412,7 +416,7 @@ footer {
     }
 
     &.img-link {
-      @include img;
+      @include img-style;
       @include img-caption;
     }
   }
@@ -423,10 +427,6 @@ footer {
     }
   }
 
-  p {
-    @include img(true);
-  }
-
   ul {
     // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {