mirror of
https://git.aramjonghu.dev/AramJonghu/aramjonghu-site.git
synced 2026-09-11 01:03:30 +02:00
87 lines
2.0 KiB
CSS
87 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
@import "@catppuccin/tailwindcss/macchiato.css";
|
|
|
|
@theme {
|
|
--font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("./assets/fonts/Inter-Medium.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("./assets/fonts/Inter-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "NerdFontSymbols";
|
|
src: url("./assets/fonts/nerd-fonts-symbols.woff2") format("woff2");
|
|
font-display: block;
|
|
}
|
|
|
|
.ui-btn {
|
|
@apply text-ctp-text text-sm border border-ctp-text rounded px-3 py-1 min-w-8 lg:min-w-26 text-center cursor-pointer transition-colors;
|
|
}
|
|
|
|
.theme-ui-btn {
|
|
@apply text-ctp-text text-3xl border border-ctp-text rounded px-3 py-1 min-w-10 text-center cursor-pointer transition-colors;
|
|
}
|
|
|
|
.ui-btn:hover {
|
|
@apply bg-ctp-surface0 text-ctp-green border-ctp-green duration-300 ease-in-out;
|
|
}
|
|
|
|
.ui-btn-active {
|
|
@apply bg-ctp-surface0 text-ctp-green border-ctp-green;
|
|
}
|
|
|
|
.stream-frame {
|
|
width: 96vw;
|
|
margin: 0 auto;
|
|
@apply aspect-video rounded-2xl overflow-hidden border border-ctp-lavender-800 bg-ctp-mantle shadow-lg;
|
|
}
|
|
|
|
.stream-frame iframe {
|
|
@apply w-full h-full border-0;
|
|
}
|
|
|
|
.shiki,
|
|
.shiki .line span {
|
|
color: var(--shiki-light);
|
|
background-color: var(--shiki-light-bg);
|
|
}
|
|
|
|
.macchiato .shiki,
|
|
.macchiato .shiki .line span {
|
|
color: var(--shiki-dark);
|
|
background-color: var(--shiki-dark-bg);
|
|
}
|
|
|
|
.macchiato .icon-invert {
|
|
filter: invert(1);
|
|
}
|