|
1 | 1 | <template> |
2 | | - <section v-show="isActive" id="national-historical" class="mb-16"> |
3 | | - <div class="mb-8"> |
| 2 | + <section v-show="isActive" id="national-historical" class="mb-10 md:mb-16"> |
| 3 | + <div class="mb-5 md:mb-8"> |
4 | 4 | <div class="flex items-center mb-4"> |
5 | 5 | <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"> |
6 | 6 | <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
7 | 7 | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> |
8 | 8 | </svg> |
9 | 9 | </div> |
10 | | - <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">{{ t('documentation.nationalHistorical.title') }}</h1> |
| 10 | + <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">{{ t('documentation.nationalHistorical.title') }}</h1> |
11 | 11 | </div> |
12 | | - <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">{{ t('documentation.nationalHistorical.description') }}</p> |
| 12 | + <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400 mb-4">{{ t('documentation.nationalHistorical.description') }}</p> |
13 | 13 |
|
14 | 14 | <!-- Usage Note --> |
15 | 15 | <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-400 dark:border-green-800 mb-6"> |
|
26 | 26 | </div> |
27 | 27 |
|
28 | 28 | <!-- Endpoint Details --> |
29 | | - <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> |
30 | | - <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-8 py-6"> |
| 29 | + <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> |
| 30 | + <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6"> |
31 | 31 | <div class="flex items-center gap-4"> |
32 | 32 | <span class="bg-white text-purple-700 px-3 py-1 rounded-lg font-mono text-sm font-bold">GET</span> |
33 | 33 | <code class="bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-lg font-mono text-sm">/national</code> |
34 | 34 | </div> |
35 | 35 | <p class="text-white/90 mt-2">{{ t('documentation.nationalHistorical.description') }}</p> |
36 | 36 | </div> |
37 | 37 |
|
38 | | - <div class="p-8"> |
| 38 | + <div class="p-4 sm:p-6 lg:p-8"> |
39 | 39 | <!-- Query Parameters --> |
40 | | - <div class="mb-8"> |
| 40 | + <div class="mb-5 md:mb-8"> |
41 | 41 | <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3> |
42 | 42 | <div class="overflow-x-auto"> |
43 | 43 | <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg"> |
|
98 | 98 | </div> |
99 | 99 |
|
100 | 100 | <!-- Response Fields Table --> |
101 | | - <div class="mb-8"> |
| 101 | + <div class="mb-5 md:mb-8"> |
102 | 102 | <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3> |
103 | 103 |
|
104 | 104 | <!-- Array Structure Note --> |
|
210 | 210 | </div> |
211 | 211 |
|
212 | 212 | <!-- Code Examples --> |
213 | | - <div class="mb-8"> |
| 213 | + <div class="mb-5 md:mb-8"> |
214 | 214 | <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Example Requests</h3> |
215 | 215 | <div class="grid lg:grid-cols-2 gap-6 mb-6"> |
216 | 216 | <div> |
|
0 commit comments