feat: Added Tutorial

lloydrichards · Jun 24, 2020 · d741ee6 · d741ee6
1 parent 69f7e0f
commit d741ee6
Show file tree

Hide file tree

Showing 7 changed files with 317 additions and 46 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -10,7 +10,7 @@ const Layout: React.FunctionComponent<Props> = ({
   children,
   title = "This is the default title",
 }) => (
-  <div>
+  <div style={{ margin: "auto", width: "1080px" }}>
     <Head>
       <title>{title}</title>
       <meta charSet="utf-8" />

diff --git a/components/LifePlastic/Garbage.tsx b/components/LifePlastic/Garbage.tsx
@@ -9,16 +9,27 @@ export const GarbageBackground: React.FC = () => {
         height: "4028px",
         position: "absolute",
         zIndex: -3,
-        background: `${SKYBACKGROUND}`,
       }}
     >
       <div
         style={{
-          width: "100%",
+          width: "200vw",
+          marginLeft: "-50vw",
+          top: "0px",
+          height: "4028px",
+          position: "relative",
+          zIndex: -3,
+          background: `${SKYBACKGROUND}`,
+        }}
+      />
+      <div
+        style={{
+          width: "200vw",
+          marginLeft: "-50vw",
           height: "2248px",
-          top: "1780px",
+          top: "-2248px",
           background: GROUNDBACKGROUND,
-          position: "absolute",
+          position: "relative",
           zIndex: -2,
         }}
       />

