Update print resume styles

d0rich · Aug 13, 2024 · 84ec83e · 84ec83e
1 parent 19abddd
commit 84ec83e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/apps/d0rich.me/components/resume/CertificatesCard.vue b/apps/d0rich.me/components/resume/CertificatesCard.vue
@@ -38,7 +38,7 @@ defineProps<{
 
 <style>
 .resume-sertificates-card__list {
-  @apply pl-5 space-y-3 list-disc;
+  @apply pl-5 space-y-3 list-disc print:text-sm;
 }
 a.resume-sertificates-card__place {
   @apply underline dark:text-blue-300 text-blue-800;

diff --git a/apps/d0rich.me/components/resume/ProjectsCard.vue b/apps/d0rich.me/components/resume/ProjectsCard.vue
@@ -27,7 +27,7 @@ defineProps<{
 
 <style>
 .resume-projects-card__list {
-  @apply pl-5 space-y-3 list-disc;
+  @apply pl-5 space-y-3 list-disc print:text-sm;
 }
 a.resume-projects-card__place {
   @apply underline dark:text-blue-300 text-blue-800;

diff --git a/apps/d0rich.me/components/resume/TimeNote.vue b/apps/d0rich.me/components/resume/TimeNote.vue
@@ -18,22 +18,22 @@ defineProps<{
 </script>
 
 <template>
-  <DCard class="">
-    <DCardTitle>
+  <DCard>
+    <DCardTitle class="break-after-avoid-page">
       {{ timenote.title }}
       <template #extra>
         <Component
           :is="timenote.place.link ? 'a' : 'span'"
           :href="timenote.place.link"
           target="_blank"
-          class="timenote__place-link print:ml-2"
+          class="timenote__place-link"
         >
           {{ timenote.place.title }}
         </Component>
       </template>
     </DCardTitle>
     <p
-      class="text-blue-600 dark:text-blue-300 print:text-sm break-inside-avoid"
+      class="timenote__daterange"
     >
       <time :datetime="timenote.daterange.start">
         {{ dateToMonthYear(timenote.daterange.start) }}
@@ -55,12 +55,16 @@ defineProps<{
         }})
       </span>
     </p>
-    <ContentRenderer class="resume-time-note__content" :value="timenote" />
+    <ContentRenderer class="print:text-sm break-inside-avoid-page" :value="timenote" />
   </DCard>
 </template>
 
 <style>
 a.timenote__place-link {
-  @apply underline;
+  @apply underline print:ml-2;
+}
+.timenote__daterange {
+  @apply text-blue-600 dark:text-blue-300 print:text-sm
+         break-inside-avoid break-after-avoid-page;
 }
 </style>
diff --git a/apps/d0rich.me/pages/resume/[type].vue b/apps/d0rich.me/pages/resume/[type].vue
@@ -181,11 +181,11 @@ section {
 <style>
 .resume-page__section-title {
   @apply text-5xl text-blue-700 dark:text-blue-300 mb-2
-    print:text-2xl print:mt-4;
+    print:text-2xl print:mt-4 break-after-avoid-page;
 }
 
 .resume-page__prose-content {
-  @apply [&_p]:!m-0 [&_p]:!mb-2 [&_p]:!text-base [&_ul]:!m-0 [&_li]:!m-0;
+  @apply [&_p]:!m-0 [&_p]:!mb-2 [&_p]:!text-base [&_ul]:!m-0 [&_li]:!m-0 print:text-sm;
 }
 
 @media print {