diff --git a/wwwroot/css/display.css b/wwwroot/css/display.css index 4fbc43a..8046805 100644 --- a/wwwroot/css/display.css +++ b/wwwroot/css/display.css @@ -10,6 +10,7 @@ html, body { width: 100%; height: 100%; overflow: hidden; background: #fff; font top: 50%; left: 50%; transform-origin: center center; + overflow: hidden; } /* === Slide Container === */ @@ -24,14 +25,33 @@ body[data-transition="slide"] .slide-layer.slide-out { transform: translateX(-10 body[data-transition="none"] .slide-layer { transition: none; } /* === Slide Content === */ -.slide-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; } +.slide-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .slide-inner .content-wrap { width: 100%; height: 100%; overflow: hidden; } + +/* === Force inline content to respect container bounds === */ +.slide-inner .content-wrap img { + max-width: 100% !important; + height: auto !important; + object-fit: contain; +} +.slide-inner .content-wrap table { + max-width: 100% !important; + table-layout: auto; + width: auto; + margin: 1em auto; + border-collapse: collapse; +} +.slide-inner .content-wrap iframe { + max-width: 100% !important; +} +.slide-inner .content-wrap * { + max-width: 100%; +} + .slide-inner h1 { font-size: 3em; font-weight: 700; } .slide-inner h2 { font-size: 2.2em; font-weight: 600; } .slide-inner h3 { font-size: 1.6em; font-weight: 600; } .slide-inner p { font-size: 1.2em; line-height: 1.6; } -.slide-inner img { max-width: 100%; max-height: 100%; object-fit: contain; } -.slide-inner table { width: auto; margin: 1em auto; border-collapse: collapse; } .slide-inner table td, .slide-inner table th { padding: 0.6em 1em; border: 1px solid rgba(0, 0, 0, 0.2); } .slide-inner table th { background: rgba(0, 0, 0, 0.05); font-weight: 600; } .slide-inner iframe.embed-frame { width: 100%; height: 100%; border: none; }