diff --git a/components/LifePlastic/TutorialLines.tsx b/components/LifePlastic/TutorialLines.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+
+const TutorialLines = () => {
+  return (
+    <svg
+      width="1050"
+      height="1781"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ position: "absolute", top: -30, zIndex: 7 }}
+    >
+      <path
+        d="M285.028 1373.29h-27.45c-34.794 0-63 28.21-63 63v79.11m0 0l14.044-14.04m-14.044 14.04l-14.045-14.04"
+        stroke="#000"
+        stroke-width="2"
+      />
+      <path
+        d="M189.243 1674.94c2.28-4.15 8.233-4.15 10.513 0l16.264 29.55c2.2 4-.692 8.89-5.257 8.89h-32.527c-4.564 0-7.457-4.89-5.257-8.89l16.264-29.55z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M195.879 1701.38h-1.09v-7.22l-2.185.8v-.98l3.105-1.17h.17v8.57z"
+        fill="#000"
+      />
+      <path
+        d="M197.836 1718.38l-5.242-5.5 5.242-5.5M174.484 1690.02l7.238-1.68 1.601 7.6M211.727 1685.38l-1.363 7.65-7.287-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <path
+        d="M316.724 1675.13c2.269-4.19 8.284-4.19 10.553 0l15.911 29.4c2.163 3.99-.731 8.85-5.277 8.85H306.09c-4.546 0-7.441-4.86-5.277-8.85l15.911-29.4z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M325.398 1701.38h-5.589v-.78l2.953-3.28c.437-.49.738-.9.902-1.2.168-.32.252-.64.252-.97 0-.45-.135-.81-.404-1.1-.27-.28-.629-.43-1.078-.43-.539 0-.959.16-1.26.47-.297.3-.445.73-.445 1.28h-1.084c0-.79.251-1.42.755-1.91.508-.48 1.186-.73 2.034-.73.793 0 1.42.21 1.88.63.461.42.692.97.692 1.66 0 .84-.535 1.84-1.606 3l-2.285 2.48h4.283v.88z"
+        fill="#000"
+      />
+      <path
+        d="M325.281 1718.38l-5.156-5.5 5.156-5.5M302.313 1690.02l7.12-1.68 1.574 7.6M338.946 1685.38l-1.341 7.65-7.168-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <path
+        d="M444.243 1674.94c2.28-4.15 8.233-4.15 10.513 0l16.264 29.55c2.2 4-.692 8.89-5.257 8.89h-32.527c-4.564 0-7.457-4.89-5.257-8.89l16.264-29.55z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M447.814 1697.11l.434-4.26h4.371v1h-3.451l-.258 2.33c.418-.25.893-.37 1.424-.37.777 0 1.395.26 1.852.77.457.52.685 1.21.685 2.08 0 .88-.238 1.58-.715 2.08-.472.51-1.135.76-1.986.76-.754 0-1.369-.21-1.846-.63-.476-.41-.748-.99-.814-1.73h1.025c.067.49.24.86.522 1.11.281.24.652.37 1.113.37.504 0 .898-.18 1.184-.52.289-.34.433-.82.433-1.42 0-.57-.156-1.03-.469-1.38-.308-.34-.72-.52-1.236-.52-.473 0-.844.11-1.113.31l-.287.24-.868-.22z"
+        fill="#000"
+      />
+      <path
+        d="M452.836 1718.38l-5.242-5.5 5.242-5.5M429.484 1690.02l7.238-1.68 1.601 7.6M466.727 1685.38l-1.363 7.65-7.287-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <path
+        d="M572.724 1675.13c2.269-4.19 8.284-4.19 10.553 0l15.911 29.4c2.163 3.99-.731 8.85-5.277 8.85H562.09c-4.546 0-7.441-4.86-5.277-8.85l15.911-29.4z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M580.062 1692.85v.92h-.199c-.843.01-1.515.26-2.015.75-.5.48-.789 1.16-.868 2.04.45-.52 1.063-.77 1.84-.77.742 0 1.334.26 1.776.78.445.53.668 1.2.668 2.03 0 .88-.241 1.58-.721 2.11-.477.53-1.117.79-1.922.79-.816 0-1.478-.31-1.986-.94-.508-.63-.762-1.44-.762-2.42v-.42c0-1.57.334-2.77 1.002-3.6.672-.83 1.67-1.25 2.994-1.27h.193zm-1.423 3.84c-.371 0-.713.11-1.026.33a1.81 1.81 0 00-.65.84v.4c0 .7.158 1.27.475 1.7.316.43.71.64 1.183.64.488 0 .871-.18 1.149-.54.281-.35.421-.83.421-1.41s-.142-1.06-.427-1.42a1.357 1.357 0 00-1.125-.54z"
+        fill="#000"
+      />
+      <path
+        d="M581.281 1718.38l-5.156-5.5 5.156-5.5M558.313 1690.02l7.12-1.68 1.574 7.6M594.946 1685.38l-1.341 7.65-7.168-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <path
+        d="M700.724 1675.13c2.269-4.19 8.284-4.19 10.553 0l15.911 29.4c2.163 3.99-.731 8.85-5.277 8.85H690.09c-4.546 0-7.441-4.86-5.277-8.85l15.911-29.4z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M708.385 1698.52h1.183v.88h-1.183v1.98h-1.09v-1.98h-3.885v-.64l3.82-5.91h1.155v5.67zm-3.744 0h2.654v-4.19l-.129.24-2.525 3.95z"
+        fill="#000"
+      />
+      <path
+        d="M709.281 1718.38l-5.156-5.5 5.156-5.5M686.313 1690.02l7.12-1.68 1.574 7.6M722.946 1685.38l-1.341 7.65-7.168-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <path
+        d="M828.243 1674.94c2.28-4.15 8.233-4.15 10.513 0l16.264 29.55c2.2 4-.692 8.89-5.257 8.89h-32.527c-4.564 0-7.457-4.89-5.257-8.89l16.264-29.55z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M832.893 1696.59h.814c.512-.01.914-.14 1.207-.4.293-.27.44-.62.44-1.07 0-1-.499-1.5-1.495-1.5-.468 0-.843.14-1.125.41-.277.26-.416.62-.416 1.06h-1.084c0-.68.246-1.24.739-1.68.496-.45 1.125-.68 1.886-.68.805 0 1.436.22 1.893.64.457.43.686 1.02.686 1.78 0 .37-.122.73-.364 1.08-.238.34-.564.6-.978.78.468.14.83.39 1.084.73.258.35.386.77.386 1.26 0 .77-.25 1.38-.75 1.83-.5.45-1.15.67-1.951.67-.801 0-1.453-.22-1.957-.65-.5-.43-.75-1.01-.75-1.72h1.09c0 .45.147.81.44 1.08.292.27.685.41 1.177.41.524 0 .924-.14 1.201-.41.278-.28.416-.67.416-1.18 0-.5-.152-.88-.457-1.15-.304-.26-.744-.4-1.318-.41h-.814v-.88z"
+        fill="#000"
+      />
+      <path
+        d="M836.836 1718.38l-5.242-5.5 5.242-5.5M813.484 1690.02l7.238-1.68 1.601 7.6M850.727 1685.38l-1.363 7.65-7.287-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <path
+        d="M956.243 1674.94c2.28-4.15 8.233-4.15 10.513 0l16.264 29.55c2.2 4-.692 8.89-5.257 8.89h-32.527c-4.564 0-7.457-4.89-5.257-8.89l16.264-29.55z"
+        stroke="#000"
+        stroke-width="4"
+      />
+      <path
+        d="M964.824 1693.46l-3.533 7.92h-1.137l3.522-7.64h-4.617v-.89h5.765v.61z"
+        fill="#000"
+      />
+      <path
+        d="M964.836 1718.38l-5.242-5.5 5.242-5.5M941.484 1690.02l7.238-1.68 1.601 7.6M978.727 1685.38l-1.363 7.65-7.287-1.43"
+        stroke="#000"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+};
+
+export default TutorialLines;
diff --git a/components/LifePlastic/UI/RevealBox.tsx b/components/LifePlastic/UI/RevealBox.tsx
@@ -36,6 +36,7 @@ const RevealBox: React.FC = ({ children }) => {
         zIndex: 4,
       }}
     >
