Hide Footer component on print

Author: webstackdev

src/components/Footer/footer.module.css.d.ts

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly footerGrid: string
   readonly footerContact: string
+  readonly footerPrintContact: string
   readonly footerSocial: string
   readonly footerBottomRow: string
   readonly footerBottomPrimary: string

src/components/Footer/index.astro

@@ -62,7 +62,7 @@ const footerTextLinkClasses = [
 ---
 
 <site-footer transition:persist>
-  <footer class="w-full bg-page-offset mt-6 pt-4" role="contentinfo">
+  <footer class="w-full bg-page-offset mt-6 pt-4 print:hidden" role="contentinfo">
     <div
       id="footer-inner"
       class:list={[
@@ -142,7 +142,6 @@ const footerTextLinkClasses = [
       <div class:list={[
         styles.footerHireMe,
         'hidden lg:block lg:self-end lg:mt-8',
-        'print:hidden!',
       ]}>
         <a
           href="/contact"
@@ -159,7 +158,7 @@ const footerTextLinkClasses = [
       </div>
 
       {/* Page footer Social Share links */}
-      <nav class:list={["mt-5", styles.footerSocial, 'print:hidden!']} aria-label="Social links">
+      <nav class:list={["mt-5", styles.footerSocial]} aria-label="Social links">
         <ul class="grid list-none gap-x-4 gap-y-3 p-0 sm:mb-0 sm:mt-0 sm:mx-0 lg:grid-cols-2">
           {
             contactData.company.social
@@ -197,7 +196,6 @@ const footerTextLinkClasses = [
           styles.footerBottomRow,
           'mt-4 px-1 pt-4 pb-3 sm:p-0',
           'lg:pl-8',
-          'print:hidden!',
         ]}
       >
         <div class="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-1">