feat: responsive avatar image size

[xiaoxiyao]

Refer to https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_same_size_different_resolutions

[CaiJimmy]

I think the current setting is good enough: the maximum size of the avatar is 150x150. The theme generates a single image of 300x300, which covers 1x and 2x. This PR will generate 3 images instead.

[ElastiCourse]

It would be really nice to use plain SVG as site logo. The resize command ran against Hugo pipelines is hard coded and doesn't adhere to the disabled image processing in Hugo config.

[xiaoxiyao]

This is for loading smaller images on screens with low pixel ratios to improve loading speed.
And, the maximum size of the avatar is 120x120

hugo-theme-stack/assets/scss/partials/sidebar.scss

Line 32 in 839fbd0

--sidebar-avatar-size: 120px;