fix!: improve grid usage, alignment, and spacing (#24)

This commit is largely a refactor to make better use of grids by using
grid-areas, but it also improves spacing between and alignment of
elements by incorporating them into the grid. It also includes several
fixes.

* fix!: remove support for `null` date time

Rather than providing an end date time with a value of `null` to signify
that a position or experience is ongoing, the end property should now be
omitted from a date.

* refactor: use named `grid-area` for easier layout

The header, main content, and footer are now part of the grid rows and
have consistent spacing applied between them. Column and row spans have
also been replaced with named column and row starts/ends.

* fix: remove margin and padding from drawer

The drawer is no longer contained within the wrapper with the
margin/padding applied around the edges of the page. While the drawer
would previously get pushed around by margin when scrolling to the
bottom of page, the drawer now stays in place when scrolling.

* fix: lock footer to the bottom of page

The footer will now stay at the bottom of the page, regardless of the
amount of content in the resume. This includes adding margin to the
bottom of the page to prevent the footer from getting to close to the
bottom.

* fix: main content sizing and alignment

When the document has less than a full page of content, it will no
longer be centered and spread outward to fill the space. Now, content is
always aligned to the top and minimized to fit the content.

* fix: remove invalid `break-inside` property from main content

The `break-inside: avoid-print` property has been removed from within
the main content sections. While this would be desireable and does have
some effect on the print layout of the document in Chrome, it is often
buggy and causes rows to overlap. This is unsurprising, as the W3C's CSS
Fragmentation Module does not define a `break-inside` property for
`grid`s (https://www.w3.org/TR/css-break-3/#property-index), so we
remove it.

* fix: sections without date take full-width of main section

A section without a date will now consume the width that would have
otherwise been used by the date. This could be useful for an
introductory (e.g. "about me") section, which would no date and could
precede the rest of the document.

data/resume.yaml

@@ -86,7 +86,6 @@ sections:
         title: Software Developer
         date:
           start: 2021-03-29
-          end: null
         description: |
           Designed and developed cross-platform mobile application and
           back-end for streaming data from Bluetooth device to remote

layouts/partials/resume/drawer.html

@@ -8,7 +8,7 @@
 </button>
 
 <aside
-  class="group invisible sticky top-0 z-10 grid h-screen grid-cols-[min-content_1fr] backdrop-blur-sm [grid-area:stack] [transition:visibility_0s_150ms] data-[open]:visible data-[open]:transition-none md:visible md:relative md:transition-none"
+  class="group invisible sticky top-0 z-10 grid h-screen grid-cols-[min-content_1fr] self-start backdrop-blur-sm row-start-header col-start-header row-end-footer col-end-footer [transition:visibility_0s_150ms] data-[open]:visible data-[open]:transition-none md:visible md:relative md:h-auto md:transition-none md:col-start-drawer md:col-end-drawer md:row-end-main"
   id="drawer"
 >
   <div

layouts/partials/resume/footer.html

@@ -1,3 +1,3 @@
-<footer class="col-span-3 text-center text-sm font-light italic">
+<footer class="text-center text-sm font-light italic grid-in-footer">
   {{ .footer | markdownify }}
 </footer>

layouts/partials/resume/header.html

@@ -1,6 +1,4 @@
-<header
-  class="col-span-2 mx-auto text-center md:col-span-1 md:ml-0 md:text-left"
->
+<header class="text-center grid-in-header md:text-left">
   <p class="text-2xl font-medium">
     {{ .name.first }}
     {{ .name.last }}

layouts/partials/resume/index.html

@@ -1,12 +1,16 @@
 <div
-  class="relative mb-4 grid max-w-[8.5in] grid-cols-[min-content_[stack]_1fr] grid-rows-[[stack]_1fr] md:grid-cols-[1fr_min-content_[stack]_min-content] md:gap-5"
+  class="relative grid min-h-screen max-w-[8.5in] grid-cols-resume grid-rows-resume gap-4 grid-areas-resume md:grid-cols-resume-md md:grid-areas-resume-md"
 >
   {{ partial "resume/drawer" . }}
-  <main
-    class="grid px-2 pt-4 [grid-area:stack] md:col-span-2 md:grid-cols-subgrid md:pl-4 md:pr-0"
+  <div
+    class="col-span-full row-span-full grid grid-cols-subgrid grid-rows-subgrid px-2 pb-2 pt-4 md:mx-4"
   >
     {{ partial "resume/header" . }}
-    {{ range .sections }}{{ partial "resume/section" . }}{{ end }}
-  </main>
-  {{ partial "resume/footer" . }}
+    <main
+      class="grid auto-rows-min grid-cols-subgrid row-start-main row-end-main col-start-main col-end-date"
+    >
+      {{ range .sections }}{{ partial "resume/section" . }}{{ end }}
+    </main>
+    {{ partial "resume/footer" . }}
+  </div>
 </div>

layouts/partials/resume/section.html

@@ -1,44 +1,41 @@
 {{ $dateFormat := "2006" }}
-<section class="col-span-2 my-2 gap-x-4 md:grid md:grid-cols-subgrid">
+<section class="my-2 grid grid-cols-subgrid col-start-main col-end-date">
   {{ with .title }}
-    <h1 class="col-span-2 text-xl font-light capitalize">
+    <h1 class="text-xl font-light capitalize col-start-main col-end-date">
       {{ . }}
     </h1>
   {{ end }}
   {{ range .entries }}
-    {{ $startDate := "" }}
-    {{ $endDate := "present" }}
-    {{ with .date }}
-      {{ $startDate = time.Format $dateFormat .start }}
-      {{ with .end }}{{ $endDate = time.Format $dateFormat . }}{{ end }}
+    {{ with .title }}
+      <h2 class="text-lg font-medium col-start-main col-end-main">
+        {{ . }}
+      </h2>
     {{ end }}
-    <div class="break-inside-avoid-page">
-      <div class="flex items-center justify-between">
-        {{ with .title }}
-          <h2 class="text-lg font-medium">{{ . }}</h2>
-        {{ end }}
-        {{ with .date }}
-          <p class="whitespace-nowrap text-sm md:hidden">
-            {{ $startDate }} -
-            {{ $endDate }}
-          </p>
-        {{ end }}
-      </div>
-      {{ with .name }}
-        <h3 class="text-base font-light">{{ . }}</h3>
-      {{ end }}
-      {{ with .description }}
-        <div class="prose prose-sm prose-invert">
-          {{ . | markdownify }}
-        </div>
-      {{ end }}
-    </div>
-    <div class="mx-auto hidden text-center text-sm md:block">
-      {{ with .date }}
+    {{ with .date }}
+      <div
+        class="flex flex-row-reverse gap-1 whitespace-nowrap text-center text-sm col-start-date col-end-date md:row-span-3 md:block md:whitespace-normal"
+      >
+        {{ $startDate := time.Format $dateFormat .start }}
+        {{ $endDate := "present" }}
+        {{ with .end }}{{ $endDate = time.Format $dateFormat . }}{{ end }}
         <p>{{ $endDate }}</p>
-        <p>|</p>
+        <div class="before:content-['-'] md:before:content-['|']"></div>
         <p>{{ $startDate }}</p>
-      {{ end }}
+      </div>
+    {{ end }}
+    {{ with .name }}
+      <h3
+        class="text-base font-light col-start-main col-end-date md:col-end-main"
+      >
+        {{ . }}
+      </h3>
+    {{ end }}
+    <div
+      class="{{ if .date }}
+        md:col-end-main
+      {{ end }} prose prose-sm prose-invert col-start-main col-end-date"
+    >
+      {{ .description | markdownify }}
     </div>
   {{ end }}
 </section>

package.json

@@ -6,6 +6,7 @@
     "@commitlint/config-conventional": "^17.8.1",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@savvywombat/tailwindcss-grid-areas": "^3.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20.8.9",
     "autoprefixer": "^10.4.16",

tailwind.config.js

@@ -1,7 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./hugo_stats.json"],
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [
+    require("@tailwindcss/typography"),
+    require("@savvywombat/tailwindcss-grid-areas"),
+  ],
   theme: {
     extend: {
       typography: () => ({
@@ -24,15 +27,36 @@ module.exports = {
           },
         },
       }),
-      // TODO(cjshearer): remove once
+      // TODO(cjshearer): remove subgrid once
       // https://github.com/tailwindlabs/tailwindcss/pull/12298/files is
       // released
       gridTemplateColumns: {
+        "resume-md": "1fr min-content min-content",
+        resume: "1fr min-content",
         subgrid: "subgrid",
       },
       gridTemplateRows: {
+        resume: `
+          min-content
+          1fr
+          min-content
+        `,
         subgrid: "subgrid",
       },
+      // https://savvywombat.com.au/tailwind-css/grid-areas
+      gridTemplateAreas: {
+        "resume-md": [
+          "header header drawer",
+          "main date drawer",
+          "footer footer footer",
+        ],
+        // prettier-ignore
+        resume: [
+          "header header",
+          "main date",
+          "footer footer",
+        ],
+      },
     },
   },
 };