Joetodon

mastondon.css

#mastodon > div > div > div.columns-area > div.drawer {
	width: 250px!important;
  margin-left: 85px!important;
}

#mastodon > div > div > div.columns-area > div.drawer > nav {
  flex-direction: column!important;
  width: 75px!important;
  padding-top: 55px!important;
  position: absolute;
  left: 10px!important;
  top: 10px!important;
  z-index: 50!important;
}

#mastodon > div > div > div.columns-area > div.drawer > div.drawer__pager > div:nth-child(1) > div.navigation-bar > a > div {
  position: fixed!important;
	top: 22px!important;
  left: 28px!important;
  z-index: 51!important;
}

#mastodon > div > div > div.columns-area > div.drawer > div.drawer__pager > div:nth-child(1) > div.drawer__inner__mastodon { 
  display: none!important; 
}

/**
Make toolbar go to the left below 650px
*/
@media screen and (max-width: 650px) {
	#mastodon > div > .ui {
		flex-direction: row!important;
	}

	#mastodon > div > div > .tabs-bar {
		flex-direction: column!important;
		margin: 0!important;
	}

	#mastodon > div > div > nav > .tabs-bar__link {
	    max-height: 10px!important;
	}

	.tabs-bar__link span {
		display: none!important;
	}

	.tabs-bar__link .fa {
		font-size: 20px!important;
	}
	
	.tabs-bar__link.active {
    	border-bottom: none!important;
	}

	.columns-area {
		padding: 0!important;
	}
	
	.react-swipeable-view-container .columns-area {
    		height: 100%!important;
	}
	
	.status__display-name,
	.status__prepend .status__display-name strong {
		color: #c2c2c2!important;
	}
}

/**
Make columns fill the screen at large sizes
*/

@media (min-width: 1000px)
  {
    .columns-area .column {
  		width: 25%!important;
    	max-width: 25%!important;
			width: 100%!important;
  	}
  
  .drawer {
        width: calc(25% - 95px)!important;
    }

  .columns-area>div>.column,
        .columns-area>div>.mastodon-column-container>.column
  {
    width: 100%;
  }
}

/**
Hide the elephant
*/
.drawer__inner__mastodon { display: none; }