diff --git a/src/styles/content_style.css b/src/styles/content_style.css
index 1a474e7..1416607 100644
--- a/src/styles/content_style.css
+++ b/src/styles/content_style.css
@@ -5,7 +5,7 @@
font-weight: 500;
margin-bottom: 1rem;
margin-top: 2rem;
- color: #444;
+ color: var(--color-content-heading);
}
#content h1 {
@@ -30,14 +30,14 @@
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0.5rem;
- color: #222;
+ color: var(--color-content-text);
}
#content ul,
#content ol {
margin-left: 1.5rem;
padding-left: 1rem;
- color: #222;
+ color: var(--color-content-text);
}
#content ul {
@@ -64,7 +64,8 @@
#content pre {
padding: 0.5rem;
- border: 2px solid #e1e2e6;
+ border: 2px solid var(--color-content-code-border);
+ background: var(--color-content-code-bg);
border-radius: 8px;
overflow-x: auto;
line-height: 1.5;
@@ -73,36 +74,36 @@
#content pre code {
display: block;
- background: #fff;
- color: #000000;
+ background: var(--color-white);
+ color: var(--color-black);
white-space: pre-wrap;
}
#content code {
font-size: 13px;
- background-color: #e1e2e6;
- color: #000000;
+ background-color: var(--color-content-code-inline);
+ color: var(--color-black);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
#content blockquote {
- border-left: 4px solid #007bff;
+ border-left: 4px solid var(--color-content-blockquote);
padding: 0.75rem 1rem;
margin: 1rem 0;
- background-color: #f8f9fa;
+ background-color: var(--color-content-code-bg);
font-style: italic;
- color: #555;
+ color: var(--color-content-muted);
}
#content a {
- color: #007bff;
+ color: var(--color-content-link);
text-decoration: none;
transition: color 0.2s ease-in-out;
&:hover {
- color: #007bff;
+ color: var(--color-content-link);
}
&.external-link::after {
diff --git a/src/styles/style.css b/src/styles/style.css
index a1527d8..2850b70 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,5 +1,58 @@
@import 'tailwindcss';
+/* Tailwind CSS v4에서 사용하는 방식으로 모든 프로젝트 색상 정의 */
+@theme {
+ /* Docker 브랜드 색상 */
+ --color-docker-primary: #086dd7;
+ --color-docker-hover: #2560ff;
+ --color-docker-link: #007bff;
+
+ /* 기본 색상 (Tailwind 표준) */
+ --color-white: #ffffff;
+ --color-black: #000000;
+ --color-transparent: transparent;
+
+ /* 회색 계열 */
+ --color-gray-50: #f9fafb;
+ --color-gray-100: #f3f4f6;
+ --color-gray-200: #e5e7eb;
+ --color-gray-300: #d1d5db;
+ --color-gray-400: #9ca3af;
+ --color-gray-500: #6b7280;
+ --color-gray-600: #4b5563;
+ --color-gray-700: #374151;
+ --color-gray-800: #1f2937;
+ --color-gray-900: #111827;
+
+ /* 빨간색 계열 */
+ --color-red-500: #ef4444;
+
+ /* 파란색 계열 */
+ --color-blue-300: #93c5fd;
+ --color-blue-500: #3b82f6;
+ --color-blue-light: #b0c4de; /* 푸터 링크용 연한 파란색 */
+
+ /* 콘텐츠 전용 색상 (content_style.css에서 사용) */
+ --color-content-heading: #444444; /* 제목 색상 */
+ --color-content-text: #222222; /* 본문 텍스트 */
+ --color-content-muted: #555555; /* 인용구 텍스트 */
+ --color-content-code-bg: #f8f9fa; /* 코드 블록 배경 */
+ --color-content-code-border: #e1e2e6; /* 코드 블록 테두리 */
+ --color-content-code-inline: #e1e2e6; /* 인라인 코드 배경 */
+ --color-content-blockquote: #007bff; /* 인용구 왼쪽 테두리 */
+ --color-content-link: #007bff; /* 링크 색상 */
+
+ /* 사이드바/네비게이션 색상 */
+ --color-sidebar-bg: #f9f9fa;
+ --color-nav-hover: #007bff;
+
+ /* 상태별 색상 */
+ --color-surface-card: #ffffff;
+ --color-surface-code: #f8f9fa;
+ --color-border-light: #e1e2e6;
+ --color-border-card: #e5e7eb;
+}
+
/* 기본 폰트 설정 */
@layer base {
/* 한국어 텍스트에 최적화된 시스템 폰트 스택 */
@@ -43,7 +96,13 @@
/* 카드 컴포넌트 스타일 */
@layer components {
.card {
- @apply mb-4 flex h-full min-w-0 flex-col rounded-md border border-gray-200 bg-white px-4 py-3 transition duration-200 hover:border-gray-300 hover:shadow;
+ @apply mb-4 flex h-full min-w-0 flex-col rounded-md border px-4 py-3 transition duration-200 hover:shadow;
+ border-color: var(--color-border-card);
+ background-color: var(--color-surface-card);
+ }
+
+ .card:hover {
+ border-color: var(--color-gray-300);
}
.card-link {
@@ -63,10 +122,12 @@
}
.card-description {
- @apply text-sm leading-snug text-gray-500;
+ @apply text-sm leading-snug;
+ color: var(--color-gray-500);
}
.card-title {
- @apply text-base font-semibold text-gray-700;
+ @apply text-base font-semibold;
+ color: var(--color-gray-700);
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 03dca81..2832ded 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,9 @@
-module.exports = {
- darkMode: 'media', // 또는 'class'
+/** @type {import('tailwindcss').Config} */
+export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./public/**/*.md',
'./src/scripts/components/*.{js,ts,jsx,tsx}'
- ],
+ ]
};