mCSS/dist/css/help.ratios.css at 071b00fdb796b2f3a01f2087b9bfb256200873de · minimaldesign/mCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*! mCSS v1.4.0 | MIT | https://mcss.dev */
/*
SETTINGS MEDIA QUERIES

https://github.com/argyleink/open-props/blob/main/src/props.media.css
https://open-props.style/#media-queries

Can't use var() inside media queries 🤦‍♂️
https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
so breakpoints are not in theme.default.tokens.css

xxs: 240px
xs: 360px
sm: 480px
md: 768px
lg: 1024px
xl: 1440px
xxl: 1920px
*/

/* https://github.com/postcss/postcss-mixins */

/* Example */

/* truncate single line of text and adds … */

@layer helpers {
/* HELPER RATIOS */

.ar-square {
  aspect-ratio: var(--ar-square) !important;
}

.ar-landscape {
  aspect-ratio: var(--ar-landscape) !important;
}

.ar-portrait {
  aspect-ratio: var(--ar-portrait) !important;
}

.ar-widescreen {
  aspect-ratio: var(--ar-widescreen) !important;
}

.ar-golden {
  aspect-ratio: var(--ar-golden) !important;
}

}