andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header+Footer: complete refactor of hover logic :)

Browse Source
This commit is contained in:
rektdeckard
2020-08-21 03:19:50 -04:00
parent 07c708e9fd
commit 43f722ad5b
4 changed files with 146 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Footer/Footer.css
View File

@@ -5,6 +5,12 @@ footer {
overflow: hidden; overflow: hidden;
} }
.container {
width: 100%;
max-width: 1280px;
margin: auto;
}
#back-to-top-button { #back-to-top-button {
width: 140px; width: 140px;
height: 140px; height: 140px;

222
src/components/Footer/Footer.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from "react"; import React from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion } from "framer-motion";
import { Heart } from "phosphor-react"; import { Heart } from "phosphor-react";
import uArrowUpLeft from "../../assets/u-arrow-up-left.svg"; import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
@@ -18,140 +18,104 @@ const variants = {
}; };
const Footer: React.FC<FooterProps> = () => { const Footer: React.FC<FooterProps> = () => {
const [hovered, setHovered] = useState<string | false>(false);
const clearHover = () => setHovered(false);
return ( return (
<footer> <footer>
<div className="outro"> <div className="container">
<h2> <div className="outro">
Phosphor is free and open source software. If you enjoy these icons, <h2>
please support us with a donation. Phosphor is free and open source software. If you enjoy these icons,
</h2> please support us with a donation.
<button </h2>
className="main-button"
onClick={() =>
window.open(
"https://paypal.me/TobiasFried",
"_blank",
"noopener noreferrer"
)
}
>
<Heart size={24} weight="fill" />
Buy us a coffee
</button>
<p className="fine-print">
Copyright © 2020 Phosphor Icons
<br />
Designed by{" "}
<a className="main-link" href="https://helenazhang.com">
Helena Zhang
</a>{" "}
+ built by{" "}
<a className="main-link" href="https://tobiasfried.com">
Tobias Fried
</a>{" "}
<span
role="img"
aria-label="Emoji of woman technologist, man technologist, and cat"
>
👩🏻‍💻👨‍💻🐈
</span>
<br />
This website is set in{" "}
<a className="main-link" href="https://manropefont.com/">
Manrope
</a>{" "}
by{" "}
<a className="main-link" href="https://gent.media/">
Mikhail Sharanda
</a>
.
<br />
See also:{" "}
<a
className="main-link"
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
>
Phosphor for Android
</a>
</p>
<div id="back-to-top">
<button <button
id="back-to-top-button"
aria-label="back-to-top button"
className="main-button" className="main-button"
onClick={() => { onClick={() =>
document window.open(
.getElementById("root") "https://paypal.me/TobiasFried",
?.scrollIntoView({ behavior: "smooth", block: "start" }); "_blank",
}} "noopener noreferrer"
)
}
> >
<img src={uArrowUpLeft} alt="" /> <Heart size={24} weight="fill" />
Buy us a coffee
</button> </button>
<p className="fine-print">
Copyright © 2020 Phosphor Icons
<br />
Designed by{" "}
<a className="main-link" href="https://helenazhang.com">
Helena Zhang
</a>{" "}
+ built by{" "}
<a className="main-link" href="https://tobiasfried.com">
Tobias Fried
</a>{" "}
<span
role="img"
aria-label="Emoji of woman technologist, man technologist, and cat"
>
👩🏻‍💻👨‍💻🐈
</span>
<br />
This website is set in{" "}
<a className="main-link" href="https://manropefont.com/">
Manrope
</a>{" "}
by{" "}
<a className="main-link" href="https://gent.media/">
Mikhail Sharanda
</a>
.
<br />
See also:{" "}
<a
className="main-link"
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
>
Phosphor for Android
</a>
</p>
<div id="back-to-top">
<button
id="back-to-top-button"
aria-label="back-to-top button"
className="main-button"
onClick={() => {
document
.getElementById("root")
?.scrollIntoView({ behavior: "smooth", block: "start" });
}}
>
<img src={uArrowUpLeft} alt="" />
</button>
</div>
<img id="phone" className="inspectable" src={phoneSpec} alt="" />
<motion.img
id="phone"
className="inspectable"
variants={variants}
initial="visible"
whileHover="hidden"
src={phone}
alt=""
/>
<img
id="command"
className="inspectable"
src={commandKeySpec}
alt=""
/>
<motion.img
id="command"
className="inspectable"
variants={variants}
initial="visible"
whileHover="hidden"
src={commandKey}
alt=""
/>
<img id="marker-green" src={markerGreen} alt="" />
</div> </div>
<AnimatePresence>
{hovered === "phone" ? (
<motion.img
id="phone"
key="phone-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={variants}
// onHoverStart={() => setHovered("phone")}
onHoverEnd={clearHover}
src={phoneSpec}
alt=""
/>
) : (
<motion.img
id="phone"
key="phone"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={variants}
onHoverStart={() => setHovered("phone")}
// onHoverEnd={clearHover}
src={phone}
alt=""
/>
)}
{hovered === "command" ? (
<motion.img
id="command"
key="command-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={variants}
// onHoverStart={() => setHovered("command")}
onHoverEnd={clearHover}
src={commandKeySpec}
alt=""
/>
) : (
<motion.img
id="command"
key="command"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={variants}
onHoverStart={() => setHovered("command")}
// onHoverEnd={clearHover}
src={commandKey}
alt=""
/>
)}
</AnimatePresence>
<img id="marker-green" src={markerGreen} alt="" />
</div> </div>
</footer> </footer>
); );

2
src/components/Header/Header.css
View File

@@ -72,7 +72,7 @@ a.nav-link:hover:after {
#calculator { #calculator {
position: absolute; position: absolute;
transform: translate(800px, 240px); transform: translate(800px, 112px);
} }
/* Illustrations remain at same layout up to 1024px */ /* Illustrations remain at same layout up to 1024px */

193
src/components/Header/Header.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from "react"; import React from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion } from "framer-motion";
import { ArrowUpRightCircle, ArrowDownCircle } from "phosphor-react"; import { ArrowUpRightCircle, ArrowDownCircle } from "phosphor-react";
import "./Header.css"; import "./Header.css";
@@ -40,9 +40,6 @@ const handleScrollToIcons = () => {
}; };
const Header: React.FC<HeaderProps> = () => { const Header: React.FC<HeaderProps> = () => {
const [hovered, setHovered] = useState<string | false>(false);
const clearHover = () => setHovered(false);
return ( return (
<header> <header>
<motion.div <motion.div
@@ -89,181 +86,83 @@ const Header: React.FC<HeaderProps> = () => {
Github Github
</a> </a>
</div> </div>
{hovered === "cutting-mat" ? ( <img
<motion.img
id="cutting-mat" id="cutting-mat"
key="cutting-mat-spec"
className="inspectable" className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("cutting-mat")}
onHoverEnd={clearHover}
src={cuttingMatSpec} src={cuttingMatSpec}
alt="" alt=""
/> />
) : (
<motion.img <motion.img
id="cutting-mat" id="cutting-mat"
key="cutting-mat"
className="inspectable" className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants} variants={illustrationVariants}
onHoverStart={() => setHovered("cutting-mat")} initial="visible"
// onHoverEnd={clearHover} whileHover="hidden"
src={cuttingMat} src={cuttingMat}
alt="" alt=""
/> />
)} <img id="receipt" className="inspectable" src={receiptSpec} alt="" />
{hovered === "receipt" ? (
<motion.img <motion.img
id="receipt" id="receipt"
key="receipt-spec"
className="inspectable" className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants} variants={illustrationVariants}
// onHoverStart={() => setHovered("receipt")}
onHoverEnd={clearHover}
src={receiptSpec}
alt=""
/>
) : (
<motion.img
id="receipt"
key="receipt"
className="inspectable"
initial="visible" initial="visible"
variants={illustrationVariants} whileHover="hidden"
onHoverStart={() => setHovered("receipt")}
// onHoverEnd={clearHover}
src={receipt} src={receipt}
alt="" alt=""
/> />
)} <img
{hovered === "calculator" ? (
<motion.img
id="calculator" id="calculator"
key="calculator-spec"
className="inspectable" className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("calculator")}
onHoverEnd={clearHover}
src={calculatorSpec} src={calculatorSpec}
alt="" alt=""
/> />
) : (
<motion.img <motion.img
id="calculator" id="calculator"
key="calculator"
className="inspectable" className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants} variants={illustrationVariants}
onHoverStart={() => setHovered("calculator")} initial="hidden"
// onHoverEnd={clearHover} whileHover="hidden"
src={calculator} src={calculator}
alt="" alt=""
/> />
)}
</div> </div>
<AnimatePresence> <img id="tablet" className="inspectable" src={tabletSpec} alt="" />
{hovered === "tablet" ? ( <motion.img
<motion.img id="tablet"
id="tablet" className="inspectable"
key="tablet-spec" variants={illustrationVariants}
className="inspectable" initial="hidden"
initial="hidden" whileHover="hidden"
animate="visible" src={tablet}
exit="hidden" alt=""
variants={illustrationVariants} />
// onHoverStart={() => setHovered("tablet")} <img
onHoverEnd={clearHover} id="billiard-ball"
src={tabletSpec} className="inspectable"
alt="" src={billiardBallSpec}
/> alt=""
) : ( />
<motion.img <motion.img
id="tablet" id="billiard-ball"
key="tablet" className="inspectable"
className="inspectable" variants={illustrationVariants}
initial="hidden" initial="hidden"
animate="visible" whileHover="hidden"
exit="hidden" src={billiardBall}
variants={illustrationVariants} alt=""
onHoverStart={() => setHovered("tablet")} />
// onHoverEnd={clearHover}
src={tablet} <img id="warning" className="inspectable" src={warningSpec} alt="" />
alt="" <motion.img
/> id="warning"
)} className="inspectable"
{hovered === "billiard-ball" ? ( variants={illustrationVariants}
<motion.img initial="hidden"
id="billiard-ball" whileHover="hidden"
key="billiard-ball-spec" src={warning}
className="inspectable" alt=""
initial="hidden" />
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("billiard-ball")}
onHoverEnd={clearHover}
src={billiardBallSpec}
alt=""
/>
) : (
<motion.img
id="billiard-ball"
key="billiard-ball"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
onHoverStart={() => setHovered("billiard-ball")}
// onHoverEnd={clearHover}
src={billiardBall}
alt=""
/>
)}
{hovered === "warning" ? (
<motion.img
id="warning"
key="warning-spec"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
// onHoverStart={() => setHovered("warning")}
onHoverEnd={clearHover}
src={warningSpec}
alt=""
/>
) : (
<motion.img
id="warning"
key="warning"
className="inspectable"
initial="hidden"
animate="visible"
exit="hidden"
variants={illustrationVariants}
onHoverStart={() => setHovered("warning")}
// onHoverEnd={clearHover}
src={warning}
alt=""
/>
)}
</AnimatePresence>
</motion.div> </motion.div>
</header> </header>
); );