Mastodawn

Front-End Moderators Jul 26, 2023

Hey fellow front-end.social people (Cc: @mods)!

How do you feel about us starting to make changes to the custom CSS on our instance?

I'm toying with the following (to stop my hand-meat under my thumb from sending me to different sections when I'm just trying to reach a link on the left side of my phone): Moving the menu to the bottom on mobile widths.

What do you think? The missing links are still available by swiping.

The repo is here: https://github.com/mirisuzanne/front-end-social

GitHub - mirisuzanne/front-end-social: About pages for front-end.social mastodon

About pages for front-end.social mastodon. Contribute to mirisuzanne/front-end-social development by creating an account on GitHub.

GitHub

@mods If anyone would like to test and fiddle with what I've done, feel free!:

```
@media screen and (max-width: 480px) {
:root {
--nav-padding: max( 0.75em, calc( (100vw - (23.14px * 8)) / 16 ));
}
.columns-area__panels {
display: revert;
}
.columns-area__panels__main {
width: 100%;
}
.columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
width: 100%;
```

1/x, continued in replies

```
height: max(45px, calc( 19px + 2 * var(--nav-padding)));
bottom: 0;
}
.navigation-panel {
flex-direction: row;
border-left: 0px;
height: 75px;
border-top: 1px solid #393f4f;
}
.column-link {
padding: var(--nav-padding);
}
.column-link__icon {
margin-right: 0px;
}
.navigation-panel__legal hr {
display: none;
}
```
2/x

```
.scrollable, .compose-form {
margin-bottom: max(45px, calc( 19px + 2 * var(--nav-padding)));
}
}
```
3/3

Omg, thanks to TamperMonkey (cheers for the tip @viraptor !!) it's already soooo much better!

Can test on Firefox, just installed as a PWA with the TamperMonkey Add On doing its thing and applying the styles.

Winner:

@viraptor there's so much more horizontal space again! Way better :) need to refine it before I do any PR on our front-end.social repo

Charles Roper Jul 26, 2023

@sarajw @viraptor Absolutely love it. Open hackable web ftw ❤️

Elly Loel Jul 26, 2023

@sarajw @mods ooo that’s nice! I always found the vertical nav on mobile odd.

Saneef H. Ansari Jul 26, 2023

@sarajw @mods 👍