print preview improvements

src/components/Footer.tsx

@@ -138,9 +138,9 @@ const FooterLabeledSection = ({
 
 const Footer: NextPage = () => {
   return (
-    <div className="w-full bg-neutral-800">
+    <footer className="w-full break-inside-avoid bg-neutral-800">
       {/** yellow stripe */}
-      <div className="print:border-t-0 border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
+      <div className="border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px] print:border-t-0"></div>
 
       {/** Main footer area */}
       <div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 print:flex-row md:flex-row">
@@ -185,7 +185,7 @@ const Footer: NextPage = () => {
         </div>
 
         {/** Header and tabs */}
-        <div className="mx-auto print:inline-block flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
+        <div className="mx-auto flex flex-row divide-x divide-neutral-500 text-neutral-200 print:inline-block sm:px-4 md:mx-0">
           <span className="print:hidden">
             <FooterLabeledSection title="Quick Links">
               <div className="flex flex-col space-y-2 pt-4">
@@ -204,7 +204,7 @@ const Footer: NextPage = () => {
           </FooterLabeledSection>
         </div>
       </div>
-    </div>
+    </footer>
   );
 };
 

src/components/Header.tsx

@@ -114,7 +114,7 @@ const NavBar = () => {
 
 const Header: NextPage = () => {
   return (
-    <>
+    <header>
       {/** Main view */}
       <div
         id="logo-row"
@@ -138,10 +138,7 @@ const Header: NextPage = () => {
 
       {/** Print view */}
       <div className="hidden flex-row justify-center print:block print:flex">
-        <div
-          style={{ printColorAdjust: "exact" }}
-          className="rounded-xl border border-black p-2"
-        >
+        <div className="rounded-xl border border-black bg-yellow-100 p-2">
           <Image
             alt="Ear listening"
             src="/listening-ear.svg"
@@ -150,13 +147,13 @@ const Header: NextPage = () => {
           />
         </div>
         <div id="header-title" className="grid w-48 place-items-center">
-          <h1 className="text-center text-lg font-bold text-neutral-200">
+          <h1 className="text-center text-lg font-bold text-neutral-400">
             Center for Auditory Training Resources
           </h1>
           <span>auditorytraining.info</span>
         </div>
       </div>
-    </>
+    </header>
   );
 };
 

src/components/ResourceTable.tsx

@@ -216,7 +216,7 @@ const ResourceEntry = ({ resource }: { resource: AuditoryResource }) => {
   };
 
   return (
-    <tr className="divide-x-[1px] divide-slate-400">
+    <tr className="break-inside-avoid divide-x-[1px] divide-slate-400">
       <td className="max-w-xs">
         <ResourceInfo showMoreInfo resource={resource} />
       </td>