Print styles.

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

Hide file tree

Showing 12 changed files with 244 additions and 15 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -22,10 +22,20 @@ html {
   fill: white;
   font-size: 16px;
   overflow-x: hidden;
+
+  @media print {
+    background: white;
+    color: black;
+    fill: black;
+  }
 }
 
 body {
   padding: 2rem 0 0;
+
+  @media print {
+    padding: 0;
+  }
 }
 
 h1,
@@ -41,6 +51,10 @@ h6 {
   em {
     color: $primary;
     font-style: normal;
+
+    @media print {
+      color: black;
+    }
   }
 }
 
@@ -49,6 +63,11 @@ h3 {
   line-height: 2.625rem;
   font-weight: 800;
   margin: 0.5rem auto;
+
+  @media print {
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
 }
 
 p {
@@ -57,13 +76,24 @@ p {
   line-height: 2rem;
   color: rgba(255, 255, 255, 0.7);
   margin: 2rem auto;
+
+  @media print {
+    color: black;
+    margin: 0.25rem auto;
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
 }
 
 section {
   max-width: $max_width;
   margin: 0 auto;
   padding: 0 $gutter;
   overflow: hidden;
+
+  @media print {
+    max-width: none;
+  }
 }
 
 section + section {
@@ -72,11 +102,20 @@ section + section {
   @media all and (min-width: 1000px) {
     margin-top: 4rem;
   }
+
+  @media print {
+    margin-top: 0.5rem;
+  }
 }
 
 a {
   color: $primary;
   text-decoration: underline;
+
+  @media print {
+    color: black;
+    text-decoration: none;
+  }
 }
 
 .breakable {
@@ -112,4 +151,21 @@ button.link {
   &:disabled {
     color: desaturate($color: $primary, $amount: 75);
   }
+
+  @media print {
+    color: black;
+    text-decoration: none;
+  }
+}
+
+.noprint {
+  @media print {
+    display: none !important;
+  }
+}
+
+.noscreen {
+  @media screen {
+    display: none;
+  }
 }
diff --git a/src/contributions/Contributions.tsx b/src/contributions/Contributions.tsx
@@ -49,7 +49,7 @@ export function Contributions() {
   }, 0);
 
   return (
-    <section className="contributions">
+    <section className="contributions noprint">
       <h3 className="breakable">Code Contributions ({totalContributions})</h3>
       {isLoading ? (
         <p>Loading...</p>

diff --git a/src/footer/Footer.tsx b/src/footer/Footer.tsx
@@ -62,7 +62,7 @@ export function Footer() {
 
   return (
     <footer className="footer">
-      <div className="contact" id="get-in-touch">
+      <div className="contact noprint" id="get-in-touch">
         <figure className={failed ? "failed" : copied ? "copied" : ""}>
           <img
             className="uncopied-img"
@@ -132,15 +132,24 @@ export function Footer() {
       </div>
       <div className="meta">
         <div className="social">
-          <a href="https://github.com/theruther4d">
+          <a
+            href="https://github.com/theruther4d"
+            data-something="https://github.com/theruther4d"
+          >
             <span className="offscreen">Github</span>
             <Github width={36} height={36} />
           </a>
-          <a href="https://codepen.io/the_ruther4d">
+          <a
+            href="https://codepen.io/the_ruther4d"
+            data-something="https://codepen.io/the_ruther4d"
+          >
             <span className="offscreen">Codepen</span>
             <Codepen width={36} height={36} />
           </a>
-          <a href="https://www.linkedin.com/in/josh-rutherford-b10b2190">
+          <a
+            href="https://www.linkedin.com/in/josh-rutherford-b10b2190"
+            data-something="https://www.linkedin.com/in/josh-rutherford-b10b2190"
+          >
             <span className="offscreen">Linkedin</span>
             <Linkedin width={36} height={36} />
           </a>

diff --git a/src/footer/footer.scss b/src/footer/footer.scss
@@ -98,6 +98,10 @@ $img_size: 173px;
       margin-bottom: 2rem;
       text-shadow: 0 0 4px black;
     }
+
+    @media print {
+      max-width: none;
+    }
   }
 
   .meta {
@@ -110,6 +114,10 @@ $img_size: 173px;
     padding: 2rem $gutter 0;
     border-top: 1px solid rgba(white, 0.5);
     overflow: hidden;
+
+    @media print {
+      max-width: none;
+    }
   }
 
   .copyright,
@@ -129,6 +137,22 @@ $img_size: 173px;
       + a {
         margin-left: 1rem;
       }
+
+      @media print {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        &:after {
+          content: attr(href);
+        }
+
+        svg {
+          width: 1.5rem;
+          height: 1.5rem;
+          margin-right: 0.5rem;
+        }
+      }
     }
   }
 
@@ -144,6 +168,10 @@ $img_size: 173px;
       vertical-align: middle;
       margin-right: 0.5rem;
     }
+
+    @media print {
+      color: black;
+    }
   }
 
   @media all and (min-width: $horizontal_breakpoint) {
@@ -295,6 +323,10 @@ $img_size: 173px;
 
   .fill-target {
     fill: white;
+
+    @media print {
+      fill: black;
+    }
   }
 
   a:hover {

diff --git a/src/hero/Hero.tsx b/src/hero/Hero.tsx
@@ -8,7 +8,7 @@ export function Hero() {
   return (
     <section className="hero">
       <header>
-        <figure>
+        <figure className="noprint">
           <img
             src={waving}
             alt="Cartoon of me waving"
@@ -27,7 +27,7 @@ export function Hero() {
         last 5 years working primarily with React and Typescript.{" "}
         {showMore ? null : (
           <button
-            className="link"
+            className="link noprint"
             onClick={function toggle() {
               setShowMore((showing) => !showing);
             }}

diff --git a/src/hero/hero.scss b/src/hero/hero.scss
@@ -8,16 +8,32 @@ $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;
     margin: 0;
     color: $primary;
+
+    @media print {
+      font-size: 1.75rem;
+      color: black;
+    }
   }
 
   h2 {
     font-size: 1.25rem;
     margin: 0.25rem 0 0;
+
+    @media print {
+      font-size: 1rem;
+      margin: 0;
+      color: rgba(black, 0.5);
+    }
   }
 
   p {
@@ -54,6 +70,16 @@ $horizontal_breakpoint: 724px;
     &:not(.visible) {
       @extend .offscreen;
     }
+
+    @media print {
+      width: unset !important;
+      height: unset !important;
+      overflow: unset !important;
+      position: unset !important;
+      top: unset !important;
+      left: unset !important;
+      grid-column: unset;
+    }
   }
 
   @media all and (min-width: $horizontal_breakpoint) {

diff --git a/src/history/History.tsx b/src/history/History.tsx
@@ -6,7 +6,7 @@ import { ReactComponent as RiskMatch } from "./logos/riskmatch.svg";
 import { ReactComponent as Vertafore } from "./logos/vertafore.svg";
 
 import "./history.scss";
-import { Fragment, MouseEvent } from "react";
+import { MouseEvent } from "react";
 
 const today = new Date();
 const contactId = "get-in-touch";
@@ -27,7 +27,7 @@ export function History() {
 
   return (
     <section className="history">
-      <header>
+      <header className="noprint">
         <h3>
           I've been lucky to work on some <em>amazing</em> teams.
         </h3>
@@ -43,8 +43,7 @@ export function History() {
         <article className="card">
           <div className="card-content">
             <h3>
-              Employment
-              <br />
+              Employment <br className="noprint" />
               History
             </h3>
             <dl>
@@ -54,7 +53,7 @@ export function History() {
                 const duration = formatDistance(start, end);
 
                 return (
-                  <Fragment key={`${job.name}-${job.title}`}>
+                  <li key={`${job.name}-${job.title}`} className="item">
                     <dt>{job.name}</dt>
                     <dd>
                       <figure>
@@ -75,8 +74,13 @@ export function History() {
                         {" - "}
                         <time>{duration}</time>
                       </span>
+                      <ul className="notes noscreen">
+                        {job.notes.map((note) => (
+                          <li key={note}>{note}</li>
+                        ))}
+                      </ul>
                     </dd>
-                  </Fragment>
+                  </li>
                 );
               })}
             </dl>
@@ -94,33 +98,53 @@ export const jobs = [
     start: "July 1 2013",
     end: "November 30 2015",
     Logo: Sourcebits,
+    notes: [
+      "Built app marketing websites",
+      "After 1 year hired and trained junior developers offshore",
+    ],
   },
   {
     name: "Apple",
     title: "Sr. UI Developer",
     start: "December 1 2015",
     end: "May 31 2016",
     Logo: Apple,
+    notes: ["Built product marketing pages for apple.com"],
   },
   {
     name: "RiskMatch",
     title: "UI Prototype Developer",
     start: "June 1 2016",
     end: "May 31 2017",
     Logo: RiskMatch,
+    notes: [
+      "Prototyped new UI features and wrote production CSS",
+      "Converted from legacy PHP setup to React + Webpack + Typescript",
+      "Unified Prototyping and frontend development processes to save speed up delivery",
+    ],
   },
   {
     name: "RiskMatch",
     title: "UI Development Team Lead",
     start: "Jun 1 2017",
     end: "December 31 2020",
     Logo: RiskMatch,
+    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",
+    ],
   },
   {
     name: "Vertafore",
     title: "Staff Architect",
     start: "January 1 2021",
     Logo: Vertafore,
+    notes: [
+      "Promoted to core architechture group at parent company",
+      "Oversee UI development for entire companies portfolio of products",
+    ],
   },
 ];
 const jobsDescending = [...jobs].reverse();