Add table styles

[jrubenoff]

Closes #19.

Preview these styles

• Tables

Changes

Adds styling for HTML tables.

@SMakaiTakori I added a prefers-reduced-motion media query to disable the sticky header for people with vestibular motion disorders.

Component Notes

This design needs the data-label attribute on td elements for the layout on small screens.

This PR contains a pure Markdown table, alongside an example of how one might add those labels in client-side JS.

Ideally, we would add these attributes server-side to totally remove the JS dependency here. I'm assuming one can accomplish this with eleventy.after, but that's a little beyond my abilities at the moment.

Dev Notes

To keep merge conflicts to a minimum, I'm using the file structure that I noticed web.dev's 11ty instance using:

• Each shortcode's markup is in its own dedicated file in _includes.
• The common-tags package strips out whitespace, ensuring the component renders correctly.

[netlify[bot]]

✅ Deploy Preview for bloom-guides-template ready!

Name	Link
🔨 Latest commit	c0eaefe713cefdb8bb37184cde05ff689c85df66
🔍 Latest deploy log	https://app.netlify.com/sites/bloom-guides-template/deploys/649b6b6c15d4020008914df3
😎 Deploy Preview	https://deploy-preview-27--bloom-guides-template.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SMakaiTakori]

I added a prefers-reduced-motion media query to disable the sticky header for people with vestibular motion disorders.

@jrubenoff Good call on adding this query in! I appreciate the dev notes and you separating out the components to make it easier to locate what's needed.

The table looks great on desktop but wanted to point out that on mobile the bottom green border extends past the table slightly. I've included a photo below:

[jrubenoff]

@SMakaiTakori That should be fixed now if you want to take a look!