Browse Source

Posted mastofe-userstyle

master
Siina Mashek 2 months ago
parent
commit
5761086ac4
2 changed files with 53 additions and 0 deletions
  1. +53
    -0
      content/blog/mastofe-userstyle.md
  2. BIN
      static/images/mastofe-userstyle.jpg

+ 53
- 0
content/blog/mastofe-userstyle.md View File

@@ -0,0 +1,53 @@
---
title: "Mastodon FE Userstyle"
date: 2020-07-16T08:44:42+03:00
---
![Screenshot of Mastodon FE userstyle. All columns are resized to remove the need for a horizontal scrollbar.](https://siina.wtf/images/mastofe-userstyle.jpg)

For the last few years I have been maintaining a "variable-width" edit to the Mastodon front-end (including masto-fe/glitch-soc front-end) in the form of a [userstyles][] script, which can be loaded by the Firefox/Chrome extension [Stylus][]. While I have it on their (shitty) website, I've decided to add it here so that I don't have to bother with their awful website anymore.

Installation instructions are slightly involved if you don't use the userstyles website:

* Navigate to your instance / front-end
* Click the extension's icon
* Click "Write style for:"
* Copy the CSS below into the "Code 1" box
* Below the "Code 1" box, remove "getting-started" so it applies to all masto-fe pages
* On the top left, press "Save"

All should be good!

I mainly use it for snugging the columns to my 1280x1024 monitor without having a horizontal scrollbar, but should help use up extra space on wider monitors. On my 1080p monitor, it works fine with 4-5 columns before the default front-end sizes kick in.

```css
/* Adjusts to remove horizontal scrollbar
in smaller window size (e.g. 1280x1024) */
@media (min-width: 800px) {
.wide .drawer {
min-width: 280px;
}
}

/* Adjusts to use up space in larger
window size (e.g. 1920x1080) */
@media (min-width: 1024px) {
.columns-area>div{
width: 25%;
max-width: 25%;
}
.wide .drawer,
.wide .column,
.columns-area>div>.column,
.columns-area>div>.mastodon-column-container>.column,
.wide .columns-area:not(.columns-area--mobile) .column {
max-width: 100%;
flex: auto;
}
}
```

Comments via [Fediverse post][fedi]

[userstyles]:https://userstyles.org/styles/139721/mastodon-glitch-soc-variable-width
[Stylus]:https://github.com/openstyles/stylus#releases
[fedi]:https://cute.science/notice/9x8PrSwavOTw2bfycK

BIN
static/images/mastofe-userstyle.jpg View File

Before After
Width: 640  |  Height: 512  |  Size: 90 KiB

Loading…
Cancel
Save