andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): more homepage style updates

Browse Source
This commit is contained in:
rektdeckard
2023-03-13 12:21:55 -06:00
parent a14bdfb281
commit 94e66c3893
19 changed files with 679 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/App/App.css
View File

@@ -4,6 +4,13 @@
--yellow: #ffd171;
--pale: #ffe8dc;
--peach: #ffd5c0;
--sand: #bcadaf;
--foam: #e9ebe2;
--lichen: #d2d6c5;
--moss: #3c402b;
--moss-shadow: rgba(60, 64, 43, 0.2);
--stone: #1f2310;
--acid: #c4e456;
--darkgreen: #245633;
--blue: #397fff;
--purple: #925bff;
@@ -77,8 +84,9 @@ button.main-button {
font-size: 20px;
line-height: 30px;
box-sizing: border-box;
border: 2px solid black;
box-shadow: 4px 4px 0 0 black;
color: var(--moss);
border: 1px solid var(--moss);
box-shadow: 2px 2px 0 0 var(--moss-shadow);
transform: translate(0, 0);
transition: all 0.2s ease;
cursor: pointer;
@@ -90,8 +98,8 @@ button.main-button {
}
button.main-button:active {
transform: translate(4px, 4px);
box-shadow: 0 0 0 0 black;
transform: translate(2px, 2px);
box-shadow: 0 0 0 0 var(--moss);
}
button.main-button svg {
@@ -101,13 +109,12 @@ button.main-button svg {
.button-container {
display: flex;
flex-wrap: wrap;
/* gap: 24px; */
}
a.main-link {
text-decoration: none;
position: relative;
color: black;
color: var(--moss);
}
a.main-link:after {
@@ -116,7 +123,7 @@ a.main-link:after {
bottom: -2px;
left: 0;
width: 100%;
border-bottom: 1px solid black;
border-bottom: 1px solid var(--moss);
transition: 0.2s;
pointer-events: none;
}

9
src/components/App/App.tsx
View File

@@ -27,10 +27,11 @@ const App: React.FC<any> = () => {
const properties = useMemo(
() => ({
"--foreground": isDark ? "white" : "black",
"--foreground-card": isDark ? "white" : "#35313D",
"--background": isDark ? "#35313D" : "white",
"--background-card": isDark ? "#413c48" : "#f6f5f6",
"--foreground": isDark ? "white" : "var(--moss)",
"--foreground-card": isDark ? "white" : "var(--moss)",
"--background": isDark ? "var(--stone)" : "var(--foam)",
"--background-card": isDark ? "var(--stone)" : "var(--foam)",
"--background-tab": isDark ? "var(--moss)" : "white",
}),
[isDark]
);

32
src/components/Banner/Banner.css
View File

@@ -1,17 +1,20 @@
.banner {
.banner-container {
position: fixed;
top: 0;
left: 0;
right: 0;
border-radius: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
color: white;
margin: auto;
background-color: var(--eggplant);
z-index: 1;
}
.banner {
}
.banner .main-button {
height: unset;
min-height: 64px;
@@ -19,27 +22,32 @@
}
.banner a {
color: white;
color: inherit;
}
.banner-content {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex: 1;
max-width: 1120px;
max-width: 560px;
margin: auto;
padding: 12px 12px 12px 16px;
color: var(--moss);
background-color: var(--acid);
border: 1px solid var(--moss);
border-radius: 32px;
filter: drop-shadow(2px 2px 0 var(--moss-shadow));
font-family: "IBM Plex Mono";
font-size: 14px;
}
.banner-button {
color: inherit;
background: var(--eggplant);
height: unset !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 48px !important;
background-color: unset;
padding: 0;
margin: 0;
cursor: pointer;
}
@@ -51,5 +59,5 @@
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 20px;
gap: 12px;
}

8
src/components/Banner/Banner.tsx
View File

@@ -53,7 +53,7 @@ const Banner = ({ id, children, onClose }: BannerProps) => {
<AnimatePresence initial={true}>
{!seen && (
<motion.aside
className="card banner"
className="banner"
initial="initial"
animate="animate"
exit="exit"
@@ -69,7 +69,7 @@ const Banner = ({ id, children, onClose }: BannerProps) => {
e.key === "Enter" && handleClose();
}}
>
<XCircle color="currentColor" size={28} weight="regular" />
<XCircle size={28} weight="regular" />
</button>
</div>
</motion.aside>
@@ -78,4 +78,8 @@ const Banner = ({ id, children, onClose }: BannerProps) => {
);
};
Banner.Container = ({ children }: { children: ReactNode }) => {
return <div className="banner-container">{children}</div>;
};
export default Banner;

7
src/components/Footer/Footer.css
View File

@@ -1,5 +1,6 @@
footer {
background-color: var(--purple);
color: var(--moss);
background-color: var(--sand);
}
#back-to-top-button {
@@ -12,8 +13,8 @@ footer {
}
#back-to-top-button:active {
transform: translate(4px, 4px) !important;
box-shadow: 0 0 0 0 black;
transform: translate(2px, 2px) !important;
box-shadow: 0 0 0 0 var(--moss-shadow);
}
#back-to-top-button svg {

4
src/components/Footer/Footer.tsx
View File

@@ -79,7 +79,7 @@ const Footer = (_: FooterProps) => {
)
}
>
<Coffee size={24} weight="fill" />
<Coffee size={24} />
Buy us a coffee
</button>
<button
@@ -92,7 +92,7 @@ const Footer = (_: FooterProps) => {
)
}
>
<Heart size={24} weight="fill" />
<Heart size={24} />
Become a patron
</button>
</div>

36
src/components/Header/Header.css
View File

@@ -1,7 +1,8 @@
header {
overflow: hidden;
position: relative;
background-color: var(--yellow);
color: var(--moss);
background-color: var(--lichen);
}
.header-contents {
@@ -36,6 +37,29 @@ header {
cursor: cell;
}
.map {
position: absolute;
transform: translate(300px, -44px) rotate(-10deg);
}
.synth {
position: absolute;
transform: translate(800px, -274px) rotate(3deg);
}
.ipad {
position: absolute;
top: -620px;
left: 500px;
}
.watch {
position: absolute;
top: 160px;
left: 320px;
transform: rotate(-5deg);
}
.xray {
opacity: 1;
transition: opacity 200ms ease;
@@ -83,6 +107,12 @@ header {
left: 672px;
top: -900px;
}
/* .ipad {
position: absolute;
top: -571px;
left: 500px;
} */
}
@media screen and (min-width: 720px) and (max-width: 1239px) {
@@ -144,8 +174,8 @@ header {
#paperclips-three {
display: initial;
position: absolute;
left: 724px;
top: 694px;
left: 908px;
top: 360px;
}
.warning {

86
src/components/Header/Header.tsx
View File

@@ -1,7 +1,7 @@
import {
ArrowCircleUpRight,
ArrowCircleDown,
Broadcast,
MegaphoneSimple,
} from "@phosphor-icons/react";
import Banner from "@/components/Banner";
@@ -21,6 +21,10 @@ import { ReactComponent as Receipt } from "@/assets/receipt.svg";
import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg";
import { ReactComponent as Calculator } from "@/assets/calculator.svg";
import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg";
import { ReactComponent as IPad } from "@/assets/ipad.svg";
import { ReactComponent as Map } from "@/assets/map.svg";
import { ReactComponent as Synth } from "@/assets/synth.svg";
import { ReactComponent as Watch } from "@/assets/watch.svg";
import Links from "@/components/Links";
import "./Header.css";
@@ -42,58 +46,72 @@ const handleScrollToIcons = () =>
const Header = (_: HeaderProps) => {
return (
<header>
<Banner id="2.0">
<div className="message">
<Broadcast size={32} weight="fill" />
<small>
Phosphor 2.0 is out, with some big updates and some small API
changes. Check our{" "}
<a href="https://github.com/phosphor-icons/homepage#readme">
documentation
</a>{" "}
to see what's new!
</small>
</div>
</Banner>
<Banner.Container>
<Banner id={Math.random().toString()}>
<div className="message">
<MegaphoneSimple size={32} weight="fill" mirrored />
<small>
Phosphor 2.0 is out, with some big updates and some small API
changes. Check our{" "}
<a href="https://github.com/phosphor-icons/homepage#readme">
documentation
</a>{" "}
to see what's new!
</small>
</div>
</Banner>
</Banner.Container>
<div className="header-contents">
<div className="illustrations-top">
<MarkerPurple id="marker-purple" />
<PaperClips id="paperclips" />
<PaperClipsThree id="paperclips-three" />
<TabletSpec className="tablet" />
<Tablet className="tablet inspectable xray" />
<BilliardBallSpec className="billiard-ball" />
<BilliardBall className="billiard-ball inspectable xray" />
<WarningSpec className="warning" />
<Warning className="warning inspectable xray" />
<PaperClips id="paperclips" />
<PaperClipsThree id="paperclips-three" />
<IPad className="ipad inspectable xray" />
{/* <Tablet className="tablet inspectable xray" /> */}
{/* <TabletSpec className="tablet" /> */}
{/* <BilliardBallSpec className="billiard-ball" /> */}
{/* <BilliardBall className="billiard-ball inspectable xray" /> */}
{/* <WarningSpec className="warning" /> */}
{/* <Warning className="warning inspectable xray" /> */}
</div>
<div className="intro">
<h2>
Phosphor is a flexible icon family for interfaces, diagrams,
presentations — 
<wbr />
whatever, really.
Phosphor is a flexible icon <br />
family for interfaces and more.
</h2>
<div className="button-container">
<button className="main-button" onClick={handleGetStarted}>
<ArrowCircleUpRight size={24} weight="fill" />
<ArrowCircleUpRight size={24} />
Get started
</button>
<button className="main-button" onClick={handleScrollToIcons}>
<ArrowCircleDown size={24} weight="fill" />
<ArrowCircleDown size={24} />
Explore icons
</button>
</div>
<Links />
</div>
<div className="illustrations-bottom">
<CuttingMatSpec className="cutting-mat" />
<CuttingMat className="cutting-mat inspectable xray" />
<ReceiptSpec className="receipt" />
<Receipt className="receipt inspectable xray" />
<CalculatorSpec className="calculator" />
<Calculator className="calculator inspectable xray" />
<Map className="map inspectable xray" />
<Synth className="synth inspectable xray" />
<Watch className="watch inspectable xray" />
{/* <CuttingMatSpec className="cutting-mat" /> */}
{/* <CuttingMat className="cutting-mat inspectable xray" /> */}
{/* <ReceiptSpec className="receipt" /> */}
{/* <Receipt className="receipt inspectable xray" /> */}
{/* <CalculatorSpec className="calculator" /> */}
{/* <Calculator className="calculator inspectable xray" /> */}
</div>
</div>
</header>

3
src/components/IconGrid/IconGrid.css
View File

@@ -205,6 +205,7 @@ aside.detail-footer {
gap: 24px;
padding: 12px 24px;
height: 136px;
/* filter: drop-shadow(2px 2px 0 var(--moss-shadow)); */
}
figure {
@@ -247,7 +248,7 @@ figcaption > p {
aside.detail-footer {
top: 16px;
bottom: -4px;
bottom: -20px;
display: flex;
flex-direction: column;
height: 440px;

8
src/components/Links/Links.css
View File

@@ -7,7 +7,7 @@
/* column-gap: 72px; */
/* -webkit-column-gap: 72px; */
margin: 32px 0 64px;
max-height: 144px;
max-height: 220px;
}
.links > div {
@@ -24,7 +24,7 @@ a.nav-link {
text-decoration: none;
position: relative;
cursor: pointer;
color: black;
color: inherit;
}
a.nav-link:after {
@@ -33,10 +33,10 @@ a.nav-link:after {
bottom: -2px;
left: 0;
width: 0%;
border-bottom: 1px solid black;
border-bottom: 1px solid var(--moss);
transition: 0.2s;
}
a.nav-link:hover:after {
width: 100%;
}
}

16
src/components/Links/Links.tsx
View File

@@ -88,6 +88,22 @@ const Links = (_: LinksProps) => {
Request an icon
</OutboundLink>
</div>
<div>
<ArrowElbowDownRight size={24} />
<OutboundLink href="tk" eventLabel="Request">
TKTK
</OutboundLink>
</div>
<div>
<ArrowElbowDownRight size={24} />
<OutboundLink
href="https://play.phosphoricons.com"
eventLabel="Request"
>
Showcase TK
</OutboundLink>
</div>
</div>
);
};

4
src/components/Recipes/Recipes.tsx
View File

@@ -6,7 +6,7 @@ import "./Recipes.css";
const Recipes = () => {
return (
<>
<div>
<div className="toolbar">
<div className="toolbar-contents">
<h2>Recipes</h2>
@@ -22,7 +22,7 @@ const Recipes = () => {
</div>
</IconContext.Provider>
</div>
</>
</div>
);
};

2
src/components/SettingsActions/SettingsActions.css
View File

@@ -11,7 +11,7 @@ button.action-button:active {
}
@media screen and (max-width: 558px) {
.action-button {
.toolbar .action-button {
display: none;
}
}

12
src/components/Tabs/Tabs.css
View File

@@ -3,6 +3,14 @@
flex-direction: column;
}
.tabs:has(button.tab:first-child:hover) .tab-content {
border-top-left-radius: 0;
}
.tabs:has(button.tab:last-child:hover) .tab-content {
border-top-right-radius: 0;
}
.tabs-header {
display: flex;
align-items: center;
@@ -30,7 +38,7 @@ button.tab:hover:not(.active) {
}
button.tab.active {
background-color: var(--background);
background-color: var(--background-tab);
border-bottom: none;
}
@@ -40,7 +48,7 @@ button.tab.active {
max-height: 77px;
padding: 20px 20px 10px;
border-radius: 8px;
background-color: var(--background);
background-color: var(--background-tab);
overflow-y: auto;
}

4
src/components/Toolbar/Toolbar.css
View File

@@ -5,12 +5,12 @@
padding: 0;
margin: 0;
color: white;
background-color: var(--eggplant);
background-color: var(--stone);
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 0 0 var(--shadow);
box-shadow: 0 2px 0 0 var(--moss-shadow);
}
.toolbar-contents {