The Celix documentation has high-resolution images which are embedded in its documentation. To ensure that the layout of the website is still okay bootstrap has a .img-fluid class available. That class scales well on different devices (computers, but also phones).
Because the included Celix documentation is written in Markdown a class for an image cannot be defined and every image as part of the card-body is given the same properties as img-fluid and making it work on multiple devices.
I am not sure why defining these CSS selectors work when they are defined as <style>...</style> in the layout, but don't work when moving them to the style.css file.
The Celix documentation has high-resolution images which are embedded in its documentation. To ensure that the layout of the website is still okay bootstrap has a
.img-fluidclass available. That class scales well on different devices (computers, but also phones).Because the included Celix documentation is written in Markdown a class for an image cannot be defined and every image as part of the
card-bodyis given the same properties as img-fluid and making it work on multiple devices.I am not sure why defining these CSS selectors work when they are defined as
<style>...</style>in the layout, but don't work when moving them to the style.css file.See https://github.com/apache/celix-site/blob/fbc925e87c8e31e196b5867c927cceed919b5b75/layouts/celix-doc/baseof.html#L36-L49
When this works, the raw
<img/>HTML tag can also be converted to Markdown on the development workflow page: https://github.com/apache/celix-site/blob/d87060a9b8abcab9073c9ef11d35830caade0151/source/contributing/development-workflow.md?plain=1#L13