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 {
|
||||
background-color: #FAFAFA;
|
||||
font-variant-ligatures: common-ligatures;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: monospace;
|
||||
font-family: "Manrope";
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
margin: 4px;
|
||||
padding: 8px;
|
||||
border: 1px solid 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,
|
||||
code {
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 14px;
|
||||
color: "black";
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 4px;
|
||||
background-color: gainsboro;
|
||||
}
|
||||
|
||||
/* .color-picker {
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 16px 20px 24px;
|
||||
margin: 12px 0px;
|
||||
background-color: white;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E1D4D7;
|
||||
}
|
||||
|
||||
.color-picker::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
margin: 4px;
|
||||
} */
|
||||
|
||||
/* input {
|
||||
margin: 4px;
|
||||
padding: 8px;
|
||||
border: 2px solid black;
|
||||
border-radius: 24px;
|
||||
background-color: transparent;
|
||||
input {
|
||||
font-family: "Manrope";
|
||||
}
|
||||
|
||||
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;
|
||||
border: 2px solid violet;
|
||||
border-radius: 24px;
|
||||
} */
|
||||
transform: scale(1.05);
|
||||
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 { Header, Toolbar, Footer } from "../";
|
||||
import { NavBar, Panorama, Info, Toolbar, IconGrid } from "../";
|
||||
import { ArrowUpRightCircle, DocumentText, Heart, Droid } from "phosphor-react";
|
||||
import "./App.css";
|
||||
import IconGrid from "../IconGrid/IconGrid";
|
||||
|
||||
const App: React.FC<any> = () => {
|
||||
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>
|
||||
<Toolbar />
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<IconGrid />
|
||||
</Suspense>
|
||||
</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