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 3.0.0
@author Hentiedup
@license unlicense
@preprocessor stylus
@var text containerWidth "Post Container Width" 100%
@var text postWidth "Single Post Width" 610px
@var select homePageMode "Home Page Mode" ["List", "Grid*", "Masonry"]
==/UserStyle== */
@-moz-document domain("imaglr.com") {
/*main container 100%*/
.main__inner.stream-mode[data-v-e655d599] {
max-width: 100% !important;
}
/*left sidebar to left*/
.main__inner > .stream-sidebar {
left: 0;
}
/*inner container + right sidebar*/
#app > .main__inner > #js-oversized {
max-width: 100%;
padding-left: 220px;
padding-right: 15px;
}
/*posts container's container*/
#js-oversized > .mobile-posts-container {
max-width: 100% !important;
margin: 0 20px;
}
/*main posts container*/
#js-oversized > .mobile-posts-container > #Posts {
max-width: 100% !important;
}
/*post adjustments*/
#Posts > * {
page-break-inside: avoid;
height: auto;
max-width: 100%;
}
/*Home page mode specific*/
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;
}
}
}