/* * Waline fixes for MkDocs Material. * * MkDocs Material scales font-size via rem on the element: * default (< 1600px): 125% = 20px root * screen medium (≥ 1600px): 137.5% = 22px root * screen large (≥ 2000px): 150% = 24px root * * .md-typeset body text = px2rem(16px) = 0.8rem, which auto-scales. * We match that with rem so Waline tracks the same responsive rhythm. */ /* ---- Reaction area ---------------------------------------------------- */ /* * MkDocs Material's .md-typeset adds styles to every ul/li that break * Waline's default compact reaction layout. We reset ONLY the leaking * properties so Waline's own CDN CSS (gap, sizing, layout) works as-intended, * matching the official docs at https://waline.js.org. */ /* Waline sets overflow:auto hidden; we override → hidden to prevent mobile horizontal scrollbar when MkDocs content padding eats space */ [data-waline] .wl-reaction { overflow: hidden; } /* Kill MkDocs Material leaks: .md-typeset ul:not([hidden]){display:flow-root} → breaks flex row .md-typeset ul,ol{padding:0;margin-inline-start:px2em(10px)} → extra indent Waline's own normalize: [data-waline] ul{margin-inline-start:1.25em} → extra indent */ [data-waline] .wl-reaction .wl-reaction-list { display: flex; margin: 0; padding: 8px; /* Waline default */ list-style: none; } /* Kill .md-typeset li{margin-inline-start:px2em(20px);margin-bottom:0.5em} */ [data-waline] .wl-reaction .wl-reaction-item { margin: 0; } /* Kill .md-typeset img{height:auto} — let Waline's img{width:100%;height:100%} work */ [data-waline] .wl-reaction .wl-reaction-img img { height: 100%; } /* ---- General Waline font-size ----------------------------------------- */ [data-waline] { font-size: 0.9rem; /* 18px / 19.8px / 21.6px at each breakpoint */ } /* ---- Mobile ----------------------------------------------------------- */ @media (max-width: 580px) { [data-waline] .wl-reaction-title { font-size: 0.85em; } [data-waline] .wl-action { font-size: 0.75em; } }