71 lines
1.4 KiB
CSS
71 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-text: #0f0f0f;
|
|
--color-background: #fbfbfb;
|
|
--color-background-ui: #da5893;
|
|
--color-logo-primary: #faa2ca;
|
|
--color-logo-stroke: #382731;
|
|
--color-text-stroke: #f6f6f6;
|
|
--color-mid-gray: #808080;
|
|
}
|
|
|
|
:root {
|
|
/* Typography */
|
|
font-size: 15px;
|
|
line-height: 24px;
|
|
font-weight: 400;
|
|
|
|
/* Colors - Light Theme */
|
|
/* --color-text: #0f0f0f;
|
|
--color-background: #fbfbfb;
|
|
--color-logo-primary: #FAA2CA;
|
|
--color-logo-stroke: #382731;
|
|
--color-text-stroke: #f6f6f6; */
|
|
|
|
/* Typography settings */
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
/* Apply colors */
|
|
color: var(--color-text);
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.container {
|
|
margin: 0;
|
|
padding-top: 10vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Colors - Dark Theme */
|
|
--color-text: #fbfbfb;
|
|
--color-background: #2c2b29;
|
|
--color-logo-primary: #f28cbb;
|
|
--color-logo-stroke: #fad1ed;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-stroke {
|
|
-webkit-text-stroke: 2px var(--color-text-stroke);
|
|
}
|
|
}
|
|
|
|
.logo-primary {
|
|
fill: var(--color-logo-primary);
|
|
}
|
|
|
|
.logo-stroke {
|
|
fill: var(--color-logo-stroke);
|
|
stroke: var(--color-logo-stroke);
|
|
stroke-width: 1;
|
|
}
|