122 lines
No EOL
2.1 KiB
CSS
122 lines
No EOL
2.1 KiB
CSS
:root {
|
|
/* Fonts */
|
|
--font-roboto: Roboto, sans-serif;
|
|
--font-roboto-slab: "Roboto Slab", serif;
|
|
|
|
--font-1: var(--font-roboto);
|
|
--font-2: var(--font-roboto-slab);
|
|
|
|
/* Colors */
|
|
--black: 0, 0%, 0%;
|
|
--white: 0, 0%, 100%;
|
|
--cod-gray: 0, 0%, 6%;
|
|
--gray: 0, 0%, 58%;
|
|
|
|
--color-1: var(--black), 0.8;
|
|
--color-2: var(--white);
|
|
--color-3: var(--gray); /* Placeholder and Icons */
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--color-1: var(--white), 0.8;
|
|
--color-2: var(--cod-gray);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/*
|
|
------
|
|
Resets
|
|
------
|
|
*/
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html { min-height: 100%; }
|
|
|
|
main { display: block; }
|
|
|
|
img,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
svg { width: 100%; }
|
|
|
|
a {
|
|
color: inherit;
|
|
background-color: transparent;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
display: block;
|
|
color: inherit;
|
|
background-color: transparent;
|
|
border: none;
|
|
font: inherit;
|
|
}
|
|
|
|
ol,
|
|
ul { list-style: none; }
|
|
|
|
::placeholder {
|
|
color: hsl(var(--color-3));
|
|
opacity: 1;
|
|
}
|
|
|
|
:focus { outline: 0.125rem solid hsla(0, 0%, 0%, 0.8); }
|
|
:focus:not(:focus-visible) { outline: none; }
|
|
|
|
:focus-visible {
|
|
outline: 0.125rem solid;
|
|
outline-color: hsla(var(--color-1));
|
|
outline-offset: var(--focus-offset, 0);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/*
|
|
------------------
|
|
Utility and Helper
|
|
------------------
|
|
*/
|
|
|
|
@supports (display: flex) {
|
|
._flex { display: flex; }
|
|
._flex-column { flex-direction: column; }
|
|
._flex-grow { flex-grow: 1; }
|
|
}
|
|
|
|
.__sr-only {
|
|
border: none;
|
|
width: 0.0625rem;
|
|
height: 0.0625rem;
|
|
padding: 0;
|
|
margin: -0.0625rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
top: auto;
|
|
left: -99rem;
|
|
clip: rect(0, 0, 0, 0);
|
|
clip-path: inset(50%);
|
|
} |