Use smaller icons for discord and youtube

[bunnybot]

Mirrored from Codeberg Created on Thu Aug 08 15:42:37 CEST 2024 by Tóth András (tothxa)

---

I just can't get used to the new social media icons on the website, because they're too distracting. This tries to tame them by scaling them to fit 32x32 (as other icons in the same directory), and by using the bluish icon for discord instead of bright white.

I took the vector sources from both site's official branding pages and exported them to 32x32 PNG in inkscape.

[bunnybot]

Assigned to tothxa

[bunnybot]

Mirrored from Codeberg On Thu Aug 08 18:41:35 CEST 2024, frankystone wrote:

---

The bluish discord icon doesn't look good, imho:

If we agree to use the white one we can make them smaller by css:

[bunnybot]

Mirrored from Codeberg On Thu Aug 08 18:45:31 CEST 2024, frankystone wrote:

---

You can try the css thing directly in your browser: Right click on the icon and choose inspect, then change the width from 38 to 34, and probably set the first value of margin to 4px (instead of 0)

Edit: Looks like this then:

#header .header_boxes .social img {
    margin: 4px 4px 0 4px;
    width: 34px;
}

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 01:37:34 CEST 2024, Tóth András (tothxa) wrote:

---

The bluish discord icon doesn't look good, imho:

:( Yes, you're right. (I only tested by saving the page and replacing the images in the elements directory, but that didn't show the background images, so I saw it over light brown, which looked good, so I assumed it would be OK with the real background too... OK, I see it now, firefox didn't update paths in the CSS, nor did it include the referenced images...)

OK, I changed it to white, but scaled it down a bit to not be taller than the youtube icon. It's a bit bland this way, but we have no other options given discord's requirements... :(

If we agree to use the white one we can make them smaller by css

That's not very good with such small changes, nor would I trust browsers' scaling algorithms. I can export them at the size we want easily anyway.

---

OK, I tested the new commit with fixed CSS in the local save. Maybe the icons are a bit small this way, but that's not necessarily bad. :) But I can make them a little bigger even within 32x32 if you'd like.

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 08:28:50 CEST 2024, frankystone wrote:

---

In general i agree that the current icons are a bit too large. During testing i found that 34px width might be too small, but now in production i agree that they are too big.

If we agree to use the white one we can make them smaller by css

That's not very good with such small changes,

Sorry, i do not understand.

nor would I trust browsers' scaling algorithms. I can export them at the size we want easily anyway.

All browsers do this job very good and it's a common task for browsers. The advantage of letting the browser do this job (downscaling) is that we can provide different css for different monitor dimensions, e.g. for a smartphone in comparison with a HD monitor. Fixed sizes will prevent this. See responsive webdesign

So my favorite is to make this change only by css.

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 11:11:51 CEST 2024, Tóth András (tothxa) wrote:

---

If we agree to use the white one we can make them smaller by css

That's not very good with such small changes,

Sorry, i do not understand.

I mean that generally I'd expect better image quality (less blurring) when scaling down from a high resolution image (at least twice the displayed size) than when only scaling down by a few percent.

So my favorite is to make this change only by css.

Can we use SVG then or do you think that would harm portability?

(BTW the other images are shown at native resolution, without a size specification in CSS)

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 14:45:30 CEST 2024, frankystone wrote:

---

Can we use SVG then or do you think that would harm portability?

In general svg has some security issues because it's just an xml file and may contain javascript-code which is then executed by the browser. Btw the main reason why we don't accept svg images in the widelands wiki. See e.g. https://www.securesystems.de/blog/svg-security-risks-not-just-a-scalable-graphic/ In this case i think it's fine to use it, but i didn't looked into the svg file of discord (or youtube) to check for javascript tags.

(BTW the other images are shown at native resolution, without a size specification in CSS)

The whole website was made in a time where responsive webdesign wasn't really needed. So most of the website isn't responsive (yet) :-(

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 15:15:05 CEST 2024, Tóth András (tothxa) wrote:

---

Here are the icons saved as plain SVG from inkscape. The youtube one is distributed originally in adobe illustrator format, but I only imported and resaved it. For discord (original is already in SVG), I changed the "page" size to make it a square with similar margins as the youtube icon, so they are actually the same size if rendered to the same pixel size. (edit: though discord still appears slightly bigger due to it being bright white while youtube's red kind of blends in the brown background)

But if you don't want SVG, I guess I'd export them at 128x128 px for scaling down by CSS. (at least then I still don't have to mess with the site code in this PR :) — edit2: OK, I did it anyway

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 17:34:55 CEST 2024, frankystone wrote:

---

I think this is perfect :-)

Thanks for this change!

[bunnybot]

Mirrored from Codeberg On Fri Aug 09 18:10:02 CEST 2024, janus wrote:

---

<@>bunnybot merge