Print styles.

theruther4d · Jul 27, 2021 · d8672f8 · d8672f8 · vercel · Jul 27, 2021
1 parent 51f7ca7
commit d8672f8
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 50 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -80,8 +80,8 @@ p {
   @media print {
     color: black;
     margin: 0.25rem auto;
-    font-size: 1rem;
-    line-height: 1.25rem;
+    font-size: 0.875rem;
+    line-height: 1rem;
   }
 }
 
@@ -93,6 +93,9 @@ section {
 
   @media print {
     max-width: none;
+    page-break-inside: avoid;
+    margin: 0;
+    padding: 0;
   }
 }
 
@@ -169,3 +172,7 @@ button.link {
     display: none;
   }
 }
+
+@page {
+  margin: 1cm;
+}
diff --git a/src/footer/Footer.tsx b/src/footer/Footer.tsx
@@ -62,8 +62,13 @@ export function Footer() {
 
   return (
     <footer className="footer">
-      <div className="contact noprint" id="get-in-touch">
-        <figure className={failed ? "failed" : copied ? "copied" : ""}>
+      <div className="contact" id="get-in-touch">
+        <figure
+          className={cn("noprint", {
+            failed,
+            copied,
+          })}
+        >
           <img
             className="uncopied-img"
             src={callme}
@@ -89,11 +94,11 @@ export function Footer() {
             aria-hidden={!failed}
           />
         </figure>
-        <h3>Get in touch</h3>
+        <h3 className="noprint">Get in touch</h3>
         <div className="contact-button">
           <button
             disabled={failed}
-            className="copy"
+            className="copy noprint"
             onClick={onCopy}
             title="Copy email address to clipboard"
           >
@@ -119,7 +124,7 @@ export function Footer() {
             />
             <div className="width-holder">{address}</div>
           </div>
-          <div className="message">
+          <div className="message noprint">
             {failed ? (
               <div className="error-message">
                 Oops! Something went wrong. Try copying it manually 🥲
@@ -154,7 +159,7 @@ export function Footer() {
             <Linkedin width={36} height={36} />
           </a>
         </div>
-        <span className="copyright">
+        <span className="copyright noprint">
           <img
             src={hearts}
             alt="Cartoon of my face surrounded by hearts."
@@ -169,3 +174,17 @@ export function Footer() {
 }
 
 const today = new Date();
+
+function cn(...classNames: Array<string | Record<string, any>>) {
+  return classNames.reduce(function combine(combined: string, current) {
+    if (typeof current === "string") {
+      return `${combined} ${current}`;
+    }
+
+    const valid = Object.keys(current).filter((key) =>
+      current[key] ? key : ""
+    );
+    if (!valid.length) return combined;
+    return `${combined} ${valid.join(" ")}`;
+  }, "");
+}
diff --git a/src/footer/footer.scss b/src/footer/footer.scss
@@ -22,6 +22,14 @@ $img_size: 173px;
     }
   }
 
+  @media print {
+    margin-top: 0;
+
+    &:before {
+      display: none;
+    }
+  }
+
   .contact {
     display: flex;
     flex-wrap: wrap;
@@ -101,6 +109,7 @@ $img_size: 173px;
 
     @media print {
       max-width: none;
+      padding: 0;
     }
   }
 
@@ -114,10 +123,6 @@ $img_size: 173px;
     padding: 2rem $gutter 0;
     border-top: 1px solid rgba(white, 0.5);
     overflow: hidden;
-
-    @media print {
-      max-width: none;
-    }
   }
 
   .copyright,
@@ -142,6 +147,7 @@ $img_size: 173px;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
+        font-size: 0.65rem;
 
         &:after {
           content: attr(href);
@@ -190,6 +196,18 @@ $img_size: 173px;
     }
   }
 
+  @media print {
+    .meta {
+      max-width: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .social {
+      margin: 0;
+    }
+  }
+
   .contact-button {
     max-width: 100%;
     max-height: 4rem;
@@ -203,6 +221,10 @@ $img_size: 173px;
       margin-bottom: 1rem;
     }
 
+    @media print {
+      max-height: none;
+    }
+
     /*button*/
     .copy {
       border-radius: 0 2rem 2rem 0;
@@ -268,6 +290,12 @@ $img_size: 173px;
     .email-wrap {
       display: flex;
       flex-direction: column;
+
+      @media print {
+        position: fixed;
+        top: 0;
+        right: 0;
+      }
     }
 
     .email,
@@ -311,6 +339,15 @@ $img_size: 173px;
         background: $primary;
         color: black;
       }
+
+      @media print {
+        min-height: unset;
+        background-color: transparent;
+        color: black;
+        white-space: nowrap;
+        border: 0;
+        padding: 0;
+      }
     }
 
     .message {

diff --git a/src/hero/Hero.tsx b/src/hero/Hero.tsx
@@ -60,7 +60,7 @@ export function Hero() {
           interested in areas of nature, biology, physics, art, politics, and
           literature.{" "}
           <button
-            className="link"
+            className="link noprint"
             tabIndex={showMore ? undefined : -1}
             onClick={function toggle() {
               setShowMore((showing) => !showing);

diff --git a/src/hero/hero.scss b/src/hero/hero.scss
@@ -8,11 +8,6 @@ $horizontal_breakpoint: 724px;
   gap: 2rem;
   grid-template-columns: (minmax(auto, 30rem));
 
-  @media print {
-    grid-template-columns: none;
-    gap: 0.5rem;
-  }
-
   h1 {
     font-size: 3.5rem;
     line-height: 3rem;
@@ -21,6 +16,7 @@ $horizontal_breakpoint: 724px;
 
     @media print {
       font-size: 1.75rem;
+      line-height: 1.5rem;
       color: black;
     }
   }
@@ -89,4 +85,9 @@ $horizontal_breakpoint: 724px;
       grid-column: unset;
     }
   }
+
+  @media print {
+    grid-template-columns: none;
+    gap: 0.5rem;
+  }
 }
diff --git a/src/history/History.tsx b/src/history/History.tsx
@@ -132,7 +132,6 @@ export const jobs = [
     notes: [
       "Promoted to head of UI development in a year",
       "Hired, trained, and managed team of 3-4 junior developers",
-      "Oversaw development of InsureTech web app",
       "Used React, Typescript, Redux, MobX, SCSS, Webpack",
     ],
   },

diff --git a/src/history/history.scss b/src/history/history.scss
@@ -11,10 +11,6 @@ $horizontal_breakpoint: 724px;
   margin-left: auto;
   margin-right: auto;
 
-  @media print {
-    max-width: none;
-  }
-
   h3,
   p {
     max-width: 30rem;
@@ -35,6 +31,13 @@ $horizontal_breakpoint: 724px;
     }
   }
 
+  @media print {
+    max-width: none;
+    justify-content: flex-start;
+    margin-top: 1rem;
+    margin-bottom: -0.75rem;
+  }
+
   main {
     text-align: center;
   }
@@ -106,6 +109,7 @@ $horizontal_breakpoint: 724px;
         padding: 0;
         font-size: 1.25rem;
         line-height: 1.25rem;
+        margin: 0 0 1rem;
       }
     }
   }
