diff --git a/web/assets/images/bot.svg b/web/assets/images/bot.svg new file mode 100644 index 000000000..a39c87f79 --- /dev/null +++ b/web/assets/images/bot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/assets/images/fediverse-black.png b/web/assets/images/fediverse-black.png new file mode 100644 index 000000000..1bc6a79b6 Binary files /dev/null and b/web/assets/images/fediverse-black.png differ diff --git a/web/assets/images/fediverse-color.png b/web/assets/images/fediverse-color.png new file mode 100644 index 000000000..bb19584a8 Binary files /dev/null and b/web/assets/images/fediverse-color.png differ diff --git a/web/assets/images/indieauth.png b/web/assets/images/indieauth.png new file mode 100644 index 000000000..8f1beee9c Binary files /dev/null and b/web/assets/images/indieauth.png differ diff --git a/web/assets/images/logo.svg b/web/assets/images/logo.svg new file mode 100644 index 000000000..ac3f9b784 --- /dev/null +++ b/web/assets/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/assets/images/moderator.svg b/web/assets/images/moderator.svg new file mode 100644 index 000000000..24940eb97 --- /dev/null +++ b/web/assets/images/moderator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/stories/ImageAsset.tsx b/web/stories/ImageAsset.tsx new file mode 100644 index 000000000..ec8adff80 --- /dev/null +++ b/web/stories/ImageAsset.tsx @@ -0,0 +1,77 @@ +import PropTypes from 'prop-types'; + +export function ImageAsset(props) { + const { name, src } = props; + + const containerStyle = { + borderRadius: '20px', + width: '12vw', + height: '12vw', + minWidth: '100px', + minHeight: '100px', + borderWidth: '1.5px', + borderStyle: 'solid', + borderColor: 'lightgray', + overflow: 'hidden', + margin: '0.3vw', + }; + + const colorBlockStyle = { + height: '70%', + width: '100%', + backgroundColor: 'white', + }; + + const colorDescriptionStyle = { + textAlign: 'center', + color: 'gray', + fontSize: '0.8em', + }; + + const imageStyle = { + width: '100%', + height: '80%', + backgroundRepeat: 'no-repeat', + backgroundSize: 'contain', + backgroundPosition: 'center', + marginTop: '5px', + backgroundImage: `url(${src})`, + }; + + return ( +
+ +
+
{name}
+ +
+ ); +} + +Image.propTypes = { + name: PropTypes.string.isRequired, +}; + +const rowStyle = { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + // justifyContent: 'space-around', + alignItems: 'center', +}; + +export function ImageRow(props) { + const { images } = props; + + return ( +
+ {images.map(image => ( + + ))} +
+ ); +} + +ImageRow.propTypes = { + images: PropTypes.arrayOf(PropTypes.object).isRequired, +}; diff --git a/web/stories/Colors.stories.mdx b/web/stories/StyleGuide.stories.mdx similarity index 65% rename from web/stories/Colors.stories.mdx rename to web/stories/StyleGuide.stories.mdx index e1fc9be5f..70e801a66 100644 --- a/web/stories/Colors.stories.mdx +++ b/web/stories/StyleGuide.stories.mdx @@ -1,5 +1,13 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import {Color, ColorRow} from './Color'; +import {Image, ImageRow} from './ImageAsset'; + +import Logo from '../assets/images/logo.svg'; +import FediverseColor from '../assets/images/fediverse-color.png'; +import FediverseBlack from '../assets/images/fediverse-black.png'; +import Moderator from '../assets/images/moderator.svg'; +import IndieAuth from '../assets/images/indieauth.png'; +import IsBot from '../assets/images/bot.svg'; @@ -8,10 +16,26 @@ import {Color, ColorRow} from './Color'; `} -# Images +export const images = [{ + src: Logo, + name: 'Logo', +}, { + src: FediverseColor, + name: 'Fediverse Color', +},{ + src: FediverseBlack, + name: 'Fediverse Black', +}, { + src: Moderator, + name: 'Moderator', +}, { + src: IndieAuth, + name: 'IndieAuth', +}, { + src: IsBot, + name: 'Bot Flag', +}]; - - # Colors @@ -43,10 +67,22 @@ import {Color, ColorRow} from './Color'; # Font +[Inter font](https://rsms.me/inter/) + {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')} -[Inter font](https://rsms.me/inter/) \ No newline at end of file +# Images + + + + + + + + + +