diff --git a/content/demo/index.md b/content/demo/index.md
index 9492630..0ff3119 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -170,13 +170,21 @@ Variables should be comma-separated and be inside the brackets.
```
{{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }}
-
Image with an alt text and without zoom on hover
{{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
-
Image with compressed version, an alt text, and without zoom on hover
+Alternatively, you can append the following url anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
+
+- `#full`: Forces image/video to be full-width.
+- `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
+- `#transparent`: Removes rounded corners and shadow, useful for transparent images.
+- `#no-hover`: Removes zoom on hover.
+
+
+Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover
+
#### Video
Same as images, but with a few differences: `no_hover` and `url_min` are not available.
@@ -186,7 +194,6 @@ Same as images, but with a few differences: `no_hover` and `url_min` are not ava
```
{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
-
WebM video example from MDN
#### CRT
@@ -228,16 +235,14 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
## Captions
-Media can have additional text description using the `` HTML tag.
+Media can have additional text description using the `` HTML tag directly under it.
```markdown
-
-
+
The image caption
```

-
The Office where Stanley works, it has yellow floor and beige walls
## Accordion
diff --git a/sass/_main.scss b/sass/_main.scss
index 017553b..5d22831 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -254,7 +254,6 @@ mark {
}
figcaption {
- display: block;
color: var(--fg-muted-4);
font-size: 0.8rem;
text-align: center;
diff --git a/sass/_media.scss b/sass/_media.scss
index 54cd6a4..8348b97 100644
--- a/sass/_media.scss
+++ b/sass/_media.scss
@@ -2,11 +2,11 @@ img {
transition-duration: var(--transition-longer);
transition-property: transform, box-shadow, border-radius;
- &:not(.no-hover) {
+ &:not(.no-hover, &[src*="#no-hover"]) {
cursor: zoom-in;
}
- &:not(.no-hover):hover {
+ &:not(.no-hover, &[src*="#no-hover"]):hover {
transform: scale(1.1);
box-shadow: var(--shadow-raised);
border-radius: 0;
@@ -21,15 +21,18 @@ video {
border-radius: var(--rounded-corner);
max-width: 100%;
- &.full {
+ &.full,
+ &[src*="#full"] {
width: 100%;
}
- &.pixels {
+ &.pixels,
+ &[src*="#pixels"] {
image-rendering: pixelated;
}
- &.transparent {
+ &.transparent,
+ &[src*="#transparent"] {
box-shadow: none;
border-radius: 0;