improvements to the resource list

src/components/Footer.tsx

@@ -113,7 +113,7 @@ const AdminLogin = () => {
 
   return (
     <Link
-      className="text-sm text-neutral-300 hover:underline"
+      className="text-sm text-neutral-300 hover:underline print:hidden"
       href="/admin/login"
     >
       Site Admin Login
@@ -140,12 +140,12 @@ const Footer: NextPage = () => {
   return (
     <div className="w-full bg-neutral-800">
       {/** yellow stripe */}
-      <div className="border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
+      <div className="print:border-t-0 border-t-[1px] border-neutral-400 bg-yellow-400 p-[4px]"></div>
 
       {/** Main footer area */}
-      <div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 md:flex-row">
+      <div className="mx-auto flex max-w-5xl flex-col-reverse justify-between p-4 print:flex-row md:flex-row">
         {/** Wendell Johnson Info */}
-        <div className="mt-8 flex-col sm:mt-0">
+        <div className="mt-8 flex-col print:mt-0 sm:mt-0">
           <Image
             alt="University of Iowa logo"
             width={128}
@@ -185,7 +185,8 @@ const Footer: NextPage = () => {
         </div>
 
         {/** Header and tabs */}
-        <div className="mx-auto flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
+        <div className="mx-auto print:inline-block flex flex-row divide-x divide-neutral-500 text-neutral-200 sm:px-4 md:mx-0">
+          <span className="print:hidden">
             <FooterLabeledSection title="Quick Links">
               <div className="flex flex-col space-y-2 pt-4">
                 {links.map((quickLink, index) => {
@@ -193,6 +194,7 @@ const Footer: NextPage = () => {
                 })}
               </div>
             </FooterLabeledSection>
+          </span>
           <FooterLabeledSection title="Contact">
             <div className="flex flex-col divide-y divide-neutral-500">
               {contacts.map((contactInfo, index) => {

src/components/Header.tsx

@@ -77,7 +77,7 @@ const NavBar = () => {
   ];
 
   return (
-    <nav className="sticky top-0 z-50 w-full border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 shadow-black drop-shadow-md">
+    <nav className="sticky top-0 z-50 w-full border-b border-neutral-400 bg-gradient-to-b from-amber-300 to-amber-300 shadow-black drop-shadow-md print:hidden">
       <li className="mx-auto flex max-w-5xl flex-row px-4 sm:justify-between">
         <ul id="left-nav-links" className="flex flex-row space-x-10">
           <NavBarLink href="/" label="Home" />
@@ -115,9 +115,10 @@ const NavBar = () => {
 const Header: NextPage = () => {
   return (
     <>
+      {/** Main view */}
       <div
         id="logo-row"
-        className="border-yellow flex flex-row justify-center border-b bg-neutral-800 p-4 drop-shadow-xl"
+        className="border-yellow flex flex-row justify-center border-b bg-neutral-800 p-4 drop-shadow-xl print:hidden"
       >
         <div className="rounded-xl bg-yellow-100 p-2 shadow-md shadow-yellow-500/50">
           <Image
@@ -134,6 +135,27 @@ const Header: NextPage = () => {
         </div>
       </div>
       <NavBar />
+
+      {/** 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"
+        >
+          <Image
+            alt="Ear listening"
+            src="/listening-ear.svg"
+            width={64}
+            height={64}
+          />
+        </div>
+        <div id="header-title" className="grid w-48 place-items-center">
+          <h1 className="text-center text-lg font-bold text-neutral-200">
+            Center for Auditory Training Resources
+          </h1>
+          <span>auditorytraining.info</span>
+        </div>
+      </div>
     </>
   );
 };

src/components/ResourceTable.tsx

@@ -81,7 +81,7 @@ export const ResourceInfo = ({
                 width={512}
                 height={512}
               />
-              <span className="block rounded-lg border border-neutral-900 bg-neutral-900 py-[1px] text-center text-white hover:bg-neutral-500">
+              <span className="block rounded-lg border border-neutral-900 bg-neutral-900 py-[1px] text-center text-white hover:bg-neutral-500 print:hidden">
                 more info
               </span>
             </div>
@@ -305,7 +305,7 @@ const PagesNavigation = ({
   };
 
   return (
-    <div className="flex flex-row justify-between bg-amber-100 py-2 pl-2 pr-4">
+    <div className="flex flex-row justify-between bg-amber-100 py-2 pl-2 pr-4 print:hidden">
       <div className="flex w-64 flex-row space-x-2">
         <div className="relative inline-flex">
           <select

src/pages/resources/index.tsx

@@ -33,7 +33,7 @@ const Resources = () => {
     <>
       <Header />
       <main className="mx-auto my-6 max-w-6xl md:px-4">
-        <div className="mb-2 p-2 sm:mb-4 sm:p-4 flex flex-row justify-between">
+        <div className="mb-2 flex flex-row justify-between p-2 print:hidden sm:mb-4 sm:p-4">
           <section className="space-y-2">
             <h1 className="text-3xl font-bold">All Resources</h1>
             <div className="">
@@ -57,7 +57,7 @@ const Resources = () => {
               onClick={() => {
                 window.print();
               }}
-              className="inline-block space-x-2 rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md"
+              className="inline-block space-x-2 rounded-md border border-neutral-900 bg-yellow-200 px-4 py-2 align-middle font-semibold shadow shadow-black/50 duration-200 ease-out hover:bg-yellow-300 hover:shadow-md print:hidden"
             >
               <span className="inline">Print Results</span>
               <PrinterIcon className="inline w-6" />