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

Header+Footer: style updates and addition of links

Browse Source
This commit is contained in:
rektdeckard
2020-08-15 20:02:11 -04:00
parent 036d76fcfa
commit 5f2681048d
3 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,8 +28,17 @@ const Footer: React.FC<FooterProps> = () => {
Phosphor is free and open source software. If you enjoy these icons, Phosphor is free and open source software. If you enjoy these icons,
please support us with a donation. please support us with a donation.
</h2> </h2>
<button className="main-button" onClick={(e) => e.currentTarget.blur()}> <button
<Heart size={24} weight="fill" style={{ marginRight: 12 }} /> className="main-button"
onClick={() =>
window.open(
"https://paypal.me/TobiasFried",
"_blank",
"noopener noreferrer"
)
}
>
<Heart size={24} weight="fill" />
Buy us a coffee Buy us a coffee
</button> </button>
<p className="fine-print"> <p className="fine-print">
@@ -47,7 +56,7 @@ const Footer: React.FC<FooterProps> = () => {
role="img" role="img"
aria-label="Emoji of woman technologist, man technologist, and cat" aria-label="Emoji of woman technologist, man technologist, and cat"
> >
👩🏻‍💻👨‍💻🐱 👩🏻‍💻👨‍💻🐈
</span> </span>
<br /> <br />
This website is set in{" "} This website is set in{" "}

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

@@ -49,6 +49,11 @@ a.nav-link:hover:after {
margin: auto; margin: auto;
} }
.button-container {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 759px) { @media screen and (max-width: 759px) {
.intro h2 { .intro h2 {
font-size: 40px; font-size: 40px;

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { ArrowUpRightCircle } from "phosphor-react"; import { ArrowUpRightCircle } from "phosphor-react";
import "./Header.css";
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";
import tablet from "../../assets/tablet.svg"; import tablet from "../../assets/tablet.svg";
@@ -16,17 +17,20 @@ import receipt from "../../assets/receipt.svg";
import receiptSpec from "../../assets/receipt-spec.svg"; 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";
type HeaderProps = {}; type HeaderProps = {};
const variants = { const illustrationVariants = {
hidden: { opacity: 0, transition: { duration: 0.2 } }, hidden: { opacity: 0, transition: { duration: 0.2 } },
visible: { opacity: 1, transition: { duration: 0.2 } }, visible: { opacity: 1, transition: { duration: 0.2 } },
}; };
const handleGetStarted = () => { const handleGetStarted = () => {
window.open("https://github.com/rektdeckard/phosphor-web#phosphor-icons"); window.open(
"https://github.com/rektdeckard/phosphor-web#phosphor-icons",
"_blank",
"noopener noreferrer"
);
}; };
const handleScrollToIcons = () => { const handleScrollToIcons = () => {
@@ -43,10 +47,9 @@ const Header: React.FC<HeaderProps> = () => {
<header> <header>
<motion.div <motion.div
className="image-container" className="image-container"
variants={variants} variants={illustrationVariants}
initial="visible" initial="hidden"
// animate="visible" animate="visible"
transition={{ duration: 2 }}
> >
<img src={markerPurple} id="marker-purple" alt="" /> <img src={markerPurple} id="marker-purple" alt="" />
<img src={paperclips} id="paperclips" alt="" /> <img src={paperclips} id="paperclips" alt="" />
@@ -55,32 +58,18 @@ const Header: React.FC<HeaderProps> = () => {
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", flexWrap: "wrap" }}> <div className="button-container">
<button className="main-button" onClick={handleGetStarted}> <button className="main-button" onClick={handleGetStarted}>
<ArrowUpRightCircle <ArrowUpRightCircle size={24} weight="fill" />
size={24}
weight="fill"
style={{ marginRight: 12 }}
/>
Go to docs Go to docs
</button> </button>
<button className="main-button" onClick={handleScrollToIcons}> <button className="main-button" onClick={handleScrollToIcons}>
<ArrowUpRightCircle <ArrowUpRightCircle size={24} weight="fill" />
size={24}
weight="fill"
style={{ marginRight: 12 }}
/>
Explore icons Explore icons
</button> </button>
</div> </div>
<div className="links"> <div className="links">
{/* <a
className="nav-link"
href="https://github.com/rektdeckard/phosphor-web#phosphor-icons"
>
Docs
</a> */}
<a className="nav-link" href="#"> <a className="nav-link" href="#">
Download all Download all
</a> </a>
@@ -90,7 +79,7 @@ const Header: React.FC<HeaderProps> = () => {
> >
Request Request
</a> </a>
<a className="nav-link" href="#"> <a className="nav-link" href="https://paypal.me/TobiasFried">
Donate Donate
</a> </a>
<a <a
@@ -110,7 +99,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
// onHoverStart={() => setHovered("tablet")} // onHoverStart={() => setHovered("tablet")}
onHoverEnd={clearHover} onHoverEnd={clearHover}
src={tabletSpec} src={tabletSpec}
@@ -124,7 +113,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
onHoverStart={() => setHovered("tablet")} onHoverStart={() => setHovered("tablet")}
// onHoverEnd={clearHover} // onHoverEnd={clearHover}
src={tablet} src={tablet}
@@ -139,7 +128,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
// onHoverStart={() => setHovered("billiard-ball")} // onHoverStart={() => setHovered("billiard-ball")}
onHoverEnd={clearHover} onHoverEnd={clearHover}
src={billiardBallSpec} src={billiardBallSpec}
@@ -153,7 +142,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
onHoverStart={() => setHovered("billiard-ball")} onHoverStart={() => setHovered("billiard-ball")}
// onHoverEnd={clearHover} // onHoverEnd={clearHover}
src={billiardBall} src={billiardBall}
@@ -168,7 +157,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
// onHoverStart={() => setHovered("warning")} // onHoverStart={() => setHovered("warning")}
onHoverEnd={clearHover} onHoverEnd={clearHover}
src={warningSpec} src={warningSpec}
@@ -182,7 +171,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
onHoverStart={() => setHovered("warning")} onHoverStart={() => setHovered("warning")}
// onHoverEnd={clearHover} // onHoverEnd={clearHover}
src={warning} src={warning}
@@ -197,7 +186,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
// onHoverStart={() => setHovered("cutting-mat")} // onHoverStart={() => setHovered("cutting-mat")}
onHoverEnd={clearHover} onHoverEnd={clearHover}
src={cuttingMatSpec} src={cuttingMatSpec}
@@ -211,7 +200,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
onHoverStart={() => setHovered("cutting-mat")} onHoverStart={() => setHovered("cutting-mat")}
// onHoverEnd={clearHover} // onHoverEnd={clearHover}
src={cuttingMat} src={cuttingMat}
@@ -226,7 +215,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
// onHoverStart={() => setHovered("receipt")} // onHoverStart={() => setHovered("receipt")}
onHoverEnd={clearHover} onHoverEnd={clearHover}
src={receiptSpec} src={receiptSpec}
@@ -238,7 +227,7 @@ const Header: React.FC<HeaderProps> = () => {
key="receipt" key="receipt"
className="inspectable" className="inspectable"
initial="visible" initial="visible"
variants={variants} variants={illustrationVariants}
onHoverStart={() => setHovered("receipt")} onHoverStart={() => setHovered("receipt")}
// onHoverEnd={clearHover} // onHoverEnd={clearHover}
src={receipt} src={receipt}
@@ -253,7 +242,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
// onHoverStart={() => setHovered("calculator")} // onHoverStart={() => setHovered("calculator")}
onHoverEnd={clearHover} onHoverEnd={clearHover}
src={calculatorSpec} src={calculatorSpec}
@@ -267,7 +256,7 @@ const Header: React.FC<HeaderProps> = () => {
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="hidden" exit="hidden"
variants={variants} variants={illustrationVariants}
onHoverStart={() => setHovered("calculator")} onHoverStart={() => setHovered("calculator")}
// onHoverEnd={clearHover} // onHoverEnd={clearHover}
src={calculator} src={calculator}