Add shadow effect option for images
This commit is contained in:
parent
4ed6988be3
commit
d5407181a4
3 changed files with 26 additions and 13 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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] {
|
||||
|
|
Loading…
Reference in a new issue