Mastodon: Profile and toot backgrounds

[DeadSuperHero]

This seems like it could be a really easy fix, and I think it might actually make for a nice visual enhancement.

As a small concession for personalization, it would be nice if the background on user profiles and individual toots matched with the header image. So, if I navigate to my user page, I can see a blurred background that matches it.

This is incidentally not that hard to create with CSS, and I think it can be accomplished with a pretty basic change to some templates. Rather than being a custom image, backgrounds can be created automatically from uploading a header picture.

The only caveat I can think of is that a basic fallback image might be necessray for new users who haven't set an image yet.

[mkody]

This looks really nice, I've tried it on my instance.

I added those two lines to app/views/accounts/show.html.haml above the .h-feed

.bg-header
  .bg-header-img{ style: "background-image: url(#{@account.header.url( :original)})" }

_Edit: This should be added too in app/views/stream_entries/show.html.haml for conversations._

And then some scss (in app/assets/stylesheets/accounts.scss)

.bg-header {
    filter: blur(8px);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;

    .bg-header-img {
        background-size: cover;
        background-position: center;
        height: calc(100% + 30px);
        margin: -15px;
        width: calc(100% + 30px);
    }
}

The negative margins and the calc(100% + 30px) are to hide the black spots made by the blur effect.

When a user doesn't have a header image, we can see the default Mastodon background (example).
Does that look good enough?

[Gargron]

@mkody I like that A LOT!

[mkody]

@Gargron May I open a PR?

I see that we might need to add a background to the NEXT link at the bottom, it's hard to see it with light backgrounds.

[ariasuni]

According to discussion in #1064, it was abandoned because of technical issues. One year afterwards, is it still not possible to do that without it being too complex/slow?

[mkody]

We could pre-generate the blurred picture (based on the static header file) and set it as a simple background-image.
This would be a solution to some browsers/devices being slower due to the CSS3 blur effect.

I'm really not used to Ruby to try to implement that, but something like rmagick could be used (or maybe Mastodon already has a Gem that could do it).

(Note that I'm still using my PR in production and some friends did merge it. But what I said here would be a good implementation.)