Tune print styles

adamplesnik · Oct 2, 2024 · c6f1f3e · c6f1f3e
1 parent 607fc01
commit c6f1f3e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,11 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="print:text-sm">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Adam Plesník, design engineer</title>
   </head>
-  <body class="bg-slate-50 text-zinc-600 dark:bg-gray-900 dark:text-zinc-400">
+  <body
+    class="bg-slate-50 text-zinc-600 dark:bg-gray-900 dark:text-zinc-400 print:bg-transparent print:text-zinc-800"
+  >
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/content/WorkKolbord.tsx b/src/content/WorkKolbord.tsx
@@ -4,7 +4,7 @@ import Tile from '@/components/Tile'
 
 const Badge = () => {
   return (
-    <span className="flex h-fit -rotate-6 rounded bg-zinc-800 p-1 text-xs text-white dark:border dark:border-zinc-500 dark:bg-gray-700">
+    <span className="flex h-fit -rotate-6 rounded bg-zinc-800 p-1 text-xs text-white dark:border dark:border-zinc-500 dark:bg-gray-700 print:bg-zinc-800">
       Beta
     </span>
   )

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -11,7 +11,7 @@ import Header from '@/partials/Header'
 const Home = () => {
   return (
     <>
-      <div className="to-white-0 sticky top-0 z-10 mx-auto w-full max-w-screen-md bg-gradient-to-b from-slate-50 p-8 pt-12 dark:from-gray-900">
+      <div className="to-white-0 sticky top-0 z-10 mx-auto w-full max-w-screen-md bg-gradient-to-b from-slate-50 p-8 pt-12 dark:from-gray-900 print:max-w-screen-sm print:bg-transparent">
         <Header />
       </div>
       <div className="mx-auto mb-12 flex w-full max-w-screen-md flex-col overflow-hidden p-8 print:max-w-screen-sm">