Header+Footer: add empty img alt-text to satisfy Lighthouse
This commit is contained in:
rektdeckard
@@ -71,6 +71,7 @@ const Footer: React.FC<FooterProps> = () => {
|
|||||||
<div id="back-to-top">
|
<div id="back-to-top">
|
||||||
<button
|
<button
|
||||||
id="back-to-top-button"
|
id="back-to-top-button"
|
||||||
|
aria-label="back-to-top button"
|
||||||
className="main-button"
|
className="main-button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
document
|
document
|
||||||
@@ -81,7 +82,6 @@ const Footer: React.FC<FooterProps> = () => {
|
|||||||
<img src={uArrowUpLeft} alt="" />
|
<img src={uArrowUpLeft} alt="" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<img id="marker-green" src={markerGreen} alt="" />
|
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{hovered === "phone" ? (
|
{hovered === "phone" ? (
|
||||||
<motion.img
|
<motion.img
|
||||||
@@ -95,6 +95,7 @@ const Footer: React.FC<FooterProps> = () => {
|
|||||||
// onHoverStart={() => setHovered("phone")}
|
// onHoverStart={() => setHovered("phone")}
|
||||||
onHoverEnd={clearHover}
|
onHoverEnd={clearHover}
|
||||||
src={phoneSpec}
|
src={phoneSpec}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<motion.img
|
<motion.img
|
||||||
@@ -108,6 +109,7 @@ const Footer: React.FC<FooterProps> = () => {
|
|||||||
onHoverStart={() => setHovered("phone")}
|
onHoverStart={() => setHovered("phone")}
|
||||||
// onHoverEnd={clearHover}
|
// onHoverEnd={clearHover}
|
||||||
src={phone}
|
src={phone}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{hovered === "command" ? (
|
{hovered === "command" ? (
|
||||||
@@ -122,6 +124,7 @@ const Footer: React.FC<FooterProps> = () => {
|
|||||||
// onHoverStart={() => setHovered("command")}
|
// onHoverStart={() => setHovered("command")}
|
||||||
onHoverEnd={clearHover}
|
onHoverEnd={clearHover}
|
||||||
src={commandKeySpec}
|
src={commandKeySpec}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<motion.img
|
<motion.img
|
||||||
@@ -135,9 +138,11 @@ const Footer: React.FC<FooterProps> = () => {
|
|||||||
onHoverStart={() => setHovered("command")}
|
onHoverStart={() => setHovered("command")}
|
||||||
// onHoverEnd={clearHover}
|
// onHoverEnd={clearHover}
|
||||||
src={commandKey}
|
src={commandKey}
|
||||||
|
alt=""
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
<img id="marker-green" src={markerGreen} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { ArrowUpRightCircle } from "phosphor-react";
|
||||||
|
|
||||||
import markerPurple from "../../assets/marker-purple.svg";
|
import markerPurple from "../../assets/marker-purple.svg";
|
||||||
import paperclips from "../../assets/paperclips.svg";
|
import paperclips from "../../assets/paperclips.svg";
|
||||||
@@ -16,7 +17,6 @@ import receiptSpec from "../../assets/receipt-spec.svg";
|
|||||||
import calculator from "../../assets/calculator.svg";
|
import calculator from "../../assets/calculator.svg";
|
||||||
import calculatorSpec from "../../assets/calculator-spec.svg";
|
import calculatorSpec from "../../assets/calculator-spec.svg";
|
||||||
import "./Header.css";
|
import "./Header.css";
|
||||||
import { ArrowUpRightCircle } from "phosphor-react";
|
|
||||||
|
|
||||||
type HeaderProps = {};
|
type HeaderProps = {};
|
||||||
|
|
||||||
@@ -38,7 +38,6 @@ const handleScrollToIcons = () => {
|
|||||||
const Header: React.FC<HeaderProps> = () => {
|
const Header: React.FC<HeaderProps> = () => {
|
||||||
const [hovered, setHovered] = useState<string | false>(false);
|
const [hovered, setHovered] = useState<string | false>(false);
|
||||||
const clearHover = () => setHovered(false);
|
const clearHover = () => setHovered(false);
|
||||||
// const handleScrollToIcons = () => {};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header>
|
<header>
|
||||||
@@ -49,195 +48,41 @@ const Header: React.FC<HeaderProps> = () => {
|
|||||||
// animate="visible"
|
// animate="visible"
|
||||||
transition={{ duration: 2 }}
|
transition={{ duration: 2 }}
|
||||||
>
|
>
|
||||||
<img src={markerPurple} id="marker-purple" />
|
<img src={markerPurple} id="marker-purple" alt="" />
|
||||||
<img src={paperclips} id="paperclips" />
|
<img src={paperclips} id="paperclips" alt="" />
|
||||||
<AnimatePresence>
|
|
||||||
{hovered === "tablet" ? (
|
|
||||||
<motion.img
|
|
||||||
id="tablet"
|
|
||||||
key="tablet-spec"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
// onHoverStart={() => setHovered("tablet")}
|
|
||||||
onHoverEnd={clearHover}
|
|
||||||
src={tabletSpec}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<motion.img
|
|
||||||
id="tablet"
|
|
||||||
key="tablet"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
onHoverStart={() => setHovered("tablet")}
|
|
||||||
// onHoverEnd={clearHover}
|
|
||||||
src={tablet}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{hovered === "billiard-ball" ? (
|
|
||||||
<motion.img
|
|
||||||
id="billiard-ball"
|
|
||||||
key="billiard-ball-spec"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
// onHoverStart={() => setHovered("billiard-ball")}
|
|
||||||
onHoverEnd={clearHover}
|
|
||||||
src={billiardBallSpec}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<motion.img
|
|
||||||
id="billiard-ball"
|
|
||||||
key="billiard-ball"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
onHoverStart={() => setHovered("billiard-ball")}
|
|
||||||
// onHoverEnd={clearHover}
|
|
||||||
src={billiardBall}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{hovered === "warning" ? (
|
|
||||||
<motion.img
|
|
||||||
id="warning"
|
|
||||||
key="warning-spec"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
// onHoverStart={() => setHovered("warning")}
|
|
||||||
onHoverEnd={clearHover}
|
|
||||||
src={warningSpec}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<motion.img
|
|
||||||
id="warning"
|
|
||||||
key="warning"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
onHoverStart={() => setHovered("warning")}
|
|
||||||
// onHoverEnd={clearHover}
|
|
||||||
src={warning}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{hovered === "cutting-mat" ? (
|
|
||||||
<motion.img
|
|
||||||
id="cutting-mat"
|
|
||||||
key="cutting-mat-spec"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
// onHoverStart={() => setHovered("cutting-mat")}
|
|
||||||
onHoverEnd={clearHover}
|
|
||||||
src={cuttingMatSpec}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<motion.img
|
|
||||||
id="cutting-mat"
|
|
||||||
key="cutting-mat"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
onHoverStart={() => setHovered("cutting-mat")}
|
|
||||||
// onHoverEnd={clearHover}
|
|
||||||
src={cuttingMat}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{hovered === "receipt" ? (
|
|
||||||
<motion.img
|
|
||||||
id="receipt"
|
|
||||||
key="receipt-spec"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
// onHoverStart={() => setHovered("receipt")}
|
|
||||||
onHoverEnd={clearHover}
|
|
||||||
src={receiptSpec}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<motion.img
|
|
||||||
id="receipt"
|
|
||||||
key="receipt"
|
|
||||||
className="inspectable"
|
|
||||||
initial="visible"
|
|
||||||
variants={variants}
|
|
||||||
onHoverStart={() => setHovered("receipt")}
|
|
||||||
// onHoverEnd={clearHover}
|
|
||||||
src={receipt}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{hovered === "calculator" ? (
|
|
||||||
<motion.img
|
|
||||||
id="calculator"
|
|
||||||
key="calculator-spec"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
// onHoverStart={() => setHovered("calculator")}
|
|
||||||
onHoverEnd={clearHover}
|
|
||||||
src={calculatorSpec}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<motion.img
|
|
||||||
id="calculator"
|
|
||||||
key="calculator"
|
|
||||||
className="inspectable"
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
exit="hidden"
|
|
||||||
variants={variants}
|
|
||||||
onHoverStart={() => setHovered("calculator")}
|
|
||||||
// onHoverEnd={clearHover}
|
|
||||||
src={calculator}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
<div className="intro">
|
<div className="intro">
|
||||||
<h2>
|
<h2>
|
||||||
Phosphor Icons is a flexible icon family for interfaces, diagrams,
|
Phosphor Icons is a flexible icon family for interfaces, diagrams,
|
||||||
presentations – whatever really.
|
presentations — whatever really.
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{ display: "flex" }}>
|
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||||
<button className="main-button" onClick={handleGetStarted}>
|
<button className="main-button" onClick={handleGetStarted}>
|
||||||
Get started{" "}
|
<ArrowUpRightCircle
|
||||||
<ArrowUpRightCircle size={24} weight="fill" style={{ marginLeft: 12 }} />
|
size={24}
|
||||||
|
weight="fill"
|
||||||
|
style={{ marginRight: 12 }}
|
||||||
|
/>
|
||||||
|
Go to docs
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button className="main-button" onClick={handleScrollToIcons}>
|
<button className="main-button" onClick={handleScrollToIcons}>
|
||||||
{/* <ArrowUpRightCircle size={24} style={{ marginRight: 12 }} />{" "} */}
|
<ArrowUpRightCircle
|
||||||
|
size={24}
|
||||||
|
weight="fill"
|
||||||
|
style={{ marginRight: 12 }}
|
||||||
|
/>
|
||||||
Explore icons
|
Explore icons
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="links">
|
<div className="links">
|
||||||
<a
|
{/* <a
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
href="https://github.com/rektdeckard/phosphor-web#phosphor-icons"
|
href="https://github.com/rektdeckard/phosphor-web#phosphor-icons"
|
||||||
>
|
>
|
||||||
Docs
|
Docs
|
||||||
</a>
|
</a> */}
|
||||||
<a className="nav-link" href="#">
|
<a className="nav-link" href="#">
|
||||||
Download
|
Download all
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
@@ -256,6 +101,180 @@ const Header: React.FC<HeaderProps> = () => {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<AnimatePresence>
|
||||||
|
{hovered === "tablet" ? (
|
||||||
|
<motion.img
|
||||||
|
id="tablet"
|
||||||
|
key="tablet-spec"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
// onHoverStart={() => setHovered("tablet")}
|
||||||
|
onHoverEnd={clearHover}
|
||||||
|
src={tabletSpec}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<motion.img
|
||||||
|
id="tablet"
|
||||||
|
key="tablet"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
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={variants}
|
||||||
|
// 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={variants}
|
||||||
|
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={variants}
|
||||||
|
// onHoverStart={() => setHovered("warning")}
|
||||||
|
onHoverEnd={clearHover}
|
||||||
|
src={warningSpec}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<motion.img
|
||||||
|
id="warning"
|
||||||
|
key="warning"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
onHoverStart={() => setHovered("warning")}
|
||||||
|
// onHoverEnd={clearHover}
|
||||||
|
src={warning}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{hovered === "cutting-mat" ? (
|
||||||
|
<motion.img
|
||||||
|
id="cutting-mat"
|
||||||
|
key="cutting-mat-spec"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
// 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={variants}
|
||||||
|
onHoverStart={() => setHovered("cutting-mat")}
|
||||||
|
// onHoverEnd={clearHover}
|
||||||
|
src={cuttingMat}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{hovered === "receipt" ? (
|
||||||
|
<motion.img
|
||||||
|
id="receipt"
|
||||||
|
key="receipt-spec"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
// onHoverStart={() => setHovered("receipt")}
|
||||||
|
onHoverEnd={clearHover}
|
||||||
|
src={receiptSpec}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<motion.img
|
||||||
|
id="receipt"
|
||||||
|
key="receipt"
|
||||||
|
className="inspectable"
|
||||||
|
initial="visible"
|
||||||
|
variants={variants}
|
||||||
|
onHoverStart={() => setHovered("receipt")}
|
||||||
|
// onHoverEnd={clearHover}
|
||||||
|
src={receipt}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{hovered === "calculator" ? (
|
||||||
|
<motion.img
|
||||||
|
id="calculator"
|
||||||
|
key="calculator-spec"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
// onHoverStart={() => setHovered("calculator")}
|
||||||
|
onHoverEnd={clearHover}
|
||||||
|
src={calculatorSpec}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<motion.img
|
||||||
|
id="calculator"
|
||||||
|
key="calculator"
|
||||||
|
className="inspectable"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={variants}
|
||||||
|
onHoverStart={() => setHovered("calculator")}
|
||||||
|
// onHoverEnd={clearHover}
|
||||||
|
src={calculator}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user