search

pawroman / zola-theme-terminimal

A simple, minimal retro theme for Zola
https://pawroman.github.io/zola-theme-terminimal/
Other
371 stars 85 forks source link

code blocks should scroll horizontally if they exceed the content width #12

Closed craftyguy closed 2 years ago

craftyguy commented 2 years ago

Code blocks with long lines cause the entire page to overflow/scroll horizontally, which looks really bad:

2022-01-27-144708_grim

This is what I'd expect to happen in these situations:

2022-01-27-144449_grim

I couldnt' get this to work by setting overflow-x:scroll in the pre CSS, but I did get it to work when I wrapped the <pre> in a <div style="overflow-x:scroll">

Vloupmon commented 2 years ago

I found the same problem on the index : code block text takes up the full width. But it doesn't do so on specific pages. From what I can tell, it actually comes from .posts overflowing .content on the index. Once you add width: 100% it behaves normally. The code blocks themselves are on overflow: auto and will adapt to the width they have available.

Default CSS : image

Code block overflowing: image

With the same CSS values as on individual pages : image

Code block behaving properly: image

The basic fix in /sass/post.css :

.posts {
  width: 100%;
  margin: 0 auto;
}
pawroman commented 2 years ago

Hi, I'm really happy to see other people using the theme. Thanks for the detailed investigation, write-up and the PR!

pawroman commented 2 years ago

The fix has been merged. Thanks!