Mastodon compressed style tweaks

mastofe-style-additions.css

/**
 * author: @[email protected]
 * license: WTFPL, use however you wish
 * url: https://gist.github.com/KiitoX/c88dcfe147e8aea5f5a1f7be40e74b52
 */

/* improve status padding */
.status {
    padding: 8px 16px;
}
.status__prepend {
    padding-top: 8px;
}
.status__action-bar {
    margin-top: 8px;
}

/* improve status text spacing */
.status__content {
    font-size: 1.15em;
    line-height: 1.2em;
}
.detailed-status .status__content {
    font-size: 1.3em;
    line-height: 1.2em;
}

/* justify status text */
.status__content__text p {
    text-align: justify;
    text-justify: inter-word;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* beter bio list headers text color */
.account__header__bio .account__header__fields dt {
    color: #8ad;
}

/* add white border to loading bar */
.loading-bar {
    border-bottom: solid white 1px;
}

/* remove spoiler button offset */
.spoiler-button {
    top: 0;
    left: 0;
}
.spoiler-button .icon-button.overlayed {
    border-radius: 0 0 4px 0;
}

/* increase default compose textarea size */
.compose-form .autosuggest-textarea__textarea {
	min-height: 200px;
}

/* disable simple layout publish bar */
body.layout-multiple-columns .ui__header {
    display: none;
}

/* fix inconsistent search bar spacing */
body.layout-multiple-columns .search {
  margin-bottom: 10px;
}

/* reposition getting started about server text */
body.layout-multiple-columns .getting-started__wrapper {
    margin-bottom: auto;
}
body.layout-multiple-columns .getting-started .link-footer p {
    margin-bottom: 10px;
}

/* remove getting started back button (if it ever gets a proper aria label, even better) */
.column:not([aria-label]) .column-header__back-button:last-child {
    display: none;
}

/* flex column width to better fit on one screen */
body.layout-multiple-columns .column {
	min-width: 320px;
	flex: 1 1 auto;
}

/* flex left drawer to make more space for columns */
body.layout-multiple-columns .drawer {
	width: auto;
	min-width: 220px;
	max-width: 300px;
}

/* remove spacing between columns */
body.layout-multiple-columns .column:not(:nth-child(2)) {
	padding-left: 0px;
}
body.layout-multiple-columns .column:not(:last-child) {
	padding-right: 0px;
}

/* remove border radius between columns */
body.layout-multiple-columns .column:not(:nth-child(2)) .column-header,
body.layout-multiple-columns .column:not(:nth-child(2)) .column-back-button {
	border-top-left-radius: 0;
}
body.layout-multiple-columns .column:not(:last-child) .column-header {
	border-top-right-radius: 0;
}
body.layout-multiple-columns .column:not(:nth-child(2)) > *:last-child {
	border-bottom-left-radius: 0;
}
body.layout-multiple-columns .column:not(:last-child) > *:last-child {
	border-bottom-right-radius: 0;
}

/* add border radius to outer columns */
body.layout-multiple-columns .column:nth-child(2) .column-header,
body.layout-multiple-columns .column:nth-child(2) .column-back-button {
	border-top-left-radius: 4px !important;
}
body.layout-multiple-columns .column:last-child .column-header,
body.layout-multiple-columns .column:last-child .column-back-button {
    border-top-right-radius: 4px !important;
}
body.layout-multiple-columns .column:nth-child(2) > *:last-child {
	border-bottom-left-radius: 4px;
}
body.layout-multiple-columns .column:last-child > *:last-child {
	border-bottom-right-radius: 4px;
}

/* put four columns in a grid on very tall layout */
@media (max-aspect-ratio: 6/8) and (min-width: 900px) {
    /* split up column area */
    body.layout-multiple-columns .columns-area {
        padding: 10px;
        box-sizing: border-box;
        min-width: 100vw;
        display: grid;
        grid-gap: 10px 0;
        grid-template-columns: auto 1fr 1fr;
        grid-template-rows: 3fr 2fr;
    }

    /* remove padding from columns */
    body.layout-multiple-columns .columns-area > * {
        padding: 0px;
    }

    /* span drawer the full height */
    body.layout-multiple-columns .drawer:first-child {
        grid-row: span 2;
        padding-right: 10px;
    }

    /* expand column width */
    body.layout-multiple-columns .column {
        width: initial;
        overflow: hidden;
    }

    /* fix up the border radius */
    body.layout-multiple-columns .column:nth-child(even) .column-header,
    body.layout-multiple-columns .column:nth-child(even) .column-back-button {
        border-top-left-radius: 4px;
    }
    body.layout-multiple-columns .column:nth-child(odd) .column-header,
    body.layout-multiple-columns .column:nth-child(odd) .column-back-button {
        border-top-right-radius: 4px;
    }
    body.layout-multiple-columns .column:nth-child(even) > :last-child {
        border-bottom-left-radius: 4px;
    }
    body.layout-multiple-columns .column:nth-child(odd) > :last-child {
        border-bottom-right-radius: 4px;
    }

    /* do a bit of reordering */
    body.layout-multiple-columns .column[aria-label='#krita'] {
        order: 2;
    }
    body.layout-multiple-columns .column[aria-label='Local timeline'] {
        order: 1;
    }
}