-
Notifications
You must be signed in to change notification settings - Fork 0
/
output.css
68 lines (61 loc) · 4.16 KB
/
output.css
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
:root {
--siteBasisMobile: 375;
--siteBasisDesktop: 1440;
--siteBasis: var(--siteBasisMobile);
--siteMaxMobile: 600;
--siteMaxDesktop: 1600;
--siteMax: var(--siteMaxMobile);
}
div.border {
width: clamp(1px, calc(150vw * (100 / var(--siteBasis))), calc(150px * var(--siteMax) / var(--siteBasis)));
padding: clamp(1px, calc(12vw * (100 / var(--siteBasis))), calc(12px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(100vw * (100 / var(--siteBasis))), calc(100px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(13vw * (100 / var(--siteBasis))), calc(13px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(15vw * (100 / var(--siteBasis))), calc(15px * var(--siteMax) / var(--siteBasis)));
border: clamp(1px, calc(5vw * (100 / var(--siteBasis))), calc(5px * var(--siteMax) / var(--siteBasis))) solid blue;
}
div.absolute {
position: absolute;
top: clamp(1px, calc(50vw * (100 / var(--siteBasis))), calc(50px * var(--siteMax) / var(--siteBasis)));
right: clamp(calc(-99 * (100 / var(--siteBasis)) * 1vw), calc(-99px * var(--siteMax) / var(--siteBasis)), -1px);
width: clamp(1px, calc(490vw * (100 / var(--siteBasis))), calc(490px * var(--siteMax) / var(--siteBasis)));
height: 44.5px;
border: clamp(1px, calc(1vw * (100 / var(--siteBasis))), calc(1px * var(--siteMax) / var(--siteBasis))) solid green;
background: palegoldenrod;
}
div.negativeval {
border: clamp(1px, calc(4vw * (100 / var(--siteBasis))), calc(4px * var(--siteMax) / var(--siteBasis))) solid brown;
background: paleturquoise;
width: clamp(1px, calc(300vw * (100 / var(--siteBasis))), calc(300px * var(--siteMax) / var(--siteBasis)));
height: clamp(1px, calc(200vw * (100 / var(--siteBasis))), calc(200px * var(--siteMax) / var(--siteBasis)));
margin-left: clamp(calc(-30 * (100 / var(--siteBasis)) * 1vw), calc(-30px * var(--siteMax) / var(--siteBasis)), -1px);
}
div.decimal {
width: clamp(1px, calc(845.34534vw * (100 / var(--siteBasis))), calc(845.34534px * var(--siteMax) / var(--siteBasis)));
height: clamp(1px, calc(35.3344vw * (100 / var(--siteBasis))), calc(35.3344px * var(--siteMax) / var(--siteBasis)));
background: lightpink;
}
@media (min-width: 1024px) {
* {
--siteBasis: var(--siteBasisDesktop);
--siteMax: var(--siteMaxDesktop);
}
div {
border: 5px solid green;
}
}
div.bobo {
width: clamp(1px, calc(50.5vw * (100 / var(--siteBasis))), calc(50.5px * var(--siteMax) / var(--siteBasis)));
}
div.shorthand {
background: tomato;
color: #fff;
padding: clamp(1px, calc(40vw * (100 / var(--siteBasis))), calc(40px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(20vw * (100 / var(--siteBasis))), calc(20px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(100vw * (100 / var(--siteBasis))), calc(100px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(50vw * (100 / var(--siteBasis))), calc(50px * var(--siteMax) / var(--siteBasis)));
margin: clamp(1px, calc(400vw * (100 / var(--siteBasis))), calc(400px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(200vw * (100 / var(--siteBasis))), calc(200px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(99vw * (100 / var(--siteBasis))), calc(99px * var(--siteMax) / var(--siteBasis))) clamp(1px, calc(200vw * (100 / var(--siteBasis))), calc(200px * var(--siteMax) / var(--siteBasis)));
}
div.bordertest {
border: clamp(1px, calc(15vw * (100 / var(--siteBasis))), calc(15px * var(--siteMax) / var(--siteBasis))) solid pink;
}
div.weird-stuff {
margin: clamp(1px, calc(20vw * (100 / var(--siteBasis))), calc(20px * var(--siteMax) / var(--siteBasis))) calc(clamp(1px, calc(20vw * (100 / var(--siteBasis))), calc(20px * var(--siteMax) / var(--siteBasis))) + calc(clamp(1px, calc(10vw * (100 / var(--siteBasis))), calc(10px * var(--siteMax) / var(--siteBasis))) + 5%)) clamp(1px, calc(50vw * (100 / var(--siteBasis))), calc(50px * var(--siteMax) / var(--siteBasis)));
}
div.zero-test {
margin: clamp(1px, calc(20vw * (100 / var(--siteBasis))), calc(20px * var(--siteMax) / var(--siteBasis))) 0 clamp(1px, calc(50vw * (100 / var(--siteBasis))), calc(50px * var(--siteMax) / var(--siteBasis)));
}