42 lines
954 B
CSS
42 lines
954 B
CSS
/* custom properties */
|
|
:root{--fontSize: 1rem;
|
|
--mainColor :#12345678;
|
|
--highlightColor:hwb(190, 35%, 20%);
|
|
}
|
|
|
|
/* custom media queries */
|
|
@custom-media
|
|
|
|
--viewport-medium(width<=50rem);
|
|
|
|
/* some var() & calc() */
|
|
body{color:var(--mainColor);
|
|
font-size:var(--fontSize);
|
|
line-height: calc(var(--fontSize) * 1.5);
|
|
padding: calc((var(--fontSize) / 2) + 1px)}
|
|
|
|
/* custom media query usage */
|
|
@media (--viewport-medium) {
|
|
body {font-size: calc(var(--fontSize) * 1.2); }
|
|
}
|
|
/* custom selectors */
|
|
@custom-selector :--heading h1,h2,h3, h4,h5,h6;
|
|
:--heading { margin-top:0 }
|
|
|
|
/* colors stuff */
|
|
a{
|
|
color:var(--highlightColor);
|
|
transition:color 1s;
|
|
}
|
|
a:hover{color :gray(255,50%) }
|
|
a:active{color : rebeccapurple }
|
|
a:any-link { color:color(var(--highlightColor) blackness(+ 20%)) }
|
|
|
|
/* font stuff */
|
|
h2 {font-variant-caps:small-caps;
|
|
}table{font-variant-numeric: lining-nums;
|
|
}
|
|
/* filters */
|
|
.blur{filter:blur(4px)}.sepia{
|
|
filter: sepia(.8);}
|