bune.city/_posts/fixme/2019-05-19-a-simple-glitch-soc-tweak.md
2020-04-03 15:37:20 +10:00

2.2 KiB

title date author categories
A simple glitch-soc tweak 2019-05-19 15:34 Lynne
Scripts
The Fediverse

Mastodon recently added a cool feature that blurs images when they're marked as sensitive and while they're loading. I noticed that it automatically hides this blur when the image loads, but it's trivial to put it back. Combined with the glitch-soc setting to display full images rather than cropping them, we can use two little CSS rules to change those ugly letterboxes and pillarboxes to a nice-looking blurred background!

Update: Fixed a bug that caused the media gallery to stop working properly

The default behaviour

With my CSS tweak applied

The code

If you'd like to run this on your own instance, here's the CSS:

.media-gallery__preview--hidden {
    display: block;
}
.media-gallery__item-thumbnail .media-gallery__preview--hidden {
    display: none;
}

To add it, go to your preferences page, click the Administration tab, choose "Site settings", scroll to the bottom, and paste the above CSS into the Custom CSS area. Save your changes with the button at the bottom, and reload your glitch-soc tab.

Some more examples

Some more examples of how things look with this small change, because I think it looks really nice.

[]{.wp-block-jetpack-slideshow_button-prev .swiper-button-prev .swiper-button-white}[]{.wp-block-jetpack-slideshow_button-next .swiper-button-next .swiper-button-white}[]{.wp-block-jetpack-slideshow_button-pause}