Service page fixes for print media

Author: webstackdev

src/components/Callout/index.astro

@@ -93,7 +93,7 @@ const iconColor = accentTextClasses.startsWith('text-') ? accentTextClasses.slic
   ]}
   role="note"
 >
-  <div class="flex items-center gap-2">
+  <div class="callout__header flex items-center gap-2">
     <div
       class:list={[
         accentTextClasses,

src/components/Code/CodeTabs/client/index.ts

@@ -131,7 +131,7 @@ export class CodeTabsElement extends LitElement {
   private buildUi(args: { shouldRenderTabs: boolean; labels: string[] }): void {
     const header = document.createElement('div')
     header.className =
-      'flex w-full min-w-0 items-center justify-between bg-page-offset'
+      'code-tabs-print-header flex w-full min-w-0 items-center justify-between bg-page-offset'
 
     const copyButton = this.createCopyButton()
 

src/components/Pages/About/index.astro

@@ -89,7 +89,7 @@ const expertiseIcons = ['cloud', 'document', 'gear', 'globe', 'wrench', 'chart']
               <h3 class="text-page-inverse mb-2">{item.title}</h3>
               <p class="text-content leading-relaxed">{item.description}</p>
               {index === 0 && (
-                <div class="mt-3 flex justify-end">
+                <div class="mt-3 flex justify-end print:hidden!">
                   <Button
                     text="View C.V."
                     variant="page-inverse"

src/components/Pages/Services/index.astro

@@ -95,7 +95,7 @@ const splitH2Sections = (html: string): string[] => {
             <article
               data-service-card
               class:list={[
-                'relative flex flex-col rounded-2xl border border-trim overflow-hidden transition-shadow hover:shadow-lg focus-within:shadow-lg',
+                'service-card relative flex flex-col rounded-2xl border border-trim overflow-hidden transition-shadow hover:shadow-lg focus-within:shadow-lg',
                 i === 0 ? 'service-card--default' : '',
               ]}
             >
@@ -131,7 +131,7 @@ const splitH2Sections = (html: string): string[] => {
                 </p>
               </div>
 
-              <div class="flex flex-1 flex-col bg-content-inverse px-6 py-6">
+              <div class="service-card-body flex flex-1 flex-col bg-content-inverse px-6 py-6">
                 <div class="grid gap-6 md:grid-cols-2">
                   <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-sm [&_p]:leading-relaxed [&_ul]:space-y-1.5 [&_ul]:text-sm [&_ul]:text-content [&_ul]:list-none [&_ul]:pl-0 [&_li]:flex [&_li]:items-start [&_li]:gap-2 [&_li]:before:content-['✓'] [&_li]:before:text-success [&_li]:before:mt-0.5 [&_li]:before:shrink-0">
                     <Fragment set:html={leftSections} />

src/pages/articles/index.astro

@@ -37,7 +37,7 @@ const path = '/articles'
   path={path}
   icon="paper-and-pen"
 >
-  <div class="pb-0">
+  <div class="pb-0 print:hidden!">
     <div class="space-y-12">
       {
         tagsWithContent

src/pages/case-studies/index.astro

@@ -35,7 +35,7 @@ const path = '/case-studies'
   icon="folder-magnifying-glass"
 >
   <section
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12 print:hidden!"
     aria-label="Case studies"
   >
     {

src/styles/print.css

@@ -124,6 +124,44 @@
     break-inside: avoid;
   }
 
+  .callout {
+    box-decoration-break: slice;
+    break-inside: avoid;
+    display: block !important;
+    overflow: visible !important;
+  }
+
+  .callout__header {
+    break-after: avoid;
+  }
+
+  .callout__content {
+    break-before: avoid;
+  }
+
+  .callout__header + .callout__content {
+    margin-top: 0.75rem;
+  }
+
+  .service-card {
+    background-clip: padding-box;
+    background-color: var(--color-content-inverse) !important;
+    border: 1px solid var(--color-trim) !important;
+    border-radius: 1rem !important;
+    box-decoration-break: clone;
+    overflow: visible !important;
+  }
+
+  .service-card-body {
+    background-color: var(--color-content-inverse) !important;
+    padding-bottom: 2rem !important;
+  }
+
+  .services-grid {
+    background-color: var(--color-page-base) !important;
+    row-gap: 3rem !important;
+  }
+
   /**
    * Make sure Zebra List doesn't leave an empty container with borders
    * when it breaks across lines
@@ -233,10 +271,19 @@
     display: none !important;
   }
 
+  .code-tabs-print-header + pre,
+  .code-tabs-print-header + [role="tabpanel"] {
+    break-before: avoid;
+  }
+
   code-tabs [role="tabpanel"]:first-of-type {
     display: block !important;
   }
 
+  .code-tabs-print-header {
+    break-after: avoid;
+  }
+
   /* Hide copy buttons inside code blocks */
   code-tabs button {
     display: none !important;