@@ -185,7 +189,9 @@ $horizontal_breakpoint: 724px;
       0 16px 10px -12px rgba($black, 0.4);
 
     @media print {
-      top: -2rem;
+      top: -1.5rem;
+      box-shadow: 0 4px 7px 1px rgba(black, 0.2),
+        0 16px 10px -12px rgba(black, 0.4);
     }
 
     svg {

diff --git a/src/self-taught/SelfTaught.tsx b/src/self-taught/SelfTaught.tsx
@@ -5,7 +5,12 @@ export function SelfTaught() {
   return (
     <section className="self-taught">
       <main>
-        <h3>Proudly self-taught</h3>
+        <h3>
+          <span className="noprint">Proudly self-taught</span>
+          <span className="noscreen" aria-hidden>
+            Key Stats
+          </span>
+        </h3>
         <p>
           From 0 to landing my first development job in San Francisco in under a
           year. Working at apple in 2.5 years. Team Lead in 3.

diff --git a/src/self-taught/self-taught.scss b/src/self-taught/self-taught.scss
@@ -36,6 +36,18 @@ $dark: darken($light, 11);
     }
   }
 
+  @media print {
+    justify-content: flex-start;
+
+    main {
+      margin: 0;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
   figure {
     padding: 2rem 1rem;
     margin: 0;

diff --git a/src/stats/Stats.tsx b/src/stats/Stats.tsx
@@ -6,7 +6,7 @@ import "./stats.scss";
 export function Stats() {
   return (
     <section className="stats">
-      <main>
+      <main className="noprint">
         <h3>I've been around the block a few times</h3>
         <p>
           Which gives me a wealth of experience to draw on, but I love learning
@@ -15,29 +15,36 @@ export function Stats() {
       </main>
       <dl className="card">
         <div className="card-content">
-          <dd>
-            {differenceInYears(today, startDate)}
-            <sup>+</sup>
-          </dd>
-          <dt>Years Professional Experience</dt>
-          <dd>
-            {differenceInYears(today, remoteStartDate)}
-            <sup>+</sup>
-          </dd>
-          <dt>Years Leading Teams</dt>
-          <dd>
-            {differenceInYears(today, teamLeadStartDate)}
-            <sup>+</sup>
-          </dd>
-          <dt>Years Working Remotely</dt>
-          <dd>
-            {/* @TODO: */}
-            65.26
-            <sup>+</sup>
-          </dd>
-          <dt>Thousands of lines of code written</dt>
+          <li>
+            <dd>
+              {differenceInYears(today, startDate)}
+              <sup>+</sup>
+            </dd>
+            <dt>Years Professional Experience</dt>
+          </li>
+          <li>
+            <dd>
+              {differenceInYears(today, remoteStartDate)}
+              <sup>+</sup>
+            </dd>
+            <dt>Years Leading Teams</dt>
+          </li>
+          <li>
+            <dd>
+              {differenceInYears(today, teamLeadStartDate)}
+              <sup>+</sup>
+            </dd>
+            <dt>Years Working Remotely</dt>
+          </li>
         </div>
       </dl>
+      <div className="languages noscreen">
+        <h3>Languages and Tools</h3>
+        <p>
+          React, Typescript, NodeJS, HTML, CSS, Javascript, SCSS, Webpack,
+          Rollup, MSW, testing-library
+        </p>
+      </div>
     </section>
   );
 }