96 lines
4.4 KiB
CSS
96 lines
4.4 KiB
CSS
|
/* VARIABLES */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* font sizes
|
||
|
|
https://utopia.fyi/type/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,m-xl&g=s,l,xl,12
|
||
|
|
*/
|
||
|
|
--size--1: clamp(0.94rem, calc(0.91rem + 0.14vw), 1rem);
|
||
|
|
--size-0: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
|
||
|
|
--size-1: clamp(1.35rem, calc(1.26rem + 0.47vw), 1.56rem);
|
||
|
|
--size-2: clamp(1.62rem, calc(1.47rem + 0.74vw), 1.95rem);
|
||
|
|
--size-3: clamp(1.94rem, calc(1.72rem + 1.11vw), 2.44rem);
|
||
|
|
--size-4: clamp(2.33rem, calc(2.01rem + 1.6vw), 3.05rem);
|
||
|
|
--size-5: clamp(2.8rem, calc(2.35rem + 2.26vw), 3.82rem);
|
||
|
|
--size-6: clamp(3.36rem, calc(2.73rem + 3.13vw), 4.77rem);
|
||
|
|
--size-7: clamp(4.03rem, calc(3.17rem + 4.29vw), 5.96rem);
|
||
|
|
--size-8: clamp(4.84rem, calc(3.68rem + 5.81vw), 7.45rem);
|
||
|
|
|
||
|
|
/* spaces
|
||
|
|
https://utopia.fyi/space/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,m-xl&g=s,l,xl,12
|
||
|
|
*/
|
||
|
|
--space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
|
||
|
|
--space-2xs: clamp(0.56rem, calc(0.53rem + 0.14vw), 0.63rem);
|
||
|
|
--space-xs: clamp(0.88rem, calc(0.85rem + 0.14vw), 0.94rem);
|
||
|
|
--space-s: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
|
||
|
|
--space-m: clamp(1.69rem, calc(1.6rem + 0.42vw), 1.88rem);
|
||
|
|
--space-l: clamp(2.25rem, calc(2.14rem + 0.56vw), 2.5rem);
|
||
|
|
--space-xl: clamp(3.38rem, calc(3.21rem + 0.83vw), 3.75rem);
|
||
|
|
--space-2xl: clamp(4.5rem, calc(4.28rem + 1.11vw), 5rem);
|
||
|
|
--space-3xl: clamp(6.75rem, calc(6.42rem + 1.67vw), 7.5rem);
|
||
|
|
|
||
|
|
/* One-up pairs */
|
||
|
|
--space-3xs-2xs: clamp(0.31rem, calc(0.17rem + 0.69vw), 0.63rem);
|
||
|
|
--space-2xs-xs: clamp(0.56rem, calc(0.4rem + 0.83vw), 0.94rem);
|
||
|
|
--space-xs-s: clamp(0.88rem, calc(0.71rem + 0.83vw), 1.25rem);
|
||
|
|
--space-s-m: clamp(1.13rem, calc(0.79rem + 1.67vw), 1.88rem);
|
||
|
|
--space-m-l: clamp(1.69rem, calc(1.33rem + 1.81vw), 2.5rem);
|
||
|
|
--space-l-xl: clamp(2.25rem, calc(1.58rem + 3.33vw), 3.75rem);
|
||
|
|
--space-xl-2xl: clamp(3.38rem, calc(2.65rem + 3.61vw), 5rem);
|
||
|
|
--space-2xl-3xl: clamp(4.5rem, calc(3.17rem + 6.67vw), 7.5rem);
|
||
|
|
|
||
|
|
/* multi steps */
|
||
|
|
--space-3xs-s: clamp(0.31rem, calc(-0.1rem + 2.08vw), 1.25rem);
|
||
|
|
--space-2xs-s: clamp(0.56rem, calc(0.26rem + 1.53vw), 1.25rem);
|
||
|
|
--space-2xs-m: clamp(0.56rem, calc(-0.02rem + 2.92vw), 1.88rem);
|
||
|
|
--space-xs-m: clamp(0.88rem, calc(0.43rem + 2.22vw), 1.88rem);
|
||
|
|
--space-xs-l: clamp(0.88rem, calc(0.15rem + 3.61vw), 2.5rem);
|
||
|
|
--space-s-l: clamp(1.13rem, calc(0.51rem + 3.06vw), 2.5rem);
|
||
|
|
--space-s-xl: clamp(1.13rem, calc(-0.04rem + 5.83vw), 3.75rem);
|
||
|
|
--space-m-xl: clamp(1.69rem, calc(0.77rem + 4.58vw), 3.75rem);
|
||
|
|
--space-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem);
|
||
|
|
--space-l-3xl: clamp(2.25rem, calc(-0.08rem + 11.67vw), 7.5rem);
|
||
|
|
|
||
|
|
/* colors */
|
||
|
|
--color-dark: hsl(239, 57%, 15%);
|
||
|
|
--color-grey: hsl(211, 12%, 35%);
|
||
|
|
--color-light-grey: hsl(0, 0%, 94%);
|
||
|
|
--color-blue: hsl(253, 98%, 41%);
|
||
|
|
--color-dark-blue: hsl(218, 60%, 21%);
|
||
|
|
--color-light-blue: hsl(194, 54%, 89%);
|
||
|
|
--color-blend-blue: hsl(253, 100%, 32%);
|
||
|
|
--color-soft-blue: hsl(210, 73%, 94%);
|
||
|
|
--color-violet: hsl(248, 73%, 52%);
|
||
|
|
--color-brique: hsl(358, 54%, 54%);
|
||
|
|
--color-white: hsl(0, 0%, 100%);
|
||
|
|
--color-light-white: hsl(240, 50%, 98%);
|
||
|
|
--color-black: hsl(0, 0%, 0%);
|
||
|
|
|
||
|
|
/* shadows */
|
||
|
|
--shadow-color: 0deg 0% 80%;
|
||
|
|
--shadow-elevation-medium: 0px 0.7px 0.7px hsl(var(--shadow-color) / 0.28),
|
||
|
|
0px 1.5px 1.6px -0.7px hsl(var(--shadow-color) / 0.26),
|
||
|
|
0px 2.9px 3px -1.5px hsl(var(--shadow-color) / 0.24),
|
||
|
|
0px 6px 6.3px -2.2px hsl(var(--shadow-color) / 0.22),
|
||
|
|
0px 11.8px 12.4px -3px hsl(var(--shadow-color) / 0.2);
|
||
|
|
--shadow-elevation-high: 0px 0.5px 0.5px hsl(var(--shadow-color) / 0.18),
|
||
|
|
0px 1.4px 1.5px -0.3px hsl(var(--shadow-color) / 0.18),
|
||
|
|
0px 2.3px 2.4px -0.7px hsl(var(--shadow-color) / 0.17),
|
||
|
|
0px 3.4px 3.6px -1px hsl(var(--shadow-color) / 0.16),
|
||
|
|
0px 5.1px 5.4px -1.3px hsl(var(--shadow-color) / 0.16),
|
||
|
|
0px 7.5px 7.9px -1.7px hsl(var(--shadow-color) / 0.15),
|
||
|
|
0px 10.8px 11.3px -2px hsl(var(--shadow-color) / 0.15),
|
||
|
|
-0.1px 15.4px 16.2px -2.3px hsl(var(--shadow-color) / 0.14),
|
||
|
|
-0.1px 21.3px 22.4px -2.7px hsl(var(--shadow-color) / 0.13),
|
||
|
|
-0.1px 28.9px 30.3px -3px hsl(var(--shadow-color) / 0.13);
|
||
|
|
|
||
|
|
/* radius */
|
||
|
|
--radius: 20px;
|
||
|
|
--radius-small: 10px;
|
||
|
|
|
||
|
|
/* grid */
|
||
|
|
--content-width: 75rem;
|
||
|
|
--grid-wrapper: [full-start] 1fr [wrapper-start]
|
||
|
|
minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
|
||
|
|
--_content-padding: var(--content-padding, var(--space-s));
|
||
|
|
}
|