2022-09-28 17:28:06 +03:00

134 lines
3.9 KiB
CSS
Executable File

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: "Poppins";
src: url("assets/fonts/Poppins-Bold.eot");
src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
url("assets/fonts/Poppins-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/Poppins-Medium.eot");
src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"),
url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
url("assets/fonts/Poppins-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/Poppins-Regular.eot");
src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
url("assets/fonts/Poppins-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/Poppins-Thin.eot");
src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
url("assets/fonts/Poppins-Thin.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
html {
font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto",
"Helvetica Neue", "Arial";
color: var(--color-text);
}
*,
::before,
::after,
.theme-dark *,
.theme-dark::before,
.theme-dark::after {
/* ------------------------------- Body color ------------------------------- */
--color-aside: #0a0e1a;
--color-footer: 10 10 10;
--color-text: rgb(38, 38, 38);
/* -------------------------------------------------------------------------- */
--color-serv: 25 29 43;
--color-serv-50: 227 230 237;
--color-serv-100: 200 205 223;
--color-serv-200: 142 152 189;
--color-serv-300: 90 104 155;
--color-serv-400: 58 67 100;
--color-serv-500: 25 29 43;
--color-serv-600: 21 24 35;
--color-serv-700: 15 17 26;
--color-serv-800: 9 11 16;
--color-serv-900: 6 7 10;
/* ---------------------------------- Blue ---------------------------------- */
--color-blue-50: 240 247 254;
--color-blue-100: 221 237 254;
--color-blue-200: 182 216 252;
--color-blue-300: 137 192 250;
--color-blue-400: 74 158 247;
--color-blue-500: 9 109 217;
--color-blue-600: 8 99 196;
--color-blue-700: 7 87 171;
--color-blue-800: 6 69 137;
--color-blue-900: 4 49 98;
/* ---------------------------------- Gray ---------------------------------- */
--color-gray-50: 250 250 250;
--color-gray-75: 240 240 240;
--color-gray-100: 235 235 235;
;
--color-gray-200: 214 214 214;
--color-gray-300: 191 191 191;
--color-gray-400: 166 166 166;
--color-gray-500: 140 140 140;
--color-gray-600: 115 115 115;
--color-gray-700: 89 89 89;
--color-gray-800: 64 64 64;
--color-gray-900: 38 38 38;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue), 10%, 10%);
--fg: hsl(var(--hue), 10%, 90%);
}
}
}
@layer components {
/* Separate
======================================================================== */
.separate {
@apply flex items-center text-center;
}
.separate::after,
.separate::before {
content: '';
@apply border-b border-gray-300 flex-1;
}
.separate:not(:empty)::after {
@apply ml-2;
}
.separate:not(:empty)::before {
@apply mr-2;
}
}