docker-ko.github.io/src/styles/style.css at 505d144757fd88e141bcdd00cdccda9a016d99e2 · YoonKeumJae/docker-ko.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
@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 {
  /* 한국어 텍스트에 최적화된 시스템 폰트 스택 */
  html {
    font-family:
      -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR',
      'Malgun Gothic', '맑은 고딕', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      sans-serif;
  }

  /* 외부 웹폰트 최적화 (Google Fonts 등) */
  @font-face {
    font-family: 'Google Fonts Fallback';
    src: local('system-ui'), local('-apple-system');
    font-display: swap;
  }
}

/* YouTube iframe 최적화 */
@layer components {
  .youtube-video {
    @apply relative mx-auto w-full;
    aspect-ratio: 16 / 9; /* 모던 브라우저용 */
    /* 레거시 브라우저 대체 */
    padding-bottom: 56.25%; /* 16:9 종횡비 */
  }

  /* 모던 브라우저에서 padding-bottom 제거 */
  @supports (aspect-ratio: 16 / 9) {
    .youtube-video {
      padding-bottom: 0;
    }
  }

  .youtube-video iframe {
    @apply absolute top-0 left-0 h-full w-full rounded-lg;
    border: none; /* frameborder 대체 */
  }
}

/* 카드 컴포넌트 스타일 */
@layer components {
  .card {
    @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 {
    @apply flex items-start gap-4 no-underline;
  }

  .card-icon {
    @apply mt-1 flex-shrink-0;
  }

  .card-img {
    @apply h-6 w-6;
  }

  .card-content {
    @apply flex-1;
  }

  .card-description {
    @apply text-sm leading-snug;
    color: var(--color-gray-500);
  }

  .card-title {
    @apply text-base font-semibold;
    color: var(--color-gray-700);
  }
}