refactor: rirekisho print pages directives

Author: Steph0

messages/fr.json

@@ -3,7 +3,7 @@
     "home": "Retour à l'acceuil",
     "githubPortfolio": "Accéder à mon Github",
     "rirekisho": "Rirekisho",
-    "Theme": "Thème"
+    "theme": "Thème"
   },
   "Home": {
     "githubPortfolio": "Accéder à mon Github"

messages/ja.json

@@ -3,7 +3,7 @@
     "home": "ホームページに戻る",
     "githubPortfolio": "私のGithubポートフォリオをご覧ください",
     "rirekisho": "履歴書",
-    "Theme": "テーマ"
+    "theme": "テーマ"
   },
   "Home": {
     "githubPortfolio": "私のGithubポートフォリオをご覧ください"
@@ -58,15 +58,15 @@
         "value": "情報なし"
       },
       "mailPerso": {
-        "legend": "Ｅメール",
+        "legend": "メール",
         "value": "[email protected]"
       },
       "phonePro": {
         "legend": "電話",
         "value": "同上"
       },
       "mailPro": {
-        "legend": "Ｅメール",
+        "legend": "メール",
         "value": "同上"
       }
     },

src/app/[locale]/components/Header.tsx

@@ -13,7 +13,7 @@ interface Props {
 export const Header: FC<Props> = ({ locale }) => {
   const t = useTranslations();
   return (
-    <div className='mx-auto flex max-w-screen-2xl flex-row items-center justify-between p-5'>
+    <div className='mx-auto flex max-w-screen-2xl flex-row items-center justify-between p-5 print:hidden'>
       <nav className='mr-10 inline-flex gap-5 text-button'>
         <Link
           lang={locale}

src/app/[locale]/rirekisho/components/personal-infos/InfoItem.tsx

@@ -22,11 +22,11 @@ const _defaultStyle = {
   },
   wrapper: 'col-span-full grid grid-cols-subgrid grid-rows-subgrid',
   definition: {
-    grid: 'col-span-1 row-span-1',
-    text: 'text-center',
+    grid: 'col-span-2 row-span-1',
+    text: 'text-center font-bold',
   },
   term: {
-    grid: 'col-span-full col-start-2',
+    grid: 'col-span-full col-start-3',
   },
 };
 

src/app/[locale]/rirekisho/components/personal-infos/index.tsx

@@ -8,7 +8,7 @@ export default function PersonalInfos() {
   const now = new Date();
 
   return (
-    <div>
+    <>
       <div className='grid auto-cols-fr grid-cols-12'>
         <RirekishoHeader
           title={t('Rirekisho.PersonalInfos.title')}
@@ -41,7 +41,7 @@ export default function PersonalInfos() {
                 <span
                   aria-label={t('Rirekisho.PersonalInfos.gender.ariaLabel')}
                   role='img'
-                  className='rounded-full border border-solid border-black pb-1 pe-3 ps-3 pt-1'
+                  className='rounded-full border border-solid border-black pb-1 pe-2 ps-2 pt-1'
                 >
                   {chunks}
                 </span>
@@ -86,6 +86,10 @@ export default function PersonalInfos() {
             legend={t('Rirekisho.PersonalInfos.phonePerso.legend')}
             value={t('Rirekisho.PersonalInfos.phonePerso.value')}
             className='col-start-10'
+            style={{
+              definition: 'col-span-1',
+              term: 'col-start-2',
+            }}
           />
 
           <InfoItem
@@ -100,6 +104,10 @@ export default function PersonalInfos() {
             legend={t('Rirekisho.PersonalInfos.mailPerso.legend')}
             value={t('Rirekisho.PersonalInfos.mailPerso.value')}
             className='col-start-10'
+            style={{
+              definition: 'col-span-1',
+              term: 'col-start-2',
+            }}
           />
 
           <InfoItem
@@ -113,6 +121,10 @@ export default function PersonalInfos() {
             legend={t('Rirekisho.PersonalInfos.phonePro.legend')}
             value={t('Rirekisho.PersonalInfos.phonePro.value')}
             className='col-start-10'
+            style={{
+              definition: 'col-span-1',
+              term: 'col-start-2',
+            }}
           />
 
           <InfoItem
@@ -127,9 +139,13 @@ export default function PersonalInfos() {
             legend={t('Rirekisho.PersonalInfos.mailPro.legend')}
             value={t('Rirekisho.PersonalInfos.mailPro.value')}
             className='col-start-10'
+            style={{
+              definition: 'col-span-1',
+              term: 'col-start-2',
+            }}
           />
         </dl>
       </div>
-    </div>
+    </>
   );
 }

src/app/[locale]/rirekisho/page.tsx

@@ -3,7 +3,7 @@ import PersonalInfos from './components/personal-infos/index';
 
 export default function Rirekisho() {
   return (
-    <section className='flex flex-col gap-y-2 bg-slate-50 dark:bg-slate-900'>
+    <section className='flex flex-col gap-y-2 bg-slate-50 dark:bg-slate-900 p-2 print:p-0'>
       <PersonalInfos />
       <Education />