Hides unneeded elements when in print mode.

ShindouMihou · May 28, 2022 · 0d12672 · 0d12672
1 parent 0af38f9
commit 0d12672
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -55,7 +55,7 @@
 
 <div id="container" class="py-6 px-6 md:px-44 flex flex-col w-full m-auto max-w-[2168px] bg-white dark:bg-black dark:text-white">
   {#if bannerVisibility === 'true'}
-  <div id="made-with-flora" class="flex flex-row justify-between items-center w-full bg-blue-200 p-2 mb-4 text-black rounded-sm">
+  <div id="made-with-flora" class="flex flex-row justify-between items-center w-full bg-blue-200 p-2 mb-4 text-black rounded-sm print:hidden">
     <a class="flex flex-row gap-1 items-center" href="https://github.com/ShindouMihou/Flora" rel="external" target="_blank">
       <Icon src={Heart} solid class="text-red-500 w-[1.10rem] flex-shrink-0"></Icon>
       <p class="text-xs">made with <span class="uppercase font-bold">Flora</span></p>
@@ -65,7 +65,7 @@
     </button>
   </div>
   {/if}
-  <nav id="navigator" class="flex flex-col gap-2">
+  <nav id="navigator" class="flex flex-col gap-2 print:hidden">
     <div class="flex flex-row gap-2 justify-between items-center">
       <div class="flex flex-row gap-2 flex-grow">
         <a href="/">
@@ -84,7 +84,7 @@
       </button>
     </div>
   </nav>
-  <div class="flex flex-col gap-2 border rounded-lg p-2 w-full {settings}">
+  <div class="flex flex-col gap-2 border rounded-lg p-2 w-full {settings} print:hidden">
     <div class="flex flex-row justify-between">
       <h3 class="font-bold uppercase monst">Settings</h3>
       <button on:click={toggleSettings}>

diff --git a/src/routes/posts/[id].svelte b/src/routes/posts/[id].svelte
@@ -125,7 +125,7 @@
     {/each}
 {/if}
 {#if showBackToTop}
-    <button class="fixed bottom-5 md:bottom-10 right-5 md:right-16" on:click={backToTop} transition:fade>
+    <button class="fixed bottom-5 md:bottom-10 right-5 md:right-16 print:hidden" on:click={backToTop} transition:fade>
         <div class="p-3 bg-neutral-300 opacity-50 rounded-lg border border-transparent hover:border-blue-500 duration-[250ms]">
             <Icon src={ArrowUp} class="h-8 w-8 flex-shrink-0" solid />
         </div>