Timeline CSS refactor

[hedyhli]

Part of #1235.

Preview: https://deploy-preview-1262--pydis-static.netlify.app/timeline/

Reduction in file size for the CSS file is around 10x (unminified) and 13x (after minifying), whilst keeping pretty much all UI and functionality the same, with a few exceptions listed below.

Reviewing

This PR has some large diffs, sorry about that, however, it's actually quite manageable, as the bulk of the PR lies in the new CSS, which is only ~400 lines long together with a lot of comments.

I recommend first looking at the diff for timeline.html. The first and second entries are representative enough, because I've made sure that the same changes are applied for all entries. The first entry uses an FA icon, and the second uses the pydis logo as its icon - there are no other cases for the icons and all other components for other entries are pretty much similar to these two.

Next, the structure in timeline.html could help when looking at the CSS, which I've tried to make as readable as possible.

Finally, the JS file's changes are just adapting to the new CSS classes, and adding a separate bounce animation for the date components.

That's all you need, and I really appreciate your time!

Changes

Deliberate design changes

• Add alternate background colors for dark mode (see [#1214])

• Background colors of icons that use the pydis logo adapts to dark mode

• Alignment of the top of the content and the icon

  Before:
  

  After:
  

• The line in the middle no longer crosses through the top of the first icon

• Padding between icon and content and date are evenly distributed

• On mobile,

  • Alignment of icons is fixed (previously not center to the vertical line)
  • Dates are now placed at the top rather than at the bottom of the card due to change in implementation

• HTML

  • Semantic classes are used to conform to Bulma's convention and the rest of the site
  • Some of the Bulma classes added to each entry HTML also helps in migrating the content to YAML later on

Other known changes to the design

• Spacing, border radii, and text sizes - Bulma classes are used instead, this makes it consistent with text on other parts of the site
• On some screen sizes, particularly in landscape orientation of tablets, the new design makes the timeline entires narrower. This comes from Bulma containers which limits the maximum content width for a better reading experience.

Acknowledgements

Special thanks to editor macros; without them, I would probably have given up before finishing the PR.

Todo

• [x] Semantic classes
• [x] The little arrow on the top of each box
• [x] Test

[netlify[bot]]

✅ Deploy Preview for pydis-static ready!

Name	Link
🔨 Latest commit	9af9751467c0bb99a8a73d5bc296b7ac7141049a
🔍 Latest deploy log	https://app.netlify.com/sites/pydis-static/deploys/6602140664d0a200080715ae
😎 Deploy Preview	https://deploy-preview-1262--pydis-static.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.

[coveralls]

coverage: 100.0%. remained the same when pulling 9af9751467c0bb99a8a73d5bc296b7ac7141049a on feat/timeline-css-rewrite into f3f78ed14bc7dabcf2aa745e5268df67cbbdb404 on main.

[hedyhli]

@wookie184 that's awful! I was too careless with my inline substitutions. I'll fix it right away, thank you.