Add CTA to the website when page is printed as PDF

2026-08-31 17:17:19 +10:00
parent b071f19362
commit 22318601f6
1 changed files with 234 additions and 227 deletions
@@ -56,13 +56,12 @@
    .favicon       { height: 16px; vertical-align: text-bottom; padding-left: 0.5em; padding-right: 0.5em; }
    .bullet-points { list-style: circle; margin-left: 1.5rem; }

-    @media print {
-      .pagebreak {
-        page-break-before: always;
-      }
-    }
-
-
+    /*
+       Helper classes for printing to PDF. A class with `print-show` will only show up in in
+       printing mode. `print-hide` will hide the tagged class when in printing mode.
+     */
+    @media screen { .print-show { display: none; } }
+    @media print  { .print-hide { display: none; } }
  </style>
 </head>
 <body>
@@ -74,6 +73,13 @@
  </header>

  <main>
+    <section class="print-show" aria-label="Redirect to website">
+     <div><hr></div>
+     <div style="font-size: 1.1em; text-align: center;">
+       Visit <em>https://doylet.dev</em> for comfortable viewing of this resume with videos and more projects. Thanks!
+     </div>
+    </section>
+
    <div><hr></div>
    <section aria-label="About">
      <h2>About</h2>
@@ -410,7 +416,7 @@
          <li>Cross-Platform (Win32/Emscripten)</li>
        </ul>
        <table>
-          <tr>
+          <tr class="print-hide">
            <td><img src="assets/projects_tely_0.jpg"></td>
          </tr>
          <tr>
@@ -480,6 +486,7 @@
        </p>
      </div>

+      <section aria-label="Archived">
        <h3>Archived</h3>
        <div>
          <p class=job-role style="border-color: #E8976B">2024 - 2025: Liquid++ (Closed Source)</p>
@@ -709,7 +716,7 @@
            </ul>
          </small>
        </div>
-
+      </section>
    </section>

  </main>