From a4ebbbd325223760d3810c8a3601a1b762bc9d5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Comeau?= Date: Tue, 20 Jun 2023 10:46:33 -0300 Subject: [PATCH] [frontend] refactor responsive headings --- .../AccessibilityGraphContainer.tsx | 4 +- frontend/src/components/LearnPageLayout.tsx | 8 +- frontend/src/pages/checklist/[filters].tsx | 2 +- frontend/src/pages/home.tsx | 26 +--- .../src/pages/learn/case-studies/bonnie.tsx | 18 +-- .../src/pages/learn/case-studies/fred.tsx | 14 +- .../src/pages/learn/case-studies/keith.tsx | 66 ++++---- ...ing-when-to-start-your-public-pensions.tsx | 16 +- .../learn/going-from-work-to-retirement.tsx | 24 +-- frontend/src/pages/learn/index.tsx | 10 +- .../main-sources-of-retirement-income.tsx | 70 ++++----- .../learn/planning-to-save-for-retirement.tsx | 10 +- .../rules-of-thumb-for-public-pensions.tsx | 18 +-- frontend/src/pages/quiz.tsx | 10 +- frontend/src/styles/globals.css | 147 ++++++++++++++++-- 15 files changed, 276 insertions(+), 167 deletions(-) diff --git a/frontend/src/components/AccessibilityGraphContainer.tsx b/frontend/src/components/AccessibilityGraphContainer.tsx index 53da1065..1b7d81e1 100644 --- a/frontend/src/components/AccessibilityGraphContainer.tsx +++ b/frontend/src/components/AccessibilityGraphContainer.tsx @@ -27,9 +27,9 @@ const AccessibilityGraphContainer: FC = ({
{buttonLabel}
-

{descriptionHeading}

+

{descriptionHeading}

{description}

-

{valuesHeading}

+

{valuesHeading}

diff --git a/frontend/src/components/LearnPageLayout.tsx b/frontend/src/components/LearnPageLayout.tsx index 7e914a29..72c9c7fb 100644 --- a/frontend/src/components/LearnPageLayout.tsx +++ b/frontend/src/components/LearnPageLayout.tsx @@ -15,17 +15,15 @@ export interface LearnPageLayoutProps { export const LearnPageLayout: FC = ({ children, header, breadcrumbItems }) => { const tableOfContentsData = useTableOfContentsData() return ( - -

+ +

{header}

{!tableOfContentsData.loading && }
-
+
{!tableOfContentsData.loading && }
diff --git a/frontend/src/pages/checklist/[filters].tsx b/frontend/src/pages/checklist/[filters].tsx index b1753b65..014aa434 100644 --- a/frontend/src/pages/checklist/[filters].tsx +++ b/frontend/src/pages/checklist/[filters].tsx @@ -149,7 +149,7 @@ const ChecklistResults: FC = ({ >
-

{t('header')}

+

{t('header')}
diff --git a/frontend/src/pages/home.tsx b/frontend/src/pages/home.tsx index 2c74d3e4..a82d2670 100644 --- a/frontend/src/pages/home.tsx +++ b/frontend/src/pages/home.tsx @@ -84,9 +84,7 @@ const Home: FC = () => { -

- {t('banner.title')} -

+

{t('banner.title')}

{t('banner.text')}

 @@ -182,21 +180,19 @@ const Home: FC = () => {
-

- {t('tabs.learn.heading')} -

+

{t('tabs.learn.heading')}

{t('tabs.learn.description.options-and-tips')}

{t('tabs.learn.description.stories')}

-
-

+

{t('tabs.learn.linksTitle')}

@@ -252,9 +248,7 @@ const Home: FC = () => {
-

- {t('tabs.plan.heading')} -

+

{t('tabs.plan.heading')}

{t('tabs.plan.description')}

@@ -265,7 +259,7 @@ const Home: FC = () => {
-

+

{t('tabs.plan.linksTitle')}

@@ -314,9 +308,7 @@ const Home: FC = () => {
-

- {t('tabs.apply.heading')} -

+

{t('tabs.apply.heading')}

{t('tabs.apply.description.text')}

@@ -357,9 +349,7 @@ const Home: FC = () => {
-

- {t('tabs.manage.heading')} -

+

{t('tabs.manage.heading')}

{t('tabs.manage.description.text')}

    diff --git a/frontend/src/pages/learn/case-studies/bonnie.tsx b/frontend/src/pages/learn/case-studies/bonnie.tsx index cb674fb9..05a0aad5 100644 --- a/frontend/src/pages/learn/case-studies/bonnie.tsx +++ b/frontend/src/pages/learn/case-studies/bonnie.tsx @@ -72,7 +72,7 @@ const Bonnie: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -111,7 +111,7 @@ const Bonnie: FC = () => { /> -

    +

    {t('overview.heading')}

    {t('overview.p1')}

    @@ -128,7 +128,7 @@ const Bonnie: FC = () => { /> -

    +

    {t('stopping-earnings.heading')}

    { valuesHeading={t('values-heading')} /> -

    +

    {t('adding-oas.heading')}

    @@ -186,7 +186,7 @@ const Bonnie: FC = () => { valuesHeading={t('values-heading')} /> -

    +

    {t('cpp.heading')}

    {t('cpp.p1')}

    @@ -210,7 +210,7 @@ const Bonnie: FC = () => { />

    {t('cpp.p3')}

    -

    +

    {t('own-savings.heading')}

    @@ -238,7 +238,7 @@ const Bonnie: FC = () => { valuesHeading={t('values-heading')} /> -

    +

    {t('early-pension.heading')}

    {t('early-pension.p1')}

    @@ -265,7 +265,7 @@ const Bonnie: FC = () => { valuesHeading={t('values-heading')} /> -

    +

    {t('conclusion.heading')}

    @@ -281,7 +281,7 @@ const Bonnie: FC = () => { -

    {t('learn-more.header')}

    +

    {t('learn-more.header')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/case-studies/fred.tsx b/frontend/src/pages/learn/case-studies/fred.tsx index fbf7958b..e8aee3c4 100644 --- a/frontend/src/pages/learn/case-studies/fred.tsx +++ b/frontend/src/pages/learn/case-studies/fred.tsx @@ -72,7 +72,7 @@ const Fred: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -115,7 +115,7 @@ const Fred: FC = () => { /> -

    +

    {t('overview.heading')}

    {t('overview.p1')}

    @@ -143,7 +143,7 @@ const Fred: FC = () => {

    {t('overview.p4')}

    {t('overview.p5')}

    -

    +

    {t('monthly-amounts.heading')}

    @@ -165,7 +165,7 @@ const Fred: FC = () => { />

    -

    +

    {t('cpp.heading')}

    {

    {t('cpp.p2')}

    {t('cpp.p3')}

    -

    +

    {t('oas.heading')}

    {

    {t('oas.p1')}

    {t('oas.p2')}

    -

    +

    {t('conclusion.heading')}

    {t('conclusion.p')}

    @@ -268,7 +268,7 @@ const Fred: FC = () => { -

    {t('learn-more.header')}

    +

    {t('learn-more.header')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/case-studies/keith.tsx b/frontend/src/pages/learn/case-studies/keith.tsx index 4e10cd72..d8e61980 100644 --- a/frontend/src/pages/learn/case-studies/keith.tsx +++ b/frontend/src/pages/learn/case-studies/keith.tsx @@ -67,7 +67,7 @@ const Keith: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -110,12 +110,12 @@ const Keith: FC = () => { /> -

    +

    {t('overview.heading')}

    {t('overview.p1')}

    -

    +

    {t('cpp-oas.heading')}

    {t('cpp-oas.p1')}

    @@ -127,7 +127,7 @@ const Keith: FC = () => { />

    -

    +

    {t('cpp.prb.heading')}

    @@ -138,7 +138,7 @@ const Keith: FC = () => { />

    -

    +

    {t('cpp.prb-choices.heading')}

    @@ -154,7 +154,7 @@ const Keith: FC = () => {

    -

    +

    {t('cpp.cpp-choices.heading')}

    { height={519} className="w-full" /> -
    -

    {t('cpp.cpp-choices.choices.li1')}

    -

    {t('cpp.cpp-choices.choices.li2')}

    -

    {t('cpp.cpp-choices.choices.li3')}

    -

    {t('cpp.cpp-choices.choices.li4')}

    +
    +

    {t('cpp.cpp-choices.choices.li1')}

    +

    {t('cpp.cpp-choices.choices.li2')}

    +

    {t('cpp.cpp-choices.choices.li3')}

    +

    {t('cpp.cpp-choices.choices.li4')}

    {

    {t('cpp.cpp-choices.p1')}

    {t('cpp.cpp-choices.p2')}

    -

    +

    {t('cpp.what-else.heading')}

    {t('cpp.what-else.p1')}

    @@ -206,7 +210,7 @@ const Keith: FC = () => { /> -

    +

    {t('cpp.keith-pension-87.heading')}

    {t('cpp.keith-pension-87.p1')}

    @@ -223,11 +227,15 @@ const Keith: FC = () => { height={519} className="w-full" /> -
    -

    {t('cpp.keith-pension-87.choices.li1')}

    -

    {t('cpp.keith-pension-87.choices.li2')}

    -

    {t('cpp.keith-pension-87.choices.li3')}

    -

    {t('cpp.keith-pension-87.choices.li4')}

    +
    +

    {t('cpp.keith-pension-87.choices.li1')}

    +

    {t('cpp.keith-pension-87.choices.li2')}

    +

    {t('cpp.keith-pension-87.choices.li3')}

    +

    {t('cpp.keith-pension-87.choices.li4')}

    { />

    {t('cpp.keith-pension-87.p2')}

    -

    +

    {t('cpp.keith-pension-90.heading')}

    {t('cpp.keith-pension-90.p1')}

    @@ -253,11 +261,15 @@ const Keith: FC = () => { height={519} className="w-full" /> -
    -

    {t('cpp.keith-pension-90.choices.li1')}

    -

    {t('cpp.keith-pension-90.choices.li2')}

    -

    {t('cpp.keith-pension-90.choices.li3')}

    -

    {t('cpp.keith-pension-90.choices.li4')}

    +
    +

    {t('cpp.keith-pension-90.choices.li1')}

    +

    {t('cpp.keith-pension-90.choices.li2')}

    +

    {t('cpp.keith-pension-90.choices.li3')}

    +

    {t('cpp.keith-pension-90.choices.li4')}

    { />

    {t('cpp.keith-pension-90.p4')}

    -

    +

    {t('oas.heading')}

    @@ -298,7 +310,7 @@ const Keith: FC = () => { />

    -

    +

    {t('conclusion.heading')}

    {t('conclusion.p1')}

    @@ -308,7 +320,7 @@ const Keith: FC = () => { -

    {t('learn-more.header')}

    +

    {t('learn-more.header')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/deciding-when-to-start-your-public-pensions.tsx b/frontend/src/pages/learn/deciding-when-to-start-your-public-pensions.tsx index 2065ee44..2b51dacc 100644 --- a/frontend/src/pages/learn/deciding-when-to-start-your-public-pensions.tsx +++ b/frontend/src/pages/learn/deciding-when-to-start-your-public-pensions.tsx @@ -72,7 +72,7 @@ const DecidingWhenToCollectPublicPensions: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -118,7 +118,7 @@ const DecidingWhenToCollectPublicPensions: FC = () => { ))} -

    +

    {t('overview.heading')}

    {t('overview.p1')}

    @@ -132,13 +132,13 @@ const DecidingWhenToCollectPublicPensions: FC = () => {

    {t('overview.p3')}

    {t('overview.p4')}

    -

    +

    {t('old-age-security.heading')}

    {t('old-age-security.content-one')}

    {t('old-age-security.content-two')}

    -

    {t('old-age-security.table-one.title')}

    +

    {t('old-age-security.table-one.title')}

    @@ -219,10 +219,10 @@ const DecidingWhenToCollectPublicPensions: FC = () => { valuesHeading={t('values-heading')} /> -

    {t('old-age-security.we-pay.heading')}

    +

    {t('old-age-security.we-pay.heading')}

    {t('old-age-security.we-pay.p')}

    -

    {t('old-age-security.high-income.heading')}

    +

    {t('old-age-security.high-income.heading')}

    { />

    -

    +

    {t('cpp-pension.heading')}

    @@ -274,7 +274,7 @@ const DecidingWhenToCollectPublicPensions: FC = () => { -

    {t('learn-more.header')}

    +

    {t('learn-more.header')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/going-from-work-to-retirement.tsx b/frontend/src/pages/learn/going-from-work-to-retirement.tsx index 1933d7a3..01410823 100644 --- a/frontend/src/pages/learn/going-from-work-to-retirement.tsx +++ b/frontend/src/pages/learn/going-from-work-to-retirement.tsx @@ -61,7 +61,7 @@ const GoingFromWorkToRetirement: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -104,7 +104,7 @@ const GoingFromWorkToRetirement: FC = () => { /> -

    +

    {t('overview.heading')}

    {t('overview.p1')}

    @@ -115,30 +115,30 @@ const GoingFromWorkToRetirement: FC = () => {

    {t('overview.p2')}

    -

    +

    {t('phased-retirement.heading')}

    -

    {t('phased-retirement.transition')}

    +

    {t('phased-retirement.transition')}

    {t('phased-retirement.p1')}

    {t('phased-retirement.p2')}

    -

    +

    {t('second-career.heading')}

    -

    {t('second-career.new-beginning')}

    +

    {t('second-career.new-beginning')}

    {t('second-career.p1')}

    -

    +

    {t('full-retirement.heading')}

    -

    {t('full-retirement.hanging-you-hat')}

    +

    {t('full-retirement.hanging-you-hat')}

    {t('full-retirement.p1')}

    -

    +

    {t('combine-income.heading')}

    {t('combine-income.p1')}

    -

    {t('combine-income.option-1.heading')}

    +

    {t('combine-income.option-1.heading')}

    {t('combine-income.option-1.p1')}

    {t('combine-income.option-1.p2')}

    {t('combine-income.option-1.p3')}

    @@ -172,7 +172,7 @@ const GoingFromWorkToRetirement: FC = () => { />

    -

    {t('combine-income.option-2.heading')}

    +

    {t('combine-income.option-2.heading')}

    {t('combine-income.option-2.p1')}

    {t('combine-income.option-2.p2')}

    @@ -198,7 +198,7 @@ const GoingFromWorkToRetirement: FC = () => { -

    {t('learn-more.header')}

    +

    {t('learn-more.header')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/index.tsx b/frontend/src/pages/learn/index.tsx index 75f7e3e8..db5b80e5 100644 --- a/frontend/src/pages/learn/index.tsx +++ b/frontend/src/pages/learn/index.tsx @@ -49,7 +49,7 @@ const LearnCard: FC = ({ desciption, href, id, imageSrc, minRead

    {t('min-read', { minRead })}

    -

    +

    {title}

    {desciption}

    @@ -70,7 +70,7 @@ const LearnSection: FC = ({ cards, desciption, id, title }) = const uniqueId = useId() return (
    -

    {title}

    +

    {title}

    {desciption}

    {cards.map((cardProps) => ( @@ -188,11 +188,9 @@ const Learn: FC = () => { ]} > -

    - {t('banner.title')} -

    +

    {t('banner.title')}

    {t('banner.text')}

    -     diff --git a/frontend/src/pages/learn/main-sources-of-retirement-income.tsx b/frontend/src/pages/learn/main-sources-of-retirement-income.tsx index 87bf59b3..f87a2963 100644 --- a/frontend/src/pages/learn/main-sources-of-retirement-income.tsx +++ b/frontend/src/pages/learn/main-sources-of-retirement-income.tsx @@ -72,7 +72,7 @@ const MainSourcesOfRetirementIncome: FC = () => { }, ]} > -

    +

    {t('key-takeaways.header')}

    @@ -108,7 +108,7 @@ const MainSourcesOfRetirementIncome: FC = () => { ))} -

    +

    {t('overview.header')}

    {t('overview.overview')}

    @@ -128,46 +128,44 @@ const MainSourcesOfRetirementIncome: FC = () => { />

    -

    +

    {t('overview.canada-retirement-income-system.header')}

    -

    +

    {t('overview.canada-retirement-income-system.three-pillar-system')} -

    +
    -
    -

    +
    +
    {t('overview.canada-retirement-income-system.public')} -
    +

    -
    +
    {t('overview.canada-retirement-income-system.oas.pillar')} -
    +

    {t('overview.canada-retirement-income-system.oas.header')}

    {t('overview.canada-retirement-income-system.oas.content')}

    -
    +
    {t('overview.canada-retirement-income-system.cpp-qpp.pillar')} -
    +

    {t('overview.canada-retirement-income-system.cpp-qpp.header')}

    {t('overview.canada-retirement-income-system.cpp-qpp.content')}

    -
    -
    -

    - {t('overview.canada-retirement-income-system.private')} -

    +
    +
    +
    {t('overview.canada-retirement-income-system.private')}
    -
    +
    {t('overview.canada-retirement-income-system.workplace.pillar')} -
    +

    {t('overview.canada-retirement-income-system.workplace.header')}

    {t('overview.canada-retirement-income-system.workplace.content')}

    - +

    { -

    +

    {t('old-age-security-program.header')}

    -

    {t('old-age-security-program.qualify.header')}

    +

    {t('old-age-security-program.qualify.header')}

    {t('old-age-security-program.qualify.most-people')}

    { />

    -

    {t('old-age-security-program.how-much.header')}

    +

    {t('old-age-security-program.how-much.header')}

    {t('old-age-security-program.how-much.eligible')}

    {t('old-age-security-program.how-much.smaller')}

    @@ -221,7 +219,7 @@ const MainSourcesOfRetirementIncome: FC = () => { />

    -

    {t('old-age-security-program.helpful-resources.header')}

    +

    {t('old-age-security-program.helpful-resources.header')}

      {[ { @@ -243,7 +241,7 @@ const MainSourcesOfRetirementIncome: FC = () => { ))}
    -

    +

    {t('guaranteed-income-supplement.header')}

    {t('guaranteed-income-supplement.overview')}

    @@ -264,7 +262,7 @@ const MainSourcesOfRetirementIncome: FC = () => {

    {t('guaranteed-income-supplement.monthly')}

    {t('guaranteed-income-supplement.collecting')}

    -

    {t('guaranteed-income-supplement.helpful-resources.header')}

    +

    {t('guaranteed-income-supplement.helpful-resources.header')}

      {[ { @@ -282,12 +280,12 @@ const MainSourcesOfRetirementIncome: FC = () => { ))}
    -

    +

    {t('canada-pension-plan-program.header')}

    {t('canada-pension-plan-program.overview')}

    -

    {t('canada-pension-plan-program.qualify.header')}

    +

    {t('canada-pension-plan-program.qualify.header')}

    {t('canada-pension-plan-program.qualify.worked-in-canada')}

    { />

    -

    {t('canada-pension-plan-program.how-much.header')}

    +

    {t('canada-pension-plan-program.how-much.header')}

    {t('canada-pension-plan-program.how-much.amount')}

    {t('canada-pension-plan-program.how-much.inflation')}

    @@ -310,7 +308,7 @@ const MainSourcesOfRetirementIncome: FC = () => { />

    -

    {t('canada-pension-plan-program.helpful-resources.header')}

    +

    {t('canada-pension-plan-program.helpful-resources.header')}

      {[ { @@ -332,7 +330,7 @@ const MainSourcesOfRetirementIncome: FC = () => { ))}
    -

    {t('canada-pension-plan-program.cpp-post-retirement-benefit.header')}

    +

    {t('canada-pension-plan-program.cpp-post-retirement-benefit.header')}

    {t('canada-pension-plan-program.cpp-post-retirement-benefit.overview')}

    {t('canada-pension-plan-program.cpp-post-retirement-benefit.adjustments')}

    { />

    -

    +

    {t('canada-pension-plan-program.cpp-post-retirement-benefit.helpful-resources.header')}

      @@ -415,7 +413,7 @@ const MainSourcesOfRetirementIncome: FC = () => { ))}
    -

    +

    {t('ongoing-earnings-from-your-job.header')}

    {t('ongoing-earnings-from-your-job.overview')}

    @@ -429,7 +427,7 @@ const MainSourcesOfRetirementIncome: FC = () => { />

    -

    +

    {t('workplace-pension-plans.header')}

    {t('workplace-pension-plans.overview')}

    @@ -440,7 +438,7 @@ const MainSourcesOfRetirementIncome: FC = () => {
  • {t('workplace-pension-plans.list.prpp')}
    • -

    +

    {t('personal-retirement-savings.header')}

    @@ -477,7 +475,7 @@ const MainSourcesOfRetirementIncome: FC = () => { -

    {t('learn-more.header')}

    +

    {t('learn-more.header')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/planning-to-save-for-retirement.tsx b/frontend/src/pages/learn/planning-to-save-for-retirement.tsx index 3a1fd5c9..b4280996 100644 --- a/frontend/src/pages/learn/planning-to-save-for-retirement.tsx +++ b/frontend/src/pages/learn/planning-to-save-for-retirement.tsx @@ -61,7 +61,7 @@ const PlanningToSaveForRetirement: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -86,12 +86,12 @@ const PlanningToSaveForRetirement: FC = () => { ))} -

    +

    {t('overview.heading')}

    {t('overview.p')}

    -

    +

    {t('how-much.heading')}

    @@ -124,7 +124,7 @@ const PlanningToSaveForRetirement: FC = () => { />

    -

    +

    {t('changes-with-age.heading')}

    {t('changes-with-age.p1')}

    @@ -133,7 +133,7 @@ const PlanningToSaveForRetirement: FC = () => { -

    {t('learn-more.heading')}

    +

    {t('learn-more.heading')}

    {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/learn/rules-of-thumb-for-public-pensions.tsx b/frontend/src/pages/learn/rules-of-thumb-for-public-pensions.tsx index 769a2bea..9282574d 100644 --- a/frontend/src/pages/learn/rules-of-thumb-for-public-pensions.tsx +++ b/frontend/src/pages/learn/rules-of-thumb-for-public-pensions.tsx @@ -61,7 +61,7 @@ const RulesOfThumbForPublicPensions: FC = () => { }, ]} > -

    +

    {t('key-takeaways.heading')}

    @@ -102,7 +102,7 @@ const RulesOfThumbForPublicPensions: FC = () => { ))} -

    +

    {t('overview.heading')}

    @@ -119,12 +119,12 @@ const RulesOfThumbForPublicPensions: FC = () => {

    {t('overview.p2')}

    {t('overview.p3')}

    -

    +

    {t('cpp.heading')}

    {t('cpp.p1')}

    {t('cpp.p2')}

    -

    {t('cpp.sub-heading-one')}

    +

    {t('cpp.sub-heading-one')}

    • { -

      {t('cpp.sub-heading-two')}

      +

      {t('cpp.sub-heading-two')}

      • {t('cpp.li9')}
      • {t('cpp.li10')}
        • @@ -156,11 +156,11 @@ const RulesOfThumbForPublicPensions: FC = () => {
      • {t('cpp.li16')}
      -

      +

      {t('oas.heading')}

      {t('oas.p1')}

      -

      {t('oas.sub-heading-one')}

      +

      {t('oas.sub-heading-one')}

      • { />

        -

        {t('oas.sub-heading-two')}

        +

        {t('oas.sub-heading-two')}

        • {t('oas.li4')}
        • {t('oas.li5')}
          • @@ -196,7 +196,7 @@ const RulesOfThumbForPublicPensions: FC = () => { -

          {t('learn-more.header')}

          +

          {t('learn-more.header')}

          {learnMoreLinks.map(({ href, primary, secondary }) => ( diff --git a/frontend/src/pages/quiz.tsx b/frontend/src/pages/quiz.tsx index 58b972b9..53d766ff 100644 --- a/frontend/src/pages/quiz.tsx +++ b/frontend/src/pages/quiz.tsx @@ -41,18 +41,18 @@ const Quiz: FC = () => { hideFooter="print" hideHeader="print" > -

          +

          {t('landing.header')}

          -

          +

          {t('landing.p1')}

          {t('landing.p2')}

          -

          +

          {t('landing.whatyouneed')}

          {t('landing.p3')}

          -
            +
              • @@ -66,7 +66,7 @@ const Quiz: FC = () => {
            -

            +

            {t('landing.timetocomplete')}

            diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index 4829cc6e..4433d299 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -98,43 +98,156 @@ video { Senior Journey - Custom css */ -.h6 { +.h1 { @apply font-bold; @apply font-display; - @apply text-xl; + @apply text-4xl; } -.h5 { +.h2 { @apply font-display; - @apply font-light; + @apply font-medium; @apply text-2xl; } -.h4 { - @apply font-bold; - @apply font-display; +.h2-gutter, +.h2-gutter-bottom { + @apply mb-6; +} + +.h2-gutter, +.h2-gutter-top { + @apply mt-8; } .h3 { + @apply font-display; @apply font-light; + @apply text-xl; +} + +.h3-gutter, +.h3-gutter-bottom { + @apply mb-6; +} + +.h3-gutter, +.h3-gutter-top { + @apply mt-6; +} + +.h4 { + @apply font-bold; @apply font-display; - @apply text-2xl; - @apply my-4; + @apply text-lg; } -.h2 { - @apply font-medium; +.h5 { @apply font-display; - @apply text-4xl; - @apply mt-12; - @apply mb-8; + @apply font-light; + @apply text-lg; } -.h1 { +.h6 { @apply font-bold; @apply font-display; - @apply text-4xl; - @apply mb-8; + @apply text-base; +} + +@media screen(md) { + .h1 { + @apply font-bold; + @apply font-display; + @apply text-5xl; + } + + .h2 { + @apply font-display; + @apply font-medium; + @apply text-3xl; + } + + .h2-gutter, + .h2-gutter-bottom { + @apply mb-8; + } + + .h2-gutter, + .h2-gutter-top { + @apply mt-12; + } + + .h3 { + @apply font-display; + @apply font-light; + @apply text-2xl; + } + + .h3-gutter, + .h3-gutter-bottom { + @apply mb-8; + } + + .h3-gutter, + .h3-gutter-top { + @apply mt-8; + } + + .h4 { + @apply font-bold; + @apply font-display; + @apply text-xl; + } + + .h5 { + @apply font-display; + @apply font-light; + @apply text-lg; + } + + .h6 { + @apply font-bold; + @apply font-display; + @apply text-base; + } +} + +@media screen(lg) { + .h1 { + @apply font-bold; + @apply font-display; + @apply text-6xl; + } + + .h2 { + @apply font-display; + @apply font-medium; + @apply text-4xl; + } + + .h3 { + @apply font-display; + @apply font-light; + @apply text-3xl; + } + + .h4 { + @apply font-bold; + @apply font-display; + @apply text-2xl; + } + + .h5 { + @apply font-display; + @apply font-light; + @apply text-xl; + } + + .h6 { + @apply font-bold; + @apply font-display; + @apply text-lg; + } } p {