Footer: extract contents from App and begin implementing redesign
This commit is contained in:
rektdeckard
@@ -1,7 +1,6 @@
|
||||
import React, { Suspense } from "react";
|
||||
|
||||
import { Info, Toolbar, IconGrid, Header } from "../";
|
||||
import { Heart, Droid } from "phosphor-react";
|
||||
import { Toolbar, IconGrid, Header, Footer } from "../";
|
||||
import "./App.css";
|
||||
|
||||
const App: React.FC<any> = () => {
|
||||
@@ -14,75 +13,7 @@ const App: React.FC<any> = () => {
|
||||
<IconGrid />
|
||||
</Suspense>
|
||||
</main>
|
||||
<Info id="footer">
|
||||
<div className="feature">
|
||||
<h3>
|
||||
A labor
|
||||
<br />
|
||||
of love
|
||||
</h3>
|
||||
<div className="feature-contents">
|
||||
<p>
|
||||
Phosphor is free and open source software. If you enjoy these
|
||||
icons, please consider supporting us with a donation.
|
||||
</p>
|
||||
<button
|
||||
className="main-button"
|
||||
onClick={(e) => e.currentTarget.blur()}
|
||||
>
|
||||
<Heart size={32} style={{ marginRight: 12 }} />
|
||||
Buy us a coffee
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature">
|
||||
<h3>
|
||||
<span
|
||||
role="img"
|
||||
aria-label="Emoji of woman technologist, man technologist, and cat"
|
||||
>
|
||||
👩🏻💻👨💻🐱
|
||||
</span>
|
||||
</h3>
|
||||
<div className="feature-contents">
|
||||
<p>
|
||||
Copyright © 2020 Phosphor Icons
|
||||
<br />
|
||||
Phosphor Icons is 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>
|
||||
.
|
||||
<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>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
See also: <Droid size={20} />{" "}
|
||||
<a
|
||||
className="main-link"
|
||||
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
|
||||
>
|
||||
Phosphor for Android
|
||||
</a>
|
||||
</p>
|
||||
<a className="main-link" href="#">
|
||||
Back to zee top
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Info>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,72 @@
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 696px;
|
||||
background-color: #925bff;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.outro-container {
|
||||
position: relative;
|
||||
width: 1366px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.outro-container img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.outro {
|
||||
width: 660px;
|
||||
position: absolute;
|
||||
top: 104px;
|
||||
left: 320px;
|
||||
}
|
||||
|
||||
.outro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 104px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(120px, 104px);
|
||||
}
|
||||
|
||||
#back-to-top-button {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(240px, 424px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-211px, 414px);
|
||||
}
|
||||
|
||||
#command {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(1213px, 464px);
|
||||
}
|
||||
@@ -1,21 +1,149 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Heart } from "phosphor-react";
|
||||
|
||||
import { Droid } from "phosphor-react";
|
||||
import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
|
||||
import markerGreen from "../../assets/marker-green.svg";
|
||||
import phone from "../../assets/phone.svg";
|
||||
import phoneSpec from "../../assets/phone-spec.svg";
|
||||
import commandKey from "../../assets/command-key.svg";
|
||||
import commandKeySpec from "../../assets/command-key-spec.svg";
|
||||
import "./Footer.css";
|
||||
|
||||
type FooterProps = {};
|
||||
|
||||
const variants = {
|
||||
hidden: { opacity: 0, transition: { duration: 0.2 } },
|
||||
visible: { opacity: 1, transition: { duration: 0.2 } },
|
||||
};
|
||||
|
||||
const Footer: React.FC<FooterProps> = () => {
|
||||
const [hovered, setHovered] = useState<string | false>(false);
|
||||
const clearHover = () => setHovered(false);
|
||||
|
||||
return (
|
||||
<footer>
|
||||
<span role="img" aria-label="Emoji of female technologist, male technologist, and cat">👩🏻💻👨🏻💻🐱</span>
|
||||
<div>Copyright © 2020 Phosphor Icons</div>
|
||||
<div>
|
||||
Phosphor Icons is designed by{" "}
|
||||
<a href="https://helenazhang.com">Helena Zhang</a> & built by{" "}
|
||||
<a href="https://tobiasfried.com">Tobias Fried</a>, with love.
|
||||
<div className="outro-container">
|
||||
<div className="outro">
|
||||
<h2>
|
||||
Phosphor is free and open source software. If you enjoy these icons,
|
||||
please consider supporting us with a donation.
|
||||
</h2>
|
||||
<button
|
||||
className="main-button"
|
||||
onClick={(e) => e.currentTarget.blur()}
|
||||
>
|
||||
<Heart size={24} weight="fill" style={{ marginRight: 12 }} />
|
||||
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>
|
||||
<div id="back-to-top">
|
||||
<button
|
||||
id="back-to-top-button"
|
||||
className="main-button"
|
||||
onClick={() => {
|
||||
document
|
||||
.getElementById("root")
|
||||
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}}
|
||||
>
|
||||
<img src={uArrowUpLeft} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<img id="marker-green" src={markerGreen} alt="" />
|
||||
<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}
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="phone"
|
||||
key="phone"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={variants}
|
||||
onHoverStart={() => setHovered("phone")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={phone}
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="command"
|
||||
key="command"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={variants}
|
||||
onHoverStart={() => setHovered("command")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={commandKey}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<button style={{ display: "flex", alignItems: "center", padding: 8 }}>Phosphor for <Droid /></button>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user