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. + +![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-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 -![Image](image.pmg) - +![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
The image caption
``` ![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png) -
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;