UserScript for HackTheBox Academy - Wider Content Container

htb-academy-wide.js

// ==UserScript==
// @name         HTB Academy - Better Layout
// @version      1.0.1
// @description  Makes HTB Academy content wider and less wasteful with screen space
// @match        https://academy.hackthebox.com/app/module/*
// @grant        none
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  // ╔══════════════════════════════════════════════════════════════╗
  // ║  SETTINGS - Tweak these to your liking!                      ║
  // ╠══════════════════════════════════════════════════════════════╣
  // ║                                                              ║
  // ║  All widths can be: percentages ("80%"), pixels ("900px"),   ║
  // ║  or any valid CSS value. Set to null to leave unchanged.     ║
  // ╚══════════════════════════════════════════════════════════════╝

  const settings = {

    // -- Content Width --
    // How wide the main content area should be at different screen sizes.
    content: {
      maxWidth: '95%',        // outer container max-width (default was ~1280px)
      textWidth: '75%',       // text column width on smaller screens
      textWidthLg: '80%',     // text column width >= 1024px
      textWidthXl: '83.333%', // text column width >= 1536px
    },

    // -- Table of Contents Sidebar --
    toc: {
      width: '20%',           // how wide the TOC panel is (default was 40%)
      minWidth: '280px',      // won't shrink below this
      padding: '1rem',        // internal padding
    },

    // -- Bottom Bar (Previous / Mark Complete & Next) --
    bottomBar: {
      enabled: true,          // set to false to hide it entirely
      paddingX: '1rem',       // horizontal padding
      paddingY: '0.125rem',   // vertical padding (smaller = thinner bar)
    },

    // -- Ad Blocker Nag --
    dismissAdblockModal: true, // auto-dismiss the "Ad Blocker Detected" popup
  };

  // ──────────────────────────────────────────────────────────────
  //  You shouldn't need to edit below here
  // ──────────────────────────────────────────────────────────────

  const css = `
    /* Outer section container */
    main.h-full > section {
      max-width: ${settings.content.maxWidth} !important;
    }

    /* Text content column */
    main.h-full > section > div > div {
      max-width: none !important;
      width: ${settings.content.textWidth} !important;
    }

    @media (min-width: 1024px) {
      main.h-full > section > div > div {
        width: ${settings.content.textWidthLg} !important;
      }
    }

    @media (min-width: 1536px) {
      main.h-full > section > div > div {
        width: ${settings.content.textWidthXl} !important;
      }
    }

    /* TOC sidebar */
    main.h-full > section > div > div:last-child:has(h3) {
      width: ${settings.toc.width} !important;
      min-width: ${settings.toc.minWidth};
    }

    main.h-full > section > div > div:last-child:has(h3) .base-card {
      padding-left: ${settings.toc.padding} !important;
      padding-right: ${settings.toc.padding} !important;
    }

    /* Bottom bar */
    ${settings.bottomBar.enabled === false ? `
    main.h-full > footer { display: none !important; }
    ` : ''}

  `;

  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  function killAdblockModal() {
    if (!settings.dismissAdblockModal) return;
    const modal = document.querySelector('#adblockModal');
    if (modal) {
      if (modal.open) modal.close();
      modal.remove();
      document.documentElement.style.overflow = '';
      document.body.style.overflow = '';
    }
  }

  function slimBars() {
    if (settings.bottomBar.enabled === false) return;

    const footer = document.querySelector('main > footer');
    if (footer) {
      footer.style.cssText += `padding: 0 ${settings.bottomBar.paddingX} !important;`;
      const inner = footer.querySelector(':scope > div');
      if (inner) {
        inner.style.cssText += `padding-top: ${settings.bottomBar.paddingY} !important; padding-bottom: ${settings.bottomBar.paddingY} !important;`;
      }
    }
  }

  function applyFixes() {
    slimBars();
    killAdblockModal();
  }

  applyFixes();
  setTimeout(applyFixes, 1000);
  setTimeout(applyFixes, 3000);

  new MutationObserver(applyFixes).observe(document.body, { childList: true, subtree: true });
})();