From 5f2681048d088fe0ec54ca620a0d45f640288ec9 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 15 Aug 2020 20:02:11 -0400 Subject: [PATCH] Header+Footer: style updates and addition of links --- src/components/Footer/Footer.tsx | 15 ++++++-- src/components/Header/Header.css | 5 +++ src/components/Header/Header.tsx | 63 +++++++++++++------------------- 3 files changed, 43 insertions(+), 40 deletions(-) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index a76de6f..96e6ad4 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -28,8 +28,17 @@ const Footer: React.FC = () => { Phosphor is free and open source software. If you enjoy these icons, please support us with a donation. -

@@ -47,7 +56,7 @@ const Footer: React.FC = () => { role="img" aria-label="Emoji of woman technologist, man technologist, and cat" > - 👩🏻‍💻👨‍💻🐱 + 👩🏻‍💻👨‍💻🐈
This website is set in{" "} diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 280d515..80ec996 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -49,6 +49,11 @@ a.nav-link:hover:after { margin: auto; } +.button-container { + display: flex; + flex-wrap: wrap; +} + @media screen and (max-width: 759px) { .intro h2 { font-size: 40px; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index efff3d3..af17af5 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowUpRightCircle } from "phosphor-react"; +import "./Header.css"; import markerPurple from "../../assets/marker-purple.svg"; import paperclips from "../../assets/paperclips.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 calculator from "../../assets/calculator.svg"; import calculatorSpec from "../../assets/calculator-spec.svg"; -import "./Header.css"; type HeaderProps = {}; -const variants = { +const illustrationVariants = { hidden: { opacity: 0, transition: { duration: 0.2 } }, visible: { opacity: 1, transition: { duration: 0.2 } }, }; 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 = () => { @@ -43,10 +47,9 @@ const Header: React.FC = () => {

@@ -55,32 +58,18 @@ const Header: React.FC = () => { Phosphor Icons is a flexible icon family for interfaces, diagrams, presentations — whatever really. -
+
- {/* - Docs - */} Download all @@ -90,7 +79,7 @@ const Header: React.FC = () => { > Request - + Donate = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} // onHoverStart={() => setHovered("tablet")} onHoverEnd={clearHover} src={tabletSpec} @@ -124,7 +113,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} onHoverStart={() => setHovered("tablet")} // onHoverEnd={clearHover} src={tablet} @@ -139,7 +128,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} // onHoverStart={() => setHovered("billiard-ball")} onHoverEnd={clearHover} src={billiardBallSpec} @@ -153,7 +142,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} onHoverStart={() => setHovered("billiard-ball")} // onHoverEnd={clearHover} src={billiardBall} @@ -168,7 +157,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} // onHoverStart={() => setHovered("warning")} onHoverEnd={clearHover} src={warningSpec} @@ -182,7 +171,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} onHoverStart={() => setHovered("warning")} // onHoverEnd={clearHover} src={warning} @@ -197,7 +186,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} // onHoverStart={() => setHovered("cutting-mat")} onHoverEnd={clearHover} src={cuttingMatSpec} @@ -211,7 +200,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} onHoverStart={() => setHovered("cutting-mat")} // onHoverEnd={clearHover} src={cuttingMat} @@ -226,7 +215,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} // onHoverStart={() => setHovered("receipt")} onHoverEnd={clearHover} src={receiptSpec} @@ -238,7 +227,7 @@ const Header: React.FC = () => { key="receipt" className="inspectable" initial="visible" - variants={variants} + variants={illustrationVariants} onHoverStart={() => setHovered("receipt")} // onHoverEnd={clearHover} src={receipt} @@ -253,7 +242,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} // onHoverStart={() => setHovered("calculator")} onHoverEnd={clearHover} src={calculatorSpec} @@ -267,7 +256,7 @@ const Header: React.FC = () => { initial="hidden" animate="visible" exit="hidden" - variants={variants} + variants={illustrationVariants} onHoverStart={() => setHovered("calculator")} // onHoverEnd={clearHover} src={calculator}