HEIGE-PCloud/DoIt

[BUG] Header logo is cut on the sides

Closed this issue · 6 comments

Describe the bug 描述你遇到的错误

When using a svg logo in the header, it gets cut on the sides.

DoIt:
186-166-max

Expected behavior 期待的行为

The logo is displayed correctly.

LoveIt:
171-139-max

Bonus:
It would probably look nicer, if the logo is vertically aligned to the middle of the header text. Currently it's aligned on the bottom boundary it seems:
185-181-max

Comparing with the alignment of the menu items, it seems like the header text is positioned correctly, but the logo size is simply too large (36px).

Screenshots 屏幕截图

DoIt:
186-166-max

LoveIt:
171-139-max

Build Environment 构建环境

  • hugo v0.125.1-68c5ad638c2072969e47262926b912e80fd71a77+extended linux/amd64 on Docker
  • latest DoIt commit

Preview Environment 预览环境

Firefox on Windows 11

Additional Information 补充信息

No response

The logo image is restricted to be a square to avoid layout shift

{{- dict "Src" . "Class" "logo" "Height" "36" "Width" "36" | partial "plugin/image.html" -}} {{- end -}}

Do you think it's better remove this restriction or use the capability to insert the image as raw HTML in this case?

pre = '<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>'

The logo actually is quadratic and defines width="64" height="64" in the source:
logo

If I remove the size hint, the logo is no longer truncated at the left side, but still on the right:
151-147-max

For me it looks like the header text positioning is the actual problem and not the logo. In this screenshot you can see how the header text overlaps the logo:
3486-222-max

You can as well see, that the header text (and the menu) is not fully centered on the vertical axis.

Hi @HEIGE-PCloud, thanks for trying to fix this 🙂

Sadly, it looks like this now (64x64px in the svg code):
214-176-max

Without width and height specified in the svg:
183-170-max

Try 36x36 or inlining the svg directly.

pre = '<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>'

Ok it should now definitely be fixed. Sorry I missed your logo's svg file previously.

Thanks a lot! I can confirm that the latest fix solves the issue 🙂 I left a minor comment on the commit: de76eff#r142794099

Not sure if this would have unwanted side-effects, but in my particular case it seems to further improve the result.