zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260204] OG 정보 추가, 모달 오픈시 히스토리백 기능 적용

Browse Source
This commit is contained in:
zenn
2026-02-04 16:16:09 +09:00
parent b29cd5e7d9
commit f15fcfbcf8
4 changed files with 138 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/assets/og-images.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

109
index.html
View File

@@ -2,10 +2,24 @@
<html class="light" lang="ko"> <html class="light" lang="ko">
<head> <head>
<meta name="title" content="sori.inventory" />
<meta name="description" content="일상의 조각들, 그리고 취향의 공유." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://inven.sori.studio/" />
<meta property="og:title" content="sori.inventory" />
<meta property="og:description" content="일상의 조각들, 그리고 취향의 공유." />
<meta property="og:image" content="https://inven.sori.studio/images/assets/og-image.jpg" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://inven.sori.studio/" />
<meta property="twitter:title" content="sori.inventory" />
<meta property="twitter:description" content="일상의 조각들, 그리고 취향의 공유." />
<meta property="twitter:image" content="https://inven.sori.studio/images/assets/og-image.jpg" />
<!-- -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
<title>zenn's inventory</title> <title>sori.inventory</title>
<!-- Tailwind CSS --> <!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Google Fonts: Inter --> <!-- Google Fonts: Inter -->
@@ -34,59 +48,52 @@
"xl": "0.75rem", "xl": "0.75rem",
"full": "9999px" "full": "9999px"
}, },
screens: {
'xs': '480px',
},
}, },
}, },
} }
</script> </script>
<style> <style>
/* .material-symbols-outlined { .no-scrollbar::-webkit-scrollbar {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; display: none;
} }
body { .no-scrollbar {
font-family: 'Inter', sans-serif; -ms-overflow-style: none;
} */ scrollbar-width: none;
/* 스크롤바 완전히 숨기기 */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#modal-main-carousel-container {
scroll-snap-type: none;
overflow-x: hidden;
} }
/* .filter-chip,
.status-chip {
@apply px-4 py-2 rounded-full text-sm font-medium transition
border border-slate-200 dark:border-slate-700
bg-slate-50 dark:bg-slate-800
text-slate-700 dark:text-slate-300;
} */
/* .filter-chip.active, #modal-main-carousel-container {
.status-chip.active { scroll-snap-type: none;
@apply bg-primary text-white border-primary; overflow-x: hidden;
} */ }
.modal-open {
overflow: hidden !important;
height: 100% !important;
overscroll-behavior: none !important;
}
#product-modal {
overscroll-behavior: contain;
}
</style> </style>
</head> </head>
<body class="bg-background-light dark:bg-background-dark transition-colors duration-200"> <body class="bg-background-light dark:bg-background-dark transition-colors duration-200">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden"> <div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col"> <div class="layout-container flex h-full grow flex-col">
<!-- Top Navigation Bar --> <!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3"> <header class="sticky top-0 z-50 gap-2 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-40 py-3">
<div class="flex items-center gap-8"> <div class="flex items-center gap-8">
<div class="flex items-center gap-3 text-slate-900 dark:text-white"> <div class="flex items-center gap-3 text-slate-900 dark:text-white">
<div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white"> <div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white">
<span class="material-symbols-outlined text-xl">inventory_2</span> <span class="material-symbols-outlined text-xl">inventory_2</span>
</div> </div>
<h2 class="text-lg font-bold leading-tight tracking-tight">sori.inventory</h2> <h2 class="hidden xs:block text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
</div> </div>
</div> </div>
<div class="flex flex-1 justify-end gap-4 items-center"> <div class="flex flex-1 justify-end gap-4 items-center">
<label class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64"> <label class="flex flex-col min-w-40 !h-10 max-w-64">
<div class="flex w-full flex-1 items-stretch rounded-lg h-full border border-slate-200 dark:border-slate-700"> <div class="flex w-full flex-1 items-stretch rounded-lg h-full border border-slate-200 dark:border-slate-700">
<div class="text-slate-400 flex items-center justify-center pl-3"> <div class="text-slate-400 flex items-center justify-center pl-3">
<span class="material-symbols-outlined text-[20px]">search</span> <span class="material-symbols-outlined text-[20px]">search</span>
@@ -102,17 +109,7 @@
</header> </header>
<main class="flex-1"> <main class="flex-1">
<!-- Headline Section --> <!-- Headline Section -->
<div class="px-6 md:px-40 py-12 flex flex-col items-center"> <section class="py-8 px-6 md:px-40">
<h2 class="text-slate-900 dark:text-white tracking-tight text-3xl md:text-5xl font-bold leading-tight text-center max-w-3xl">
일상의 조각들,
<br />
그리고 취향의 공유.
</h2>
<p class="mt-4 text-slate-500 dark:text-slate-400 text-center text-lg max-w-xl break-keep">현재 제 곁에서 일상을 채우고 있는 도구와 물건들입니다. 때로는 기록으로, 때로는 누군가를 위한 제안으로 이 공간을 채워갑니다.</p>
</div>
<!-- -->
<section class="mb-8 px-6 md:px-40">
<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4"> <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 flex flex-col gap-4">
<!-- 카테고리 --> <!-- 카테고리 -->
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
@@ -232,13 +229,27 @@
</div> </div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="px-6 md:px-40 py-12 border-t border-slate-200 dark:border-slate-800"> <footer class="px-6 md:px-40 py-12 border-t border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
<div class="flex flex-col md:flex-row justify-between items-center gap-6"> <div class="max-w-3xl mb-10">
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium"> <h3 class="text-slate-900 dark:text-white font-bold text-sm mb-2">About sori.inventory</h3>
<p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed break-keep">
일상의 조각들, 그리고 취향의 공유.
<br class="hidden sm:block" />
때로는 기록으로, 때로는 누군가를 위한 제안으로 이 공간을 채워갑니다.
</p>
</div>
<div class="flex flex-col md:flex-row justify-between items-center gap-6 pt-6 border-t border-slate-200 dark:border-slate-800">
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-[11px] font-medium uppercase tracking-wider">
<span>© 2026 sori.studio</span> <span>© 2026 sori.studio</span>
<span class="size-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
<span>All rights reserved.</span>
</div> </div>
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium"> <div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-[11px] font-medium">
<span>by zenn</span> <span>
Designed by
<strong class="text-slate-600 dark:text-slate-300">zenn</strong>
</span>
</div> </div>
</div> </div>
</footer> </footer>

