Skip to content

Commit a3afe1e

Browse files
byerlikayabyerlikaya
committed
Fix subpages layout and content
1 parent 7e54f8a commit a3afe1e

File tree

5 files changed

+687
-266
lines changed

5 files changed

+687
-266
lines changed

‎docs/assets/css/style.css‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,202 @@ h1, h2, h3, h4, h5, h6 {
186186
min-height: calc(100vh - 80px);
187187
}
188188

189+
/* Page Header */
190+
.page-header {
191+
background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
192+
padding: var(--spacing-2xl) 0;
193+
border-bottom: 1px solid var(--gray-200);
194+
}
195+
196+
[data-theme="dark"] .page-header {
197+
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-surface) 100%);
198+
border-bottom-color: var(--dark-border);
199+
}
200+
201+
.page-title {
202+
font-size: 2.5rem;
203+
font-weight: 700;
204+
color: var(--gray-900);
205+
margin-bottom: var(--spacing-sm);
206+
}
207+
208+
[data-theme="dark"] .page-title {
209+
color: var(--gray-100);
210+
}
211+
212+
.page-description {
213+
font-size: 1.125rem;
214+
color: var(--gray-600);
215+
max-width: 600px;
216+
margin: 0 auto;
217+
}
218+
219+
[data-theme="dark"] .page-description {
220+
color: var(--gray-400);
221+
}
222+
223+
/* Page Content */
224+
.page-content {
225+
padding: var(--spacing-2xl) 0;
226+
}
227+
228+
.content-section {
229+
margin-bottom: var(--spacing-2xl);
230+
}
231+
232+
.content-section h2 {
233+
font-size: 1.75rem;
234+
font-weight: 600;
235+
color: var(--gray-900);
236+
margin-bottom: var(--spacing-lg);
237+
border-bottom: 2px solid var(--primary);
238+
padding-bottom: var(--spacing-sm);
239+
}
240+
241+
[data-theme="dark"] .content-section h2 {
242+
color: var(--gray-100);
243+
}
244+
245+
.content-section h3 {
246+
font-size: 1.25rem;
247+
font-weight: 600;
248+
color: var(--gray-800);
249+
margin-bottom: var(--spacing-md);
250+
margin-top: var(--spacing-lg);
251+
}
252+
253+
[data-theme="dark"] .content-section h3 {
254+
color: var(--gray-200);
255+
}
256+
257+
.content-section p {
258+
color: var(--gray-600);
259+
margin-bottom: var(--spacing-md);
260+
line-height: 1.7;
261+
}
262+
263+
[data-theme="dark"] .content-section p {
264+
color: var(--gray-400);
265+
}
266+
267+
/* Code Examples */
268+
.code-example {
269+
background: var(--white);
270+
border: 1px solid var(--gray-200);
271+
border-radius: var(--radius-lg);
272+
overflow: hidden;
273+
box-shadow: var(--shadow-md);
274+
margin: var(--spacing-lg) 0;
275+
}
276+
277+
[data-theme="dark"] .code-example {
278+
background: var(--dark-surface);
279+
border-color: var(--dark-border);
280+
}
281+
282+
.code-example pre {
283+
margin: 0;
284+
padding: var(--spacing-lg);
285+
background: none;
286+
color: var(--gray-700);
287+
font-family: var(--font-mono);
288+
font-size: 0.875rem;
289+
line-height: 1.6;
290+
overflow-x: auto;
291+
}
292+
293+
[data-theme="dark"] .code-example pre {
294+
color: var(--gray-300);
295+
}
296+
297+
/* Provider Tabs */
298+
.provider-tabs, .storage-tabs {
299+
display: flex;
300+
gap: var(--spacing-xs);
301+
margin-bottom: var(--spacing-lg);
302+
flex-wrap: wrap;
303+
}
304+
305+
.provider-tab, .storage-tab {
306+
background: var(--gray-100);
307+
border: 1px solid var(--gray-200);
308+
border-radius: var(--radius-md);
309+
padding: var(--spacing-sm) var(--spacing-lg);
310+
font-size: 0.875rem;
311+
font-weight: 500;
312+
color: var(--gray-600);
313+
cursor: pointer;
314+
transition: var(--transition);
315+
}
316+
317+
[data-theme="dark"] .provider-tab,
318+
[data-theme="dark"] .storage-tab {
319+
background: var(--dark-surface);
320+
border-color: var(--dark-border);
321+
color: var(--gray-400);
322+
}
323+
324+
.provider-tab.active, .storage-tab.active {
325+
background: var(--primary);
326+
color: white;
327+
border-color: var(--primary);
328+
}
329+
330+
.provider-content, .storage-content {
331+
position: relative;
332+
}
333+
334+
.provider-panel, .storage-panel {
335+
display: none;
336+
}
337+
338+
.provider-panel.active, .storage-panel.active {
339+
display: block;
340+
}
341+
342+
/* Tables */
343+
.table-responsive {
344+
margin: var(--spacing-lg) 0;
345+
}
346+
347+
.table {
348+
background: var(--white);
349+
border-radius: var(--radius-lg);
350+
overflow: hidden;
351+
box-shadow: var(--shadow-md);
352+
}
353+
354+
[data-theme="dark"] .table {
355+
background: var(--dark-surface);
356+
}
357+
358+
.table thead th {
359+
background: var(--primary);
360+
color: white;
361+
font-weight: 600;
362+
border: none;
363+
padding: var(--spacing-md);
364+
}
365+
366+
.table tbody td {
367+
border-color: var(--gray-200);
368+
padding: var(--spacing-md);
369+
color: var(--gray-700);
370+
}
371+
372+
[data-theme="dark"] .table tbody td {
373+
border-color: var(--dark-border);
374+
color: var(--gray-300);
375+
}
376+
377+
.table tbody tr:hover {
378+
background: var(--gray-50);
379+
}
380+
381+
[data-theme="dark"] .table tbody tr:hover {
382+
background: var(--dark-bg);
383+
}
384+
189385
/* Hero Section */
190386
.hero-section {
191387
position: relative;

‎docs/assets/js/script.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,48 @@ document.addEventListener('DOMContentLoaded', function() {
123123
});
124124
});
125125

