mastodon/app/javascript/styles/application.scss

@import 'mastodon/mixins';
@import 'mastodon/variables';
@import 'fonts/roboto';
@import 'fonts/roboto-mono';

@import 'mastodon/reset';
@import 'mastodon/basics';
@import 'mastodon/branding';
@import 'mastodon/containers';
@import 'mastodon/lists';
@import 'mastodon/widgets';
@import 'mastodon/forms';
@import 'mastodon/accounts';
@import 'mastodon/statuses';
@import 'mastodon/boost';
@import 'mastodon/components';
@import 'mastodon/polls';
@import 'mastodon/modal';
@import 'mastodon/emoji_picker';
@import 'mastodon/about';
@import 'mastodon/tables';
@import 'mastodon/admin';
@import 'mastodon/dashboard';
@import 'mastodon/rtl';
@import 'mastodon/accessibility';
@import 'mastodon/rich_text';

// The following "fixes" the mobile layout
// in conjunction with the edits in `features/ui/components/header.jsx`
// NOTE: $no-gap-breakpoint is when the UI becomes 3 columns
.navigation-panel__logo,
.ui__header__logo {
  display: none;
}
@media screen and (max-width: $no-gap-breakpoint) {
  .columns-area__panels__pane--navigational,
  .navigation-panel__sign-in-banner,
  .navigation-panel__legal > hr,
  .column-link > span {
    display: none;
  }

  .navigation-panel {
    flex-direction: row;
  }

  .ui__header__links {
    flex-shrink: unset;
  }

  .ui__header {
    justify-content: center;
  }
}