mirror of
https://github.com/swc-project/swc.git
synced 2024-12-21 20:51:42 +03:00
40 lines
730 B
CSS
40 lines
730 B
CSS
|
@custom-media --viewport-medium (width <= 50rem);
|
||
|
|
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--fontSize: 1rem;
|
||
|
|
--mainColor: #12345678;
|
||
|
|
--secondaryColor: lab(32.5 38.5 -47.6 / 90%);
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
overflow: hidden auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (--viewport-medium) {
|
||
|
|
body {
|
||
|
|
color: var(--mainColor);
|
||
|
|
font-family: system-ui;
|
||
|
|
font-size: var(--fontSize);
|
||
|
|
line-height: calc(var(--fontSize) * 1.5);
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
padding-inline: calc(var(--fontSize) / 2 + 1px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:--heading {
|
||
|
|
margin-block: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero:matches(main, .main) {
|
||
|
|
background-image: image-set(url("./img1x.png") 1x, url("./img2x.png") 2x);
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: rgb(0 0 100% / 90%);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: rebeccapurple;
|
||
|
|
}
|
||
|
|
}
|