From 8c21d8c4980532acd9d82fb258166da1f4c18a0e Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 11:33:18 -0400 Subject: [PATCH 01/20] New Header --- src/assets/back-to-top.svg | 13 + src/assets/billiard-ball-spec.svg | 18 + src/assets/billiard-ball.svg | 25 ++ src/assets/calculator-spec.svg | 252 ++++++++++++++ src/assets/calculator.svg | 558 ++++++++++++++++++++++++++++++ src/assets/command-key-spec.svg | 18 + src/assets/command-key.svg | 14 + src/assets/cutting-mat-spec.svg | 27 ++ src/assets/cutting-mat.svg | 24 ++ src/assets/marker-green.svg | 22 ++ src/assets/marker-purple.svg | 22 ++ src/assets/paperclips.svg | 14 + src/assets/phone-spec.svg | 59 ++++ src/assets/phone.svg | 38 ++ src/assets/receipt-spec.svg | 70 ++++ src/assets/receipt.svg | 51 +++ src/assets/tablet-spec.svg | 51 +++ src/assets/tablet.svg | 36 ++ src/assets/warning-spec.svg | 18 + src/assets/warning.svg | 14 + src/components/App/App.tsx | 78 +---- src/components/Header/Header.css | 58 ++++ src/components/Header/Header.tsx | 46 +++ 23 files changed, 1452 insertions(+), 74 deletions(-) create mode 100644 src/assets/back-to-top.svg create mode 100644 src/assets/billiard-ball-spec.svg create mode 100644 src/assets/billiard-ball.svg create mode 100644 src/assets/calculator-spec.svg create mode 100644 src/assets/calculator.svg create mode 100644 src/assets/command-key-spec.svg create mode 100644 src/assets/command-key.svg create mode 100644 src/assets/cutting-mat-spec.svg create mode 100644 src/assets/cutting-mat.svg create mode 100644 src/assets/marker-green.svg create mode 100644 src/assets/marker-purple.svg create mode 100644 src/assets/paperclips.svg create mode 100644 src/assets/phone-spec.svg create mode 100644 src/assets/phone.svg create mode 100644 src/assets/receipt-spec.svg create mode 100644 src/assets/receipt.svg create mode 100644 src/assets/tablet-spec.svg create mode 100644 src/assets/tablet.svg create mode 100644 src/assets/warning-spec.svg create mode 100644 src/assets/warning.svg create mode 100644 src/components/Header/Header.css create mode 100644 src/components/Header/Header.tsx diff --git a/src/assets/back-to-top.svg b/src/assets/back-to-top.svg new file mode 100644 index 0000000..3f38c8a --- /dev/null +++ b/src/assets/back-to-top.svg @@ -0,0 +1,13 @@ + + + back-to-top + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/billiard-ball-spec.svg b/src/assets/billiard-ball-spec.svg new file mode 100644 index 0000000..fb8cfdd --- /dev/null +++ b/src/assets/billiard-ball-spec.svg @@ -0,0 +1,18 @@ + + + billiard-ball-spec + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/billiard-ball.svg b/src/assets/billiard-ball.svg new file mode 100644 index 0000000..609c8e8 --- /dev/null +++ b/src/assets/billiard-ball.svg @@ -0,0 +1,25 @@ + + + billiard-ball + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/calculator-spec.svg b/src/assets/calculator-spec.svg new file mode 100644 index 0000000..1e49cfe --- /dev/null +++ b/src/assets/calculator-spec.svg @@ -0,0 +1,252 @@ + + + calculator-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/calculator.svg b/src/assets/calculator.svg new file mode 100644 index 0000000..6b6982b --- /dev/null +++ b/src/assets/calculator.svg @@ -0,0 +1,558 @@ + + + calculator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MC + + + + + + + + + + MR + + + + + + + + + + M– + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/command-key-spec.svg b/src/assets/command-key-spec.svg new file mode 100644 index 0000000..fef317c --- /dev/null +++ b/src/assets/command-key-spec.svg @@ -0,0 +1,18 @@ + + + command-key-spec + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/command-key.svg b/src/assets/command-key.svg new file mode 100644 index 0000000..0d53716 --- /dev/null +++ b/src/assets/command-key.svg @@ -0,0 +1,14 @@ + + + command-key + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/cutting-mat-spec.svg b/src/assets/cutting-mat-spec.svg new file mode 100644 index 0000000..4558dff --- /dev/null +++ b/src/assets/cutting-mat-spec.svg @@ -0,0 +1,27 @@ + + + cutting-mat-spec + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/cutting-mat.svg b/src/assets/cutting-mat.svg new file mode 100644 index 0000000..f2fec9a --- /dev/null +++ b/src/assets/cutting-mat.svg @@ -0,0 +1,24 @@ + + + cutting-mat + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg new file mode 100644 index 0000000..19f54f8 --- /dev/null +++ b/src/assets/marker-green.svg @@ -0,0 +1,22 @@ + + + marker-green + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/marker-purple.svg b/src/assets/marker-purple.svg new file mode 100644 index 0000000..cff2ede --- /dev/null +++ b/src/assets/marker-purple.svg @@ -0,0 +1,22 @@ + + + marker-purple + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/paperclips.svg b/src/assets/paperclips.svg new file mode 100644 index 0000000..f2c4b18 --- /dev/null +++ b/src/assets/paperclips.svg @@ -0,0 +1,14 @@ + + + paperclips + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/phone-spec.svg b/src/assets/phone-spec.svg new file mode 100644 index 0000000..0fefe5e --- /dev/null +++ b/src/assets/phone-spec.svg @@ -0,0 +1,59 @@ + + + phone-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/phone.svg b/src/assets/phone.svg new file mode 100644 index 0000000..21b062e --- /dev/null +++ b/src/assets/phone.svg @@ -0,0 +1,38 @@ + + + phone + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/receipt-spec.svg b/src/assets/receipt-spec.svg new file mode 100644 index 0000000..1ee673d --- /dev/null +++ b/src/assets/receipt-spec.svg @@ -0,0 +1,70 @@ + + + receipt-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/receipt.svg b/src/assets/receipt.svg new file mode 100644 index 0000000..3e5888a --- /dev/null +++ b/src/assets/receipt.svg @@ -0,0 +1,51 @@ + + + receipt + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/tablet-spec.svg b/src/assets/tablet-spec.svg new file mode 100644 index 0000000..2fa5253 --- /dev/null +++ b/src/assets/tablet-spec.svg @@ -0,0 +1,51 @@ + + + tablet-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/tablet.svg b/src/assets/tablet.svg new file mode 100644 index 0000000..9d72593 --- /dev/null +++ b/src/assets/tablet.svg @@ -0,0 +1,36 @@ + + + tablet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/warning-spec.svg b/src/assets/warning-spec.svg new file mode 100644 index 0000000..4663026 --- /dev/null +++ b/src/assets/warning-spec.svg @@ -0,0 +1,18 @@ + + + warning-spec + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/warning.svg b/src/assets/warning.svg new file mode 100644 index 0000000..a27a787 --- /dev/null +++ b/src/assets/warning.svg @@ -0,0 +1,14 @@ + + + warning + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index c97e688..d60a32a 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,84 +1,14 @@ import React, { Suspense } from "react"; -import { NavBar, Panorama, Info, Toolbar, IconGrid } from "../"; -import { ArrowUpRightCircle, DocumentText, Heart, Droid } from "phosphor-react"; +import { Info, Toolbar, IconGrid } from "../"; +import { Heart, Droid } from "phosphor-react"; import "./App.css"; +import Header from "../Header/Header"; const App: React.FC = () => { return ( <> - - - -

- Phosphor is a flexible icon family for interfaces, diagrams, - presentations — whatever, really. -

-
-

- Clear and -
- reductive -

-
-

- Phosphor has been meticulously crafted to work together in - harmony. With 6 weights and alternative glyphs, Phosphor pairs - with all sorts of type sizes and layouts. -

-

Design Specs

-
    -
  • 6 weights: Regular, Bold, Light, Thin, Fill, Duotone
    • -
  • Designed at 16px to scale down to a small size
    • -
  • Rounded end caps and ever so slightly rounded corners
    • -
  • Alternate glyphs to suit your needs
    • -
  • 6,341 icons and counting
    • -
- -
-
-
-

- Intuitive -
- and light -

-
-

- Phosphor is available as an icon font and a React package, and can - be sourced from NPM, a CDN like CDNJS and jsDelivr, or downloaded - and used locally. -

-

Eng Specs

-
    -
  • Intuitive, powerful API to style and add interactivity
    • -
  • Lightweight and full support for tree-shaking
    • -
  • Familiar usage and naming scheme
    • -
  • - Built with TypeScript, and includes type definitions to ease - development -
    • -
- -
-
- +
Loading...}> diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 0000000..fa24a73 --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,58 @@ +header { + height: 1435px; + width: 100%; + background-color: #ffd171; + overflow: hidden; + /* display: block; */ + + /* display: flex; + align-items: center; + justify-content: center; */ +} + +.image-container { + position: relative; + width: 1366px; + height: 100%; + margin: auto; +} + +#marker-purple { + position: absolute; + transform: translate(143px, -158px); +} + +#tablet { + position: absolute; + transform: translate(577px, -900px); +} + +#billiard-ball { + position: absolute; + transform: translate(917.83px, 359.83px); +} + +#warning { + position: absolute; + transform: translate(1184px, 421px); +} + +#paperclips { + position: absolute; + transform: translate(982px, 621px); +} + +#cutting-mat { + position: absolute; + transform: translate(119px, 825px); +} + +#receipt { + position: absolute; + transform: translate(-5px, 1016px); +} + +#calculator { + position: absolute; + transform: translate(924px, 940px); +} \ No newline at end of file diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..72d0be4 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { motion } from "framer-motion"; + +import markerPurple from "../../assets/marker-purple.svg"; +import tablet from "../../assets/tablet.svg"; +import billiardBall from "../../assets/billiard-ball.svg"; +import warning from "../../assets/warning.svg"; +import paperclips from "../../assets/paperclips.svg"; +import cuttingMat from "../../assets/cutting-mat.svg"; +import receipt from "../../assets/receipt.svg"; +import calculator from "../../assets/calculator.svg"; +import "./Header.css"; + +type HeaderProps = {}; + +const variants = { + hidden: { opacity: 0, y: 100 }, + visible: { opacity: 1, y: 0 }, +}; + +const Header: React.FC = () => { + return ( +
+ + {/* */} + {/* */} + + + + + + + + + +
+ ); +}; + +export default Header; From 40f56910be814b85ed1d0879752757f5c7ae2422 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 23:44:50 -0400 Subject: [PATCH 02/20] ColorInput: use cursor: pointer on hover --- src/components/ColorInput/ColorInput.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ColorInput/ColorInput.css b/src/components/ColorInput/ColorInput.css index 02f40d8..a0adcbf 100644 --- a/src/components/ColorInput/ColorInput.css +++ b/src/components/ColorInput/ColorInput.css @@ -29,6 +29,7 @@ input.color-input { border-radius: 8px; margin: 0 0 0 4px; padding: 0; + cursor: pointer; } input.color-input::-webkit-color-swatch-wrapper { From 981e5ff53d64296466f9766f02d063e2f4c22807 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 23:49:31 -0400 Subject: [PATCH 03/20] App: restyle buttons --- package.json | 10 +++++++- src/components/App/App.css | 50 +++++++++++++++----------------------- src/components/App/App.tsx | 32 ++++++++++++++++++------ 3 files changed, 53 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 88c20aa..cfca40e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,15 @@ "url": "https://tobiasfried.com" }, "description": "A flexible icon family for interfaces, diagrams, presentations — whatever, really.", - "keywords": [ "phosphor", "icons", "svg", "design", "interface", "UI", "UX"], + "keywords": [ + "phosphor", + "icons", + "svg", + "design", + "interface", + "UI", + "UX" + ], "repository": "github:rektdeckard/phosphor-web", "private": true, "dependencies": { diff --git a/src/components/App/App.css b/src/components/App/App.css index c60779d..82f32ef 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -33,49 +33,39 @@ input { } button { + border: none; display: flex; align-items: center; - height: 72px; - padding: 0 40px 0 32px; - margin-top: 32px; - background-color: #ffd171; + justify-content: center; +} + +button.main-button { + height: 64px; + width: 240px; + margin: 0 24px 0 0; + background-color: white; border-radius: 8px; - border: none; font-family: "Manrope"; font-weight: 600; font-size: 20px; line-height: 30px; + box-sizing: border-box; + border: 2px solid black; + box-shadow: 4px 4px 0 0 black; + transform: translate(0, 0); + transition: all 0.2s ease; cursor: pointer; user-select: none; } -button.main-button { - display: flex; - align-items: center; - height: 72px; - padding: 0 40px 0 32px; - margin-top: 32px; - background-color: #ffd171; - border-radius: 8px; - border: none; - font-family: "Manrope"; - font-weight: 600; - font-size: 20px; - line-height: 30px; - cursor: pointer; - transition: transform 0.15s -} - -button.main-button:hover { - outline: none; - transform: scale(1.05); - transition: transform 0.15s -} - button.main-button:active { + transform: translate(4px, 4px); + /* background-color: #DDDDDD; */ + box-shadow: 0 0 0 0 black; +} + +button.main-button:focus { outline: none; - background-color: #FFBF3B; - transform: scale(1); } a.main-link { diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index d60a32a..8e47b5d 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,9 +1,8 @@ import React, { Suspense } from "react"; -import { Info, Toolbar, IconGrid } from "../"; +import { Info, Toolbar, IconGrid, Header } from "../"; import { Heart, Droid } from "phosphor-react"; import "./App.css"; -import Header from "../Header/Header"; const App: React.FC = () => { return ( @@ -50,20 +49,37 @@ const App: React.FC = () => { Copyright © 2020 Phosphor Icons
Phosphor Icons is designed by{" "} - Helena Zhang + built by{" "} - Tobias Fried. + + Helena Zhang + {" "} + + built by{" "} + + Tobias Fried + + .
This website is set in{" "} - Manrope by{" "} - Mikhail Sharanda. + + Manrope + {" "} + by{" "} + + Mikhail Sharanda + + .

See also: {" "} - + Phosphor for Android

- Back to zee top + + Back to zee top + From ce5b2604adc1c1dbf43973d802d89c216d9c84a6 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 23:50:08 -0400 Subject: [PATCH 04/20] Toolbar: add drop-shadow --- src/components/Toolbar/Toolbar.css | 1 + src/components/Toolbar/Toolbar.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css index 3601195..fbe4ef6 100644 --- a/src/components/Toolbar/Toolbar.css +++ b/src/components/Toolbar/Toolbar.css @@ -8,6 +8,7 @@ menu.toolbar { display: flex; justify-content: center; align-items: center; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); } .toolbar-contents { diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx index 15bf2e9..b3c8036 100644 --- a/src/components/Toolbar/Toolbar.tsx +++ b/src/components/Toolbar/Toolbar.tsx @@ -7,7 +7,7 @@ type ToolbarProps = {}; const Toolbar: React.FC = () => { return ( - +
From d50c2c4133ddd35288c6f0e391b68f761a729005 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 23:50:27 -0400 Subject: [PATCH 05/20] XXX HEADER index --- src/components/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/index.ts b/src/components/index.ts index 346bd26..36aab6c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export { default as App } from "./App/App"; +export { default as Header } from "./Header/Header"; export { default as NavBar } from "./NavBar/NavBar"; export { default as Panorama } from "./Panorama/Panorama"; export { default as Info } from "./Info/Info"; From 6e9b7e6fd80018a778255194b520b90298c3d5dd Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 23:50:44 -0400 Subject: [PATCH 06/20] Header: implement new snazzy Header The new Header component uses framer-motion to animate transitions between illustrations and x-ray views showing the icons used in their construction. --- src/components/Header/Header.css | 48 ++++++ src/components/Header/Header.tsx | 244 ++++++++++++++++++++++++++++--- 2 files changed, 275 insertions(+), 17 deletions(-) diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index fa24a73..b4642fe 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -10,6 +10,50 @@ header { justify-content: center; */ } +.intro { + width: 660px; + position: absolute; + transform: translate(143px, 392px); +} + +.intro h2 { + font-size: 40px; + line-height: 50px; + margin-bottom: 32px; +} + +div.links { + display: flex; + align-items: center; + justify-content: flex-start; + margin: 56px 0 0; +} + +.links a:not(:first-child) { + margin-left: 48px; +} + +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%; +} + + .image-container { position: relative; width: 1366px; @@ -17,6 +61,10 @@ header { margin: auto; } +.inspectable { + cursor: cell; +} + #marker-purple { position: absolute; transform: translate(143px, -158px); diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 72d0be4..e7e5bcd 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,43 +1,253 @@ -import React from "react"; -import { motion } from "framer-motion"; +import React, { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; import markerPurple from "../../assets/marker-purple.svg"; -import tablet from "../../assets/tablet.svg"; -import billiardBall from "../../assets/billiard-ball.svg"; -import warning from "../../assets/warning.svg"; import paperclips from "../../assets/paperclips.svg"; +import tablet from "../../assets/tablet.svg"; +import tabletSpec from "../../assets/tablet-spec.svg"; +import billiardBall from "../../assets/billiard-ball.svg"; +import billiardBallSpec from "../../assets/billiard-ball-spec.svg"; +import warning from "../../assets/warning.svg"; +import warningSpec from "../../assets/warning-spec.svg"; import cuttingMat from "../../assets/cutting-mat.svg"; +import cuttingMatSpec from "../../assets/cutting-mat-spec.svg"; 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 = { - hidden: { opacity: 0, y: 100 }, - visible: { opacity: 1, y: 0 }, + hidden: { opacity: 0, transition: { duration: 0.2 } }, + visible: { opacity: 1, transition: { duration: 0.2 } }, }; const Header: React.FC = () => { + const [hovered, setHovered] = useState(false); + const clearHover = () => setHovered(false); + // const handleScrollToIcons = () => {}; + return (
- {/* */} - {/* */} - - - - - - + + {hovered === "tablet" ? ( + setHovered("tablet")} + onHoverEnd={clearHover} + src={tabletSpec} + /> + ) : ( + setHovered("tablet")} + // onHoverEnd={clearHover} + src={tablet} + /> + )} + {hovered === "billiard-ball" ? ( + setHovered("billiard-ball")} + onHoverEnd={clearHover} + src={billiardBallSpec} + /> + ) : ( + setHovered("billiard-ball")} + // onHoverEnd={clearHover} + src={billiardBall} + /> + )} + {hovered === "warning" ? ( + setHovered("warning")} + onHoverEnd={clearHover} + src={warningSpec} + /> + ) : ( + setHovered("warning")} + // onHoverEnd={clearHover} + src={warning} + /> + )} + {hovered === "cutting-mat" ? ( + setHovered("cutting-mat")} + onHoverEnd={clearHover} + src={cuttingMatSpec} + /> + ) : ( + setHovered("cutting-mat")} + // onHoverEnd={clearHover} + src={cuttingMat} + /> + )} + {hovered === "receipt" ? ( + setHovered("receipt")} + onHoverEnd={clearHover} + src={receiptSpec} + /> + ) : ( + setHovered("receipt")} + // onHoverEnd={clearHover} + src={receipt} + /> + )} + {hovered === "calculator" ? ( + setHovered("calculator")} + onHoverEnd={clearHover} + src={calculatorSpec} + /> + ) : ( + setHovered("calculator")} + // onHoverEnd={clearHover} + src={calculator} + /> + )} + +
+

+ Phosphor Icons is a flexible icon family for interfaces, diagrams, + presentations – whatever really. +

+
+ + + +
+ +
); From e88cdb1c02d6adcf380b7c5319ca8bf10c1bd1c4 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 23:54:14 -0400 Subject: [PATCH 07/20] Header: remove unused styles --- src/components/Header/Header.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index b4642fe..ede9e89 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,13 +1,8 @@ header { - height: 1435px; width: 100%; + height: 1435px; background-color: #ffd171; overflow: hidden; - /* display: block; */ - - /* display: flex; - align-items: center; - justify-content: center; */ } .intro { From d4cc02e5e970273a9ef90c2035af2de2c5aca4c6 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sun, 9 Aug 2020 20:49:55 -0400 Subject: [PATCH 08/20] Update assets --- src/assets/back-to-top.svg | 13 --- src/assets/calculator-spec.svg | 155 +++++++++++++------------------- src/assets/calculator.svg | 15 ++-- src/assets/command-key-spec.svg | 8 +- src/assets/cutting-mat-spec.svg | 8 +- src/assets/marker-green.svg | 8 +- src/assets/marker-purple.svg | 6 +- src/assets/phone-spec.svg | 14 +-- src/assets/phone.svg | 4 +- src/assets/receipt-spec.svg | 40 +++++---- src/assets/tablet-spec.svg | 36 ++++---- src/assets/u-arrow-up-left.svg | 8 ++ src/assets/warning-spec.svg | 1 + 13 files changed, 141 insertions(+), 175 deletions(-) delete mode 100644 src/assets/back-to-top.svg create mode 100644 src/assets/u-arrow-up-left.svg diff --git a/src/assets/back-to-top.svg b/src/assets/back-to-top.svg deleted file mode 100644 index 3f38c8a..0000000 --- a/src/assets/back-to-top.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - back-to-top - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/calculator-spec.svg b/src/assets/calculator-spec.svg index 1e49cfe..8d04bde 100644 --- a/src/assets/calculator-spec.svg +++ b/src/assets/calculator-spec.svg @@ -4,8 +4,8 @@ - - + + @@ -13,7 +13,8 @@ - + + @@ -157,95 +158,65 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/calculator.svg b/src/assets/calculator.svg index 6b6982b..b439d48 100644 --- a/src/assets/calculator.svg +++ b/src/assets/calculator.svg @@ -292,8 +292,9 @@ - + + @@ -520,9 +521,7 @@ - - MC - + @@ -530,9 +529,7 @@ - - MR - + @@ -540,9 +537,7 @@ - - M– - + diff --git a/src/assets/command-key-spec.svg b/src/assets/command-key-spec.svg index fef317c..3cd16fc 100644 --- a/src/assets/command-key-spec.svg +++ b/src/assets/command-key-spec.svg @@ -8,10 +8,10 @@ - - - - + + + + diff --git a/src/assets/cutting-mat-spec.svg b/src/assets/cutting-mat-spec.svg index 4558dff..63ce2fe 100644 --- a/src/assets/cutting-mat-spec.svg +++ b/src/assets/cutting-mat-spec.svg @@ -17,10 +17,10 @@ - - - - + + + + diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg index 19f54f8..3bf1ad6 100644 --- a/src/assets/marker-green.svg +++ b/src/assets/marker-green.svg @@ -3,18 +3,18 @@ marker-green - + - - + + - + diff --git a/src/assets/marker-purple.svg b/src/assets/marker-purple.svg index cff2ede..8ac9479 100644 --- a/src/assets/marker-purple.svg +++ b/src/assets/marker-purple.svg @@ -3,11 +3,11 @@ marker-purple - + - - + + diff --git a/src/assets/phone-spec.svg b/src/assets/phone-spec.svg index 0fefe5e..fbee31c 100644 --- a/src/assets/phone-spec.svg +++ b/src/assets/phone-spec.svg @@ -1,8 +1,8 @@ - + phone-spec - + @@ -39,19 +39,19 @@ - + - + - + - + - + diff --git a/src/assets/phone.svg b/src/assets/phone.svg index 21b062e..9558eb4 100644 --- a/src/assets/phone.svg +++ b/src/assets/phone.svg @@ -1,8 +1,8 @@ - + phone - + diff --git a/src/assets/receipt-spec.svg b/src/assets/receipt-spec.svg index 1ee673d..6bc85c1 100644 --- a/src/assets/receipt-spec.svg +++ b/src/assets/receipt-spec.svg @@ -45,25 +45,27 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/tablet-spec.svg b/src/assets/tablet-spec.svg index 2fa5253..8adfa18 100644 --- a/src/assets/tablet-spec.svg +++ b/src/assets/tablet-spec.svg @@ -5,7 +5,7 @@ - + @@ -29,22 +29,24 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/src/assets/u-arrow-up-left.svg b/src/assets/u-arrow-up-left.svg new file mode 100644 index 0000000..d77add4 --- /dev/null +++ b/src/assets/u-arrow-up-left.svg @@ -0,0 +1,8 @@ + + + u-arrow-up-left + + + + + \ No newline at end of file diff --git a/src/assets/warning-spec.svg b/src/assets/warning-spec.svg index 4663026..896015a 100644 --- a/src/assets/warning-spec.svg +++ b/src/assets/warning-spec.svg @@ -4,6 +4,7 @@ + From 390a14537e5adaac8f351d8ec8ec8e0beca03d4b Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sun, 9 Aug 2020 20:50:12 -0400 Subject: [PATCH 09/20] README: 'JS' -> 'HTML/CSS' --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cd527f3..537eee8 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Phosphor is a kickass and dead-simple set of open-source icons for web and digit Phosphor is available as an icon font and a React package, which can be sourced from NPM or from a CDN. -### Vanilla JS +### HTML/CSS - **This seems familiar...** – Using Phosphor in your web project might seem familiar. We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is source the stylesheet, and drop in an icon: From aaf9bd1d7dd66e353be2b66460cc48f12f35b07e Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sun, 9 Aug 2020 20:51:40 -0400 Subject: [PATCH 10/20] Footer: extract contents from App and begin implementing redesign --- src/components/App/App.tsx | 73 +--------------- src/components/Footer/Footer.css | 74 +++++++++++++++- src/components/Footer/Footer.tsx | 146 +++++++++++++++++++++++++++++-- 3 files changed, 209 insertions(+), 84 deletions(-) diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 8e47b5d..09eb684 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -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 = () => { @@ -14,75 +13,7 @@ const App: React.FC = () => {
- -
-

- A labor -
- of love -

-
-

- Phosphor is free and open source software. If you enjoy these - icons, please consider supporting us with a donation. -

- -
-
-
-

- - 👩🏻‍💻👨‍💻🐱 - -

-
-

- Copyright © 2020 Phosphor Icons -
- Phosphor Icons is designed by{" "} - - Helena Zhang - {" "} - + built by{" "} - - Tobias Fried - - . -
- This website is set in{" "} - - Manrope - {" "} - by{" "} - - Mikhail Sharanda - - . -

-

- See also: {" "} - - Phosphor for Android - -

- - Back to zee top - -
-
- +