Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +01:00
Code Issues Releases Wiki Activity

Updated light and dark mode example

Browse Source
This commit is contained in:
squidfunk 2021-12-13 19:32:45 +01:00
parent bfe7540d2a
commit eebcc31bd1
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/images/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 174 KiB

BIN
docs/assets/images/zelda-dark-world.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
docs/assets/images/zelda-light-world.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

24
docs/reference/images.md
View File

@ -42,12 +42,12 @@ respective alignment directions via the `align` attribute, i.e. `align=left` or
_Example_: _Example_:
``` markdown ``` markdown
![Placeholder](https://dummyimage.com/600x400/eee/aaa){ align=left } ![Image title](https://dummyimage.com/600x400/eee/aaa){ align=left }
``` ```
_Result_: _Result_:
![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ align=left width=300 } ![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ align=left width=300 }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
@ -58,12 +58,12 @@ respective alignment directions via the `align` attribute, i.e. `align=left` or
_Example_: _Example_:
``` markdown ``` markdown
![Placeholder](https://dummyimage.com/600x400/eee/aaa){ align=right } ![Image title](https://dummyimage.com/600x400/eee/aaa){ align=right }
``` ```
_Result_: _Result_:
![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ align=right width=300 } ![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){ align=right width=300 }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
@ -99,7 +99,7 @@ _Example_:
```html ```html
<figure markdown> <!-- (1)! --> <figure markdown> <!-- (1)! -->
![Placeholder](https://dummyimage.com/600x400/){ width="300" } ![Image title](https://dummyimage.com/600x400/){ width="300" }
<figcaption>Image caption</figcaption> <figcaption>Image caption</figcaption>
</figure> </figure>
``` ```
@ -123,7 +123,7 @@ through the `loading=lazy` directive, which degrades to eager-loading in
browsers without support: browsers without support:
``` markdown ``` markdown
![Placeholder](https://dummyimage.com/600x400/){ loading=lazy } ![Image title](https://dummyimage.com/600x400/){ loading=lazy }
``` ```
[lazy-loading]: https://caniuse.com/#feat=loading-lazy-attr [lazy-loading]: https://caniuse.com/#feat=loading-lazy-attr
@ -140,16 +140,16 @@ hash fragment to the image URL:
_Example_: _Example_:
``` markdown ``` markdown
![Placeholder light](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light) ![Image title](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![Placeholder dark](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark) ![Image title](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)
``` ```
_Result_: _Result_:
![Placeholder light]{ width="300" } ![Zelda light world]{ width="300" }
![Placeholder dark]{ width="300" } ![Zelda dark world]{ width="300" }
[Light and dark mode support]: https://github.com/squidfunk/mkdocs-material/releases/tag/8.1.1 [Light and dark mode support]: https://github.com/squidfunk/mkdocs-material/releases/tag/8.1.1
[color palette toggle]: ../setup/changing-the-colors.md#color-palette-toggle [color palette toggle]: ../setup/changing-the-colors.md#color-palette-toggle
[Placeholder light]: https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–#only-light [Zelda light world]: ../assets/images/zelda-light-world.png#only-light
[Placeholder dark]: https://dummyimage.com/600x400/21222c/d5d7e2&text=–%20Image%20–#only-dark [Zelda dark world]: ../assets/images/zelda-dark-world.png#only-dark