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 +