From 496c4067e1f62219219af420c288abb52424ed3a Mon Sep 17 00:00:00 2001 From: LeKoArts Date: Wed, 6 Jun 2018 11:38:28 +0200 Subject: [PATCH] Restructure styles --- src/{utils => images}/triangle.svg | 0 src/pages/index.jsx | 92 +++--------------------------- src/styles/animations.jsx | 55 ++++++++++++++++++ src/styles/global.jsx | 24 ++++++++ src/styles/utils.jsx | 6 ++ 5 files changed, 92 insertions(+), 85 deletions(-) rename src/{utils => images}/triangle.svg (100%) create mode 100644 src/styles/animations.jsx create mode 100644 src/styles/global.jsx create mode 100644 src/styles/utils.jsx diff --git a/src/utils/triangle.svg b/src/images/triangle.svg similarity index 100% rename from src/utils/triangle.svg rename to src/images/triangle.svg diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 7a2e4aa..3c009c8 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,9 +1,7 @@ -/* 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'; @@ -11,31 +9,12 @@ 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 } }) => ( - + ( 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 new file mode 100644 index 0000000..0bd5d48 --- /dev/null +++ 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 new file mode 100644 index 0000000..92b6bb3 --- /dev/null +++ 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 new file mode 100644 index 0000000..5e74d6b --- /dev/null +++ b/src/styles/utils.jsx @@ -0,0 +1,6 @@ +/* global tw */ +import { css } from 'react-emotion'; + +export const hidden = css` + ${tw('hidden xl:block')}; +`;