argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.78k stars 193 forks source link

add fold env var named props #372

Open argyleink opened 1 year ago

argyleink commented 1 year ago

there is probably a whole set of segment viewport vars to make:

:root {
  --fold-1: env(viewport-segment-left 1 0);
  --fold-2: env(viewport-segment-left 0 0);
  --size-hinge: calc(var(--fold-1) - var(--fold-2));
}

.layout {
  display: grid;
  grid-template-columns: var(--fold-1) var(--fold-2);
  gap: var(--size-hinge);
}