feat: make resume print nicer

resume/index.html

@@ -17,7 +17,7 @@
       .title {
         font-size: 1.3rem;
       }
-      .subtitle {
+      [class^="subtitle"] {
         font-size: 1.15rem;
       }
       .company {
@@ -29,7 +29,8 @@
       .type::before {
         content: " - ";
       }
-      .date {
+      .date,
+      [class^="subdate"] {
         font-size: 0.8rem;
       }
       .info {
@@ -60,6 +61,56 @@
         hr {
           display: none !important;
         }
+        .card {
+          display: grid;
+          grid-template-areas:
+            "title title title title"
+            "company type date date"
+            "subtitle subdate subdate subdate"
+            "subtitle2 subdate2 subdate2 subdate2"
+            "subtitle3 subdate3 subdate3 subdate3";
+          text-align: left;
+        }
+        .date,
+        [class^="subdate"] {
+          font-style: italic;
+          text-align: right;
+        }
+        .title {
+          grid-area: title;
+        }
+        .type {
+          grid-area: type;
+          font-style: normal;
+        }
+        .company {
+          grid-area: company;
+          text-decoration: none;
+        }
+        .date {
+          grid-area: date;
+        }
+        .subtitle {
+          grid-area: subtitle;
+        }
+        .subdate {
+          grid-area: subdate;
+        }
+        .subtitle2 {
+          grid-area: subtitle2;
+        }
+        .subdate2 {
+          grid-area: subdate2;
+        }
+        .subtitle3 {
+          grid-area: subtitle3;
+        }
+        .subdate3 {
+          grid-area: subdate3;
+        }
+        .cta {
+          display: none;
+        }
       }
     </style>
   </head>
@@ -75,8 +126,11 @@
         background in community management, software engineering, and developer
         experience, I strive to create accessible pathways for diverse talent.
       </p>
-      <p>
+      <p class="cta">
-        Interested in hiring me? <a href="https://testimonials.nhcarrigan.com" target="_blank">See what past clients have to say</a>.
+        Interested in hiring me?
+        <a href="https://testimonials.nhcarrigan.com" target="_blank"
+          >See what past clients have to say</a
+        >.
       </p>
       <section>
         <h2>Employment</h2>
@@ -91,7 +145,7 @@
           <span class="date">June 2024 - present</span>
           <hr />
           <p class="subtitle">Community Bot Engineer</p>
-          <p class="date">July 2023 - June 2024</p>
+          <p class="subdate">July 2023 - June 2024</p>
         </div>
         <div class="card">
           <p class="title">Educational Web Developer and Community Manager</p>
@@ -168,13 +222,13 @@
           <span class="date">Nov 2016 - Apr 2020</span>
           <hr />
           <p class="subtitle">Person-in-Charge</p>
-          <p class="date">Aug 2013 - Nov 2016</p>
+          <p class="subdate">Aug 2013 - Nov 2016</p>
           <hr />
-          <p class="subtitle">Produce Clerk</p>
+          <p class="subtitle2">Produce Clerk</p>
-          <p class="date">Feb 2010 - Aug 2013</p>
+          <p class="subdate2">Feb 2010 - Aug 2013</p>
           <hr />
-          <p class="subtitle">Courtesy Clerk</p>
+          <p class="subtitle3">Courtesy Clerk</p>
-          <p class="date">Aug 2009 - Feb 2010</p>
+          <p class="subdate3">Aug 2009 - Feb 2010</p>
         </div>
       </section>
       <section>
@@ -325,8 +379,9 @@
   </body>
   <script>
     const dates = document.querySelectorAll(".date");
+    const subdates = document.querySelectorAll("[class^='subdate']");
     const today = new Date();
-    for (const date of dates) {
+    for (const date of [...dates, ...subdates]) {
       const start = new Date("5" + date.textContent.split(" - ")[0]);
       const end =
         date.textContent.split(" - ")[1] === "present"