Add print styles

cis1951 · Jan 29, 2024 · 3802247 · 3802247
1 parent ae33aae
commit 3802247
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,12 +22,12 @@ export default function RootLayout({
         <html lang="en">
             <body>
                 <MenuContextProvider>
-                    <div className="md:container mx-auto md:px-8 md:py-16">
-                        <h1 className="hidden md:block md:text-8xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-600 to-purple-600 dark:from-cyan-500 dark:to-purple-500">
+                    <div className="md:container mx-auto md:px-8 md:py-16 print:md:py-8">
+                        <h1 className="hidden md:block print:block md:text-8xl print:text-4xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-600 to-purple-600 dark:from-cyan-500 dark:to-purple-500">
                             <Link href="/">CIS 1951</Link>
                         </h1>
                         <div className="md:mt-8 md:flex flex-nowrap gap-4">
-                            <div className="flex flex-col items-center bg-neutral-50 dark:bg-neutral-800 md:bg-transparent dark:md:bg-transparent pt-4 md:pt-0">
+                            <div className="flex flex-col items-center bg-neutral-50 dark:bg-neutral-800 md:bg-transparent dark:md:bg-transparent pt-4 md:pt-0 print:hidden">
                                 <h1 className="text-center mb-3 md:hidden text-3xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-700 to-purple-700 dark:from-cyan-400 dark:to-purple-400">CIS 1951</h1>
                                 <div className="px-4 md:px-0 w-full"><Menu /></div>
                                 <div className="w-full rounded-t-2xl h-4 bg-white dark:bg-black mt-4 border-t border-neutral-200 dark:border-neutral-700 md:hidden" />

diff --git a/components/Card.tsx b/components/Card.tsx
@@ -7,7 +7,7 @@ export type CardProps = {
 }
 
 export function Card({ title, children, margin = false }: CardProps) {
-    let className = "rounded-xl p-4 bg-neutral-50 border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+    let className = "rounded-xl p-4 bg-neutral-50 border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 print:p-0 print:border-0 print:bg-transparent"
     if (margin) className += " mb-4"
 
     return <div className={className}>