diff --git a/src/assets/billiard-ball-spec.svg b/src/assets/billiard-ball-spec.svg index fb8cfdd..4d38f5e 100644 --- a/src/assets/billiard-ball-spec.svg +++ b/src/assets/billiard-ball-spec.svg @@ -1,18 +1,14 @@ - - - billiard-ball-spec - - - - - - - - - - - - - + + + + + + - \ No newline at end of file + + + + + + + diff --git a/src/assets/billiard-ball.svg b/src/assets/billiard-ball.svg index 609c8e8..90995db 100644 --- a/src/assets/billiard-ball.svg +++ b/src/assets/billiard-ball.svg @@ -1,25 +1,19 @@ - - - billiard-ball - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - \ No newline at end of file + + diff --git a/src/assets/calculator-spec.svg b/src/assets/calculator-spec.svg index 8d04bde..2cc2bcf 100644 --- a/src/assets/calculator-spec.svg +++ b/src/assets/calculator-spec.svg @@ -1,223 +1,212 @@ - - - calculator-spec - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/calculator.svg b/src/assets/calculator.svg index b439d48..c584c32 100644 --- a/src/assets/calculator.svg +++ b/src/assets/calculator.svg @@ -1,553 +1,457 @@ - - - calculator - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/command-key-spec.svg b/src/assets/command-key-spec.svg index 3cd16fc..5946deb 100644 --- a/src/assets/command-key-spec.svg +++ b/src/assets/command-key-spec.svg @@ -1,18 +1,12 @@ - - - command-key-spec - - - - - - - - - - - - - + + + + + + + + + - \ No newline at end of file + + diff --git a/src/assets/command-key.svg b/src/assets/command-key.svg index 0d53716..ccad301 100644 --- a/src/assets/command-key.svg +++ b/src/assets/command-key.svg @@ -1,14 +1,8 @@ - - - command-key - - - - - - - - - - - \ No newline at end of file + + + + + + + + diff --git a/src/assets/cutting-mat-spec.svg b/src/assets/cutting-mat-spec.svg index 63ce2fe..43a3741 100644 --- a/src/assets/cutting-mat-spec.svg +++ b/src/assets/cutting-mat-spec.svg @@ -1,27 +1,21 @@ - - - cutting-mat-spec - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - \ No newline at end of file + + + + + + + + diff --git a/src/assets/cutting-mat.svg b/src/assets/cutting-mat.svg index f2fec9a..f7bf4cf 100644 --- a/src/assets/cutting-mat.svg +++ b/src/assets/cutting-mat.svg @@ -1,24 +1,20 @@ - - - cutting-mat - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - \ No newline at end of file + + + diff --git a/src/assets/footer-mobile.svg b/src/assets/footer-mobile.svg new file mode 100644 index 0000000..f04f994 --- /dev/null +++ b/src/assets/footer-mobile.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg index 3bf1ad6..719b1af 100644 --- a/src/assets/marker-green.svg +++ b/src/assets/marker-green.svg @@ -1,22 +1,17 @@ - - - marker-green - - - - - - - - - - - - - - - - - + + + + + + + + + - \ No newline at end of file + + + + + + + diff --git a/src/assets/marker-purple.svg b/src/assets/marker-purple.svg index 8ac9479..1d795e2 100644 --- a/src/assets/marker-purple.svg +++ b/src/assets/marker-purple.svg @@ -1,22 +1,15 @@ - - - marker-purple - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - \ No newline at end of file + + diff --git a/src/assets/paperclips-footer.svg b/src/assets/paperclips-footer.svg new file mode 100644 index 0000000..6b6db87 --- /dev/null +++ b/src/assets/paperclips-footer.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/paperclips-header-mobile.svg b/src/assets/paperclips-header-mobile.svg new file mode 100644 index 0000000..49bbde0 --- /dev/null +++ b/src/assets/paperclips-header-mobile.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/paperclips-header.svg b/src/assets/paperclips-header.svg new file mode 100644 index 0000000..71e64dd --- /dev/null +++ b/src/assets/paperclips-header.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/post-it.svg b/src/assets/post-it.svg new file mode 100644 index 0000000..e5e1598 --- /dev/null +++ b/src/assets/post-it.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/receipt-spec.svg b/src/assets/receipt-spec.svg index 6bc85c1..0fa3da8 100644 --- a/src/assets/receipt-spec.svg +++ b/src/assets/receipt-spec.svg @@ -1,72 +1,67 @@ - - - receipt-spec - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file + + + diff --git a/src/assets/receipt.svg b/src/assets/receipt.svg index 3e5888a..2420186 100644 --- a/src/assets/receipt.svg +++ b/src/assets/receipt.svg @@ -1,51 +1,44 @@ - - - receipt - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file + + + + diff --git a/src/assets/tablet-spec.svg b/src/assets/tablet-spec.svg index 8adfa18..ee6b5c9 100644 --- a/src/assets/tablet-spec.svg +++ b/src/assets/tablet-spec.svg @@ -1,53 +1,35 @@ - - - tablet-spec - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/tablet.svg b/src/assets/tablet.svg index 9d72593..fbcfc13 100644 --- a/src/assets/tablet.svg +++ b/src/assets/tablet.svg @@ -1,36 +1,21 @@ - - - tablet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - \ No newline at end of file + + + + diff --git a/src/assets/warning-spec.svg b/src/assets/warning-spec.svg index 896015a..002f936 100644 --- a/src/assets/warning-spec.svg +++ b/src/assets/warning-spec.svg @@ -1,19 +1,13 @@ - - - warning-spec - - - - - - - - - - - - - - + + + + + + + + + + - \ No newline at end of file + + diff --git a/src/assets/warning.svg b/src/assets/warning.svg index a27a787..cc0d86b 100644 --- a/src/assets/warning.svg +++ b/src/assets/warning.svg @@ -1,14 +1,8 @@ - - - warning - - - - - - - - - - - \ No newline at end of file + + + + + + + + diff --git a/src/components/App/App.css b/src/components/App/App.css index c5d49cb..c677734 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -44,7 +44,6 @@ button { button.main-button { height: 64px; - margin: 16px 24px 0 0; padding: 0 48px 0 40px; background-color: white; border-radius: 8px; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 4e20dbe..ad589c5 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,33 +1,81 @@ header { width: 100%; - height: 1434px; background-color: #ffd171; overflow: hidden; } -header img { - user-select: none; +.header-contents { + position: relative; + width: 100%; + height: 100%; + max-width: 1366px; + min-width: 360px; + margin: auto; +} + +.illustrations-top { + position: relative; +} + +.illustrations-bottom { + position: relative; +} + +.intro { + margin: 0 8%; + max-width: 666px; +} + +.intro h2 { + font-size: 40px; + line-height: 52px; + margin: 0 0 32px; +} + +.inspectable { + cursor: cell; +} + +.xray { + opacity: 1; + transition: opacity 200ms ease; +} + +.xray:hover { + opacity: 0; +} + +.button-container { + display: flex; + flex-wrap: wrap; + gap: 24px; } .links { display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-start; - /* gap: 56px; */ - /* column-gap: 56px; */ - margin: 48px 0 32px; + flex-flow: column wrap; + align-content: flex-start; + align-items: flex-start; + justify-content: center; + column-gap: 72px; + margin: 56px 0 64px; + max-height: 144px; } -a.nav-link:not(:last-child) { - margin-right: 56px; +.links > div { + margin: 0 0 24px 0; + display: flex; + align-items: center; +} + +.links svg { + margin-right: 12px; } a.nav-link { text-decoration: none; position: relative; color: black; - margin-bottom: 16px; } a.nav-link:after { @@ -44,153 +92,155 @@ a.nav-link:hover:after { width: 100%; } -.inspectable { - cursor: cell; +#paperclips-three { + display: none; } -.xray { - opacity: 1; - transition: opacity 200ms ease; -} - -.xray:hover { - opacity: 0; -} - -.image-container { - position: relative; - width: 100%; - height: 100%; - margin: auto; -} - -.button-container { - display: flex; - flex-wrap: wrap; -} - -#cutting-mat { - position: absolute; - /* transform: translate(120px, 824px); */ -} - -#receipt { - position: absolute; - transform: translate(-138px, 190px); -} - -#calculator { - position: absolute; - transform: translate(800px, 112px); -} - -/* Illustrations remain at same layout up to 1024px */ -@media screen and (max-width: 1023px) { - .intro { - margin: 0 10%; - position: absolute; - transform: translate(0, 382px); - } - - .intro h2 { - font-size: 40px; - line-height: 52px; - margin-bottom: 32px; +@media screen and (max-width: 1239px) { + .illustrations-top { + height: 382px; } #marker-purple { position: absolute; - top: 0; - left: 0; - transform: translate(40px, -158px); + left: 28px; + top: -158px; } #billiard-ball { position: absolute; - top: 0; - left: 0; - transform: translate(130px, -98px); + left: 132px; + top: -98px; } #paperclips { position: absolute; - transform: translate(176px, 152px); + left: 110px; + top: 152px; } #warning { position: absolute; - top: 0; - left: 0; - transform: translate(398px, -116px); + left: 394px; + top: -304px; } #tablet { position: absolute; - transform: translate(672px, -900px); + left: 672px; + top: -900px; + } +} + +@media screen and (min-width: 720px) and (max-width: 1239px) { + .intro { + margin: 0 auto; + } + + .illustrations-bottom { + height: 612px; + } + + #cutting-mat { + position: absolute; + left: 96px; + } + + #receipt { + position: absolute; + left: -36px; + top: 190px; } #calculator { position: absolute; - transform: translate(534px, 240px); + left: 632px; + top: 170px; } } -@media screen and (min-width: 760px) and (max-width: 1023px) { - .intro h2 { - font-size: 40px; - line-height: 52px; - margin-bottom: 32px; - } -} - -@media screen and (min-width: 1024px) { - .image-container { - width: 1366px; - } - +@media screen and (min-width: 1240px) { .intro { - margin: 0; - width: 660px; - position: absolute; - transform: translate(144px, 386px); + margin: 0 auto 0 140px; } - .intro h2 { - font-size: 40px; - line-height: 50px; - margin-bottom: 32px; + .illustrations-top { + height: 386px; + } + + .illustrations-bottom { + height: 606px; } #marker-purple { position: absolute; - transform: translate(144px, -158px); - } - - #tablet { - position: absolute; - transform: translate(578px, -900px); + left: 144px; + top: -158px; } #billiard-ball { position: absolute; - transform: translate(918px, 360px); + left: 900px; + top: 400px; + } + + #paperclips { + display: none; + } + + #paperclips-three { + display: initial; + position: absolute; + left: 724px; + top: 694px; } #warning { position: absolute; - transform: translate(1184px, 424px); + left: 1170px; + top: 400px; } - #paperclips { + #tablet { position: absolute; - transform: translate(982px, 621px); + left: 578px; + top: -900px; + } + + #cutting-mat { + position: absolute; + left: 120px; + } + + #receipt { + position: absolute; + left: -16px; + top: 190px; + } + + #calculator { + position: absolute; + left: 924px; + top: 114px; } } -@media screen and (max-width: 759px) { +@media screen and (max-width: 719px) { .intro h2 { font-size: 28px; - line-height: 38px; - margin-bottom: 32px; + line-height: 40px; + } + + .illustrations-top { + height: 352px; + } + + .illustrations-bottom { + display: none; + } + + .links { + display: block; + max-height: initial; } } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 091c685..0a8aacf 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,9 +1,14 @@ import React from "react"; -import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react"; +import { + ArrowCircleUpRight, + ArrowCircleDown, + ArrowElbowDownRight, +} from "phosphor-react"; import "./Header.css"; import markerPurple from "../../assets/marker-purple.svg"; -import paperclips from "../../assets/paperclips.svg"; +import paperclips from "../../assets/paperclips-header-mobile.svg"; +import paperclipsThree from "../../assets/paperclips-header.svg"; import tablet from "../../assets/tablet.svg"; import tabletSpec from "../../assets/tablet-spec.svg"; import billiardBall from "../../assets/billiard-ball.svg"; @@ -34,9 +39,24 @@ const handleScrollToIcons = () => const Header: React.FC = () => { return (
-
- - +
+
+ + + + + + + + + + +

Phosphor is a flexible icon family for interfaces, presentations —  @@ -48,36 +68,67 @@ const Header: React.FC = () => { See the docs -

- - Download all - - - Request - - - Donate - - - Github - + + + + + +
+
+
= () => { alt="" />
- - - - - - -
);