style(site): header flow, mobile features and showcases

website/src/components/HeroFlow/index.js

@@ -8,9 +8,10 @@ import ReactFlow, {
 import ColorPickerNode from './ColorPickerNode';
 
 const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
+const isSmallScreen = windowWidth < 800;
 
 const getOffset = () => {
-  if (windowWidth < 800) {
+  if (isSmallScreen) {
     return 0;
   } else if (windowWidth < 1200) {
     return 405;
@@ -20,8 +21,10 @@ const getOffset = () => {
 };
 
 const getColorNodeX = () => {
-  if (windowWidth < 800) {
-    return offsetLeft + 440;
+  if (windowWidth < 600) {
+    return offsetLeft + 250;
+  } else if (isSmallScreen) {
+    return offsetLeft + 400;
   } else if (windowWidth < 1000) {
     return offsetLeft + 300;
   } else if (windowWidth < 1200) {
@@ -86,28 +89,31 @@ export default () => {
         type: 'colorpicker',
         data: { color: 'red', value: 105, onChange },
         sourcePosition: 'right',
-        position: { x: offsetLeft + 50, y: 5 },
+        position: { x: offsetLeft + 50, y: isSmallScreen ? 250 : 5 },
       },
       {
         id: '2',
         type: 'colorpicker',
         data: { color: 'green', value: 100, onChange },
         sourcePosition: 'right',
-        position: { x: offsetLeft, y: 150 },
+        position: { x: offsetLeft, y: isSmallScreen ? 325 : 150 },
       },
       {
         id: '3',
         data: { color: 'blue', value: 165, onChange },
         type: 'colorpicker',
         sourcePosition: 'right',
-        position: { x: offsetLeft + 120, y: 300 },
+        position: {
+          x: isSmallScreen ? offsetLeft + 50 : offsetLeft + 120,
+          y: isSmallScreen ? 400 : 300,
+        },
       },
       {
         id: '4',
         data: { label: 'rgb(105, 100, 165)' },
         targetPosition: 'left',
         sourcePosition: 'right',
-        position: { x: getColorNodeX(), y: 180 },
+        position: { x: getColorNodeX(), y: isSmallScreen ? 350 : 180 },
         style: {
           background: 'rgb(105, 100, 165)',
           color: 'white',

website/src/components/Showcases/index.js

@@ -52,9 +52,14 @@ const Showcases = () => {
 
   return (
     <CenterContent>
-      <Flex marginX={-gridPadding}>
+      <Flex marginX={[0, 0, -gridPadding]} flexWrap="wrap">
         {showcases.map((showcase) => (
-          <Box key={showcase.title} width={1 / 3} px={gridPadding}>
+          <Box
+            key={showcase.title}
+            width={[1, 1, 1 / 3]}
+            px={[0, 0, gridPadding]}
+            mb={[3, 3, 0]}
+          >
             <Link href={showcase.url} target="_blank" rel="noopener noreferrer">
               <RoundImage fluid={showcase.image.childImageSharp.fluid} />
               <Title>{showcase.title}</Title>
@@ -64,7 +69,12 @@ const Showcases = () => {
           </Box>
         ))}
         {emptyShowCases.map((index) => (
-          <Box key={index} width={1 / 3} px={gridPadding}>
+          <Box
+            key={index}
+            width={[1, 1, 1 / 3]}
+            px={[0, 0, gridPadding]}
+            mb={[3, 3, 0]}
+          >
             <EmptyCase>
               <img src={reactFlowIconSrc} alt="react flow logo" />
             </EmptyCase>

website/src/components/Sidebar/index.js

@@ -49,6 +49,10 @@ const MobileButton = styled(Flex)`
   cursor: pointer;
   justify-content: center;
   align-items: center;
+
+  @media ${device.tablet} {
+    display: none;
+  }
 `;
 
 const MenuLink = styled(Link)`

website/src/components/TeaserFlow/index.js

@@ -12,6 +12,7 @@ import ReactFlow, {
 import { H2, Text } from 'components/Typo';
 import Icon from 'components/Icon';
 import { baseColors } from 'themes';
+import { device, getThemeSpacePx } from 'utils/css-utils';
 
 const Wrapper = styled(Flex)`
   justify-content: space-between;
@@ -23,6 +24,11 @@ const ReactFlowWrapper = styled(Box)`
   height: 400px;
   background: ${(p) => (p.isDark ? baseColors.violet : 'white')};
   border-radius: 5px;
+  order: 2;
+
+  ${device.tablet} {
+    order: ${(p) => p.order};
+  }
 
   .react-flow__controls {
     opacity: ${(p) => (p.isDark ? 0.5 : 1)};
@@ -35,15 +41,24 @@ const DocsLink = styled(Link)`
   margin-top: 16px;
 `;
 
+const DescriptionWrapper = styled(Box)`
+  order: 1;
+  margin-bottom: ${getThemeSpacePx(3)};
+
+  ${device.tablet} {
+    order: ${(p) => p.order};
+  }
+`;
+
 const Description = ({ title, description }) => (
-  <Box width={[1, 1, 0.35]}>
+  <DescriptionWrapper width={[1, 1, 0.35]}>
     <H2>{title}</H2>
     <Text>{description}</Text>
     <DocsLink to="/docs">
       Documentation{'  '}
       <Icon width={24} name="arrow_right" colorizeStroke strokeColor="red" />
     </DocsLink>
-  </Box>
+  </DescriptionWrapper>
 );
 
 export default ({
@@ -58,13 +73,18 @@ export default ({
   children,
 }) => {
   const bgColor = isDark ? baseColors.violetLighten60 : baseColors.violet;
+  const reactFlowOrder = textPosition === 'left' ? 2 : 1;
 
   return (
     <Wrapper mb={[6, 6, 7]}>
       {textPosition === 'left' && (
-        <Description title={title} description={description} />
+        <Description order={1} title={title} description={description} />
       )}
-      <ReactFlowWrapper width={[1, 1, 0.6]} isDark={isDark}>
+      <ReactFlowWrapper
+        width={[1, 1, 0.6]}
+        isDark={isDark}
+        order={reactFlowOrder}
+      >
         {children ? (
           children
         ) : (
@@ -82,7 +102,7 @@ export default ({
         )}
       </ReactFlowWrapper>
       {textPosition !== 'left' && (
-        <Description title={title} description={description} />
+        <Description order={2} title={title} description={description} />
       )}
     </Wrapper>
   );