Header+Footer: further implement new spec
This commit is contained in:
rektdeckard
@@ -59,6 +59,7 @@ button.main-button {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
margin: 0 24px 24px 0;
|
||||
}
|
||||
|
||||
button.main-button:active {
|
||||
@@ -71,10 +72,20 @@ button.main-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* button.main-button:not(:last-child) {
|
||||
margin: 0 24px 24px 0;
|
||||
} */
|
||||
|
||||
button.main-button svg {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* gap: 24px; */
|
||||
}
|
||||
|
||||
a.main-link {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
@@ -94,3 +105,44 @@ a.main-link:after {
|
||||
a.main-link:hover:after {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
column-gap: 72px;
|
||||
margin: 32px 0 64px;
|
||||
max-height: 144px;
|
||||
}
|
||||
|
||||
.links > div {
|
||||
margin: 0 0 24px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links svg {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a.nav-link:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
border-bottom: 1px solid black;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
a.nav-link:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
footer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #925bff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#back-to-top-button {
|
||||
@@ -18,189 +9,146 @@ footer {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.outro-content {
|
||||
/* pointer-events: none; */
|
||||
z-index: 2;
|
||||
#back-to-top-button img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 759px) {
|
||||
.outro h2 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
margin-bottom: 32px;
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1240px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.outro {
|
||||
position: relative;
|
||||
max-width: 666px;
|
||||
margin: 0 8% 0;
|
||||
padding-top: 72px;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
.outro p {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
footer .links {
|
||||
margin: 56px 0 48px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
position: relative;
|
||||
margin: 72px 0 0;
|
||||
padding-bottom: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fine-print p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.illustrations-footer {
|
||||
display: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 719px) {
|
||||
#back-to-top-button {
|
||||
position: sticky;
|
||||
top: calc(100% - 64px);
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
margin: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 80px 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
#back-to-top-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
footer .links {
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
|
||||
#command {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(324px, 610px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-140px, 570px);
|
||||
|
||||
.illustrations-footer {
|
||||
max-width: 100%;
|
||||
height: 440px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) and (max-width: 1023px) {
|
||||
.outro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 80px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(544px, 500px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(80px, 480px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
@media screen and (min-width: 720px) {
|
||||
.outro {
|
||||
position: relative;
|
||||
margin: 292px 10% 292px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
.fine-print {
|
||||
margin-top: 96px;
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
|
||||
#back-to-top-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-48px, -196px);
|
||||
left: 70px;
|
||||
top: -56px;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
left: 678px;
|
||||
top: -218px;
|
||||
}
|
||||
|
||||
#command {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(640px, -228px);
|
||||
right: -16px;
|
||||
top: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
||||
footer {
|
||||
height: 920px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1239px) {
|
||||
.outro {
|
||||
position: relative;
|
||||
width: 666px;
|
||||
margin: 160px auto 324px;
|
||||
margin-left: 462px;
|
||||
}
|
||||
|
||||
.outro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 96px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
#back-to-top-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-212px, 0);
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(384px, 512px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-80px, 476px);
|
||||
left: 190px;
|
||||
top: 276px;
|
||||
}
|
||||
|
||||
#command {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(706px, 360px);
|
||||
left: 732px;
|
||||
top: 512px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.outro {
|
||||
width: 660px;
|
||||
position: relative;
|
||||
margin: 160px 0 120px 468px;
|
||||
}
|
||||
|
||||
.outro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 96px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
.illustrations-footer {
|
||||
display: initial;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-320px, -12px);
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* x and y-translate is wrong in spec? */
|
||||
transform: translate(-208px, 270px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* y-translate is wrong in spec? */
|
||||
transform: translate(-684px, 236px);
|
||||
}
|
||||
|
||||
#command {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* y-translate is wrong in spec? */
|
||||
transform: translate(744px, 352px);
|
||||
left: -240px;
|
||||
top: 656px;
|
||||
height: 584px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,62 +1,116 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Heart } from "phosphor-react";
|
||||
import React from "react";
|
||||
import { ArrowElbowDownRight, Coffee, Heart } 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 postIt from "../../assets/footer-mobile.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 [phoneHovered, setPhoneHovered] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<footer>
|
||||
<div className="container">
|
||||
<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 className="outro">
|
||||
{phoneHovered && (
|
||||
<motion.img
|
||||
id="phone"
|
||||
className="inspectable"
|
||||
variants={variants}
|
||||
initial="hidden"
|
||||
animate={phoneHovered ? "visible" : "hidden"}
|
||||
src={phoneSpec}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
<motion.img
|
||||
id="phone"
|
||||
className="inspectable"
|
||||
variants={variants}
|
||||
initial="visible"
|
||||
whileHover="hidden"
|
||||
onHoverStart={() => setPhoneHovered(true)}
|
||||
onHoverEnd={() => setPhoneHovered(false)}
|
||||
src={phone}
|
||||
<img id="command" src={commandKeySpec} alt="" />
|
||||
<img
|
||||
id="command"
|
||||
className="inspectable xray"
|
||||
src={commandKey}
|
||||
alt=""
|
||||
/>
|
||||
<div className="outro-content">
|
||||
<h2>
|
||||
Phosphor is free and open source, licensed under{" "}
|
||||
<div className="links">
|
||||
<div>
|
||||
<ArrowElbowDownRight size={24} />
|
||||
<a
|
||||
className="main-link"
|
||||
href="https://www.gnu.org/licenses/gpl-3.0.en.html"
|
||||
className="nav-link"
|
||||
href="https://phosphoricons.com/assets/phosphor-icons.zip"
|
||||
download
|
||||
>
|
||||
GNU GPL-3.0
|
||||
Download all
|
||||
</a>
|
||||
. If you enjoy these icons, please support us with a donation.
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<ArrowElbowDownRight size={24} />
|
||||
<a className="nav-link" href="#">
|
||||
Figma library
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<ArrowElbowDownRight size={24} />
|
||||
<a className="nav-link" href="#">
|
||||
Figma plugin
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<ArrowElbowDownRight size={24} />
|
||||
<a
|
||||
className="nav-link"
|
||||
href="https://github.com/phosphor-icons/phosphor-web/issues"
|
||||
>
|
||||
Request an icon
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<ArrowElbowDownRight size={24} />
|
||||
<span>
|
||||
<a className="nav-link" href="https://paypal.me/minoraxis">
|
||||
Donate on PayPal
|
||||
</a>
|
||||
{" / "}
|
||||
<a className="nav-link" href="#">
|
||||
Patreon
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ArrowElbowDownRight size={24} />
|
||||
<a
|
||||
className="nav-link"
|
||||
href="https://github.com/phosphor-icons/phosphor-web"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
We designed the icon library we always wanted to use. Easy to pick
|
||||
up and plug in. Truly consistent in style and scale. Flexible to
|
||||
multiple sizes and weights. Reserved enough to be multi-purpose, but
|
||||
a little quirky, too.
|
||||
</p>
|
||||
<p>
|
||||
We're thankful for the open-source tools we've benefited from and
|
||||
this is our small contribution towards a collaborative digital
|
||||
community.
|
||||
</p>
|
||||
<p>
|
||||
Phosphor is licensed under{" "}
|
||||
<a
|
||||
className="main-link"
|
||||
href="https://www.gnu.org/licenses/gpl-3.0.en.html"
|
||||
>
|
||||
GNU GPL-3.0
|
||||
</a>
|
||||
, free to use without attribution. If you enjoy these icons, please
|
||||
support us with a donation.
|
||||
</p>
|
||||
<div className="button-container">
|
||||
<button
|
||||
className="main-button"
|
||||
onClick={() =>
|
||||
@@ -67,70 +121,55 @@ const Footer: React.FC<FooterProps> = () => {
|
||||
)
|
||||
}
|
||||
>
|
||||
<Heart size={24} weight="fill" />
|
||||
<Coffee size={24} weight="fill" />
|
||||
Buy us a coffee
|
||||
</button>
|
||||
<p className="fine-print">
|
||||
Copyright © 2020 Phosphor Icons
|
||||
<br />
|
||||
Designed by{" "}
|
||||
<button
|
||||
className="main-button"
|
||||
onClick={() => window.open("#", "_blank", "noopener noreferrer")}
|
||||
>
|
||||
<Heart size={24} weight="fill" />
|
||||
Become a patron
|
||||
</button>
|
||||
</div>
|
||||
<div className="fine-print">
|
||||
<p>
|
||||
Copyright © 2020 Phosphor Icons. Phosphor Icons is designed by{" "}
|
||||
<a className="main-link" href="https://helenazhang.com">
|
||||
Helena Zhang
|
||||
</a>{" "}
|
||||
+ built by{" "}
|
||||
and built by{" "}
|
||||
<a className="main-link" href="https://tobiasfried.com">
|
||||
Tobias Fried
|
||||
Toby Fried
|
||||
</a>{" "}
|
||||
<span
|
||||
role="img"
|
||||
aria-label="Emoji of woman technologist, man technologist, and cat"
|
||||
>
|
||||
👩🏻💻👨💻🐈
|
||||
🙇🏻♀️👨💻🐈
|
||||
</span>
|
||||
<br />
|
||||
Contact us at{" "}
|
||||
. Contact us at{" "}
|
||||
<a className="main-link" href="mailto:hello@phosphoricons.com">
|
||||
hello@phosphoricons.com
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
See also:{" "}
|
||||
. Check out our sister project:{" "}
|
||||
<a
|
||||
className="main-link"
|
||||
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
|
||||
>
|
||||
Phosphor for Android
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Type set in{" "}
|
||||
. Type set in{" "}
|
||||
<a className="main-link" href="https://manropefont.com/">
|
||||
Manrope
|
||||
</a>
|
||||
</a>{" "}
|
||||
by Mikhail Sharanda.
|
||||
</p>
|
||||
<img id="marker-green" src={markerGreen} alt="" />
|
||||
</div>
|
||||
<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="command" src={commandKeySpec} alt="" />
|
||||
<img
|
||||
id="command"
|
||||
className="inspectable xray"
|
||||
src={commandKey}
|
||||
alt=""
|
||||
/>
|
||||
<img id="marker-green" src={markerGreen} alt="" />
|
||||
</div>
|
||||
<div className="illustrations-footer">
|
||||
<img id="post-it" src={postIt} width="878" height="667" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -45,53 +45,6 @@ header {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
column-gap: 72px;
|
||||
margin: 56px 0 64px;
|
||||
max-height: 144px;
|
||||
}
|
||||
|
||||
.links > div {
|
||||
margin: 0 0 24px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links svg {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a.nav-link:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
border-bottom: 1px solid black;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
a.nav-link:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#paperclips-three {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.grid-container {
|
||||
padding: 0px 16px 4px;
|
||||
padding: 32px 16px;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
@@ -171,5 +171,5 @@
|
||||
|
||||
.beacon {
|
||||
position: relative;
|
||||
top: -64px;
|
||||
top: -96px;
|
||||
}
|
||||
|
||||
@@ -2629,7 +2629,7 @@ export const icons: ReadonlyArray<IconEntry> = [
|
||||
Icon: Icon.GlobeHemisphereEast,
|
||||
},
|
||||
{
|
||||
name: "globe-hemispehere-west",
|
||||
name: "globe-hemisphere-west",
|
||||
categories: [IconCategory.MAP],
|
||||
tags: [
|
||||
"world",
|
||||
@@ -4077,7 +4077,16 @@ export const icons: ReadonlyArray<IconEntry> = [
|
||||
IconCategory.DEVELOPMENT,
|
||||
IconCategory.OTHER,
|
||||
],
|
||||
tags: ["packages", "bundles", "library", "libraries", "shipping"],
|
||||
tags: [
|
||||
"packages",
|
||||
"delivery",
|
||||
"mail",
|
||||
"postal service",
|
||||
"bundles",
|
||||
"library",
|
||||
"libraries",
|
||||
"shipping",
|
||||
],
|
||||
Icon: Icon.Package,
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user