diff --git a/src/components/App/App.css b/src/components/App/App.css index ee9fbec..ca2ab6d 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -113,45 +113,3 @@ 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; */ - /* -webkit-column-gap: 72px; */ - margin: 32px 0 64px; - max-height: 144px; -} - -.links > div { - margin: 0 72px 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%; -} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 05a466c..86d5998 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,12 +1,10 @@ import React from "react"; -import { ArrowElbowDownRight, Coffee, Heart } from "phosphor-react"; -import { OutboundLink } from "react-ga"; +import { Coffee, Heart } from "phosphor-react"; import uArrowUpLeft from "../../assets/u-arrow-up-left.svg"; import markerGreen from "../../assets/marker-green.svg"; import postIt from "../../assets/footer-mobile.svg"; -// import commandKey from "../../assets/command-key.svg"; -// import commandKeySpec from "../../assets/command-key-spec.svg"; +import Links from "../Links/Links"; import "./Footer.css"; type FooterProps = {}; @@ -35,73 +33,7 @@ const Footer: React.FC = () => { src={commandKey} alt="" /> */} -
-
- - - Download all - -
-
- - - Figma library - -
-
- - - Figma plugin - -
-
- - - Request an icon - -
-
- - - - Donate on PayPal - - {" / "} - - Patreon - - -
-
- - - Github - -
-
+

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 diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index feb17c3..1adb7a4 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,12 +1,6 @@ import React from "react"; -import { - ArrowCircleUpRight, - ArrowCircleDown, - ArrowElbowDownRight, -} from "phosphor-react"; -import { OutboundLink } from "react-ga"; +import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react"; -import "./Header.css"; import markerPurple from "../../assets/marker-purple.svg"; import paperclips from "../../assets/paperclips-header-mobile.svg"; import paperclipsThree from "../../assets/paperclips-header.svg"; @@ -22,6 +16,8 @@ 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 Links from "../Links/Links"; +import "./Header.css"; type HeaderProps = {}; @@ -74,73 +70,7 @@ const Header: React.FC = () => { Explore icons -

-
- - - Download all - -
-
- - - Figma library - -
-
- - - Figma plugin - -
-
- - - Request an icon - -
-
- - - - Donate on PayPal - - {" / "} - - Patreon - - -
-
- - - Github - -
-
+
diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css new file mode 100644 index 0000000..fd241ef --- /dev/null +++ b/src/components/Links/Links.css @@ -0,0 +1,41 @@ +.links { + display: flex; + flex-flow: column wrap; + align-content: flex-start; + align-items: flex-start; + justify-content: center; + /* column-gap: 72px; */ + /* -webkit-column-gap: 72px; */ + margin: 32px 0 64px; + max-height: 144px; +} + +.links > div { + margin: 0 72px 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%; +} \ No newline at end of file diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx new file mode 100644 index 0000000..ea998a1 --- /dev/null +++ b/src/components/Links/Links.tsx @@ -0,0 +1,80 @@ +import React from "react"; +import { OutboundLink } from "react-ga"; +import { ArrowElbowDownRight } from "phosphor-react"; + +import "./Links.css"; + +interface LinksProps {} + +const Links: React.FC = () => { + return ( +
+
+ + + Download all + +
+
+ + + Figma library + +
+
+ + + Figma plugin + +
+ + + +
+ ); +}; + +export default Links;