/******************************* Computed Sizing *******************************/ :root { /* ------------------- Sizing Values -------------------- */ /* These are the pixel values expressed as a ratio of base em This is used to calculate em sizing */ /* Size of page font */ --font-size: calc(var(--em-size) * 1px); --mini-ratio: calc(var(--mini-size-px) / var(--em-size)); --tiny-ratio: calc(var(--tiny-size-px) / var(--em-size)); --small-ratio: calc(var(--small-size-px) / var(--em-size)); --medium-ratio: calc(var(--medium-size-px) / var(--em-size)); --large-ratio: calc(var(--large-size-px) / var(--em-size)); --big-ratio: calc(var(--big-size-px) / var(--em-size)); --huge-ratio: calc(var(--huge-size-px) / var(--em-size)); --massive-ratio: calc(var(--massive-size-px) / var(--em-size)); /* rem (relative to html/body tag) */ --mini: calc(var(--mini-ratio) * 1rem); --tiny: calc(var(--tiny-ratio) * 1rem); --small: calc(var(--small-ratio) * 1rem); --medium: calc(var(--medium-ratio) * 1rem); --large: calc(var(--large-ratio) * 1rem); --big: calc(var(--big-ratio) * 1rem); --huge: calc(var(--huge-ratio) * 1rem); --massive: calc(var(--massive-ratio) * 1rem); /* em (relative to container) */ --relative-mini: calc(var(--mini-ratio) * 1em); --relative-tiny: calc(var(--tiny-ratio) * 1em); --relative-small: calc(var(--small-ratio) * 1em); --relative-medium: calc(var(--medium-ratio) * 1em); --relative-large: calc(var(--large-ratio) * 1em); --relative-big: calc(var(--big-ratio) * 1em); --relative-huge: calc(var(--huge-ratio) * 1em); --relative-massive: calc(var(--massive-ratio) * 1em); /* ------------------- Exact Pixel Values -------------------- */ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ --1px: calc((1 / var(--em-size)) * 1rem); --2px: calc((2 / var(--em-size)) * 1rem); --3px: calc((3 / var(--em-size)) * 1rem); --4px: calc((4 / var(--em-size)) * 1rem); --5px: calc((5 / var(--em-size)) * 1rem); --6px: calc((6 / var(--em-size)) * 1rem); --7px: calc((7 / var(--em-size)) * 1rem); --8px: calc((8 / var(--em-size)) * 1rem); --9px: calc((9 / var(--em-size)) * 1rem); --10px: calc((10 / var(--em-size)) * 1rem); --11px: calc((11 / var(--em-size)) * 1rem); --12px: calc((12 / var(--em-size)) * 1rem); --13px: calc((13 / var(--em-size)) * 1rem); --14px: calc((14 / var(--em-size)) * 1rem); --15px: calc((15 / var(--em-size)) * 1rem); --16px: calc((16 / var(--em-size)) * 1rem); --17px: calc((17 / var(--em-size)) * 1rem); --18px: calc((18 / var(--em-size)) * 1rem); --19px: calc((19 / var(--em-size)) * 1rem); --20px: calc((20 / var(--em-size)) * 1rem); --21px: calc((21 / var(--em-size)) * 1rem); --22px: calc((22 / var(--em-size)) * 1rem); --23px: calc((23 / var(--em-size)) * 1rem); --24px: calc((24 / var(--em-size)) * 1rem); --25px: calc((25 / var(--em-size)) * 1rem); --26px: calc((26 / var(--em-size)) * 1rem); --27px: calc((27 / var(--em-size)) * 1rem); --28px: calc((28 / var(--em-size)) * 1rem); --29px: calc((29 / var(--em-size)) * 1rem); --30px: calc((30 / var(--em-size)) * 1rem); --31px: calc((31 / var(--em-size)) * 1rem); --32px: calc((32 / var(--em-size)) * 1rem); --33px: calc((33 / var(--em-size)) * 1rem); --34px: calc((34 / var(--em-size)) * 1rem); --35px: calc((35 / var(--em-size)) * 1rem); --36px: calc((36 / var(--em-size)) * 1rem); --37px: calc((37 / var(--em-size)) * 1rem); --38px: calc((38 / var(--em-size)) * 1rem); --39px: calc((39 / var(--em-size)) * 1rem); --40px: calc((40 / var(--em-size)) * 1rem); --41px: calc((41 / var(--em-size)) * 1rem); --42px: calc((42 / var(--em-size)) * 1rem); --43px: calc((43 / var(--em-size)) * 1rem); --44px: calc((44 / var(--em-size)) * 1rem); --45px: calc((45 / var(--em-size)) * 1rem); --46px: calc((46 / var(--em-size)) * 1rem); --47px: calc((47 / var(--em-size)) * 1rem); --48px: calc((48 / var(--em-size)) * 1rem); --49px: calc((49 / var(--em-size)) * 1rem); --50px: calc((50 / var(--em-size)) * 1rem); --51px: calc((51 / var(--em-size)) * 1rem); --52px: calc((52 / var(--em-size)) * 1rem); --53px: calc((53 / var(--em-size)) * 1rem); --54px: calc((54 / var(--em-size)) * 1rem); --55px: calc((55 / var(--em-size)) * 1rem); --56px: calc((56 / var(--em-size)) * 1rem); --57px: calc((57 / var(--em-size)) * 1rem); --58px: calc((58 / var(--em-size)) * 1rem); --59px: calc((59 / var(--em-size)) * 1rem); --60px: calc((60 / var(--em-size)) * 1rem); --61px: calc((61 / var(--em-size)) * 1rem); --62px: calc((62 / var(--em-size)) * 1rem); --63px: calc((63 / var(--em-size)) * 1rem); --64px: calc((64 / var(--em-size)) * 1rem); --relative-1px: calc((1 / var(--em-size)) * 1em); --relative-2px: calc((2 / var(--em-size)) * 1em); --relative-3px: calc((3 / var(--em-size)) * 1em); --relative-4px: calc((4 / var(--em-size)) * 1em); --relative-5px: calc((5 / var(--em-size)) * 1em); --relative-6px: calc((6 / var(--em-size)) * 1em); --relative-7px: calc((7 / var(--em-size)) * 1em); --relative-8px: calc((8 / var(--em-size)) * 1em); --relative-9px: calc((9 / var(--em-size)) * 1em); --relative-10px: calc((10 / var(--em-size)) * 1em); --relative-11px: calc((11 / var(--em-size)) * 1em); --relative-12px: calc((12 / var(--em-size)) * 1em); --relative-13px: calc((13 / var(--em-size)) * 1em); --relative-14px: calc((14 / var(--em-size)) * 1em); --relative-15px: calc((15 / var(--em-size)) * 1em); --relative-16px: calc((16 / var(--em-size)) * 1em); --relative-17px: calc((17 / var(--em-size)) * 1em); --relative-18px: calc((18 / var(--em-size)) * 1em); --relative-19px: calc((19 / var(--em-size)) * 1em); --relative-20px: calc((20 / var(--em-size)) * 1em); --relative-21px: calc((21 / var(--em-size)) * 1em); --relative-22px: calc((22 / var(--em-size)) * 1em); --relative-23px: calc((23 / var(--em-size)) * 1em); --relative-24px: calc((24 / var(--em-size)) * 1em); --relative-25px: calc((25 / var(--em-size)) * 1em); --relative-26px: calc((26 / var(--em-size)) * 1em); --relative-27px: calc((27 / var(--em-size)) * 1em); --relative-28px: calc((28 / var(--em-size)) * 1em); --relative-29px: calc((29 / var(--em-size)) * 1em); --relative-30px: calc((30 / var(--em-size)) * 1em); --relative-31px: calc((31 / var(--em-size)) * 1em); --relative-32px: calc((32 / var(--em-size)) * 1em); --relative-33px: calc((33 / var(--em-size)) * 1em); --relative-34px: calc((34 / var(--em-size)) * 1em); --relative-35px: calc((35 / var(--em-size)) * 1em); --relative-36px: calc((36 / var(--em-size)) * 1em); --relative-37px: calc((37 / var(--em-size)) * 1em); --relative-38px: calc((38 / var(--em-size)) * 1em); --relative-39px: calc((39 / var(--em-size)) * 1em); --relative-40px: calc((40 / var(--em-size)) * 1em); --relative-41px: calc((41 / var(--em-size)) * 1em); --relative-42px: calc((42 / var(--em-size)) * 1em); --relative-43px: calc((43 / var(--em-size)) * 1em); --relative-44px: calc((44 / var(--em-size)) * 1em); --relative-45px: calc((45 / var(--em-size)) * 1em); --relative-46px: calc((46 / var(--em-size)) * 1em); --relative-47px: calc((47 / var(--em-size)) * 1em); --relative-48px: calc((48 / var(--em-size)) * 1em); --relative-49px: calc((49 / var(--em-size)) * 1em); --relative-50px: calc((50 / var(--em-size)) * 1em); --relative-51px: calc((51 / var(--em-size)) * 1em); --relative-52px: calc((52 / var(--em-size)) * 1em); --relative-53px: calc((53 / var(--em-size)) * 1em); --relative-54px: calc((54 / var(--em-size)) * 1em); --relative-55px: calc((55 / var(--em-size)) * 1em); --relative-56px: calc((56 / var(--em-size)) * 1em); --relative-57px: calc((57 / var(--em-size)) * 1em); --relative-58px: calc((58 / var(--em-size)) * 1em); --relative-59px: calc((59 / var(--em-size)) * 1em); --relative-60px: calc((60 / var(--em-size)) * 1em); --relative-61px: calc((61 / var(--em-size)) * 1em); --relative-62px: calc((62 / var(--em-size)) * 1em); --relative-63px: calc((63 / var(--em-size)) * 1em); --relative-64px: calc((64 / var(--em-size)) * 1em); }