fix styles for mobile using flexbox

Author: janbiasi

src/patterns/atoms/color/css/color.css

@@ -10,7 +10,8 @@
 .a-color__preview {
 	display: block;
 	height: 150px;
-	width: 150px;
+	min-width: 150px;
+	width: 100%;
 }
 
 .a-color__code {

src/patterns/atoms/image/css/image-block.css

@@ -1,4 +1,4 @@
 .h-image-block {
-	margin: 30px 60px;
+	margin: 30px;
 	display: inline-block;
 }

src/patterns/atoms/image/index.tsx

@@ -14,14 +14,15 @@ export interface IImageBlock {
 	description?: string;
 }
 
-const RENDITION_BASE_SIZE = 50;
+const RENDITION_BASE_SIZE = 35;
 
 const calculateRenditions = (rendition: ImageRendition): number[] => {
-	return rendition
-		.split(':')
-		.map((size: string) => parseInt(size, 10))
-		.map((size: number) => (size >= 9 ? size / 2 : size))
-		.map((size: number) => size * RENDITION_BASE_SIZE);
+	const renditions = rendition
+		.split(':') // 1:1 => ['1', '1']
+		.map((size: string) => parseInt(size, 10)) // ['1', '1'] => [1, 1]
+		.map((size: number) => size * RENDITION_BASE_SIZE); // [1, 1] => [35, 35]
+
+	return renditions.map((size: number) => size * (100 / (renditions[0] + renditions[1])) * 5);
 };
 
 export const Image = ({ rendition, modifier }: IImage) => {
@@ -31,6 +32,7 @@ export const Image = ({ rendition, modifier }: IImage) => {
 		<div className={`a-image` + (modifier ? ` a-image--${modifier}` : '')} style={{ width, height }}>
 			<p className="a-image__rendition" style={{ lineHeight: `${height}px` }}>
 				{rendition}
+				{modifier && ` (${modifier})`}
 			</p>
 		</div>
 	);

src/patterns/molecules/colors/css/colors.css

@@ -6,7 +6,8 @@
 
 .m-colors .a-color {
 	margin: 20px;
-	flex-shrink: 1;
+	flex-shrink: 0;
+	flex-grow: 1;
 	flex-basis: auto;
 	align-self: auto;
 }