/* * s2t-bs5-shim.css v1 * ===================================================================== * Bootstrap 3 → 5 visual-restoration layer for defaultFregaCom.master. * * PURPOSE: Restore pixel-flat parity with the committed BS3 baseline * screenshots. ALL compatibility overrides live here so this file * can be dropped cleanly at the eventual rewrite. Do NOT copy these * rules into main.css / global.css / radim.css. * * Each section names the diff it targets. * ===================================================================== */ /* ----------------------------------------------------------------- * 1. Container max-widths — restore BS3 breakpoints * BS5 defaults: sm=540 / md=720 / lg=960 / xl=1140 / xxl=1320 * BS3 values: sm=750 / md=970 / lg=1170 * At 1440px desktop: BS5 picks xxl=1320px vs BS3 lg=1170px — a * +150px shift that reflows every page and is the dominant diff. * ----------------------------------------------------------------- */ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { /* xs — already 100% in both frameworks; no change needed */ max-width: 100%; } @media (min-width: 768px) { /* BS3 sm → 750px */ .container { max-width: 750px; } } @media (min-width: 992px) { /* BS3 md → 970px */ .container { max-width: 970px; } } @media (min-width: 1200px) { /* BS3 lg → 1170px (covers BS5 xl + xxl at this site's content) */ .container { max-width: 1170px; } } /* ----------------------------------------------------------------- * 2. Row gutters — intentionally NOT changed. * BS5 default: --bs-gutter-x: 1.5rem → 12px padding each side on cols. * BS3 was 15px each side. * Changing --bs-gutter-x on .row alone causes horizontal overflow * because .container still has 12px padding (uses the root variable); * row negative margins would exceed the container padding, creating * a 6px wider row than the container and triggering page-width overflow * (visible as screenshot width > viewport width in Playwright). * The 3px-per-side column padding difference is sub-pixel for most * content at 1170px and does not appear in the diff; leave BS5 default. * ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 3a. BS3 col-xs-* columns — restore always-on columns dropped in BS4/5. * BS3 col-xs-N = 'column for all breakpoints' (xs = minimum). * BS5 equivalent is col-N (no breakpoint suffix). Because the HTML * uses the old class names verbatim, we re-declare them here. * Only the column widths actually present in the codebase are listed. * ----------------------------------------------------------------- */ .col-xs-1 { flex: 0 0 auto; width: 8.33333%; max-width: 100%; } .col-xs-6 { flex: 0 0 auto; width: 50%; max-width: 100%; } .col-xs-10 { flex: 0 0 auto; width: 83.33333%;max-width: 100%; } .col-xs-12 { flex: 0 0 auto; width: 100%; max-width: 100%; } /* ----------------------------------------------------------------- * 3b. BS3 column offsets — restore col-*-offset-N classes removed in BS4/5. * BS3 used col-{breakpoint}-offset-{n} to add left margin-offset. * BS5 renamed these to offset-{breakpoint}-{n}. Multiple content * pages (about, casestudy, tandc, register, cookiepolicy) use the * old class names. Restore them so columns stay correctly indented. * Only the offsets actually used in the codebase are listed here. * ----------------------------------------------------------------- */ @media (min-width: 576px) { /* col-sm-offset-1: 1/12 = 8.33333% */ .col-sm-offset-1 { margin-left: 8.33333%; } } @media (min-width: 768px) { /* col-md-offset-1: 1/12 = 8.33333% */ .col-md-offset-1 { margin-left: 8.33333%; } /* col-md-offset-2: 2/12 = 16.66667% */ .col-md-offset-2 { margin-left: 16.66667%; } } @media (min-width: 992px) { /* col-lg-offset-2: 2/12 = 16.66667% */ .col-lg-offset-2 { margin-left: 16.66667%; } } /* ----------------------------------------------------------------- * 3c. Header .header-content — restore BS3 column gutter + eliminate * inline-block whitespace gap. * * TWO differences arise from BS3→BS5 on the header columns: * (a) BS3 col-* classes carried `padding-left/right: 15px` directly * on the column class. BS5 moved this to `.row > *`, so col-* * children of NON-row containers (like .header-content) lose * their gutter padding. The missing padding on .header-nav * moves nav links and member-actions 15px to the LEFT vs the * baseline. * (b) BS3 col-* children were floated, which collapses whitespace * between sibling divs. BS5 doesn't float them, so the HTML * newlines between .logo/.header-nav/.navicon render as extra * "space" characters (≈4-5px) that shift the layout right. * * Fix: restore BS3's 15px column gutters on the header-content * children (corrects the 15px nav shift) and use font-size:0 on * the container to suppress whitespace nodes (corrects the 4-5px * inline-block gap), restoring font-size on the children. * ----------------------------------------------------------------- */ .header-content { font-size: 0; /* collapse whitespace between inline-block col-* children */ } .header-content > .logo, .header-content > .header-nav, .header-content > .navicon { font-size: 18px; /* restore body font-size (styles.css body { font-size:18px }) */ vertical-align: top; padding-left: 15px; /* restore BS3 col-* gutter padding (BS5 moved it to .row>*) */ padding-right: 15px; } /* ----------------------------------------------------------------- * [former 3] Social icons (header .primary-social) — restore BS3 position. * In BS3 (float layout), primary-social's "auto" left was at * ~x=1129 viewport (slightly left of the 1305 header right edge), * causing the icons to OVERLAP the LOGIN button and overflow 24px * beyond the header right edge — visible to the right of LOGIN. * In BS5 (inline-block layout), the natural static position is * ~x=1133. Restore BS3 position by matching the computed left * from BS3's static layout. 1129 - 135 (header left margin) = 994px * from the header's left edge. Set left: 994px to match. * ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 3d. Header logo image — note on max-width. * BS5 reboot applies img { max-width: 100% } globally. This makes * the logo scale to the content-box (~255px vs natural 297px). * Testing showed that removing this (max-width: none) makes the * diff WORSE (overflow creates more mismatched pixels than scaling * does), so the BS5 default is accepted for the logo image. * ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 4b. SPA-injected content std-content vertical correction. * BS5's .row > * adds 12px gutter padding to the
SPA * container, narrowing its content-box from 1170px to 1146px. * .std-content { padding-top: 7% } then computes to * 7% × 1146 = 80.22px (BS5) vs 7% × 1170 = 81.9px (BS3). * Additionally, the gc.height is 4px larger in BS5 (the * combination of the wider flex columns causing slightly taller * content boxes). Net effect: page height is 2px taller than * the BS3 baseline, causing every pixel row below the gc top to * appear shifted in the diff image. * Fix: apply a 2px negative top margin to .std-content to restore * the gc to the baseline vertical position. * ----------------------------------------------------------------- */ .std-content { margin-top: -2px; } /* ----------------------------------------------------------------- * 4c. Navbar — suppress BS5 toggler border/background. * BS5's .navbar-toggler ships with a border and a visible icon * background. The site uses its own .nav-toggle hamburger * (in .navicon); the BS5 toggler is only used for the hidden * #mainav_usernav slide-out panel. Keep it neutral so it does * not introduce new pixels on any route that renders the panel. * ----------------------------------------------------------------- */ .radim.navbar .navbar-toggler { border: none; background: transparent; padding: 0; box-shadow: none; } .radim.navbar .navbar-toggler:focus { box-shadow: none; outline: none; } /* ----------------------------------------------------------------- * 5a. BS5 reboot — body line-height. * BS3: body { line-height: 1.428571 } * BS5: body { line-height: 1.5 } * The site's styles.css sets body font-size: 18px but does NOT * set line-height, so BS5's 1.5 applies → 27px per line instead * of 25.7px. For text NOT inside

(p has its own line-height: * 29px from styles.css), each text line and each
element is * ~1.3px taller. On pages with several

pairs this * accumulates to visible height diffs (about: +11px, tandc: large). * Restore BS3 value. * ----------------------------------------------------------------- */ body { line-height: 1.428571; } /* ----------------------------------------------------------------- * 5b. BS5 reboot — heading margins that differ from BS3. * BS3 (actual bootstrap.css in this repo): * h1/h2/h3, .h1/.h2/.h3: margin-top: 20px; margin-bottom: 10px * h4/h5/h6, .h4/.h5/.h6: margin-top: 10px; margin-bottom: 10px * BS5 reboot: * h1-h6, .h1-.h6: margin-top: 0; margin-bottom: 0.5rem * * SPECIFICITY CHALLENGE: Two BS5 rules suppress heading margin-top: * (a) ".h1, .h2, ..., h1, h2, ..., h6 { margin-top: 0 }" * specificity (0,1,0) via .hN class selector * (b) ".row > * { margin-top: var(--bs-gutter-y) }" * specificity (0,1,1) — beats (a); suppresses margin on any * heading that is a DIRECT child of .row * * To override (a): use the same .hN-class selector pattern — * ".h1, .h2, ..., h1, h2, ..., h6" → specificity (0,1,0); * shim loads after bootstrap so source order wins. * To override (b): use ".row > hN" selector — specificity (0,1,1); * shim source-order win again. * * Do NOT set h3 margin-bottom here: styles.css overrides * h3 { margin-bottom: 20px } and that must stay. * ----------------------------------------------------------------- */ /* h1-h3: BS3 margin-top 20px — for headings NOT direct .row children */ .h1, h1, .h2, h2, .h3, h3 { margin-top: 20px; margin-bottom: 10px; } /* h1-h3: direct .row children — beat .row > * specificity (0,1,1) */ .row > h1, .row > h2, .row > h3, .row > .h1, .row > .h2, .row > .h3 { margin-top: 20px; margin-bottom: 10px; } /* styles.css sets h3 { margin-bottom: 20px } (specificity 0,0,1). Our margin-bottom: 10px above has specificity (0,1,0) and loads later, which would BEAT styles.css and clobber the 20px. Restore it: */ h3 { margin-bottom: 20px; } /* h4-h6: BS3 margin-top 10px — for headings NOT direct .row children */ .h4, h4, .h5, h5, .h6, h6 { margin-top: 10px; margin-bottom: 10px; } /* h4-h6 as DIRECT .row children: BS5 flex layout eliminates margin collapse between siblings (unlike BS3 block layout where adjacent p(10px bottom)+h5(10px top) collapsed to max=10px). In BS5 they sum to 20px. Nullify h4/h5/h6 top margin for direct row children so the preceding element's bottom margin provides the only gap, matching BS3's collapsed 10px behaviour. */ .row > h4, .row > h5, .row > h6, .row > .h4, .row > .h5, .row > .h6 { margin-top: 0; margin-bottom: 10px; } /* ----------------------------------------------------------------- * 6. BS5 reboot —