diff --git a/src/assets/ipad.svg b/src/assets/ipad.svg new file mode 100644 index 0000000..cc63cb5 --- /dev/null +++ b/src/assets/ipad.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/map.svg b/src/assets/map.svg new file mode 100644 index 0000000..5b5e212 --- /dev/null +++ b/src/assets/map.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/synth.svg b/src/assets/synth.svg new file mode 100644 index 0000000..ab3c4d3 --- /dev/null +++ b/src/assets/synth.svg @@ -0,0 +1,325 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/watch.svg b/src/assets/watch.svg new file mode 100644 index 0000000..d34c1b7 --- /dev/null +++ b/src/assets/watch.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/App/App.css b/src/components/App/App.css index effc40e..8fd7ade 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -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; } diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 6268578..8eb4a11 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -27,10 +27,11 @@ const App: React.FC = () => { 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] ); diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css index 594b9da..24452f7 100644 --- a/src/components/Banner/Banner.css +++ b/src/components/Banner/Banner.css @@ -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; } diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index 8fcc873..2d2dbc2 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -53,7 +53,7 @@ const Banner = ({ id, children, onClose }: BannerProps) => { {!seen && ( { e.key === "Enter" && handleClose(); }} > - + @@ -78,4 +78,8 @@ const Banner = ({ id, children, onClose }: BannerProps) => { ); }; +Banner.Container = ({ children }: { children: ReactNode }) => { + return
{children}
; +}; + export default Banner; diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 60a3601..f2a9567 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -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 { diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 58b1b0c..de82188 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -79,7 +79,7 @@ const Footer = (_: FooterProps) => { ) } > - + Buy us a coffee diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index f54fdad..169d39c 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -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 { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7bb4da9..da14287 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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 (
- -
- - - Phosphor 2.0 is out, with some big updates and some small API - changes. Check our{" "} - - documentation - {" "} - to see what's new! - -
- + + +
+ + + Phosphor 2.0 is out, with some big updates and some small API + changes. Check our{" "} + + documentation + {" "} + to see what's new! + +
+ +
- - - - - - - - + + + + + + + {/* */} + {/* */} + + {/* */} + {/* */} + + {/* */} + {/* */}

- Phosphor is a flexible icon family for interfaces, diagrams, - presentations —  - - whatever, really. + Phosphor is a flexible icon
+ family for interfaces and more.

- - - - - - + + + + + + + {/* */} + {/* */} + + {/* */} + {/* */} + + {/* */} + {/* */}
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index 2345f8e..a08f97b 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/src/components/IconGrid/IconGrid.css @@ -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; diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css index 710549d..98b6d2e 100644 --- a/src/components/Links/Links.css +++ b/src/components/Links/Links.css @@ -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%; -} \ No newline at end of file +} diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx index 4d65524..72a66d9 100644 --- a/src/components/Links/Links.tsx +++ b/src/components/Links/Links.tsx @@ -88,6 +88,22 @@ const Links = (_: LinksProps) => { Request an icon + +
+ + + TKTK + +
+
+ + + Showcase TK + +
); }; diff --git a/src/components/Recipes/Recipes.tsx b/src/components/Recipes/Recipes.tsx index e2ff902..c4a86f7 100644 --- a/src/components/Recipes/Recipes.tsx +++ b/src/components/Recipes/Recipes.tsx @@ -6,7 +6,7 @@ import "./Recipes.css"; const Recipes = () => { return ( - <> +

Recipes

@@ -22,7 +22,7 @@ const Recipes = () => {
- +
); }; diff --git a/src/components/SettingsActions/SettingsActions.css b/src/components/SettingsActions/SettingsActions.css index da317c5..b853be1 100644 --- a/src/components/SettingsActions/SettingsActions.css +++ b/src/components/SettingsActions/SettingsActions.css @@ -11,7 +11,7 @@ button.action-button:active { } @media screen and (max-width: 558px) { - .action-button { + .toolbar .action-button { display: none; } } diff --git a/src/components/Tabs/Tabs.css b/src/components/Tabs/Tabs.css index 1c9a591..16a8f48 100644 --- a/src/components/Tabs/Tabs.css +++ b/src/components/Tabs/Tabs.css @@ -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; } diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css index 17b73f6..a333eec 100644 --- a/src/components/Toolbar/Toolbar.css +++ b/src/components/Toolbar/Toolbar.css @@ -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 {