Make résumé print friendly

banga · Jan 5, 2024 · 582a952 · 582a952
1 parent 299fb43
commit 582a952
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { SocialIcons } from "./SocialIcons.js";
 
 export function Footer() {
   return (
-    <div className="mt1 flex-row space-between align-center flex-wrap">
+    <div className="mt1 flex-row space-between align-center flex-wrap no-print">
       <div className="flex-col">
         <div className="bold">Shrey Banga</div>
         <div className="font-small dim">banga.shrey@gmail.com</div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -8,7 +8,7 @@ export function Header({ pathName }: { pathName: string }) {
   return (
     <BuildContext.Consumer>
       {({ baseUrl }) => (
-        <div>
+        <div className="no-print">
           <Link href="/">{new URL(baseUrl).hostname}</Link>
           <span className="dim"> / </span>
           <Link href={pathName}>{title}</Link>

diff --git a/src/pages/ResumePage.tsx b/src/pages/ResumePage.tsx
@@ -261,9 +261,19 @@ function Education() {
 
 function Projects() {
   return (
-    <div className="pb1 pt1">
-      A list of my other projects is <Link href={PROJECTS_PATH}>here</Link>.
-    </div>
+    <BuildContext.Consumer>
+      {({ baseUrl }) => (
+        <div className="pb1 pt1">
+          A list of my side projects is at{" "}
+          <Link href={PROJECTS_PATH}>
+            {new URL(PROJECTS_PATH, baseUrl)
+              .toString()
+              .replace(/^https?:\/\//g, "")}
+          </Link>
+          .
+        </div>
+      )}
+    </BuildContext.Consumer>
   );
 }
 

diff --git a/static/style.css b/static/style.css
@@ -308,3 +308,14 @@ h2:hover > .permalink,
 h3:hover > .permalink {
   opacity: 1;
 }
+
+/* Print */
+@media print {
+  .no-print {
+    display: none;
+  }
+
+  body {
+    max-width: 100%;
+  }
+}