-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmodulate-header.css
More file actions
43 lines (36 loc) · 3.38 KB
/
Copy pathmodulate-header.css
File metadata and controls
43 lines (36 loc) · 3.38 KB
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
@layer base, typography, primitive, widget, module, page, utility, theme, override;
/* ====================================================================================================
Defaults
==================================================================================================== */
@layer base {
:root {
--header-banner-height-min: 0;
--header-banner-height-max: 0;
--header-mainnav-height-min: 0;
--header-mainnav-height-max: 0;
--header-subnav-height-min: 0;
--header-subnav-height-max: 0;
--anchor-space-min: 0;
--anchor-space-max: 0;
}
}
/* ====================================================================================================
Fluid Sizing
==================================================================================================== */
@layer base {
:root {
--header-banner-height-v: calc(((100 * (var(--header-banner-height-max) - var(--header-banner-height-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
--header-banner-height-r: calc((((var(--grid-s-min) * var(--header-banner-height-max)) - (var(--grid-s-max) * var(--header-banner-height-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
--header-banner-height: clamp(calc((var(--header-banner-height-min) / var(--grid-rem)) * 1rem), calc(var(--header-banner-height-v) + var(--header-banner-height-r) * 1rem), calc((var(--header-banner-height-max) / var(--grid-rem)) * 1rem));
--header-mainnav-height-v: calc(((100 * (var(--header-mainnav-height-max) - var(--header-mainnav-height-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
--header-mainnav-height-r: calc((((var(--grid-s-min) * var(--header-mainnav-height-max)) - (var(--grid-s-max) * var(--header-mainnav-height-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
--header-mainnav-height: clamp(calc((var(--header-mainnav-height-min) / var(--grid-rem)) * 1rem), calc(var(--header-mainnav-height-v) + var(--header-mainnav-height-r) * 1rem), calc((var(--header-mainnav-height-max) / var(--grid-rem)) * 1rem));
--header-subnav-height-v: calc(((100 * (var(--header-subnav-height-max) - var(--header-subnav-height-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
--header-subnav-height-r: calc((((var(--grid-s-min) * var(--header-subnav-height-max)) - (var(--grid-s-max) * var(--header-subnav-height-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
--header-subnav-height: clamp(calc((var(--header-subnav-height-min) / var(--grid-rem)) * 1rem), calc(var(--header-subnav-height-v) + var(--header-subnav-height-r) * 1rem), calc((var(--header-subnav-height-max) / var(--grid-rem)) * 1rem));
--header-height: calc(var(--header-banner-height) + var(--header-mainnav-height) + var(--header-subnav-height));
--anchor-space-v: calc(((100 * (var(--anchor-space-max) - var(--anchor-space-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
--anchor-space-r: calc((((var(--grid-s-min) * var(--anchor-space-max)) - (var(--grid-s-max) * var(--anchor-space-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
--anchor-space: clamp(calc((var(--anchor-space-min) / var(--grid-rem)) * 1rem), calc(var(--anchor-space-v) + var(--anchor-space-r) * 1rem), calc((var(--anchor-space-max) / var(--grid-rem)) * 1rem));
}
}