Add shadow effect option for images

This commit is contained in:
Cotes Chung 2021-04-17 16:08:13 +08:00
parent 4ed6988be3
commit d5407181a4
3 changed files with 26 additions and 13 deletions

View file

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

View file

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

View file

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