Makes the main post container on Imaglr full width, optionally displaying multiple posts per row. Adjust post size and Home page display style.
/* ==UserStyle==
@name Imaglr - Widescreen Improvements
@description Makes the main post container on Imaglr full width, optionally displaying multiple posts per row. Adjust post size and Home page display style.
@namespace Hentiedup
@version 2.0.3
@author Hentiedup
@license unlicense
@preprocessor stylus
@var text containerWidth "Post Container Width" 100%
@var text postWidth "Single Post Width" 500px
@var select homePageMode "Home Page Mode" ["List", "Grid*", "Masonry"]
==/UserStyle== */
@-moz-document domain("imaglr.com") {
#app {
overflow: hidden;
}
#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 - OLD - may need updating*/
.mobile-posts-container {
display: flex;
flex-direction: column;
}
/*=== Main post container handling ===*/
#Posts > * {
page-break-inside: avoid;
height: auto;
max-width: 100%;
}
if homePageMode == "List" {
#Posts {
width: postWidth;
}
} else if homePageMode == "Grid" {
#Posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(postWidth, 1fr));
gap: 1rem;
width: containerWidth;
}
} else if homePageMode == "Masonry" {
#Posts {
display: block;
column-width: 500px;
gap: 1rem;
margin: auto;
margin-top: 1rem;
width: containerWidth;
}
}
/*=== 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;
}
.profile-content > .container {
max-width: 100%;
/*for some reason variables don't work in calc() normally, so have to do this...*/
width: unquote("calc(" + postWidth + " + 32px)");
box-sizing: border-box;
}
.profile-content > .container:has(> .grid,> .profile-masonry) {
width: containerWidth;
}
/*Masonry view*/
.profile-content > .container > .profile-masonry {
column-width: postWidth;
column-count: unset;
}
/*Grid view*/
.profile-content > .container > .grid {
grid-template-columns: repeat(auto-fit, minmax(postWidth, 1fr));
align-items: start;
}
.profile-content > .container > .grid > .post-item {
height: auto;
width: auto;
}
}