feat(web): suggest traditional resume fonts and link to custom fonts

Replace the Type presets with five traditional resume faces: EB Garamond,
Tinos, Source Serif 4 with Source Sans 3, Carlito and Lato. Presets now set
body text in Regular and Bold (400/700), which every one of them ships.

Add a Custom row under the presets. It shows the resume's own fonts when they
match no preset, and opens Advanced (even when collapsed) at the Typography
editor, focusing the body font picker. On phones it switches the Design sheet
to the Page tab first.

The mobile editor body now clips instead of hiding overflow, so scrolling
inside the lowered Design sheet can no longer shift the sheet itself.
This commit is contained in:
Amruth Pillai
2026-09-30 01:09:31 +02:00
parent 6d4ceefbdf
commit d3ed651d65
59 changed files with 374 additions and 46 deletions
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Antwoord in jou eie woorde"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Enigiemand wat die openbare URL oopmaak, sal hierdie wagwoord nodig hê."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Huidige wagwoord"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Pasgemaak"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "በራስዎ ቃላት ይመልሱ"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "የሕዝብ URL የሚከፍት ማንኛውም ሰው ይህ የይለፍ ቃል ያስፈልገዋል።"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "አሁን ያለዎት የይለፍ ቃል"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "ብጁ"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "أجب بكلماتك الخاصة"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "سيحتاج كل من يفتح الرابط العام إلى كلمة المرور هذه."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "كلمة المرور الحالية"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "مخصص"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Öz sözlərinizlə cavab verin"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "İctimai URL-i açan hər kəsə bu parol lazım olacaq."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Cari Parol"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Fərdiləşdirilmiş"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Отговорете със свои думи"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Всеки, който отвори публичния URL адрес, ще има нужда от тази парола."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Текуща парола"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Потребителски"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "নিজের ভাষায় উত্তর দিন"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "যিনিই সর্বজনীন URL খুলবেন তাঁর এই পাসওয়ার্ড লাগবে।"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "বর্তমান পাসওয়ার্ড"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "কাস্টম"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Respon amb les teves paraules"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Qualsevol que obri l'URL públic necessitarà aquesta contrasenya."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Contrasenya actual"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Personalitzat"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Odpovězte vlastními slovy"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Každý, kdo otevře veřejný odkaz, bude potřebovat toto heslo."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Aktuální heslo"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Vlastní"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Svar med dine egne ord"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Alle, der åbner den offentlige URL, skal bruge denne adgangskode."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Nuværende adgangskode"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Brugerdefineret"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "In eigenen Worten antworten"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Wer die öffentliche URL öffnet, benötigt dieses Passwort."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Aktuelles Passwort"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Benutzerdefiniert"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Απαντήστε με δικά σας λόγια"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Όποιος ανοίγει τη δημόσια διεύθυνση URL θα χρειαστεί αυτόν τον κωδικό."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Τρέχων κωδικός πρόσβασης"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Προσαρμοσμένο"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Answer in your own words"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Anyone who opens the public URL will need this password."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Current Password"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Custom"
+5
View File
@@ -1089,6 +1089,10 @@ msgstr "Another of your resumes uses this address."
msgid "Answer in your own words"
msgstr "Answer in your own words"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr "Any font, in Advanced"
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Anyone who opens the public URL will need this password."
@@ -2380,6 +2384,7 @@ msgid "Current Password"
msgstr "Current Password"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Custom"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Responde con tus propias palabras"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Cualquiera que abra la URL pública necesitará esta contraseña."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Contraseña actual"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "A medida"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "با کلمات خودتان پاسخ دهید"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "هر کسی که نشانی عمومی را باز کند به این رمز عبور نیاز دارد."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "گذرواژهٔ فعلی"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "سفارشی"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Vastaa omin sanoin"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Jokainen, joka avaa julkisen URL-osoitteen, tarvitsee tämän salasanan."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Nykyinen salasana"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Custom"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Répondez avec vos propres mots"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Toute personne qui ouvre l'URL publique aura besoin de ce mot de passe."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Mot de passe actuel"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Sur mesure"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "ענה במילים שלך"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "כל מי שיפתח את הכתובת הציבורית יזדקק לסיסמה הזו."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "סיסמה נוכחית"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "מותאם אישית"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "अपने शब्दों में उत्तर दें"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "सार्वजनिक URL खोलने वाले हर व्यक्ति को यह पासवर्ड चाहिए होगा।"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "वर्तमान पासवर्ड"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "अनुकूलित"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Válasz saját szavakkal"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Aki megnyitja a nyilvános URL-t, szüksége lesz erre a jelszóra."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Jelenlegi jelszó"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Custom"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Jawab dengan kata-kata Anda sendiri"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Siapa pun yang membuka URL publik akan memerlukan kata sandi ini."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Kata Sandi Saat Ini"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Kustom"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Rispondi con parole tue"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Chiunque apra l'URL pubblico avrà bisogno di questa password."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Password attuale"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Personalizzato"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "自分の言葉で回答"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "公開 URL を開く人には、このパスワードが必要になります。"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "現在のパスワード"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "カスタム"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "ឆ្លើយតាមពាក្យរបស់អ្នកផ្ទាល់"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "អ្នកណាដែលបើក URL សាធារណៈនឹងត្រូវការពាក្យសម្ងាត់នេះ។"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "ពាក្យសម្ងាត់​បច្ចុប្បន្ន"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "ផ្ទាល់ខ្លួន"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "ನಿಮ್ಮ ಸ್ವಂತ ಮಾತುಗಳಲ್ಲಿ ಉತ್ತರಿಸಿ"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "ಸಾರ್ವಜನಿಕ URL ಅನ್ನು ತೆರೆಯುವ ಯಾರಿಗಾದರೂ ಈ ಪಾಸ್‌ವರ್ಡ್ ಬೇಕಾಗುತ್ತದೆ."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "ಪ್ರಸ್ತುತ ಪಾಸ್‌ವರ್ಡ್"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "ಕಸ್ಟಮ್"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "직접 답변을 입력하세요"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "공개 URL을 여는 사람은 이 비밀번호가 필요합니다."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "현재 비밀번호"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "사용자 지정"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Atsakykite savais žodžiais"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Kiekvienam, kuris atidarys viešąjį URL, prireiks šio slaptažodžio."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Dabartinis slaptažodis"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Pasirinktinis"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Atbildiet saviem vārdiem"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Ikvienam, kas atvērs publisko URL, būs nepieciešama šī parole."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Pašreizējā parole"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Pielāgots"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "നിങ്ങളുടെ സ്വന്തം വാക്കുകളിൽ ഉത്തരം നൽകുക"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "പൊതു URL തുറക്കുന്ന ആർക്കും ഈ പാസ്‌വേഡ് വേണ്ടിവരും."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "നിലവിലെ പാസ്‌വേഡ്"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "ഇഷ്ടാനുസൃതം"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "तुमच्या स्वतःच्या शब्दांत उत्तर द्या"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "सार्वजनिक URL उघडणाऱ्या प्रत्येकाला हा पासवर्ड लागेल."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "वर्तमान पासवर्ड"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "सानुकूल"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Jawab dengan perkataan anda sendiri"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Sesiapa yang membuka URL awam akan memerlukan kata laluan ini."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Kata Laluan Semasa"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Kustom"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "आफ्नै शब्दमा उत्तर दिनुहोस्"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "सार्वजनिक URL खोल्ने जो कोहीलाई पनि यो पासवर्ड चाहिन्छ।"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "हालको पासवर्ड"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "अनुकूलित"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Antwoord in je eigen woorden"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Iedereen die de openbare URL opent, heeft dit wachtwoord nodig."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Huidige wachtwoord"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Aangepaste"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Svar med dine egne ord"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Alle som åpner den offentlige URL-en, trenger dette passordet."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Nåværende passord"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Egendefinert"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "ଆପଣଙ୍କ ନିଜ ଭାଷାରେ ଉତ୍ତର ଦିଅନ୍ତୁ"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "ସର୍ବସାଧାରଣ URL ଖୋଲୁଥିବା ଯେକୌଣସି ବ୍ୟକ୍ତିଙ୍କୁ ଏହି ପାସୱାର୍ଡ ଆବଶ୍ୟକ ହେବ।"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "ବର୍ତ୍ତମାନର ପାସୱାର୍ଡ"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "କଷ୍ଟମ୍"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Odpowiedz własnymi słowami"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Każdy, kto otworzy publiczny link, będzie potrzebował tego hasła."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Obecne hasło"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Niestandardowe"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Responda com suas próprias palavras"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Quem abrir a URL pública vai precisar desta senha."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Senha atual"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Personalizado"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Responda pelas suas próprias palavras"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Quem abrir o URL público vai precisar desta senha."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Senha atual"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Personalizado"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Răspundeți cu propriile cuvinte"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Oricine deschide URL-ul public va avea nevoie de această parolă."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Parolă curentă"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Personalizat"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Ответьте своими словами"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Всем, кто откроет публичную ссылку, понадобится этот пароль."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Текущий пароль"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Пользовательский"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Odpovedzte vlastnými slovami"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Každý, kto otvorí verejný odkaz, bude potrebovať toto heslo."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Aktuálne heslo"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Vlastné"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Odgovorite s svojimi besedami"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Vsak, ki odpre javni URL, bo potreboval to geslo."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Trenutno geslo"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Po meri"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Përgjigjuni me fjalët tuaja"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Kushdo që hap URL-në publike do të ketë nevojë për këtë fjalëkalim."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Fjalëkalimi aktual"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Sipas porosisë"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Одговорите својим речима"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Свако ко отвори јавни URL мораће да зна ову лозинку."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Тренутна лозинка"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "По мери"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Svara med egna ord"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Alla som öppnar den offentliga URL:en behöver det här lösenordet."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Nuvarande lösenord"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Anpassad"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "உங்கள் சொந்த வார்த்தைகளில் பதிலளிக்கவும்"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "பொது URL-ஐத் திறக்கும் எவருக்கும் இந்தக் கடவுச்சொல் தேவைப்படும்."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "தற்போதைய கடவுச்சொல்"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "தனிப்பயன்"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "మీ సొంత మాటల్లో సమాధానం ఇవ్వండి"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "పబ్లిక్ URL తెరిచే ప్రతి ఒక్కరికీ ఈ పాస్‌వర్డ్ అవసరమవుతుంది."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "ప్రస్తుత పాస్‌వర్డ్"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "స్వంతం"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "ตอบด้วยคำพูดของคุณเอง"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "ทุกคนที่เปิด URL สาธารณะจะต้องใช้รหัสผ่านนี้"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "รหัสผ่านเดิม"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "กำหนดเอง"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Kendi kelimelerinizle yanıtlayın"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Herkese açık URL'yi açan herkesin bu şifreye ihtiyacı olacak."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Geçerli Parola"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Özel"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Відповідайте своїми словами"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Усім, хто відкриє публічне посилання, знадобиться цей пароль."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Поточний пароль"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Нестандартний"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "O'z so'zlaringiz bilan javob bering"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Ommaviy havolani ochgan har bir kishiga shu parol kerak bo'ladi."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Joriy parol"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Moslashtirilgan"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "Trả lời bằng lời của bạn"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "Bất kỳ ai mở URL công khai đều sẽ cần mật khẩu này."
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "Mật khẩu hiện tại"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "Tùy chỉnh"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "用你自己的话回答"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "任何打开该公开 URL 的人都需要这个密码。"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "当前密码"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "定制"
+5
View File
@@ -1094,6 +1094,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr "用您自己的話回答"
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr "任何開啟該公開 URL 的人都需要這組密碼。"
@@ -2385,6 +2389,7 @@ msgid "Current Password"
msgstr "目前密碼"
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr "自訂"
+5
View File
@@ -1089,6 +1089,10 @@ msgstr ""
msgid "Answer in your own words"
msgstr ""
#: src/features/resume/editor/design/style-groups.tsx
msgid "Any font, in Advanced"
msgstr ""
#: src/features/resume/builder/password-dialog.tsx
msgid "Anyone who opens the public URL will need this password."
msgstr ""
@@ -2380,6 +2384,7 @@ msgid "Current Password"
msgstr ""
#: src/components/input/color-picker.tsx
#: src/features/resume/editor/design/style-groups.tsx
msgid "Custom"
msgstr ""
@@ -6,13 +6,16 @@ type Data = ResumeData | WritableDraft<ResumeData>;
/** The design a resume and a letter share. */
type Metadata = Pick<Data["metadata"], "typography" | "design" | "page">;
/** Five font pairings. Families that aren't a pairing leave the control with no selection. */
/**
* Five traditional resume faces, set in Regular and Bold. Families that aren't a pairing leave the control with no
* selection; any other font is chosen in Advanced.
*/
export const FONT_PAIRINGS = [
{ id: "editorial", label: "Editorial", heading: "Newsreader", body: "Hanken Grotesk", headingWeight: "500" },
{ id: "plex", label: "Plex", heading: "IBM Plex Serif", body: "IBM Plex Sans", headingWeight: "500" },
{ id: "classic", label: "Classic", heading: "Lora", body: "Source Sans 3", headingWeight: "500" },
{ id: "modern", label: "Modern", heading: "Karla", body: "Karla", headingWeight: "700" },
{ id: "franklin", label: "Franklin", heading: "Libre Franklin", body: "Libre Franklin", headingWeight: "600" },
{ id: "classic", label: "Classic", heading: "EB Garamond", body: "EB Garamond", headingWeight: "600" },
{ id: "traditional", label: "Traditional", heading: "Tinos", body: "Tinos", headingWeight: "700" },
{ id: "balanced", label: "Balanced", heading: "Source Serif 4", body: "Source Sans 3", headingWeight: "600" },
{ id: "professional", label: "Professional", heading: "Carlito", body: "Carlito", headingWeight: "700" },
{ id: "clean", label: "Clean", heading: "Lato", body: "Lato", headingWeight: "700" },
] as const;
export type FontPairingId = (typeof FONT_PAIRINGS)[number]["id"];
@@ -31,7 +34,7 @@ export function applyFontPairing(metadata: WritableDraft<Metadata>, id: FontPair
metadata.typography.heading.fontFamily = pairing.heading;
metadata.typography.heading.fontWeights = [pairing.headingWeight];
metadata.typography.body.fontFamily = pairing.body;
metadata.typography.body.fontWeights = ["400", "600"];
metadata.typography.body.fontWeights = ["400", "700"];
}
/**
@@ -62,8 +62,15 @@ function useDesign(): DesignSource {
};
}
/** Type: five font pairings, the text size (9–12.5 pt) and density. */
export function TypeGroup() {
const familiesLabel = (heading: string, body: string) => (heading === body ? heading : `${heading} + ${body}`);
type TypeGroupProps = {
/** Brings the exact typography editor into view. Without it, the Custom row isn't offered. */
onCustomFonts?: () => void;
};
/** Type: five font pairings (or any font, in Advanced), the text size (9–12.5 pt) and density. */
export function TypeGroup({ onCustomFonts }: TypeGroupProps) {
const { metadata, write } = useDesign();
const sizeLabelId = useId();
if (!metadata) return null;
@@ -71,29 +78,46 @@ export function TypeGroup() {
const pairing = matchFontPairing(metadata);
const density = matchDensity(metadata);
const size = metadata.typography.body.fontSize;
const { heading, body } = metadata.typography;
return (
<div className="grid gap-4">
<RadioGroup
aria-label={t`Font pairing`}
value={pairing ?? null}
onValueChange={(value) => write("pairing", (draft) => applyFontPairing(draft, value as FontPairingId), true)}
className="grid gap-1"
>
{FONT_PAIRINGS.map((option) => (
<Radio.Root
key={option.id}
value={option.id}
className="flex h-12 cursor-pointer items-center gap-3 rounded-lg border border-line px-3 text-start transition-colors duration-quick hover:bg-hover data-checked:border-accent data-checked:bg-accent-soft data-checked:hover:bg-accent-soft"
<div className="grid gap-1">
<RadioGroup
aria-label={t`Font pairing`}
value={pairing ?? null}
onValueChange={(value) => write("pairing", (draft) => applyFontPairing(draft, value as FontPairingId), true)}
className="grid gap-1"
>
{FONT_PAIRINGS.map((option) => (
<Radio.Root
key={option.id}
value={option.id}
className="flex h-12 cursor-pointer items-center gap-3 rounded-lg border border-line px-3 text-start transition-colors duration-quick hover:bg-hover data-checked:border-accent data-checked:bg-accent-soft data-checked:hover:bg-accent-soft"
>
<span className="font-medium text-sm">{option.label}</span>
<span className="truncate text-ink-3 text-xs">{familiesLabel(option.heading, option.body)}</span>
{pairing === option.id && <Icon name="check" size={18} className="ms-auto text-accent-text" />}
</Radio.Root>
))}
</RadioGroup>
{onCustomFonts && (
<button
type="button"
onClick={onCustomFonts}
className="flex h-12 cursor-pointer items-center gap-3 rounded-lg border border-line border-dashed px-3 text-start transition-colors duration-quick hover:bg-hover"
>
<span className="font-medium text-sm">{option.label}</span>
<span className="truncate text-ink-3 text-xs">
{option.heading === option.body ? option.heading : `${option.heading} + ${option.body}`}
<span className="font-medium text-sm">
<Trans>Custom</Trans>
</span>
{pairing === option.id && <Icon name="check" size={18} className="ms-auto text-accent-text" />}
</Radio.Root>
))}
</RadioGroup>
<span className="truncate text-ink-3 text-xs">
{pairing ? <Trans>Any font, in Advanced</Trans> : familiesLabel(heading.fontFamily, body.fontFamily)}
</span>
<Icon name="arrow_downward" size={18} className="ms-auto text-ink-3" />
</button>
)}
</div>
<div className="grid gap-2">
<div className="flex items-center justify-between text-[13px]">
@@ -43,6 +43,26 @@ function Group({ id, title, children }: { id: string; title: ReactNode; children
);
}
/**
* Brings `id` into view. Advanced is collapsed until asked for: jumping into it opens it, then aims again once it
* has grown (before that its contents aren't mounted and the panel may be too short to bring them to the top).
* `focus` then moves focus to the target's first control.
*/
function jumpTo(id: string, advanced: { open: boolean; setOpen: (open: boolean) => void }, focus = false) {
const aim = () => {
const target = document.getElementById(id) ?? document.getElementById("design-advanced");
target?.scrollIntoView({ behavior: getScrollBehavior() });
if (focus) target?.querySelector<HTMLElement>("input, button, textarea")?.focus({ preventScroll: true });
};
if (id.startsWith("design-advanced") && !advanced.open) {
advanced.setOpen(true);
window.setTimeout(aim, D2 * 1000);
}
aim();
}
const TYPOGRAPHY_ID = "design-advanced-typography";
/**
* Design: a sticky nav (Template · Type · Color · Page · Advanced) over groups divided by rules. Presets cover
* the common choices; Advanced keeps every exact value, custom CSS and the reset.
@@ -50,6 +70,7 @@ function Group({ id, title, children }: { id: string; title: ReactNode; children
export function DesignPanel() {
const locked = useIsResumeLocked();
const [advancedOpen, setAdvancedOpen] = useState(false);
const advanced = { open: advancedOpen, setOpen: setAdvancedOpen };
return (
<div>
@@ -61,17 +82,7 @@ export function DesignPanel() {
<button
key={group.id}
type="button"
onClick={() => {
const target = document.getElementById(`design-${group.id}`);
const scroll = () => target?.scrollIntoView({ behavior: getScrollBehavior() });
// Advanced is collapsed until asked for: jumping to it opens it, then aims again once it has grown
// (before that the panel may be too short to bring it to the top).
if (group.id === "advanced" && !advancedOpen) {
setAdvancedOpen(true);
window.setTimeout(scroll, D2 * 1000);
}
scroll();
}}
onClick={() => jumpTo(`design-${group.id}`, advanced)}
className="h-8 shrink-0 rounded-full px-3 text-[13px] text-ink-2 transition-colors duration-quick hover:bg-hover hover:text-ink"
>
{group.label()}
@@ -84,7 +95,7 @@ export function DesignPanel() {
<TemplateGroup />
</Group>
<Group id="type" title={<Trans>Type</Trans>}>
<TypeGroup />
<TypeGroup onCustomFonts={() => jumpTo(TYPOGRAPHY_ID, advanced, true)} />
</Group>
<Group id="color" title={<Trans>Color</Trans>}>
<ColorGroup />
@@ -109,6 +120,7 @@ export function DesignSheet() {
const locked = useIsResumeLocked();
const [tab, setTab] = useState<SheetTab>("template");
const [expanded, setExpanded] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
return (
<section
@@ -140,14 +152,22 @@ export function DesignSheet() {
<fieldset disabled={locked} className="m-0 min-h-0 min-w-0 flex-1 overflow-y-auto border-0 p-4">
<OfflineBanner className="mb-4" />
{tab === "template" && <TemplateGroup layout="strip" />}
{tab === "type" && <TypeGroup />}
{tab === "type" && (
<TypeGroup
onCustomFonts={() => {
// Advanced lives under Page, so from here it isn't mounted yet: switching mounts it, then it opens.
setTab("page");
jumpTo(TYPOGRAPHY_ID, { open: false, setOpen: setAdvancedOpen }, true);
}}
/>
)}
{tab === "color" && <ColorGroup />}
{tab === "page" && (
<div className="-mx-4 divide-y divide-line">
<div className="px-4 pb-5">
<PageGroup />
</div>
<AdvancedGroup />
<AdvancedGroup open={advancedOpen} onOpenChange={setAdvancedOpen} />
</div>
)}
{/* Lowered, the sheet's lower half is out of view: this keeps the end of the list scrollable into sight. */}
@@ -175,8 +195,8 @@ const EXACT_SECTIONS = [
] as const;
/** Every exact value, the date format, custom CSS and Reset to template defaults, collapsed until asked for. */
// The phone sheet leaves it uncontrolled; the desktop panel controls it so its nav can open it.
type AdvancedGroupProps = { open?: boolean; onOpenChange?: (open: boolean) => void };
// Controlled so the nav and Type's Custom row can open it.
type AdvancedGroupProps = { open: boolean; onOpenChange: (open: boolean) => void };
function AdvancedGroup({ open, onOpenChange }: AdvancedGroupProps) {
const data = useResumeData();
@@ -246,8 +266,13 @@ function AdvancedGroup({ open, onOpenChange }: AdvancedGroupProps) {
</div>
{EXACT_SECTIONS.map(([type, Section]) => (
<section key={type} aria-labelledby={`design-advanced-${type}`} className="grid gap-3">
<h3 id={`design-advanced-${type}`} className="font-semibold text-[13px] text-ink-2">
<section
key={type}
id={`design-advanced-${type}`}
aria-labelledby={`design-advanced-${type}-title`}
className="grid scroll-mt-14 gap-3"
>
<h3 id={`design-advanced-${type}-title`} className="font-semibold text-[13px] text-ink-2">
{getSectionTitle(type)}
</h3>
<Section />
@@ -244,7 +244,8 @@ function MobileBody({ mode, onModeChange }: MobileBodyProps) {
return (
<div className="grid min-h-0 grid-rows-[minmax(0,1fr)_auto]">
<div className="relative min-h-0 overflow-hidden">
{/* Clip, not hidden: the lowered Design sheet overflows it, and scrolling into the sheet mustn't scroll it. */}
<div className="relative min-h-0 overflow-clip">
<main id="main-content" className={cn("h-full", !pageVisible && "invisible")}>
<Outlet />
</main>