packages/app-viewport/src/index.xcss
/* stylelint-disable no-invalid-position-at-import-rule */
/* Fonts */
@font-face {
font-family: Rubik;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://fonts.bunny.net/rubik/files/rubik-latin-400-normal.woff2') format('woff2');
}
/* Packages */
@import '@ekscss/framework';
@import '@ekscss/framework/addon/pretty.xcss';
/* Local */
:root {
color-scheme: dark;
}
@media ${x.app.media.xs} {
html {
font-size: 16px;
}
}
body {
display: flex;
flex-direction: column;
overflow: scroll; // always show scroll bars to show accurate client sizes
}
main {
margin: auto;
}
dl {
display: grid;
grid-template-columns: repeat(2, auto);
font-size: 1.3em;
}
dt,
dd {
margin: 0;
padding: 0;
}
dt {
font-size: inherit;
font-style: normal;
font-weight: 400;
}
dd {
margin-left: 0.5em;
text-align: right;
font-variant-numeric: tabular-nums;
}
h1 {
#apply: .tc, .orange5;
}
footer {
#apply: .mv4, .fss, .muted, .tc;
}
// "muted link"
.ml {
#apply: .normal, .muted;
}