diff --git a/src/components/Faq.css b/src/components/Faq.css index 5694b45..df2aba5 100644 --- a/src/components/Faq.css +++ b/src/components/Faq.css @@ -1,8 +1,6 @@ .faq { letter-spacing: 1.09px; width: 100%; - padding-top: 4rem; - max-width: 40rem; } @media (min-width: 640px) { @@ -25,5 +23,4 @@ .faq h2 { font-family: Wavehaus-Extra; - padding-bottom: 1rem; } diff --git a/src/index.css b/src/index.css index cdd05fa..a745175 100644 --- a/src/index.css +++ b/src/index.css @@ -24,24 +24,27 @@ --tablet: 800px; --desktop: 1200px; - font-size: 0.75rem; + font-size: 0.8rem; +} + +body { + max-width: 42rem; + margin: 2rem auto; } @media (min-width: 640px) { :root { - font-size: 0.85rem; + font-size: 0.9rem; } } - @media (min-width: 800px) { :root { - font-size: 1.1rem; + font-size: 1rem; } } - @media (min-width: 1200px) { :root { - font-size: 1.25rem; + font-size: 1.1rem; } } @@ -67,17 +70,22 @@ input[type="number"] { margin: 1rem 0; padding: 1rem 2rem; border-radius: 0.5rem; - font-size: 1rem; font-family: Wavehaus-Extra; color: var(--ardrive-red); } h1 { font-family: Wavehaus-Extra; - font-size: 2.15rem; - margin: 3rem 2rem 0rem 2rem; } p { text-align: left; + margin: 0.3rem 0rem; +} + +button, +input, +select, +textarea { + font-size: inherit; } diff --git a/src/pages/GiftPage.css b/src/pages/GiftPage.css index 7a27b52..850958e 100644 --- a/src/pages/GiftPage.css +++ b/src/pages/GiftPage.css @@ -19,7 +19,6 @@ padding: 0.5rem 1rem; border: 1px solid var(--off-gray); border-radius: 0.5rem; - font-size: 1.2rem; font-family: Wavehaus-Semi; background-color: var(--dark-gray); color: var(--white); @@ -58,14 +57,12 @@ #dollar-sign { font-family: Wavehaus-Semi; - font-size: 1.2rem; padding: 0.5rem 1rem; border: none; } #usd-input { font-family: Wavehaus-Semi; - font-size: 1.2rem; width: 100%; margin: 0.5rem 0.5rem; border: none; @@ -83,12 +80,27 @@ #conversions { margin: 2rem 0 2rem 0; font-family: Wavehaus-Semi; - font-size: 1.5rem; + font-size: 1.25rem; +} + +@media (min-width: 640px) { + #conversions { + font-size: 1.4rem; + } +} +@media (min-width: 800px) { + #conversions { + font-size: 1.6rem; + } +} +@media (min-width: 1200px) { + #conversions { + font-size: 1.75rem; + } } .conversion-amount { font-family: Wavehaus-Semi; - font-size: 1.75rem; margin: 0.25rem; } @@ -101,7 +113,6 @@ display: flex; margin: 1rem 0; - font-size: 1rem; font-family: Wavehaus-Semi; } @@ -158,3 +169,7 @@ input[type="checkbox"]:hover { border-color: var(--black); } } + +#recipient-email { + margin-bottom: 0.5rem; +} diff --git a/src/pages/GiftPage.tsx b/src/pages/GiftPage.tsx index 5530f37..2764ba5 100644 --- a/src/pages/GiftPage.tsx +++ b/src/pages/GiftPage.tsx @@ -111,9 +111,9 @@ function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) { return ( <> +
{GiftPageContent.headerParagraph}