BUG: Left sidebar overlapping

[VincentTam]

Bug Report

Describe the bug

See the animated screenshot below and the title above.

To Reproduce

Increase the size of the site icon.

Expected behavior

Recent posts section won't overlap with intro section no matter how large the icon is.

Screenshots

Environment

• Hugo Version: 0.56
• Browser and Version: Firefox 68.0.1
• Platform: Desktop
• Link to Project: https://vincenttam.frama.io/fish-demo/, https://framagit.org/vincenttam/fish-demo/

Additional context

[pacollins]

This issue occurs when the width isn't set on the image in the config.

hugo-future-imperfect-slim/exampleSite/config.toml

Line 70 in d80bfe5

width = ""

The quick solution would be to add a fallback width to the template here:

hugo-future-imperfect-slim/layouts/partials/site-intro.html

Line 2 in d80bfe5

{{ with .Site.Params.intro.pic }}<a href="{{ "/" | relLangURL}}"><img src="{{ .src | relURL }}" class="{{ .shape }}" width="{{ .width }}" alt="{{ .alt }}" /></a>{{ end }}

<img src="{{ .src | relURL }}" class="{{ .shape }}" width="{{ if isset .width }}{{ .width }}{{ else }}100px{{ end }}" alt="{{ .alt }}" />

100px could be substituted with whatever we deem the most appropriate as a max width.

Thoughts? I am fine with putting this PR together.

[pacollins]

The other solution is to remove this line in the CSS. Honestly, can't remember what all it was doing.

hugo-future-imperfect-slim/static/css/main.scss

Line 896 in d80bfe5

grid-template-rows: 22em auto auto 1fr;

[VincentTam]

Thanks for reply. Lemme get back to this in an hour after finding the translations.

[VincentTam]

The other solution is to remove this line in the CSS. Honestly, can't remember what all it was doing.

hugo-future-imperfect-slim/static/css/main.scss

Line 896 in d80bfe5

grid-template-rows: 22em auto auto 1fr;

Thanks for pointing me to this useful CSS property. That's almost the solution. This right thing to do is to have a quick look at what this property actually does, say, at https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows. By playing with the samples, you'll get a quick idea. Now, get our hands dirty with a web developer tool.

GIF screen capture using byzanz-record

The #wrapper with selected. Then we play with the first number in the above CSS property by pressing ⬆️ / ⬇️ . At this stage, the solution should be crystal clear. Adding a PR for that.