From 307a2f5c7bf8733a43dba4554c893b663414a5a1 Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sun, 19 Mar 2023 14:49:20 -0600 Subject: [PATCH] feat(app): add hand-drawn recipe --- src/assets/marker-green.svg | 40 ++++---- src/assets/ruler.svg | 105 +++++++++++++++++++++ src/components/Footer/Footer.css | 19 ++-- src/components/Footer/Footer.tsx | 6 +- src/components/Header/Header.tsx | 12 --- src/components/Recipes/Recipe.tsx | 2 +- src/components/Recipes/items/HandDrawn.tsx | 50 ++++++++++ src/components/Recipes/items/index.ts | 3 +- 8 files changed, 196 insertions(+), 41 deletions(-) create mode 100644 src/assets/ruler.svg create mode 100644 src/components/Recipes/items/HandDrawn.tsx diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg index 719b1af..b2853fd 100644 --- a/src/assets/marker-green.svg +++ b/src/assets/marker-green.svg @@ -1,17 +1,25 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/ruler.svg b/src/assets/ruler.svg new file mode 100644 index 0000000..325067e --- /dev/null +++ b/src/assets/ruler.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index f2a9567..807a54a 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -58,6 +58,8 @@ footer .links { } .illustrations-footer { + position: fixed; + margin: auto; display: none; -moz-user-select: none; -webkit-user-select: none; @@ -92,11 +94,9 @@ footer .links { } .illustrations-footer { - max-width: 100%; height: 440px; - display: flex; - justify-content: center; - overflow: hidden; + display: initial; + overflow-y: hidden; } } @@ -127,6 +127,11 @@ footer .links { right: -18px; top: 144px; } + + .ruler { + position: absolute; + transform: rotate(-5deg); + } } @media screen and (min-width: 1239px) { @@ -143,9 +148,7 @@ footer .links { .illustrations-footer { display: initial; position: absolute; - left: -240px; - top: 632px; - height: 584px; - overflow: hidden; + bottom: 0; + height: 500px !important; } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index de82188..b03db32 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -5,7 +5,7 @@ import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react"; import Links from "@/components/Links/Links"; import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg"; -import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg"; +import { ReactComponent as Ruler } from "@/assets/ruler.svg"; import { useMediaQuery } from "@/hooks"; import { selectionEntryAtom } from "@/state"; import "./Footer.css"; @@ -122,11 +122,11 @@ const Footer = (_: FooterProps) => { {" "} by Mikhail Sharanda.

-
- + +
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index da14287..8ac3526 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,18 +9,6 @@ import Banner from "@/components/Banner"; import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg"; import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg"; import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg"; -import { ReactComponent as Tablet } from "@/assets/tablet.svg"; -import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg"; -import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg"; -import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg"; -import { ReactComponent as Warning } from "@/assets/warning.svg"; -import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg"; -import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg"; -import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg"; -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"; diff --git a/src/components/Recipes/Recipe.tsx b/src/components/Recipes/Recipe.tsx index 75cb198..e375b3c 100644 --- a/src/components/Recipes/Recipe.tsx +++ b/src/components/Recipes/Recipe.tsx @@ -6,7 +6,7 @@ export type RecipeProps = { Example: () => JSX.Element; }; -const Recipe = ({ title, url, Example }: RecipeProps) => { +const Recipe = ({ url, Example }: RecipeProps) => { return ( {/*

{title}

*/} diff --git a/src/components/Recipes/items/HandDrawn.tsx b/src/components/Recipes/items/HandDrawn.tsx new file mode 100644 index 0000000..879c324 --- /dev/null +++ b/src/components/Recipes/items/HandDrawn.tsx @@ -0,0 +1,50 @@ +import { CassetteTape, Cube, Virus, ThumbsUp } from "@phosphor-icons/react"; + +import { RecipeProps } from "../Recipe"; + +const animation: RecipeProps = { + title: "Hand Drawn", + url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css", + Example() { + return ( +
+ + + + + + + + + + + +
+ ); + }, +}; + +export default animation; diff --git a/src/components/Recipes/items/index.ts b/src/components/Recipes/items/index.ts index d0986f4..4af0c09 100644 --- a/src/components/Recipes/items/index.ts +++ b/src/components/Recipes/items/index.ts @@ -1,8 +1,9 @@ import animation from "./Animation"; import duocolor from "./Duocolor"; import gradient from "./Gradient"; +import handdrawn from "./HandDrawn"; import { RecipeProps } from "../Recipe"; -const items: RecipeProps[] = [duocolor, animation, gradient]; +const items: RecipeProps[] = [duocolor, handdrawn, animation, gradient]; export default items;