+      {children}
       <motion.div
         style={{
           width: "100%",
@@ -46,7 +47,6 @@ const RevealBox: React.FC = ({ children }) => {
           zIndex: 4,
         }}
       />
-      {children}
     </motion.div>
   );
 };

diff --git a/components/LifePlastic/styles/PlasticStyles.tsx b/components/LifePlastic/styles/PlasticStyles.tsx
@@ -84,3 +84,49 @@ export const Button = styled.button({
       "inset -4px 4px 8px rgba(20,20,20,0.1), inset 4px -4px 8px rgba(255,255,255,0.8)",
   },
 });
+
+export const TutorialTitleDIV = styled.div({
+  width: "100%",
+  height: "250px",
+  margin: "4px 50px",
+  "&>h1": {
+    fontSize: "64px",
+    lineHeight: "83%",
+    letterSpacing: "3px",
+    fontFamily: "Muli,sans-serif",
+    fontWeight: 200,
+    padding: "50px 0px 0px 0px",
+    margin: "0",
+    width: "400px",
+  },
+  "&>h3": {
+    fontSize: "24px",
+    fontFamily: "Pacifico",
+    color: "#9BBD8B",
+    textShadow:
+      "4px 4px 2px rgba(20,20,20,0.1), -2px -2px 2px rgba(255,255,255,0.8)",
+    padding: "0px 100px",
+    margin: "0",
+  },
+});
+export const TutorialDIV = styled.div({
+  width: "100%",
+  height: "250px",
+  margin: "4px 50px",
+  display: "flex",
+  alignItems: "center",
+  "&>p": {
+    fontSize: "18px",
+    textAlign: "justify",
+    align: "left",
+    lineHeight: "150%",
+    fontFamily: "Josefin Sans,sans-serif",
+    paddingLeft: "250px",
+    width: "400px",
+  },
+  "&>div.example": {
+    position: "absolute",
+    top: "-200px",
+    align: "right",
+  },
+});
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,26 @@
+// /pages/_document.js
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+class MyDocument extends Document {
+  static async getInitialProps(ctx: any) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Muli:wght@200;300;400&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+export default MyDocument;