Add adaptive width style

src/preferences/advanced.ts

@@ -77,4 +77,9 @@ export default {
             },
         ],
     }),
+    adaptive_width: new BooleanPreference({
+        key: "adaptive_width",
+        default: false,
+        label: T.preferences.advanced.adaptive_width,
+    }),
 }

src/styles.ts

@@ -114,6 +114,10 @@ const STYLESHEET_MODULES: ReadonlyArray<StylesheetModule> = [
         condition: Preferences.get(P.advanced._.custom_css_enable),
         css: Preferences.get(P.advanced._.custom_css_code),
     },
+    {
+        condition: Preferences.get(P.advanced._.adaptive_width),
+        css: require("styles/adaptive-width"),
+    },
 
     // Customize content:
     {

src/styles/adaptive-width.scss

@@ -0,0 +1,107 @@
+/*
+    Move rightmost ad to make news pages and forum pages the same
+    width and let it go outside the visible area in narrow viewports.
+*/
+#content>.outsiderColumn {
+    >.fluid>.inner {
+        padding-right: 0;
+    }
+    >.fixed {
+        position: relative;
+        left: 250px;
+    }
+}
+
+/* Allow containers to shrink further */
+.container, .minWidth {
+    width: auto !important;
+    min-width: 940px;
+}
+
+/* Adjust search bar to fit in the thinner layout */
+#search {
+    min-width: 156px;
+    max-width: 180px;
+    width: 15vw;
+}
+
+/* Make footer fit */
+.footer .top .block {
+    width: 25%;
+    box-sizing: border-box;
+}
+
+/* Scale up images to fill width in article feed and articles */
+.newsList .itemBanner img,
+.articleHeader .bbImage img,
+.articleHeader .tv-frame,
+.articleContent .bbImage img,
+.gphi-banner img,
+.whiteHeader>.banner>img {
+    width: 100%;
+}
+
+/* Gallery images are special */
+.galleryImage {
+    margin-right: 10px;
+
+    >.image>img {
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+/* Frame for article video doesn't want to scale */
+.articleHeader .tv-frame {
+    .tvf-top,
+    .tvf-right,
+    .tvf-bottom,
+    .tvf-left {
+        display: none;
+    }
+}
+
+/* Sacrifice "Svara" on own posts to make room */
+.forumPost.isReader .button.reply {
+    display: none;
+}
+
+/* Clearfix box in articles that images tend to pop out of */
+.bbRelatedBox:after {
+    content: " ";
+    clear: both;
+    display: block;
+}
+
+/* Make empty space disappear if .pushColumn>.fixed has no content */
+.pushColumn {
+    display: flex;
+
+    >.fluid {
+        margin-right: 0;
+
+        >.inner {
+            padding-right: 0;
+
+            /* This part is just magic */
+            >* {
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+    >.fixed {
+        width: auto;
+
+        >.inner {
+            margin-left: 0;
+
+            >* {
+                margin-left: 8px;
+            }
+        }
+    }
+}

src/text.ts

@@ -158,6 +158,7 @@ export const preferences = {
         proofread_forum_posts: `Markera möjliga fel i foruminlägg (i redigeringsläge)`,
         custom_css_enable: `Infoga egen CSS:`,
         custom_css_warning: `Klistra aldrig in kod som du inte litar på!`,
+        adaptive_width: `<kbd>BETA</kbd> LemonIllusions adaptiva bredd-stil`,
     },
 
     keyboard: `Kortkommandon`,