25
scripts/modal.js
View File

@@ -136,8 +136,11 @@ export function openModal(id) {
}; };
} }
window.history.pushState({ modalOpen: true }, '', '');
modal.classList.remove('hidden'); modal.classList.remove('hidden');
document.body.style.overflow = 'hidden'; // document.body.style.overflow = 'hidden';
document.body.classList.add('modal-open');
const container = document.getElementById('modal-main-carousel-container'); const container = document.getElementById('modal-main-carousel-container');
container.style.scrollBehavior = 'auto'; container.style.scrollBehavior = 'auto';
@@ -148,7 +151,25 @@ export function openModal(id) {
export function closeModal() { export function closeModal() {
document.getElementById('product-modal').classList.add('hidden'); document.getElementById('product-modal').classList.add('hidden');
document.body.style.overflow = 'auto'; document.body.classList.remove('modal-open');
if (window.history.state && window.history.state.modalOpen) {
window.history.back();
}
const cleanUrl = window.location.origin + window.location.pathname; const cleanUrl = window.location.origin + window.location.pathname;
window.history.replaceState(null, '', cleanUrl); window.history.replaceState(null, '', cleanUrl);
} }
// --- 뒤로가기 감지 이벤트 리스너 ---
// 사용자가 브라우저 뒤로가기 버튼(또는 모바일 뒤로가기 제스처)을 누를 때 실행됩니다.
window.addEventListener('popstate', (event) => {
const modal = document.getElementById('product-modal');
// 모달이 열려있는 상태에서 뒤로가기가 발생했다면 모달만 닫음
if (!modal.classList.contains('hidden')) {
// 이때 closeModal()을 호출하되, 이미 뒤로 이동한 상태이므로
// closeModal 내부의 history.back()이 중복 실행되지 않게 주의
modal.classList.add('hidden');
document.body.classList.remove('modal-open');
}
});

191
style/tailwind.css
View File

@@ -352,14 +352,11 @@
.mb-3 { .mb-3 {
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
} }
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-6 { .mb-6 {
margin-bottom: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 6);
} }
.mb-8 { .mb-10 {
margin-bottom: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 10);
} }
.ml-0 { .ml-0 {
margin-left: calc(var(--spacing) * 0); margin-left: calc(var(--spacing) * 0);
@@ -382,6 +379,10 @@
.aspect-\[4\/5\] { .aspect-\[4\/5\] {
aspect-ratio: 4/5; aspect-ratio: 4/5;
} }
.size-1 {
width: calc(var(--spacing) * 1);
height: calc(var(--spacing) * 1);
}
.size-8 { .size-8 {
width: calc(var(--spacing) * 8); width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8);
@@ -433,9 +434,6 @@
.min-h-0 { .min-h-0 {
min-height: calc(var(--spacing) * 0); min-height: calc(var(--spacing) * 0);
} }
.min-h-\[260px\] {
min-height: 260px;
}
.min-h-screen { .min-h-screen {
min-height: 100vh; min-height: 100vh;
} }
@@ -469,9 +467,6 @@
.max-w-full { .max-w-full {
max-width: 100%; max-width: 100%;
} }
.max-w-xl {
max-width: var(--container-xl);
}
.min-w-0 { .min-w-0 {
min-width: calc(var(--spacing) * 0); min-width: calc(var(--spacing) * 0);
} }
@@ -628,12 +623,6 @@
.border-gray-200 { .border-gray-200 {
border-color: var(--color-gray-200); border-color: var(--color-gray-200);
} }
.border-gray-200\/80 {
border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
}
}
.border-slate-200 { .border-slate-200 {
border-color: var(--color-slate-200); border-color: var(--color-slate-200);
} }
@@ -676,18 +665,9 @@
.bg-emerald-100 { .bg-emerald-100 {
background-color: var(--color-emerald-100); background-color: var(--color-emerald-100);
} }
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-100 { .bg-gray-100 {
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
.bg-gray-100\/50 {
background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
}
}
.bg-gray-300 { .bg-gray-300 {
background-color: var(--color-gray-300); background-color: var(--color-gray-300);
} }
@@ -715,6 +695,12 @@
.bg-slate-50 { .bg-slate-50 {
background-color: var(--color-slate-50); background-color: var(--color-slate-50);
} }
.bg-slate-50\/50 {
background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
}
}
.bg-slate-100 { .bg-slate-100 {
background-color: var(--color-slate-100); background-color: var(--color-slate-100);
} }
@@ -724,6 +710,9 @@
background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent); background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent);
} }
} }
.bg-slate-300 {
background-color: var(--color-slate-300);
}
.bg-slate-400\/10 { .bg-slate-400\/10 {
background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent); background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) { @supports (color: color-mix(in lab, red, red)) {
@@ -781,15 +770,9 @@
.p-4 { .p-4 {
padding: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 4);
} }
.p-6 {
padding: calc(var(--spacing) * 6);
}
.px-2 { .px-2 {
padding-inline: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 2);
} }
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 { .px-3 {
padding-inline: calc(var(--spacing) * 3); padding-inline: calc(var(--spacing) * 3);
} }
@@ -808,15 +791,15 @@
.py-1\.5 { .py-1\.5 {
padding-block: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 1.5);
} }
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-3 { .py-3 {
padding-block: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 3);
} }
.py-4 { .py-4 {
padding-block: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 4);
} }
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.py-10 { .py-10 {
padding-block: calc(var(--spacing) * 10); padding-block: calc(var(--spacing) * 10);
} }
@@ -826,6 +809,9 @@
.pt-4 { .pt-4 {
padding-top: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4);
} }
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pr-1 { .pr-1 {
padding-right: calc(var(--spacing) * 1); padding-right: calc(var(--spacing) * 1);
} }
@@ -841,14 +827,6 @@
.text-right { .text-right {
text-align: right; text-align: right;
} }
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-base { .text-base {
font-size: var(--text-base); font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height)); line-height: var(--tw-leading, var(--text-base--line-height));
@@ -872,6 +850,9 @@
.text-\[10px\] { .text-\[10px\] {
font-size: 10px; font-size: 10px;
} }
.text-\[11px\] {
font-size: 11px;
}
.text-\[20px\] { .text-\[20px\] {
font-size: 20px; font-size: 20px;
} }
@@ -991,9 +972,6 @@
.text-slate-600 { .text-slate-600 {
color: var(--color-slate-600); color: var(--color-slate-600);
} }
.text-slate-700 {
color: var(--color-slate-700);
}
.text-slate-900 { .text-slate-900 {
color: var(--color-slate-900); color: var(--color-slate-900);
} }
@@ -1112,6 +1090,13 @@
color: var(--color-slate-400); color: var(--color-slate-400);
} }
} }
.hover\:bg-slate-100 {
&:hover {
@media (hover: hover) {
background-color: var(--color-slate-100);
}
}
}
.hover\:bg-white { .hover\:bg-white {
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@@ -1160,14 +1145,9 @@
margin-bottom: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 8);
} }
} }
.sm\:flex { .sm\:block {
@media (width >= 40rem) { @media (width >= 40rem) {
display: flex; display: block;
}
}
.sm\:hidden {
@media (width >= 40rem) {
display: none;
} }
} }
.sm\:h-5 { .sm\:h-5 {
@@ -1264,11 +1244,6 @@
font-size: 11px; font-size: 11px;
} }
} }
.md\:mb-4 {
@media (width >= 48rem) {
margin-bottom: calc(var(--spacing) * 4);
}
}
.md\:ml-24 { .md\:ml-24 {
@media (width >= 48rem) { @media (width >= 48rem) {
margin-left: calc(var(--spacing) * 24); margin-left: calc(var(--spacing) * 24);
@@ -1314,26 +1289,11 @@
flex-direction: row; flex-direction: row;
} }
} }
.md\:gap-2 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 2);
}
}
.md\:rounded-2xl { .md\:rounded-2xl {
@media (width >= 48rem) { @media (width >= 48rem) {
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
} }
} }
.md\:rounded-lg {
@media (width >= 48rem) {
border-radius: var(--radius-lg);
}
}
.md\:object-cover {
@media (width >= 48rem) {
object-fit: cover;
}
}
.md\:p-0 { .md\:p-0 {
@media (width >= 48rem) { @media (width >= 48rem) {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
@@ -1354,11 +1314,6 @@
padding: calc(var(--spacing) * 10); padding: calc(var(--spacing) * 10);
} }
} }
.md\:px-2\.5 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 2.5);
}
}
.md\:px-4 { .md\:px-4 {
@media (width >= 48rem) { @media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 4);
@@ -1369,21 +1324,11 @@
padding-inline: calc(var(--spacing) * 8); padding-inline: calc(var(--spacing) * 8);
} }
} }
.md\:px-10 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 10);
}
}
.md\:px-40 { .md\:px-40 {
@media (width >= 48rem) { @media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 40); padding-inline: calc(var(--spacing) * 40);
} }
} }
.md\:py-1 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 1);
}
}
.md\:py-2 { .md\:py-2 {
@media (width >= 48rem) { @media (width >= 48rem) {
padding-block: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2);
@@ -1401,18 +1346,6 @@
line-height: var(--tw-leading, var(--text-3xl--line-height)); line-height: var(--tw-leading, var(--text-3xl--line-height));
} }
} }
.md\:text-4xl {
@media (width >= 48rem) {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.md\:text-5xl {
@media (width >= 48rem) {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
}
.md\:text-sm { .md\:text-sm {
@media (width >= 48rem) { @media (width >= 48rem) {
font-size: var(--text-sm); font-size: var(--text-sm);
@@ -1425,21 +1358,6 @@
line-height: var(--tw-leading, var(--text-xs--line-height)); line-height: var(--tw-leading, var(--text-xs--line-height));
} }
} }
.lg\:ml-24 {
@media (width >= 64rem) {
margin-left: calc(var(--spacing) * 24);
}
}
.lg\:flex {
@media (width >= 64rem) {
display: flex;
}
}
.lg\:hidden {
@media (width >= 64rem) {
display: none;
}
}
.lg\:grid-cols-3 { .lg\:grid-cols-3 {
@media (width >= 64rem) { @media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1477,14 +1395,6 @@
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
} }
} }
.dark\:border-gray-600\/80 {
@media (prefers-color-scheme: dark) {
border-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gray-600) 80%, transparent);
}
}
}
.dark\:border-gray-800 { .dark\:border-gray-800 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-color: var(--color-gray-800); border-color: var(--color-gray-800);
@@ -1534,14 +1444,6 @@
background-color: var(--color-gray-800); background-color: var(--color-gray-800);
} }
} }
.dark\:bg-gray-800\/50 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
}
}
}
.dark\:bg-gray-800\/80 { .dark\:bg-gray-800\/80 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent); background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
@@ -1550,11 +1452,6 @@
} }
} }
} }
.dark\:bg-gray-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
}
.dark\:bg-green-900\/30 { .dark\:bg-green-900\/30 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent); background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
@@ -1626,6 +1523,14 @@
background-color: var(--color-slate-900); background-color: var(--color-slate-900);
} }
} }
.dark\:bg-slate-900\/50 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
}
}
}
.dark\:bg-teal-900\/30 { .dark\:bg-teal-900\/30 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 30%, transparent); background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 30%, transparent);
@@ -1709,6 +1614,11 @@
color: var(--color-slate-100); color: var(--color-slate-100);
} }
} }
.dark\:text-slate-300 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-300);
}
}
.dark\:text-slate-400 { .dark\:text-slate-400 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: var(--color-slate-400); color: var(--color-slate-400);
@@ -1743,6 +1653,15 @@
} }
} }
} }
.dark\:hover\:bg-slate-700 {
@media (prefers-color-scheme: dark) {
&:hover {
@media (hover: hover) {
background-color: var(--color-slate-700);
}
}
}
}
} }
@property --tw-translate-x { @property --tw-translate-x {
syntax: "*"; syntax: "*";