fix(layout): Mobile, detalhes e impressão 🔧 closes #2

wh1t3h47 · Nov 19, 2023 · 32ca42c · 32ca42c
1 parent d421933
commit 32ca42c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="w-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -51,14 +51,14 @@ const Curriculum: React.FC = () => {
 
   return (
     <>
-      <header className="pt-7 pb-2 bg-slate-200 print:bg-rose-50">
-        <div className="md:flex print:flex items-center mb-8">
-          <div className="mx-10 bg-cyan-600">
+      <header className="pt-7 pb-2 bg-slate-200 print:bg-slate-100">
+        <div className="flex flex-col md:flex-row items-center mb-8">
+          <div className="mx-10 bg-cyan-600 flex justify-center w-11/12 max-w-xl md:w-auto">
             <div className="mx-10 pb-3 flex flex-col">
-              <h1 className="text-3xl print:text-2xl text-yellow-200 font-bold whitespace-nowrap divide-y mt-1.5">
+              <h1 className="text-3xl print:text-2xl text-yellow-200 font-bold md:whitespace-nowrap divide-y mt-1.5">
                 {neutral("antonio")}
               </h1>
-              <div className="mt-3 bg-pink-300 print:bg-pink-200 h-1 w-64 mb-4"></div>
+              <div className="mt-3 bg-pink-300 print:bg-pink-200 h-1 max-w-sm w-96 md:w-64 mb-4"></div>
               <a
                 className="text-xl print:text-lg text-yellow-100"
                 href={links("mailLink")}
@@ -86,21 +86,21 @@ const Curriculum: React.FC = () => {
               </p>
             </div>
           </div>
-          <div className="flex flex-col mx-5 print:-ms-5 px-10 md:px-0 self-baseline">
-            <p className="text-gray-900 text-2xl print:text-xl font-semibold mt-5 md:mt-0 self-center lg:self-baseline print:self-baseline">
+          <div className="flex flex-col mx-5 print:-ms-5 px-10 md:px-0 md:mt-4 self-baseline">
+            <h1 className="text-gray-900 text-2xl print:text-xl font-semibold mt-5 md:mt-0 self-center md:self-baseline print:self-baseline">
               {i18n("profession")}
-            </p>
-            <p className="text-gray-900 text-lg print:text-md t-3 self-center lg:self-baseline print:self-baseline md:pt-1 lg:pt-5">
+            </h1>
+            <p className="text-gray-900 text-lg print:text-md pt-2.5 self-center md:self-baseline print:self-baseline md:pt-5">
               {i18n("description")}
             </p>
           </div>
         </div>
       </header>
 
-      <div className="bg-white text-gray-800 px-8">
-        <div className="grid grid-cols-12 gap-8">
+      <div className="bg-white text-gray-800 md:px-8">
+        <div className="grid grid-cols-12 gap-8 justify-items-center md:justify-items-start">
           <aside
-            className={`mr-2 px-5 col-span-12 sm:col-span-6 md:col-span-5 xl:col-span-4 mb-8 md:order-first order-last bg-slate-100 h-full w-96 ${a4PrintPageClass}`}
+            className={`px-5 md:mr-2 col-span-12 md:col-span-5 lg:w-col-span-3 xl:col-span-4 mb-8 md:order-first order-last bg-slate-100 print:bg-slate-50 w-full max-w-[40rem] md:w-auto h-full ${a4PrintPageClass}`}
           >
             <div className="mb-8">
               <h2 className="text-2xl font-bold my-3.5">
@@ -239,7 +239,7 @@ const Curriculum: React.FC = () => {
             </div>
             <div className="mb-6 ml-4">
               <h3 className="text-xl font-semibold mb-2">
-                {i18n("skills_title")}
+                {i18n("infra_title")}
               </h3>
               <ul className="pl-8">
                 <li className="flex items-baseline">
@@ -309,7 +309,7 @@ const Curriculum: React.FC = () => {
             </div>
           </aside>
           <section
-            className={`ml-1 col-span-12 sm:ml-16 sm:col-span-7 md:col-span-6 lg:col-span-4 2xl:col-span-3 mt-2 w-full h-96 text-neutral-750 ${a4PrintPageClass}`}
+            className={`col-span-12 ml-5 md:ml-16 md:col-span-7 md:col-span-6 lg:col-span-4s 2xl:col-span-3 mt-2 w-auto h-auto text-neutral-750 ${a4PrintPageClass}`}
           >
             <div className="mb-8">
               <h2 className="text-2xl font-bold mb-4">{i18n("exp_title")}</h2>
@@ -320,16 +320,14 @@ const Curriculum: React.FC = () => {
                     <span className="-ml-2 mr-5">
                       <FaBriefcase className="text-indigo-400" />
                     </span>
-                    <div className="my-2">
-                      <span className="flex justify-between items-center w-96">
+                    <div className="my-2 w-full md:max-w-xs lg:max-w-sm xl:max-w-md 2xl:max-w-xl px-5 md:px-0">
+                      <span className="flex justify-between items-center md:w-96 lg:w-[32rem] xl:w-[40rem] 2xl:w-[46rem] pb-1 mb-1 border-b-2 border-purple-200 border-solid">
                         <h3 className="text-xl font-semibold">
                           {neutral("zenbit")}
                         </h3>
                         <p className="text-md">{i18n("zenbit_date")}</p>
                       </span>
-                      <p className="font-medium">
-                        {i18n("zenbit_specialization")}
-                      </p>
+                      <p className="text-md">{i18n("zenbit_specialization")}</p>
 
                       <p className="text-md">{i18n("zenbit_location")}</p>
 
@@ -354,17 +352,15 @@ const Curriculum: React.FC = () => {
                       <FaBriefcase className="text-indigo-400" />
                     </span>
 
-                    <div>
-                      <span className="flex justify-between items-center w-96">
+                    <div className="w-full md:max-w-xs lg:max-w-sm xl:max-w-md 2xl:max-w-xl px-5 md:px-0 ">
+                      <span className="flex justify-between items-center md:w-96 lg:w-[32rem] xl:w-[40rem] 2xl:w-[46rem] pb-1 mb-1 border-b-2 border-purple-200 border-solid">
                         <h3 className="text-xl font-semibold">
                           {neutral("redfox")}
                         </h3>
                         <p className="text-md">{i18n("redfox_date")}</p>
                       </span>
 
-                      <p className="font-medium">
-                        {i18n("redfox_specialization")}
-                      </p>
+                      <p className="text-md">{i18n("redfox_specialization")}</p>
                       <p className="text-md">{i18n("redfox_location")}</p>
                       <ul className="list-disc ml-4">
                         <li>
@@ -383,14 +379,12 @@ const Curriculum: React.FC = () => {
                     <FaBriefcase className="text-indigo-400" />
                   </span>
 
-                  <div>
-                    <span className="flex justify-between items-center w-96">
+                  <div className="w-full md:max-w-xs lg:max-w-sm xl:max-w-md 2xl:max-w-xl px-5 md:px-0 ">
+                    <span className="flex justify-between items-center md:w-96 lg:w-[32rem] xl:w-[40rem] 2xl:w-[46rem] pb-1 mb-1 border-b-2 border-purple-200 border-solid">
                       <h3 className="text-xl font-semibold">YouSendr</h3>
                       <p className="text-md">{i18n("yousendr_date")}</p>
                     </span>
-                    <p className="font-medium">
-                      {i18n("yousendr_specialization")}
-                    </p>
+                    <p className="text-md">{i18n("yousendr_specialization")}</p>
 
                     <p className="text-md">{i18n("yousendr_location")}</p>
 
@@ -408,12 +402,12 @@ const Curriculum: React.FC = () => {
             </div>
 
             <h2 className="text-2xl font-bold mb-5">{i18n("edu_title")}</h2>
-            <div className="mb-4 ml-10 w-96">
-              <div className="flex items-center mb-2">
+            <div className="mb-4 ml-10 px-5 md:px-0 md:w-96 lg:w-[32rem] xl:w-[40rem] 2xl:w-[46rem]">
+              <div className="flex items-center mb-1 pb-1 border-b-2 border-purple-200 border-solid">
                 <span className="mr-2">
                   <FaGraduationCap className="text-indigo-400" />
                 </span>
-                <span className="flex justify-between items-center w-96">
+                <span className="flex justify-between items-center md:px-0 w-full">
                   <p className="font-semibold text-lg">{neutral("senai")}</p>
                   <p className="text-md">{neutral("senai_date")}</p>
                 </span>
@@ -429,7 +423,7 @@ const Curriculum: React.FC = () => {
             <h2 className="text-2xl font-bold mt-7 mb-5">
               {i18n("projects_title")}
             </h2>
-            <ul className="list-disc space-y-2 ml-14">
+            <ul className="list-disc space-y-2 ml-14 px-5 md:px-0">
               <li className="mb-2">
                 <p className="text-md flex-row flex items-center">
                   {i18n("freelance_frei")}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,6 +14,11 @@ export default {
       },
       screens: {
         print: { raw: "print" },
+        md: [
+          { min: "900px" },
+          { raw: "print" }, // Always hit md in print mode
+        ],
+        lg: "1096px",
       },
     },
   },