Move inline styling to style.css

[rlenferink]

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.

See

celix-site/layouts/celix-doc/baseof.html

Lines 36 to 49 in fbc925e

	<style>
	/* TODO: Ideally the styling below will be moved to the style.css. That doesn't seem to work and needs investigating */
	/* Redefine .img-fluid (bootstrap element) for all images, to allow defining images in markdown which do no 'escape' their card */
	.card-body img {
	max-width: 100%;
	width: 100%;
	height: auto;
	}
	/* Allow defining captions for images (will be italic and underlined) */
	.card-body img + em {
	text-decoration: underline;
	}
	</style>

When this works, the raw <img/> HTML tag can also be converted to Markdown on the development workflow page:

celix-site/source/contributing/development-workflow.md

Line 13 in d87060a

<img src="development-workflow.png" class="img-fluid" alt="Celix development workflow">