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