fixed header not hiding when wanting to print

src/app.css

@@ -1,7 +1,6 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
-
 @plugin "daisyui/theme" {
   name: "Deprived";
   default: true;
@@ -36,7 +35,6 @@
   --noise: 0;
 }
 
-
 @plugin "daisyui/theme" {
   name: "dark";
   color-scheme: "dark";
@@ -70,7 +68,6 @@
   --noise: 1;
 }
 
-
 @plugin "daisyui/theme" {
   name: "pink";
   color-scheme: "light";
@@ -104,7 +101,6 @@
   --noise: 0;
 }
 
-
 @plugin "daisyui/theme" {
   name: "netherrack";
   color-scheme: "dark";
@@ -174,8 +170,7 @@
 .bg-grid-100 {
   background:
     linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
-    #f2f2f2;
   background-size:
     4px 4px,
     4px 4px,
@@ -191,8 +186,7 @@
 .bg-grid-200 {
   background:
     linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
-    #f2f2f2;
   background-size:
     4px 4px,
     4px 4px,
@@ -208,8 +202,7 @@
 .bg-grid-300 {
   background:
     linear-gradient(-90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), #f2f2f2;
-    #f2f2f2;
   background-size:
     4px 4px,
     4px 4px,
@@ -221,3 +214,9 @@
     80px 80px;
   background-color: var(--color-base-300);
 }
+
+@media print {
+  .hide-on-print {
+    display: none !important;
+  }
+}

src/routes/+layout.svelte

@@ -1,84 +1,98 @@
 <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
 <script lang="ts">
   import "../app.css";
-    import { fly } from 'svelte/transition';
+  import { fly } from "svelte/transition";
-    import MediaQuery from 'svelte-media-queries';
+  import MediaQuery from "svelte-media-queries";
   import { Dices } from "@lucide/svelte";
-    let hideOnPrint: boolean;
+  let hideOnPrint: boolean = $state(false);
 
   let { children } = $props();
 
   import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
   import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
 
-    const footerCollapseThreshold : string = '1000px';
+  const footerCollapseThreshold: string = "1000px";
-    const headerCollapseThreshold : string = '1000px';
+  const headerCollapseThreshold: string = "1000px";
-    let footerCollapse : boolean;
+  let footerCollapse: boolean;
-    let isMobile : boolean = $state(false);
+  let isMobile: boolean = $state(false);
 
-    let navbarHidden : boolean = $state(true);
+  let navbarHidden: boolean = $state(true);
 
   function resetNavBar() {
     navbarHidden = true;
   }
 
-    import { afterNavigate } from '$app/navigation';
+  import { afterNavigate } from "$app/navigation";
   afterNavigate(() => {
     const params = new URLSearchParams(window.location.search);
-        hideOnPrint = params.get('hideOnPrint') === '1';
+    hideOnPrint = params.get("hideOnPrint") === "1";
-        //console.log(hideOnPrint);
+    console.log(hideOnPrint);
   });
 
-    import { onMount } from 'svelte';
+  import { onMount } from "svelte";
   import Zooter from "./comps/Zooter.svelte";
 
   onMount(async () => {
-        const lock = document.createElement('meta');
+    const lock = document.createElement("meta");
-        lock.name = 'darkreader-lock';
+    lock.name = "darkreader-lock";
     document.head.appendChild(lock);
   });
 
-    function nextTheme(){
+  function nextTheme() {
     let theme: string | null = null;
 
-        if (typeof localStorage !== 'undefined') {
+    if (typeof localStorage !== "undefined") {
-            theme = localStorage.getItem('theme');
+      theme = localStorage.getItem("theme");
     }
 
     const themesArr = (window as any).AvailableThemes;
     let nextTheme = "dark";
-        if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
+    if (
-
+      theme == "null" ||
+      theme == "undefined" ||
+      theme == undefined ||
+      theme == null
+    ) {
     } else {
       nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
     }
 
     console.log("Slecting: " + nextTheme);
-        document.documentElement.setAttribute('data-theme', nextTheme);
+    document.documentElement.setAttribute("data-theme", nextTheme);
-        localStorage.setItem('theme', nextTheme);
+    localStorage.setItem("theme", nextTheme);
   }
-
-    
 </script>
 
 {#snippet SwitchThemeButton()}
-<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
+  <div
-    <button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
+    class="tooltip tooltip-bottom grid place-content-center"
-</div>
+    data-tip="Switch theme"
+  >
+    <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
+  </div>
 {/snippet}
 
 <!-- Detect mobile -->
-<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
+<MediaQuery
-<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
+  query="(max-width: {footerCollapseThreshold})"
+  bind:matches={footerCollapse}
+/>
+<MediaQuery
+  query="(max-width: {headerCollapseThreshold})"
+  bind:matches={isMobile}
+/>
 
 <!-- Nav bar -->
-<div class="bg-base-200 p-0">
+<div class=" bg-base-200 p-0">
   <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
     <div class="nav-bar pr-4">
       {#if !isMobile}
         <div class="desktop">
           <a href="/" class="nav-head">
-                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
+            <DeprivedLogo
+              Class="fill-base-content p-2"
+              Style="width: 3.5rem; height: auto;"
+            />
             <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
           </a>
           <div class="nav-spacer" />
@@ -88,7 +102,11 @@
 
           {@render SwitchThemeButton()}
 
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
+          <a
+            href="/zhen/cv/rev2?hideOnPrint=1"
+            target="_blank"
+            style="width: 7.5rem;">Zhen CV</a
+          >
           <a href="/tools" style="width: 7.5rem;">Tools</a>
           <a href="https://botalex.itch.io/" target="_blank">Games</a>
           <!-- <a href="/posts">Blog</a>
@@ -97,20 +115,33 @@
       {:else}
         <div class="collapsed shadow-xl">
           <a onclick={resetNavBar} href="/" class="nav-head">
-                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
+            <DeprivedLogo
+              Class="fill-base-content p-2"
+              Style="width: 3.5rem; height: auto;"
+            />
             <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
           </a>
           <div class="nav-spacer" />
           {@render SwitchThemeButton()}
           <div class="px-1"></div>
-                    <button id="toggle-nav" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}>
+          <button
-                        <HamburgerMenuIcon Class="fill-base-content"/>
+            id="toggle-nav"
+            onclick={() => {
+              navbarHidden = !navbarHidden;
+              console.log(navbarHidden);
+            }}
+          >
+            <HamburgerMenuIcon Class="fill-base-content" />
           </button>
         </div>
         {#if !navbarHidden}
           <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
             <!-- <a onclick={resetNavBar} href="/">Home</a> -->
-                    <a onclick={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
+            <a
+              onclick={resetNavBar}
+              href="https://botalex.itch.io/"
+              target="_blank">Games</a
+            >
             <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
             <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
                         <a onclick={resetNavBar} href="/about">About</a> -->
@@ -123,9 +154,23 @@
   <!-- Page content -->
   {@render children?.()}
 
-    <Zooter bind:hideOnPrint/>
+  <Zooter bind:hideOnPrint />
 </div>
 
+{#if footerCollapse}
+  <style>
+    .about-container {
+      flex-direction: column;
+      justify-content: center !important;
+      gap: 25px;
+    }
+  </style>
+{/if}
+
+{#if isMobile}
+  <style>
+  </style>
+{/if}
 
 <style lang="scss">
   /* Nav bar. */
@@ -159,7 +204,6 @@
     border: none;
   }
 
-
   .nav-list {
     display: flex;
     flex-direction: column;
@@ -266,26 +310,4 @@
   a:hover {
     filter: brightness(130%);
   }
-
-    @media print {
-    .hide-on-print {
-        display: none;
-    }
-}
 </style>
-
-{#if footerCollapse}
-    <style>
-        .about-container {
-            flex-direction: column;
-            justify-content: center !important;
-            gap: 25px;
-        }
-    </style>
-{/if}
-
-{#if isMobile}
-    <style>
-
-    </style>
-{/if}

src/routes/comps/Zooter.svelte

@@ -155,7 +155,7 @@
   on:resize={onResize}
 />
 
-<div class="w-full">
+<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
   <!-- Keep scrolling thing -->
   <div class="hidden h-64 w-full flex flex-col justify-center items-center">
     <div>Keep scrolling to veiw Zhen's portfolio site!</div>
@@ -180,9 +180,7 @@
 
   <!-- About footer -->
   <div
-    class="{hideOnPrint
+    class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
-      ? 'hide-on-print'
-      : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
   >
     <div class="flex justify-center">
       <div class="grid gap-8 sm:grid-cols-3 items-center w-full">

src/routes/zhen/cv/rev2/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   // Left side
   import NameAndImage from "../CompsRev2/NameAndImage.svelte";
-    import ShortProfile from "../CompsRev2/ShortProfile.svelte"
+  import ShortProfile from "../CompsRev2/ShortProfile.svelte";
-    import CombinedContacts from "../CompsRev2/CombinedContacts.svelte"
+  import CombinedContacts from "../CompsRev2/CombinedContacts.svelte";
   import LinkedInQR from "../CompsRev2/LinkedInQR.svelte";
 
   // Right side
@@ -22,14 +22,14 @@
   import LinkToSource from "../CompsRev2/LinkToSource.svelte";
 
   // Discord embed
-    import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
+  import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png";
 
   // Print detection setup
   import { onMount } from "svelte";
   onMount(() => {
     // Check if the query parameter exists in the URL
     const urlParams = new URLSearchParams(window.location.search);
-        const hideOnPrintParam = urlParams.get('hideOnPrint');
+    const hideOnPrintParam = urlParams.get("hideOnPrint");
 
     // If the query parameter is not detected, reload the page with the parameter added
     if (!hideOnPrintParam) {
@@ -39,58 +39,68 @@
 
   function getFormattedDate(): string {
     const date = new Date();
-        const day = String(date.getDate()).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, "0");
-        const month = String(date.getMonth() + 1).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, "0");
     const year = date.getFullYear();
 
     return `${day}-${month}-${year}`;
   }
-
 </script>
 
 <title>Zhentao Wei's CV {getFormattedDate()}</title>
 <meta content="Zhentao Wei's CV" property="og:title" />
-<meta content="This CV is made completely with svelte + html + css + js" property="og:description" />
+<meta
+  content="This CV is made completely with svelte + html + css + js"
+  property="og:description"
+/>
 <meta content={preveiwImage} property="og:image" />
 <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
 
 <div class="cv-info-container hide-on-print">
   <div>
-        Under here is my CV rev1 for an application made entirely in HTML and CSS. The page is designed to be saved as PDF.
+    Under here is my CV rev1 for an application made entirely in HTML and CSS.
-        This can be done by pressing <div class="keyboard-key">P</div> + <div class="keyboard-key">CTRL</div>, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
+    The page is designed to be saved as PDF. This can be done by pressing <div
-        <br/>
+      class="keyboard-key"
-        <br/>
+    >
-        I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
+      P
+    </div>
+    +
+    <div class="keyboard-key">CTRL</div>
+    , then set scaling to 100% and no margins. Lastly, select save to PDF or print.
+    <br />
+    <br />
+    I have to sadly recommend chrome for this process. Firefox somehow messes with
+    the quality of the PDF :(
   </div>
 </div>
 
 <div class="cv-container-container include-in-print">
   <div class="cv-container sections decorations">
     <div id="left-section">
-            <LeftTopDecor Style="pointer-events: none;"/>
+      <LeftTopDecor Style="pointer-events: none;" />
-            <BottomRightDecor Style="pointer-events: none;"/>
+      <BottomRightDecor Style="pointer-events: none;" />
       <div>
-                <NameAndImage/>
+        <NameAndImage />
-                <ShortProfile/>
+        <ShortProfile />
-                <CombinedContacts/>
+        <CombinedContacts />
-                <LinkedInQR/>
+        <LinkedInQR />
       </div>
     </div>
     <div id="leftSectionSeperator"></div>
     <div id="right-section">
-            <AlexWatermark Style="pointer-events: none;"/>
+      <AlexWatermark Style="pointer-events: none;" />
       <div id="TopRightSkillsText">
-                <RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
+        <RepeatedSkills targetTextHeight={30} targetTextWidth={75} />
       </div>
       <div id="Credit">
-                <LinkToSource/>
+        <LinkToSource />
       </div>
       <div>
-                <Profile/>
+        <Profile />
-                <BiggestFlex/>
+        <BiggestFlex />
-                <TableOfProjects/>
+        <TableOfProjects />
-                <Experience/>
+        <Experience />
-                <Education/>
+        <Education />
       </div>
     </div>
   </div>
@@ -120,7 +130,7 @@
     }
   }
 
-    .cv-container-container{
+  .cv-container-container {
     width: 100%;
     height: 100%;
 
@@ -154,7 +164,7 @@
       overflow: hidden;
     }
 
-        #left-section{
+    #left-section {
       background-color: #bdd6ee;
       width: calc(100% / 3 * 1);
 
@@ -172,7 +182,7 @@
       }
     }
 
-        #right-section{
+    #right-section {
       width: calc(100% / 3 * 2);
 
       > div:last-child {
@@ -189,13 +199,13 @@
         padding-bottom: 30mm;
 
         // Disable interactivity for padding
-                pointer-events:none;
+        pointer-events: none;
       }
     }
   }
 
   .decorations {
-        #leftSectionSeperator{
+    #leftSectionSeperator {
       position: relative;
       height: 100%;
       width: 0%;
@@ -227,7 +237,7 @@
         mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
 
         color: rgb(190, 190, 190);
-                font-family: 'CozetteVector';
+        font-family: "CozetteVector";
         font-size: x-large;
       }
 
@@ -241,3 +251,4 @@
     }
   }
 </style>
+