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 useBaseUrl from '@docusaurus/useBaseUrl';
import './styles.module.css'; import './styles.module.css';
import styles from './styles.module.css';
type Props = { type Props = {
// An optional alt text, if the caption does not already convey all relevant // An optional alt text, if the caption does not already convey all relevant
@ -76,11 +77,13 @@ type Props = {
caption: string; caption: string;
// the path to the image, starting with `/img/`. Example: /img/image.png // the path to the image, starting with `/img/`. Example: /img/image.png
img: string; 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 ( return (
<figure> <figure className={float ? styles.float : ''}>
<img alt={alt} src={useBaseUrl(img)} /> <img alt={alt} src={useBaseUrl(img)} />
<figcaption>{caption}</figcaption> <figcaption>{caption}</figcaption>
</figure> </figure>

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

@ -7,6 +7,12 @@ figure {
margin-inline: 0; margin-inline: 0;
} }
.float {
float: right;
max-width: 50%;
margin-left: var(--ifm-pre-padding);
}
figure img { figure img {
box-shadow: none; box-shadow: none;
border: none; border: none;
@ -21,3 +27,9 @@ figcaption {
padding-inline: var(--ifm-pre-padding); padding-inline: var(--ifm-pre-padding);
border-inline-start: 5px solid var(--ifm-color-primary); 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;
}