diff --git a/src/components/Image.tsx b/src/components/Image.tsx new file mode 100644 index 0000000..4bb9db4 --- /dev/null +++ b/src/components/Image.tsx @@ -0,0 +1,31 @@ +import cx from 'classnames'; + +import type { FunctionalComponent } from 'preact'; + +interface Props { + alt: string; + class?: string; + noMargin?: boolean; + src: string; +} + +export const Image: FunctionalComponent = ({ + alt, + class: className, + noMargin, + src, + ...props +}) => { + const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className); + + return ( +
+ {alt} +
+ ); +}; diff --git a/src/components/index.ts b/src/components/index.ts index dcc3045..6e14f71 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,6 @@ export * from './Divider'; export * from './Headline'; +export * from './Image'; export * from './LegalDate'; export * from './Link'; export * from './ListItem'; diff --git a/src/mdx-components.ts b/src/mdx-components.ts index e230179..247725e 100644 --- a/src/mdx-components.ts +++ b/src/mdx-components.ts @@ -1,6 +1,7 @@ import { Divider, Headline, + Image, ListItem, OrderedList, Subheadline, @@ -20,6 +21,7 @@ export const mapping = { h5: Subsubheadline, h6: Subsubheadline, hr: Divider, + img: Image, li: ListItem, ol: OrderedList, p: Text, diff --git a/src/styles/global.css b/src/styles/global.css index a8c4a55..ccbba11 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -84,4 +84,28 @@ cite { @apply pie-[0.1em]; } + + /** Images */ + img[src$='.svg'] { + @apply border-0 bg-transparent shadow-none; + } +} + +@layer components { + .image-shadow { + @apply relative transition-transform duration-500 ease-in-out; + + &::after { + @apply absolute -z-[1] h-full w-full opacity-0 shadow-subtle transition-opacity duration-500 ease-in-out content-[''] block-start-0 inline-start-0; + } + + &:hover, + &:focus { + @apply scale-[1.03]; + + &::after { + @apply opacity-100; + } + } + } }