[SITE] add talk page

[toshywoshy]

add a talk page based upon #12515

• all talks, workshops and ignites get displayed on a single page
• this page has the presentation title, the speakers, and when it is happening with the abstract
• all speakers are also displayed, with their picture and bio

[netlify]

✅ Deploy Preview for devopsdays-web ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	154d50d
🔍 Latest deploy log	https://app.netlify.com/sites/devopsdays-web/deploys/6694e6b7839b560008b1dad6
😎 Deploy Preview	https://deploy-preview-14346--devopsdays-web.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.

[mattstratton]

i think this is a good start! I would want to do a little bit more with the styling on this before merging it (the background color of each item is quite harsh, etc) but i think that with some visual style improvements this is a good one.

[mattstratton]

Note: since it's not navigable, here's the direct link to deploy preview of a Talks page (for reference for other reviewers)

https://deploy-preview-14346--devopsdays-web.netlify.app/events/2024-antwerp/talks/

Talks

Talk List for devopsdays Antwerp 2024

[toshywoshy]

OK, I am not a stylist, if you give me pointers, I can update the style or you can do it.
I reused the colors of the program, so talks, workshops and ignite have the same colors, maybe a lighter version of those?
But I like the fact that the colors would be consistent or easy to recognize the different presentation types.
As for the code, you should recognize a part of the code, I reused a lot of your program code to build this

[camilla-m]

lgtm

[nimbinatus]

Re styling, I'd like to see more padding in each container (probably 2em) to give more whitespace on the page. Color coding doesn't work well for accessibility reasons, so I'd try to find a different way to indicate type of talk. Italics also create problems for people who have reading issues (e.g., dyslexia). I can try to whip up some CSS for it, but I don't think reusing the styles from the program page will work since those really rely on having everything there without scrolling. If you can hang on for a few days, I'll see what I can mock up.

[toshywoshy]

@nimbinatus Yes, this PR is not in a hurry, so if you can provide a mock up or any other additional feedback and information, that would be very helpful

I like the idea of adding markers, for example some font-awesome icons, for talks, workshops and ignites, however I think we should have those consistent on the program, talk and speaker page.
I personally think having the same colors on all pages is good, this makes it easy to identify the type.
I do understand we might need different colors, but then we should change this on all pages involved and be consistent from now on.

I also think that once we do figure out the move to hugo-extended pipelines #13697 we can use SASS/LESS to better create multiple versions, like a high contrast version.

[toshywoshy]

@nimbinatus Any news on the mockup or CSS updates?