Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

docs: add image float css idea

Browse Source
This commit is contained in:
Thomas Heartman 2022-10-18 13:32:14 +02:00
parent 4f99823454
commit 69f27d304b
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
website/src/components/Figure/Figure.tsx
View File

@ -67,6 +67,7 @@ import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import './styles.module.css';
import styles from './styles.module.css';
type Props = {
// An optional alt text, if the caption does not already convey all relevant
@ -76,11 +77,13 @@ type Props = {
caption: string;
// the path to the image, starting with `/img/`. Example: /img/image.png
img: string;
// whether the image should be floated to one side on larger setups
float?: boolean;
};
const Component: React.FC<Props> = ({ img, alt, caption }) => {
const Component: React.FC<Props> = ({ img, alt, caption, float }) => {
return (
<figure>
<figure className={float ? styles.float : ''}>
<img alt={alt} src={useBaseUrl(img)} />
<figcaption>{caption}</figcaption>
</figure>

12
website/src/components/Figure/styles.module.css
View File

@ -7,6 +7,12 @@ figure {
margin-inline: 0;
}
.float {
float: right;
max-width: 50%;
margin-left: var(--ifm-pre-padding);
}
figure img {
box-shadow: none;
border: none;
@ -21,3 +27,9 @@ figcaption {
padding-inline: var(--ifm-pre-padding);
border-inline-start: 5px solid var(--ifm-color-primary);
}
/* clear floating figures for everything but paragraphs and lists */
:global(.markdown) :is(:not(p):not(ol):not(ul):not(li)) {
clear: both;
}