Add image tricks

This commit is contained in:
thhsh-local 2025-06-05 13:46:53 -04:00
parent 056b3c37f8
commit e205eedc2e
Signed by: thhsh-local
SSH key fingerprint: SHA256:bLOq3d7dN1v5+W5U6pQekP0rBm0YUtC9qvh3TDYyAsg

View file

@ -11,4 +11,16 @@ To hide the title on a page (like on the [:octicons-arrow-right-16: Home page](.
display: none;
}
</style>
```
## Images
### Logo Size
When embedding a site logo in a page (like on the [:octicons-arrow-right-16: Home page](../../support/index.md)), the sweet spot seems to be `300px` for the image width so that it doesn't look "off".
### Different images for dark/light mode
You can use `#only-dark` to only show an image in dark mode, and `#only-light` to only show an image in light mode. For example:
``` md linenums="1"
![StarCat Systems Logo-dark](https://cdn.starcat.systems/logos/Starcat_Systems-Head_Circle_Name-212121_Black-300x150px.svg#only-light)
![StarCat Systems Logo-light](https://cdn.starcat.systems/logos/Starcat_Systems-Head_Circle_Name-FFFFFF_White-300x150px.svg#only-dark)
```