Foundation.mozilla.org: [Frontend] Spotlight

[cadecairos]

~Blocked until backend work https://github.com/mozilla/foundation.mozilla.org/issues/4841 is done.~ Unblocked.

Refer to Sketch file for the final design.

[mmmavis]

@taisdesouzalessa for the spotlight image on the left, do we want it to be 404px tall or as tall as section on the right?

---

Also, is this gradient filter something we want to apply in code? (Not sure if this was in Sketch just for a quick image treatment)

[mmmavis]

@taisdesouzalessa Also wondering if we wanna have placeholder image/background colour for blog author that doesn't have a profile pic set.

[Pomax]

I remember talking to @beccaklam about that and the idea was to have a "generic person outline" icon for use in that situation.

[beccaklam]

@taisdesouzalessa Also wondering if we wanna have placeholder image/background colour for blog author that doesn't have a profile pic set.

@mmmavis Yup, in the mockups we use this background image: https://drive.google.com/file/d/1fuYuCSE08fNJNj3ABl0LPZJJJGoeu2IP/view?usp=sharing

Is that enough or do you need it styled like how it is in the mockup?

[mmmavis]

@beccaklam yea all good! Thanks!

[taisdesouzalessa]

@taisdesouzalessa for the spotlight image on the left, do we want it to be 404px tall or as tall as section on the right?

We want to have it fixed (400px tall, let's use 400 since it is a multiple of 8 and the vertical grid is using increments of 8) since we will have a copy limit of 80 characters anyways (max of 2 lines per headline) so this section shouldn't be that long.

Also, is this gradient filter something we want to apply in code? (Not sure if this was in Sketch just for a quick image treatment)

It would be nice to have it in code so we guarantee a better contrast between font and background, what do you think?

[mmmavis]

@taisdesouzalessa both sound great to me!

[mmmavis]

@beccaklam sorry just checked the placeholder image and found out it's actually 1.2MB big 😱 . Could you export it again so it's just a few KBs big? If we aren't able to export a small SVG, I think a 100x100 .jpg should work.

[beccaklam]

@beccaklam sorry just checked the placeholder image and found out it's actually 1.2MB big 😱 . Could you export it again so it's just a few KBs big? If we aren't able to export a small SVG, I think a 100x100 .jpg should work.

Oops yes, here you go! https://drive.google.com/file/d/1Igq_RHl-qWVP7I4XlW09RaqL8KmhVXQ-/view?usp=sharing

[beccaklam]

If that ☝️ doesn't work @taisdesouzalessa here's the psd file: https://drive.google.com/file/d/1kE4sI86D-XWpsPylxVumjSFY_ZAncTpv/view?usp=sharing

[taisdesouzalessa]

@mmmavis please let me know if the above doesn't work. Becca if off today and I can help you. Thanks for sending the file my way Becca!!

[mmmavis]

I've converted the SVG (34KB) to a 100x100px .jpg in favour of smaller file size (21KB)
.
Once I have the PR up we can check the review app and see if this placeholder image needs to be changed or optimized further.