body > * { padding: 0 min((100% - 100 * var(--aspect-ratio)) / 2, (100% - var(--min) / var(--sidebar-shrink) * var(--groupfactor) - var(--2margin)) / 2); /* from ol min-width */ }
footer { margin: 0 calc(20vw + 2 * var(--2margin)); padding: 0; }
html { font-size: calc(var(--base-vw) * var(--aspect-ratio)); }
.Slider,
.DataRegion, /* Next 3 get sidebar-shrink since they shrink when it's is active */
.SearchConsole { font-size: calc(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink)); }
/* Include groupfactor since Table shrinks when it goes wide */
ol { font-size: calc(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink) / var(--groupfactor));
/* minfont already takes into account sidebar so undo it by multiplying so table is 768px wide minimum. */
min-width: calc(var(--min) * var(--groupfactor) - 2 * var(--2margin)); }
:root { --aspect-ratio: 1vw; --square: calc(var(--square-vw) * var(--aspect-ratio)); /* no min/max, fit to width only */ }
@supports (font-size: min(1vw, 1vh)) {
:root { --square: calc(var(--square-vw) * max(var(--min) / var(--sidebar-shrink) / 100, var(--aspect-ratio))); }
html { font-size: max(var(--base-vw) * var(--aspect-ratio), var(--minfont)); }
.Slider,
.DataRegion, /* Next 3 get sidebar-shrink since they shrink when it's is active */
.SearchConsole { font-size: max(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink), var(--minfont)); }
ol { font-size: max(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink) / var(--groupfactor), var(--minfont) * var(--sidebar-shrink)); }
/* minfont already takes into account sidebar so undo it by multiplying so table is 768px wide minimum. */
:root { --aspect-ratio: min(1vw, 1.17vh + (var(--groups) - 18) * 0.048vh); } /* reach 1.9vh at group 32 */
.Sidebar { --aspect-ratio: min(1vw, 1.8vh + (var(--groups) - 18) * 0.1vh); } /* reach 3.1vh at group 32 */
.Reset { --aspect-ratio: min(1vw, 1.48vh + (var(--groups) - 18) * 0.09vh); } /* reach 2.75vh at group 32 */
}
Comments