Improve readability of image captions
This commit is contained in:
parent
dc78165043
commit
92cbfc4437
Binary file not shown.
After Width: | Height: | Size: 585 B |
|
@ -42,7 +42,7 @@ story.add('Image', () => {
|
||||||
return <Lightbox {...props} />;
|
return <Lightbox {...props} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
story.add('Image with Caption', () => {
|
story.add('Image with Caption (normal image)', () => {
|
||||||
const props = createProps({
|
const props = createProps({
|
||||||
caption:
|
caption:
|
||||||
'This is the user-provided caption. It can get long and wrap onto multiple lines.',
|
'This is the user-provided caption. It can get long and wrap onto multiple lines.',
|
||||||
|
@ -52,6 +52,16 @@ story.add('Image with Caption', () => {
|
||||||
return <Lightbox {...props} />;
|
return <Lightbox {...props} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
story.add('Image with Caption (all-white image)', () => {
|
||||||
|
const props = createProps({
|
||||||
|
caption:
|
||||||
|
'This is the user-provided caption. It should be visible on light backgrounds.',
|
||||||
|
objectURL: '/fixtures/2000x2000-white.png',
|
||||||
|
});
|
||||||
|
|
||||||
|
return <Lightbox {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
story.add('Video', () => {
|
story.add('Video', () => {
|
||||||
const props = createProps({
|
const props = createProps({
|
||||||
contentType: VIDEO_MP4,
|
contentType: VIDEO_MP4,
|
||||||
|
|
|
@ -107,6 +107,8 @@ const styles = {
|
||||||
right: 0,
|
right: 0,
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: '0 0 1px black, 0 0 2px black, 0 0 3px black, 0 0 4px black',
|
||||||
padding: '1em',
|
padding: '1em',
|
||||||
paddingLeft: '3em',
|
paddingLeft: '3em',
|
||||||
paddingRight: '3em',
|
paddingRight: '3em',
|
||||||
|
|
Loading…
Reference in New Issue