feat: allow separated title & colors for it

useflyyer · Oct 27, 2020 · 4fab1ea · 4fab1ea
1 parent 78726db
commit 4fab1ea
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/components/elements.tsx b/components/elements.tsx
@@ -1,14 +1,17 @@
 import styled from "styled-components";
 
-export const Title = styled.h1<{ simplify: boolean }>`
+export const Title = styled.h1<{ simplify: boolean | null; colored: boolean | null; color?: string | null }>`
   margin: 0;
-  color: ${(props) => (props.simplify ? "#303030" : "#ffffff")};
+  color: ${(props) => (props.simplify ? "#303030" : props.colored ? props.color : "#ffffff")};
+  -webkit-text-stroke: ${(props) => (props.colored ? "1px white" : "unset")};
   font-family: "IBM Plex Sans";
   font-size: 6.5rem;
-  letter-spacing: 5px;
+  letter-spacing: 8px;
+  margin-top: -15px;
 `;
 Title.defaultProps = {
   simplify: false,
+  color: "black",
 };
 
 export const Description = styled.h2<{ simplify: boolean }>`

diff --git a/components/layers.tsx b/components/layers.tsx
@@ -24,11 +24,7 @@ export const Background = styled(Layer)<{ color: string }>`
 export const Fade = styled(Layer)`
   background: #7325b7; /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #3900ac, #7325b7); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(
-    to left,
-    #3900ac,
-    #7325b7
-  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background: linear-gradient(to left, #3900ac, #7325b7);
 `;
 
 export const Content = styled(Layer)`
@@ -59,7 +55,7 @@ export const HeaderStart = styled(Layer)`
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  padding: 2em 2em;
+  padding: 1em;
 `;
 
 export const HeaderEnd = styled(Layer)`

diff --git a/templates/main.tsx b/templates/main.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-// import styled from "styled-components";
+import styled from "styled-components";
 
 import { Title, Description, Footer, SocialIcon, Logo } from "../components/elements";
 import { Fade, Content, HeaderStart, IconsTop, IconsBottom, FooterCenter } from "../components/layers";
@@ -15,13 +15,21 @@ import Teams from "../static/teams.png";
 import Twitter from "../static/twitter.png";
 import WhatsApp from "../static/whatsapp.png";
 
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
 // Make sure to 'export default' a React component
 export default function MainTemplate({ variables }) {
   const {
-    title = "SocialPreview.io",
+    title = "Social",
+    title2 = "Preview",
+    title3 = ".io",
     description = "Find out how people perceive your website",
     footer = "Preview your links on WhatsApp, Twitter, Facebook, and more!",
     simplify = false,
+    colored = true,
   } = variables;
 
   return (
@@ -39,7 +47,17 @@ export default function MainTemplate({ variables }) {
         <SocialIcon src={Messenger} />
       </IconsTop>
       <Content>
-        <Title simplify={simplify}>{title}</Title>
+        <Row>
+          <Title colored={colored} color="#e7e700" simplify={simplify}>
+            {title}
+          </Title>
+          <Title colored={colored} color="#ff922a" simplify={simplify}>
+            {title2}
+          </Title>
+          <Title colored={colored} color="#ffff" simplify={simplify}>
+            {title3}
+          </Title>
+        </Row>
         {description && <Description simplify={simplify}>{description}</Description>}
       </Content>
       <IconsBottom>