Restructure styles

adnmanai · Jun 6, 2018 · 496c406 · 496c406
1 parent 7dbbdb1
commit 496c406
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 85 deletions.
diff --git a/src/utils/triangle.svg → src/images/triangle.svg b/src/utils/triangle.svg → src/images/triangle.svg
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -1,41 +1,20 @@
-/* eslint no-unused-expressions: 0 */
 /* global tw */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectGlobal } from 'emotion';
-import styled, { keyframes, css } from 'react-emotion';
+import styled from 'react-emotion';
 import { Parallax, ParallaxLayer } from 'react-spring';
 import 'typeface-cantata-one';
 import 'typeface-open-sans';
 
 import SEO from '../components/SEO';
 import SVG from '../components/SVG';
 import ProjectCard from '../components/ProjectCard';
+import { rotate, UpDown, UpDownWide, waveAnimation } from '../styles/animations';
+import { hidden } from '../styles/utils';
 import { colors, width } from '../../tailwind';
-import triangle from '../utils/triangle.svg';
+import triangle from '../images/triangle.svg';
 import avatar from '../images/avatar.jpg';
-
-injectGlobal`
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-  html {
-    text-rendering: optimizeLegibility;
-    overflow-x: hidden;
-    box-sizing: border-box;
-    -ms-overflow-style: scrollbar;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    background-color: #161719;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  html, body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-  }
-`;
+import '../styles/global';
 
 const Divider = styled(ParallaxLayer)`
   ${tw('absolute w-full h-full')};
@@ -67,15 +46,6 @@ const BigTitle = styled.h1`
   text-shadow: 0 5px 35px rgba(255, 255, 255, 0.15);
 `;
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-
 const Title = styled.h1`
   ${tw('text-4xl lg:text-4xl font-serif text-white mb-8 tracking-wide relative inline-block')};
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
@@ -114,54 +84,6 @@ const InnerWave = styled.div`
   }
 `;
 
-const waveOne = keyframes`
-  0% {
-    d: path("M 0 100 Q 250 50 400 200 Q 550 350 800 300 L 800 0 L 0 0 L 0 100 Z");
-  }
-  50% {
-    d: path("M 0 100 Q 200 150 400 200 Q 600 250 800 300 L 800 0 L 0 0 L 0 100 Z");
-  }
-  100% {
-    d: path("M 0 100 Q 150 350 400 200 Q 650 50 800 300 L 800 0 L 0 0 L 0 100 Z");
-  }
-`;
-
-const upDownAnimation = keyframes`
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(30px);
-  }
-`;
-
-const upDownWideAnimation = keyframes`
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(200px);
-  }
-`;
-
-const UpDown = styled.div`
-  animation: ${upDownAnimation} 4s ease-in-out infinite alternate;
-  ${tw('pin absolute')};
-`;
-
-const UpDownWide = styled.div`
-  animation: ${upDownWideAnimation} 18s ease-in-out infinite alternate;
-  ${tw('pin absolute')};
-`;
-
-const waveOneAnimation = css`
-  animation: ${waveOne} 25s linear infinite alternate;
-`;
-
-const hidden = css`
-  ${tw('hidden lg:block')};
-`;
-
 const AboutHero = styled.div`
   ${tw('flex flex-col lg:flex-row items-center mt-8')};
 `;
@@ -328,7 +250,7 @@ const Index = ({ data: { p1, p2, p3, p4 } }) => (
         <WaveWrapper>
           <InnerWave>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 338.05" preserveAspectRatio="none">
-              <path className={waveOneAnimation}>
+              <path className={waveAnimation}>
                 <animate
                   attributeName="d"
                   values="M 0 100 Q 250 50 400 200 Q 550 350 800 300 L 800 0 L 0 0 L 0 100 Z;M 0 100 Q 200 150 400 200 Q 600 250 800 300 L 800 0 L 0 0 L 0 100 Z;M 0 100 Q 150 350 400 200 Q 650 50 800 300 L 800 0 L 0 0 L 0 100 Z"
@@ -372,7 +294,7 @@ const Index = ({ data: { p1, p2, p3, p4 } }) => (
 export default Index;
 
 Index.propTypes = {
-  data: PropTypes.any.isRequired,
+  data: PropTypes.object.isRequired,
 };
 
 /* eslint no-undef: "off" */

diff --git a/src/styles/animations.jsx b/src/styles/animations.jsx
@@ -0,0 +1,55 @@
+/* global tw */
+import styled, { keyframes, css } from 'react-emotion';
+
+export const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const wave = keyframes`
+  0% {
+    d: path("M 0 100 Q 250 50 400 200 Q 550 350 800 300 L 800 0 L 0 0 L 0 100 Z");
+  }
+  50% {
+    d: path("M 0 100 Q 200 150 400 200 Q 600 250 800 300 L 800 0 L 0 0 L 0 100 Z");
+  }
+  100% {
+    d: path("M 0 100 Q 150 350 400 200 Q 650 50 800 300 L 800 0 L 0 0 L 0 100 Z");
+  }
+`;
+
+const upDownAnimation = keyframes`
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(30px);
+  }
+`;
+
+const upDownWideAnimation = keyframes`
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(200px);
+  }
+`;
+
+export const UpDown = styled.div`
+  animation: ${upDownAnimation} 4s ease-in-out infinite alternate;
+  ${tw('pin absolute')};
+`;
+
+export const UpDownWide = styled.div`
+  animation: ${upDownWideAnimation} 18s ease-in-out infinite alternate;
+  ${tw('pin absolute')};
+`;
+
+export const waveAnimation = css`
+  animation: ${wave} 25s linear infinite alternate;
+`;
diff --git a/src/styles/global.jsx b/src/styles/global.jsx
@@ -0,0 +1,24 @@
+/* eslint no-unused-expressions: 0 */
+import { injectGlobal } from 'emotion';
+
+injectGlobal`
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  html {
+    text-rendering: optimizeLegibility;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    -ms-overflow-style: scrollbar;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background-color: #161719;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+`;
diff --git a/src/styles/utils.jsx b/src/styles/utils.jsx
@@ -0,0 +1,6 @@
+/* global tw */
+import { css } from 'react-emotion';
+
+export const hidden = css`
+  ${tw('hidden xl:block')};
+`;