bugfix: positioning responsive icon

[sharwinbobde]

bugfix for issue #635.

• option 1 works because over specialisation for medium size screen.
• option 2 works because 28 is the correct number 🤓

I suggest keeping both.

Does this count as onboarding?

[sharwinbobde]

🫦 @thomcsmits

1. 
2. 
3. 

[thomcsmits]

Very nice! :)

Can we add this to outsite.nl as well?

Here for fix1

Here for fix2

[sharwinbobde]

done.... but I saw something I can never unsee

[sharwinbobde]

fixed the panda rotation:

[thomcsmits]

Nice! Good catch :)

[casperboone]

Nice! Thx for the fixes

[casperboone]

Instead of rotating the panda, I think it's better to fix the positioning for 430px-768px screens (not necessarily with such a specific target). Just to not change the visual appearance of the panda ;) 🐼

[sharwinbobde]

Hey, I tried shifting the panda down before rotating it. It looked a bit odd, like just a stub peeking out. I wasn't happy with that, so I said just aligned the image with the diagonal stripe; it was more consistent, looked similar at all resolutions, and we see more of the panda.

Ill try putting up a screenshot with the repositioned panda for comparison later today.

[thomcsmits]

At this point, can you also add the same tweaks for the mixup site? Not yet incorporated in that PR as I wasn't sure what the rest would review

[casperboone]

@thomcsmits i don’t think there’s anything to tweak on the mixup page. The surrounding components of the invite aren’t similar, so no relative spacing to set

[thomcsmits]

What do you mean? It's the same icon position thing that would be fixed with 28px I believe

[casperboone]

There are no changes to the icon position in this pr. Just the space surrounding the invite component

or I’m missing something

[thomcsmits]

Didn't check it yet but I presumed the same changes would work if added to these 2 lines:

dwhdelft.nl/dwhdelft.nl/pages/mixup.vue

Line 128 in d42db48

class="my-8 md:my-4"

dwhdelft.nl/dwhdelft.nl/pages/mixup.vue

Line 114 in d42db48

<section class="bg-brand-900 text-white text-lg mx-auto pt-12 pb-24 md:flex">

[casperboone]

Btw, the icon moving above the text on smaller screens is actually by design 😅 if that’s what you meant @thomcsmits

(and isn’t changed in this pr, just the space surrounding the invite component)

[thomcsmits]

Ah well that was I think this entire PR😅, based on what I reported here: #635

[casperboone]

Merging this for now because I want to do a big change to do the codebase. Let's tweak the panda stuff later 😄