Makes the main post container on Imaglr a full width flexbox, displaying multiple posts per row. As many as can fit. + more.
/* ==UserStyle==
@name Flexboxed Imaglr - Postwall / Multiple posts per row
@description Makes the main post container on Imaglr a full width flexbox, displaying multiple posts per row. As many as can fit. + more.
@namespace Hentiedup
@version 1.0.0
@author Hentiedup
@license unlicense
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("imaglr.com") {
#app > .main__inner {
max-width: 100%;
margin: 0 0 0 300px;
padding: 10px;
}
/* When Suggestions box is hidden, do not take up space on the page. Make "Show Suggestion" button stay at top of page.*/
#js-oversized > div:last-of-type .uk-sticky:has(.max-lg\:hidden:not(.shadow-sm)) {
width: 0
}
#js-oversized > div:last-of-type .uk-sticky-fixed:has(.max-lg\:hidden:not(.shadow-sm)) {
display: none;
}
#js-oversized > div:last-of-type .uk-sticky:has(.max-lg\:hidden:not(.shadow-sm)) button {
position: absolute;
right: 0
}
/*Make the posts container-container flex too for easier handling*/
.mobile-posts-container {
display: flex;
flex-direction: column;
}
/*Main post container handling*/
#Posts {
display: flex;
flex-wrap: wrap;
align-content: stretch;
gap: 10px;
justify-content: space-evenly;
}
/*Make posts grow (but not shrink) as needed.*/
#Posts > .post-item {
flex-grow: 1;
flex-shrink: 0;
}
/*=== Profile page ===*/
/*Make header width only as wide as needed*/
.profile-content > .profile-header-wrapper {
width: fit-content;
}
/*make page content centered*/
.profile-content.flex.flex-col {
align-items: center;
}
}