diff --git a/projects/app/package.json b/projects/app/package.json index 6dba69f7..a80a80ab 100644 --- a/projects/app/package.json +++ b/projects/app/package.json @@ -80,8 +80,8 @@ "react-responsive": "^10.0.0", "replicache": "patch:replicache@patch%3Areplicache@npm%253A15.0.1%23~/.yarn/patches/replicache-npm-15.0.1-daaa5044ba.patch%3A%3Aversion=15.0.1&hash=c643a4#~/.yarn/patches/replicache-patch-1cf70e7f66.patch", "replicache-react": "^5.0.1", - "tailwind-variants": "^0.3.0", - "tailwindcss": "^3.4.14", + "tailwind-variants": "^0.3.1", + "tailwindcss": "^3.4.17", "usehooks-ts": "^3.1.0", "ws": "^8.17.1", "zod": "^3.23.8", diff --git a/projects/app/src/app/(sidenav)/learn/index.tsx b/projects/app/src/app/(sidenav)/learn/index.tsx index a96975f9..0f4bbe1b 100644 --- a/projects/app/src/app/(sidenav)/learn/index.tsx +++ b/projects/app/src/app/(sidenav)/learn/index.tsx @@ -92,7 +92,7 @@ export default function IndexPage() { - + {recentCharacters.data.length > 0 ? `Continue learning` : `Start learning`} @@ -154,7 +154,7 @@ export default function IndexPage() { - Connections + Connections Strengthen your understanding through this interactive game that challenges you to make the right connections! @@ -173,7 +173,7 @@ export default function IndexPage() { - Radicals + Radicals Radicals are the key to recognizing and understanding characters. Learn them with memorable stories to boost your reading and recall. @@ -192,7 +192,7 @@ export default function IndexPage() { - HSK1 + HSK1 Test your knowledge with interactive exercises designed to help you prepare for the HSK 1 exam with confidence. @@ -211,7 +211,7 @@ export default function IndexPage() { - History + History See your past studies, review characters and words, and reinforce your knowledge with spaced repetition. @@ -235,7 +235,3 @@ export default function IndexPage() { const boxClass = tv({ base: `max-w-[400px] w-full rounded-xl bg-primary-3 px-4 py-4 overflow-hidden`, }); - -const boxTitleClass = tv({ - base: `hhh-text-title mb-1`, -}); diff --git a/projects/app/src/global.css b/projects/app/src/global.css index 8ffa0d21..69a0ad80 100644 --- a/projects/app/src/global.css +++ b/projects/app/src/global.css @@ -8,46 +8,61 @@ TEXT STYLES */ - .hhh-text-base { - @apply font-karla leading-normal text-primary-12; - } - .hhh-text-button { - @apply hhh-text-base font-sans font-bold uppercase; + @apply font-sans font-bold uppercase text-primary-12; } .hhh-text-title { - @apply hhh-text-base text-2xl font-bold tracking-tight; + @apply font-karla text-2xl leading-normal tracking-tight text-primary-12; + } + /* + Karla on iOS font-bold looks like font-medium, so we have to bump it up to + 800, normally we could use the nativewind variants `native:` or `ios:`, but + using these causes tailwind to hang. + */ + /* web */ + @media (display-mode: browser) { + .hhh-text-title { + @apply font-bold; + } + } + + @media not (display-mode: browser) { + /* native */ + .hhh-text-title { + @apply font-[800]; + } } + /* end .hhh-text-title */ .hhh-text-body { - @apply hhh-text-base font-sans; + @apply font-sans text-primary-12; } .hhh-text-caption { - @apply hhh-text-base text-primary-11; + @apply font-karla text-sm leading-normal text-primary-11; } /* www */ .www-text-hero { - @apply hhh-text-base text-5xl font-bold leading-tight tracking-tighter transition-all md:text-6xl md:leading-tight; + @apply font-karla text-5xl font-bold leading-tight tracking-tighter text-primary-12 transition-all md:text-6xl md:leading-tight; } .www-text-title { - @apply hhh-text-base text-3xl font-bold tracking-tighter transition-all md:text-4xl; + @apply font-karla text-3xl font-bold leading-normal tracking-tighter text-primary-12 transition-all md:text-4xl md:leading-normal; } .www-text-subtitle { - @apply hhh-text-base text-base uppercase text-accent-10; + @apply font-karla text-base uppercase text-accent-10; } .www-text-body { - @apply hhh-text-base; + @apply font-karla text-primary-12; @apply text-[17px]/[24px]; } .www-text-button { - @apply hhh-text-base px-2 py-1 text-center font-sans text-base font-bold uppercase leading-normal; + @apply px-2 py-1 text-center font-sans text-base font-bold uppercase leading-normal text-primary-12; } .www-px-comfortable { @@ -55,11 +70,11 @@ } .www-text-footer-title { - @apply hhh-text-base text-[19px] font-medium leading-normal; + @apply font-karla text-[19px] font-medium leading-normal text-primary-12; } .www-text-footer-link { - @apply hhh-text-base text-[15px] font-medium leading-normal text-accent-10 antialiased; + @apply font-karla text-[15px] font-medium leading-normal text-primary-12 antialiased; } /* diff --git a/yarn.lock b/yarn.lock index c61ccce5..25749c7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2666,8 +2666,8 @@ __metadata: react-responsive: "npm:^10.0.0" replicache: "patch:replicache@patch%3Areplicache@npm%253A15.0.1%23~/.yarn/patches/replicache-npm-15.0.1-daaa5044ba.patch%3A%3Aversion=15.0.1&hash=c643a4#~/.yarn/patches/replicache-patch-1cf70e7f66.patch" replicache-react: "npm:^5.0.1" - tailwind-variants: "npm:^0.3.0" - tailwindcss: "npm:^3.4.14" + tailwind-variants: "npm:^0.3.1" + tailwindcss: "npm:^3.4.17" ts-essentials: "npm:^10.0.3" tsx: "npm:^4.15.7" typescript: "patch:typescript@npm%3A5.7.2#~/.yarn/patches/typescript-npm-5.7.2-b1f84a8b28.patch" @@ -15692,7 +15692,7 @@ __metadata: languageName: node linkType: hard -"tailwind-variants@npm:^0.3.0": +"tailwind-variants@npm:^0.3.1": version: 0.3.1 resolution: "tailwind-variants@npm:0.3.1" dependencies: @@ -15703,7 +15703,7 @@ __metadata: languageName: node linkType: hard -"tailwindcss@npm:^3.4.14": +"tailwindcss@npm:^3.4.17": version: 3.4.17 resolution: "tailwindcss@npm:3.4.17" dependencies: