App: update body contents and style to match the spec
This commit is contained in:
rektdeckard
@@ -1,89 +1,86 @@
|
|||||||
|
/* @font-face {
|
||||||
|
font-family: Manrope;
|
||||||
|
src: url('https://fonts.googleapis.com/css2?family=Manrope') format('woff2');
|
||||||
|
} */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: #FAFAFA;
|
font-variant-ligatures: common-ligatures;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
font-family: monospace;
|
font-family: "Manrope";
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
pre,
|
||||||
select {
|
code {
|
||||||
margin: 4px;
|
font-family: "IBM Plex Mono";
|
||||||
padding: 8px;
|
font-size: 14px;
|
||||||
border: 1px solid black;
|
color: "black";
|
||||||
border-radius: 24px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
button > * {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus,
|
|
||||||
select:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid violet;
|
|
||||||
border-radius: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
button:active {
|
|
||||||
background-color: darkmagenta;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"] {
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color" i] {
|
|
||||||
-webkit-appearance: square-button;
|
|
||||||
padding: 4px;
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"]:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid violet;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
padding: 4px;
|
box-sizing: border-box;
|
||||||
background-color: gainsboro;
|
padding: 20px 16px 20px 24px;
|
||||||
}
|
margin: 12px 0px;
|
||||||
|
|
||||||
/* .color-picker {
|
|
||||||
padding: 0px;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 32px;
|
border-radius: 6px;
|
||||||
width: 32px;
|
border: 1px solid #E1D4D7;
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker::-webkit-color-swatch {
|
input {
|
||||||
border: none;
|
font-family: "Manrope";
|
||||||
border-radius: 50%;
|
|
||||||
margin: 4px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* input {
|
|
||||||
margin: 4px;
|
|
||||||
padding: 8px;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 24px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus {
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
outline: none;
|
||||||
border: 2px solid violet;
|
transform: scale(1.05);
|
||||||
border-radius: 24px;
|
transition: transform 0.15s
|
||||||
} */
|
}
|
||||||
|
|
||||||
|
button.main-button:active {
|
||||||
|
outline: none;
|
||||||
|
background-color: #FFBF3B;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,20 +1,142 @@
|
|||||||
import React, { Suspense } from "react";
|
import React, { Suspense } from "react";
|
||||||
|
|
||||||
import { Header, Toolbar, Footer } from "../";
|
import { NavBar, Panorama, Info, Toolbar, IconGrid } from "../";
|
||||||
|
import { ArrowUpRightCircle, DocumentText, Heart, Droid } from "phosphor-react";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import IconGrid from "../IconGrid/IconGrid";
|
|
||||||
|
|
||||||
const App: React.FC<any> = () => {
|
const App: React.FC<any> = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<NavBar />
|
||||||
|
<Panorama />
|
||||||
|
<Info id="overview">
|
||||||
|
<h2>
|
||||||
|
Phosphor is a flexible icon family for interfaces, diagrams,
|
||||||
|
presentations — whatever, really.
|
||||||
|
</h2>
|
||||||
|
<div className="feature">
|
||||||
|
<h3>
|
||||||
|
Clear and
|
||||||
|
<br />
|
||||||
|
reductive
|
||||||
|
</h3>
|
||||||
|
<div className="feature-contents">
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<h4>Design Specs</h4>
|
||||||
|
<ul>
|
||||||
|
<li>6 weights: Regular, Bold, Light, Thin, Fill, Duotone</li>
|
||||||
|
<li>Designed at 16px to scale down to a small size</li>
|
||||||
|
<li>Rounded end caps and ever so slightly rounded corners</li>
|
||||||
|
<li>Alternate glyphs to suit your needs</li>
|
||||||
|
<li>6,341 icons and counting</li>
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
className="main-button"
|
||||||
|
onClick={(e) => e.currentTarget.blur()}
|
||||||
|
>
|
||||||
|
<ArrowUpRightCircle size={32} style={{ marginRight: 12 }} />
|
||||||
|
Download icons
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="feature">
|
||||||
|
<h3>
|
||||||
|
Intuitive
|
||||||
|
<br />
|
||||||
|
and light
|
||||||
|
</h3>
|
||||||
|
<div className="feature-contents">
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<h4>Eng Specs</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Intuitive, powerful API to style and add interactivity</li>
|
||||||
|
<li>Lightweight and full support for tree-shaking</li>
|
||||||
|
<li>Familiar usage and naming scheme</li>
|
||||||
|
<li>
|
||||||
|
Built with TypeScript, and includes type definitions to ease
|
||||||
|
development
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
className="main-button"
|
||||||
|
onClick={(e) =>
|
||||||
|
window.open(
|
||||||
|
"https://github.com/rektdeckard/phosphor-web#phosphor-icons"
|
||||||
|
) && e.currentTarget.blur()
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DocumentText size={32} style={{ marginRight: 12 }} />
|
||||||
|
See documentation
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Info>
|
||||||
<main>
|
<main>
|
||||||
<Toolbar />
|
<Toolbar />
|
||||||
<Suspense fallback={<div>Loading...</div>}>
|
<Suspense fallback={<div>Loading...</div>}>
|
||||||
<IconGrid />
|
<IconGrid />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Info id="footer">
|
||||||
|
<div className="feature">
|
||||||
|
<h3>
|
||||||
|
A labor
|
||||||
|
<br />
|
||||||
|
of love
|
||||||
|
</h3>
|
||||||
|
<div className="feature-contents">
|
||||||
|
<p>
|
||||||
|
Phosphor is free and open source software. If you enjoy these
|
||||||
|
icons, please consider supporting us with a donation.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className="main-button"
|
||||||
|
onClick={(e) => e.currentTarget.blur()}
|
||||||
|
>
|
||||||
|
<Heart size={32} style={{ marginRight: 12 }} />
|
||||||
|
Buy us a coffee
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="feature">
|
||||||
|
<h3>
|
||||||
|
<span
|
||||||
|
role="img"
|
||||||
|
aria-label="Emoji of woman technologist, man technologist, and cat"
|
||||||
|
>
|
||||||
|
👩🏻💻👨💻🐱
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
<div className="feature-contents">
|
||||||
|
<p>
|
||||||
|
Copyright © 2020 Phosphor Icons
|
||||||
|
<br />
|
||||||
|
Phosphor Icons is designed by{" "}
|
||||||
|
<a href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
|
||||||
|
<a href="https://tobiasfried.com">Tobias Fried</a>.
|
||||||
|
<br />
|
||||||
|
This website is set in{" "}
|
||||||
|
<a href="https://manropefont.com/">Manrope</a> by{" "}
|
||||||
|
<a href="https://gent.media/">Mikhail Sharanda</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
See also: <Droid size={20} />{" "}
|
||||||
|
<a href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
|
||||||
|
Phosphor for Android
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<a href="#">Back to zee top</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Info>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user