126+
// Provider Tabs Functionality
127+
const providerTabs = document.querySelectorAll('.provider-tab');
128+
const providerPanels = document.querySelectorAll('.provider-panel');
129+
130+
providerTabs.forEach(tab => {
131+
tab.addEventListener('click', function() {
132+
const targetTab = this.getAttribute('data-tab');
133+
134+
// Remove active class from all tabs and panels
135+
providerTabs.forEach(t => t.classList.remove('active'));
136+
providerPanels.forEach(p => p.classList.remove('active'));
137+
138+
// Add active class to clicked tab and corresponding panel
139+
this.classList.add('active');
140+
const targetPanel = document.getElementById(targetTab);
141+
if (targetPanel) {
142+
targetPanel.classList.add('active');
143+
}
144+
});
145+
});
146+
147+
// Storage Tabs Functionality
148+
const storageTabs = document.querySelectorAll('.storage-tab');
149+
const storagePanels = document.querySelectorAll('.storage-panel');
150+
151+
storageTabs.forEach(tab => {
152+
tab.addEventListener('click', function() {
153+
const targetTab = this.getAttribute('data-tab');
154+
155+
// Remove active class from all tabs and panels
156+
storageTabs.forEach(t => t.classList.remove('active'));
157+
storagePanels.forEach(p => p.classList.remove('active'));
158+
159+
// Add active class to clicked tab and corresponding panel
160+
this.classList.add('active');
161+
const targetPanel = document.getElementById(targetTab);
162+
if (targetPanel) {
163+
targetPanel.classList.add('active');
164+
}
165+
});
166+
});
167+
126168
// Intersection Observer for animations
127169
const observerOptions = {
128170
threshold: 0.1,

0 commit comments

Comments
 (0)