Header+Footer: further implement new spec

src/components/App/App.css

@@ -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%;
+}

src/components/Footer/Footer.css

@@ -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 {
+#back-to-top-button img {
-  /* pointer-events: none; */
+  pointer-events: none;
-  z-index: 2;
 }
 
-@media screen and (max-width: 759px) {
+.container {
-  .outro h2 {
+  position: relative;
-    font-size: 28px;
+  width: 100%;
-    line-height: 38px;
+  max-width: 1240px;
-    margin-bottom: 32px;
+  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 {
+  #back-to-top-button img {
-    margin: 80px 0 0;
+    width: 24px;
-    font-size: 16px;
+    height: 24px;
-    line-height: 24px;
+  }
+
+  footer .links {
+    margin: 0 0 64px;
+  }
+
+  #command {
+    display: none;
   }
 
   #marker-green {
-    position: absolute;
+    display: none;
-    top: 0;
-    left: 0;
-    transform: translate(324px, 610px);
   }
 
-  #phone {
+  .illustrations-footer {
-    position: absolute;
+    max-width: 100%;
-    top: 0;
+    height: 440px;
-    left: 0;
+    display: flex;
-    transform: translate(-140px, 570px);
+    justify-content: center;
+    overflow: hidden;
   }
 }
 
-@media screen and (min-width: 760px) and (max-width: 1023px) {
+@media screen and (min-width: 720px) {
-  .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) {
   .outro {
-    position: relative;
+    margin: 0 auto;
-    margin: 292px 10% 292px;
   }
 
-  #back-to-top {
+  .fine-print {
+    margin-top: 96px;
+    padding-bottom: 96px;
+  }
+
+  #back-to-top-button {
     position: absolute;
-    top: 0;
+    left: 70px;
-    left: 0;
+    top: -56px;
-    transform: translate(-48px, -196px);
+  }
+
+  #marker-green {
+    position: absolute;
+    left: 678px;
+    top: -218px;
   }
 
   #command {
     position: absolute;
-    top: 0;
+    right: -16px;
-    left: 0;
+    top: 144px;
-    transform: translate(640px, -228px);
   }
 }
 
-
+@media screen and (min-width: 1239px) {
-
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  footer {
-    height: 920px;
-  }
-
   .outro {
-    position: relative;
+    margin-left: 462px;
-    width: 666px;
-    margin: 160px auto 324px;
   }
 
-  .outro h2 {
+  #back-to-top-button {
-    font-size: 40px;
-    line-height: 50px;
-    margin-bottom: 32px;
-  }
-
-  .fine-print {
-    margin: 96px 0 0;
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  #back-to-top {
     position: absolute;
-    top: 0;
+    left: 190px;
-    left: 0;
+    top: 276px;
-    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);
   }
 
   #command {
     position: absolute;
-    top: 0;
+    left: 732px;
-    left: 0;
+    top: 512px;
-    transform: translate(706px, 360px);
+  }
-  }
+
-}
+  .illustrations-footer {
-
+    display: initial;
-@media screen and (min-width: 1280px) {
+   position: absolute;
-  .outro {
+   left: -240px;
-    width: 660px;
+   top: 656px;
-    position: relative;
+    height: 584px;
-    margin: 160px 0 120px 468px;
+    overflow: hidden;
-  }
-  
-  .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 {
-    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);
   }
 }

src/components/Footer/Footer.tsx

@@ -1,62 +1,116 @@
-import React, { useState } from "react";
+import React from "react";
-import { motion } from "framer-motion";
+import { ArrowElbowDownRight, Coffee, Heart } from "phosphor-react";
-import { 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 postIt from "../../assets/footer-mobile.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 [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 && (
+          <img id="command" src={commandKeySpec} alt="" />
-            <motion.img
+          <img
-              id="phone"
+            id="command"
-              className="inspectable"
+            className="inspectable xray"
-              variants={variants}
+            src={commandKey}
-              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}
             alt=""
           />
-          <div className="outro-content">
+          <div className="links">
-            <h2>
+            <div>
-              Phosphor is free and open source, licensed under{" "}
+              <ArrowElbowDownRight size={24} />
               <a
-                className="main-link"
+                className="nav-link"
-                href="https://www.gnu.org/licenses/gpl-3.0.en.html"
+                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.
+            </div>
-            </h2>
+            <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">
+            <button
-              Copyright © 2020 Phosphor Icons
+              className="main-button"
-              <br />
+              onClick={() => window.open("#", "_blank", "noopener noreferrer")}
-              Designed by{" "}
+            >
+              <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>
+              . Check out our sister project:{" "}
-            <p>
-              See also:{" "}
               <a
                 className="main-link"
                 href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
               >
                 Phosphor for Android
               </a>
-            </p>
+              . Type set in{" "}
-            <p>
-              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">
+        </div>
-            <button
+        <div className="illustrations-footer">
-              id="back-to-top-button"
+          <img id="post-it" src={postIt} width="878" height="667" alt="" />
-              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>
     </footer>

src/components/Header/Header.css

@@ -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;
 }

src/components/IconGrid/IconGrid.css

@@ -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;
 }

src/lib/icons.ts

@@ -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,
   },
   {