Header+Footer: complete refactor of hover logic :)
This commit is contained in:
rektdeckard
@@ -5,6 +5,12 @@ footer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#back-to-top-button {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Heart } from "phosphor-react";
|
||||
|
||||
import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
|
||||
@@ -18,140 +18,104 @@ const variants = {
|
||||
};
|
||||
|
||||
const Footer: React.FC<FooterProps> = () => {
|
||||
const [hovered, setHovered] = useState<string | false>(false);
|
||||
const clearHover = () => setHovered(false);
|
||||
|
||||
return (
|
||||
<footer>
|
||||
<div className="outro">
|
||||
<h2>
|
||||
Phosphor is free and open source software. If you enjoy these icons,
|
||||
please support us with a donation.
|
||||
</h2>
|
||||
<button
|
||||
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">
|
||||
<div className="container">
|
||||
<div className="outro">
|
||||
<h2>
|
||||
Phosphor is free and open source software. If you enjoy these icons,
|
||||
please support us with a donation.
|
||||
</h2>
|
||||
<button
|
||||
id="back-to-top-button"
|
||||
aria-label="back-to-top button"
|
||||
className="main-button"
|
||||
onClick={() => {
|
||||
document
|
||||
.getElementById("root")
|
||||
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}}
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://paypal.me/TobiasFried",
|
||||
"_blank",
|
||||
"noopener noreferrer"
|
||||
)
|
||||
}
|
||||
>
|
||||
<img src={uArrowUpLeft} alt="" />
|
||||
<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
|
||||
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>
|
||||
<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>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -72,7 +72,7 @@ a.nav-link:hover:after {
|
||||
|
||||
#calculator {
|
||||
position: absolute;
|
||||
transform: translate(800px, 240px);
|
||||
transform: translate(800px, 112px);
|
||||
}
|
||||
|
||||
/* Illustrations remain at same layout up to 1024px */
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowUpRightCircle, ArrowDownCircle } from "phosphor-react";
|
||||
|
||||
import "./Header.css";
|
||||
@@ -40,9 +40,6 @@ const handleScrollToIcons = () => {
|
||||
};
|
||||
|
||||
const Header: React.FC<HeaderProps> = () => {
|
||||
const [hovered, setHovered] = useState<string | false>(false);
|
||||
const clearHover = () => setHovered(false);
|
||||
|
||||
return (
|
||||
<header>
|
||||
<motion.div
|
||||
@@ -89,181 +86,83 @@ const Header: React.FC<HeaderProps> = () => {
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
{hovered === "cutting-mat" ? (
|
||||
<motion.img
|
||||
<img
|
||||
id="cutting-mat"
|
||||
key="cutting-mat-spec"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
// onHoverStart={() => setHovered("cutting-mat")}
|
||||
onHoverEnd={clearHover}
|
||||
src={cuttingMatSpec}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="cutting-mat"
|
||||
key="cutting-mat"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
onHoverStart={() => setHovered("cutting-mat")}
|
||||
// onHoverEnd={clearHover}
|
||||
initial="visible"
|
||||
whileHover="hidden"
|
||||
src={cuttingMat}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{hovered === "receipt" ? (
|
||||
<img id="receipt" className="inspectable" src={receiptSpec} alt="" />
|
||||
<motion.img
|
||||
id="receipt"
|
||||
key="receipt-spec"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
// onHoverStart={() => setHovered("receipt")}
|
||||
onHoverEnd={clearHover}
|
||||
src={receiptSpec}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="receipt"
|
||||
key="receipt"
|
||||
className="inspectable"
|
||||
initial="visible"
|
||||
variants={illustrationVariants}
|
||||
onHoverStart={() => setHovered("receipt")}
|
||||
// onHoverEnd={clearHover}
|
||||
whileHover="hidden"
|
||||
src={receipt}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{hovered === "calculator" ? (
|
||||
<motion.img
|
||||
<img
|
||||
id="calculator"
|
||||
key="calculator-spec"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
// onHoverStart={() => setHovered("calculator")}
|
||||
onHoverEnd={clearHover}
|
||||
src={calculatorSpec}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="calculator"
|
||||
key="calculator"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
onHoverStart={() => setHovered("calculator")}
|
||||
// onHoverEnd={clearHover}
|
||||
initial="hidden"
|
||||
whileHover="hidden"
|
||||
src={calculator}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{hovered === "tablet" ? (
|
||||
<motion.img
|
||||
id="tablet"
|
||||
key="tablet-spec"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
// onHoverStart={() => setHovered("tablet")}
|
||||
onHoverEnd={clearHover}
|
||||
src={tabletSpec}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="tablet"
|
||||
key="tablet"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={illustrationVariants}
|
||||
onHoverStart={() => setHovered("tablet")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={tablet}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{hovered === "billiard-ball" ? (
|
||||
<motion.img
|
||||
id="billiard-ball"
|
||||
key="billiard-ball-spec"
|
||||
className="inspectable"
|
||||
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>
|
||||
<img id="tablet" className="inspectable" src={tabletSpec} alt="" />
|
||||
<motion.img
|
||||
id="tablet"
|
||||
className="inspectable"
|
||||
variants={illustrationVariants}
|
||||
initial="hidden"
|
||||
whileHover="hidden"
|
||||
src={tablet}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
id="billiard-ball"
|
||||
className="inspectable"
|
||||
src={billiardBallSpec}
|
||||
alt=""
|
||||
/>
|
||||
<motion.img
|
||||
id="billiard-ball"
|
||||
className="inspectable"
|
||||
variants={illustrationVariants}
|
||||
initial="hidden"
|
||||
whileHover="hidden"
|
||||
src={billiardBall}
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<img id="warning" className="inspectable" src={warningSpec} alt="" />
|
||||
<motion.img
|
||||
id="warning"
|
||||
className="inspectable"
|
||||
variants={illustrationVariants}
|
||||
initial="hidden"
|
||||
whileHover="hidden"
|
||||
src={warning}
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user