Fix some blur issues

[nuru00]

The first commit makes the design consistent by making the blurred image have rounded corners
Before:

After:

The second commit fixes main-picture-position: "alt" when it is paired with "nsfw-blur-contained: "on"
Before:

After:

Due to font-size: 0 now being on the container, there is some lost margin that needs to be manually added back.

[donkuri]

No issue on my end. @itokatsu @bewizible

[bewizible]

l don't really mind the changes this brings about, I think.

[itokatsu]

Thanks for your contributions especially that bugfix.
Seeing this I feel we should also move the border from the image to the container, keeping it visible / unblurred.
It feels really off removing the blur and see it appearing.

This aside, looks solid to me.

[nuru00]

I thought about that but then you would also have to add:

#lapis:not([data-nsfw-blur-contained="on"]) .image-alt.NSFW,
#lapis:not([data-nsfw-blur-contained="on"]) .image-alt.nsfw,
#lapis:not([data-nsfw-blur-contained="on"]) .image-alt.Nsfw {
  border: solid transparent 2px;

  &:hover {
    border: solid var(--fg-subtle) 2px;
  }
}

Otherwise the unblurred border would show through the blur when nsfw-blur-contained is off. I also don't like how you can see border abruptly appear if you pay close attention but that's just a minor nitpick. I'm happy with either approach.

EDIT: Nevermind, I remembered the reason I went for this approach was because of how hacky this gets. If you move the border to the container then the image doesn't fit properly because of border-radius: 5px, if you override it to 0px then the image corners are over the border and you can't set overflow: hidden because that would just be nsfw-blur-contained=on. In the end the simplest solution would be to set border-radius to 3px and call it good enough.

[nuru00]

The best that I can come up with is something like this:

.image-alt {
  margin: auto;
  margin-bottom: 10px;
  width: fit-content;
  max-width: 60%;
  border: solid var(--fg-subtle) 2px;
  font-size: 0;

  & img {
    max-height: 250px;
    border-radius: 0px;
  }

  &:hover {
    overflow: hidden;
  }

  &:not(.NSFW):not(.nsfw):not(.Nsfw) {
    overflow: hidden;
  }
}

#lapis:not([data-nsfw-blur-contained="on"]) .image-alt.NSFW,
#lapis:not([data-nsfw-blur-contained="on"]) .image-alt.nsfw,
#lapis:not([data-nsfw-blur-contained="on"]) .image-alt.Nsfw {
  border: solid transparent 2px;

  &:hover {
    border: solid var(--fg-subtle) 2px;
  }
}

[itokatsu]

Yeah this is annoying… I think we're better off either removing the border, or the option to have the non-contained blur altogether.

[donkuri]

Personally, I am fine with having the blur be contained at all times. This is how I've always used it.

[bewizible]

Keeping aside whether the blur should be contained or not when it's below the word box, I feel like for when it's side-by-side we should keep the blur not being contained option as well. Hmm.

[nuru00]

I agree, I think the best trade-off between number of users satisfied and clean code would be either this PR in its current state or to make non-contained blur exclusive to side-by-side.

[bewizible]

@nuru00 I'm afraid I don't understand one thing, with the PR as it is currently, have we removed non-contained blur entirely?
I'm in favor of making non-contained blur a side-by-side only thing I think. We can contain it in alt and if the user wants, and maybe keep/add the option to do that in side-by-side too. @itokatsu thoughts?

[nuru00]

No, this just fixes a bug with contained blur in alt, with the caveat that the border gets blurred together with the image. IMO, this is better than removing the choice for users to have non-contained blur with alt.

[itokatsu]

@bewizible Not really a fan of the idea, It will be confusing to have the blur behave differently depending on the layout chosen.

[donkuri]

@bewizible Not really a fan of the idea, It will be confusing to have the blur behave differently depending on the layout chosen.

Agreed.