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: 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/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..8d04bde --- /dev/null +++ b/src/assets/calculator-spec.svg @@ -0,0 +1,223 @@ + + + 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..b439d48 --- /dev/null +++ b/src/assets/calculator.svg @@ -0,0 +1,553 @@ + + + calculator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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..3cd16fc --- /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..63ce2fe --- /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..3bf1ad6 --- /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..8ac9479 --- /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..fbee31c --- /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..9558eb4 --- /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..6bc85c1 --- /dev/null +++ b/src/assets/receipt-spec.svg @@ -0,0 +1,72 @@ + + + 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..8adfa18 --- /dev/null +++ b/src/assets/tablet-spec.svg @@ -0,0 +1,53 @@ + + + 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/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 new file mode 100644 index 0000000..896015a --- /dev/null +++ b/src/assets/warning-spec.svg @@ -0,0 +1,19 @@ + + + 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.css b/src/components/App/App.css index c60779d..5c67600 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -7,6 +7,11 @@ html { font-variant-ligatures: common-ligatures; } +::selection { + color: white; + background-color: black; +} + body { margin: 0px; font-family: "Manrope"; @@ -33,49 +38,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: flex-start; +} + +button.main-button { + height: 64px; + margin: 16px 24px 0 0; + padding: 0 48px 0 40px; + 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 c97e688..09eb684 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,142 +1,19 @@ import React, { Suspense } from "react"; -import { NavBar, Panorama, Info, Toolbar, IconGrid } from "../"; -import { ArrowUpRightCircle, DocumentText, Heart, Droid } from "phosphor-react"; +import { Toolbar, IconGrid, Header, Footer } from "../"; import "./App.css"; 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...}>
- -
-

- 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 -
-
- +