feat(website): init

2020-10-05 10:14:49 +02:00
parent f54b93b319
commit 277e032770
140 changed files with 30517 additions and 0 deletions
@@ -0,0 +1,133 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Box } from 'reflexbox';
+import { Link } from 'gatsby';
+
+import { H3, H2, H4, TextLight, Text } from 'components/Typo';
+import {
+  px,
+  getThemeColor,
+  getThemeSpacePx,
+  rgba,
+  device,
+} from 'utils/css-utils';
+
+const Wrapper = styled(Box)`
+  border-radius: 6px;
+  background: ${(props) =>
+    props.isDark
+      ? props.theme.colors.dark.cardBackground
+      : props.theme.colors.light.background};
+  background-image: ${(props) =>
+    props.imgSrc ? `url(${props.imgSrc})` : 'none'};
+  background-repeat: no-repeat;
+  background-position: ${(props) => props.imgPosition};
+  color: ${(p) => p.theme.colors[p.isDark ? 'dark' : 'light'].text};
+  background-size: cover;
+  flex-grow: 1;
+  height: 270px;
+  display: flex;
+  align-items: center;
+
+  &.scale {
+    transition: transform 200ms ease, box-shadow 200ms ease;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+
+    &:hover {
+      transform-origin: center center;
+      transform: scale(1.02);
+      box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  && {
+    a,
+    a:visited,
+    a:hover,
+    a:focus,
+    a:active {
+      color: ${(p) => p.theme.colors[p.isDark ? 'dark' : 'light'].text};
+    }
+  }
+`;
+
+const getTextShadow = (props) => {
+  const color = props.theme.colors[props.isDark ? 'light' : 'dark'].text;
+  const rgbaColor = rgba(color, props.isDark ? 0.2 : 0.8);
+  return `-1px 0 14px ${rgbaColor}, 0 1px 14px ${rgbaColor}, 1px 0 14px ${rgbaColor}, 0 -1px 14px ${rgbaColor};`;
+};
+
+const TextWrapper = styled.div`
+  padding: ${getThemeSpacePx(3)};
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  text-shadow: ${getTextShadow};
+
+  ${H2} {
+    margin-top: 5px;
+  }
+
+  ${H3} {
+    margin-top: 5px;
+  }
+
+  ${TextLight} {
+    color: ${(p) =>
+      p.isDark
+        ? getThemeColor('silverDarken30')
+        : getThemeColor('silverDarken60')};
+  }
+
+  ${Text} {
+    color: ${(p) =>
+      p.isDark
+        ? getThemeColor('silverDarken30')
+        : getThemeColor('silverDarken60')};
+  }
+
+  ${H4} {
+    color: ${getThemeColor('silverDarken30')};
+  }
+
+  @media ${device.tablet} {
+    width: 50%;
+  }
+`;
+
+const ProjectTeaser = ({
+  kicker = '',
+  title = '',
+  text = '',
+  imgSrc = null,
+  isDark = false,
+  imgPosition = null,
+  imgSize = '100%',
+  slug = '/',
+  hoverEffect = null,
+}) => {
+  const imagePosition = imgPosition ? imgPosition : 'center right';
+
+  return (
+    <Link to={slug}>
+      <Wrapper
+        imgSrc={imgSrc}
+        isDark={isDark}
+        imgPosition={imagePosition}
+        imgSize={imgSize}
+        className={hoverEffect}
+      >
+        <TextWrapper isDark={isDark}>
+          <TextLight>{kicker}</TextLight>
+          <H3 as="div">{title}</H3>
+          <Text as="div">{text}</Text>
+        </TextWrapper>
+      </Wrapper>
+    </Link>
+  );
+};
+
+export default ProjectTeaser;