diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 8ac0685..4e20dbe 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -48,6 +48,15 @@ a.nav-link:hover:after { cursor: cell; } +.xray { + opacity: 1; + transition: opacity 200ms ease; +} + +.xray:hover { + opacity: 0; +} + .image-container { position: relative; width: 100%; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index eddaafc..091c685 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { motion } from "framer-motion"; import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react"; import "./Header.css"; @@ -20,11 +19,6 @@ import calculatorSpec from "../../assets/calculator-spec.svg"; type HeaderProps = {}; -const illustrationVariants = { - hidden: { opacity: 0, transition: { duration: 0.2 } }, - visible: { opacity: 1, transition: { duration: 0.2 } }, -}; - const handleGetStarted = () => window.open( "https://github.com/phosphor-icons/phosphor-web#phosphor-icons", @@ -45,7 +39,9 @@ const Header: React.FC = () => {

- Phosphor is a flexible icon family in 6 weights — for interfaces, presentations, felicitations... + Phosphor is a flexible icon family for interfaces, presentations —  + + whatever, really.

+ - - - + + + -
- - + + + - - - + + );