search

qmd-lab / closeread

https://closeread.dev
MIT License
128 stars 5 forks source link

Adjust trigger padding #102

Closed jimjam-slam closed 3 weeks ago

jimjam-slam commented 1 month ago

Makes a small adjustment to padding for narrative blocks so that the padding is more reliable and gives the text more room to breathe by default

jimjam-slam commented 1 month ago

What do you think, @andrewpbray?

Before:

Screenshot of trigger before change with less padding

After:

Screenshot of trigger after change, with more padding
andrewpbray commented 1 month ago

While we're looking at that index closeread...

I used a very similar approach to line highlighting as the one used by revealjs. Essentially all non-highlighted lines in a block of lines with highlighting get hit with a .cr-hl-within class that changes opacity.

.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within .sourceCode span[id^=cb] {
  opacity: 0.3;
  transition: opacity linear 0.3s;
}

In a setting like this, where the whole cr-section div has a blue background color, some of that bleeds through since its opaque. Do you know of an easy way to fix this? Essentially I want a white mask on the code block, not really an opacity, or an opacity that sees past the blue background to the white beneath it...

jimjam-slam commented 1 month ago

While we're looking at that index closeread...

I used a very similar approach to line highlighting as the one used by revealjs. Essentially all non-highlighted lines in a block of lines with highlighting get hit with a .cr-hl-within class that changes opacity.

.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within .sourceCode span[id^=cb] {
  opacity: 0.3;
  transition: opacity linear 0.3s;
}

In a setting like this, where the whole cr-section div has a blue background color, some of that bleeds through since its opaque. Do you know of an easy way to fix this? Essentially I want a white mask on the code block, not really an opacity, or an opacity that sees past the blue background to the white beneath it...

I think the blue is bleeding through because the .sourceCode background for the code block has a background-color with 65% opacity. When you set it to full opacity, the problem disappears:

image

Does that come from us, or from Quarto? That comes from Quarto (see the code blocks on this documentation page). We might just need to override it for this page...

andrewpbray commented 1 month ago

Oh that's very interesting! Yes, a good thing to override manually for now but I wouldn't be surprised if other users run into this. If we see it crop up again, we can consider a more systematic fix.

Fundamentally, Quarto html styling probably (and sensibly) wasn't designed imagining that these elements were going to be put into a stack.

andrewpbray commented 1 month ago

Hmm, I wonder if I'm missing something. When I go to pull, (and after i render to css), I get this look:

Screenshot 2024-10-18 at 6 27 09 PM

That looks a little tighter on the left than yours, no?

(this will be a big perk to the having the preview site!)

andrewpbray commented 1 month ago

Hmm, I'm noticing some strange behavior on a narrow screen on the index at closeread.dev:

https://github.com/user-attachments/assets/48483e6c-c0cf-44b7-94b8-01f72a7d0231

This was on Chrome on my laptop but this is the same thing I see on my (tiny) phone running Safari. When I check the ones in the Gallery, they don't seem to have this issue.

How does it work on your end? Maybe this is just an issue with .overlay-center... except on mobile don't we just switch to .overlay-center? so that wouldn't explain why the Gallery ones don't have this behavior on mobile.

jimjam-slam commented 1 month ago

There are two things happening here, I think:

  1. Overflow (horizontal scroll bar) starts happening because the code block sticky has a minimum width, then
  2. The narrowest screen is just hitting the 575px width boundary for mobile sizing (which is overlay-center).
jimjam-slam commented 1 month ago

I've pushed some changes to improve overlay narrative positioning: instead of trying to use percentage margins, which are fiddly, it relies on justify-self to align the narrative column within the grid cell.

We could potentially still set a margin-left or margin-right to push the respective left and right overlay narrative content out from the edge. Or that could be a user YAML option 🙂

I've also set a max-width on the narrative content that is designed to line up seamlessly with the mobile breakpoint. That could also be a YAML option potentially!

To see the effect of it without the overflow getting in the way, add font-size: 70% to thediv.code-with-filenameinside#cr-doc`:

Screenshot 2024-10-20 at 20 41 09 image image

To fix the code overflow on this page, I've:

jimjam-slam commented 1 month ago

You can briefly catch the re-rasterisation in Safari when changing highlights (not worried about it here since it's kicking in at the end of the transition, but you can at least see the un-re-rasterised state):

https://github.com/user-attachments/assets/4641a01a-d152-4a9c-8fb8-cd995b5b3af5

andrewpbray commented 4 weeks ago

Did you add these changes to #107 instead of this branch? I still get the overflow issue when I try it locally on this branch.

jimjam-slam commented 4 weeks ago

Did you add these changes to #107 instead of this branch? I still get the overflow issue when I try it locally on this branch.

Oh jeez, I did 🤦🏻‍♂️ Lemme cherry pick them over to here!

jimjam-slam commented 4 weeks ago

Should be good to test now, @andrewpbray!

(I tried to fix the conflict with the .css.map file when merging, but it looks like it's still in conflict with dev. I'd be tempted to accept one or the other and then just run sass again after the merge)