Skip to content

Commit cebe8c9

Browse files
author
Sushilkumar Deshmukh
committed
Create consistent layout and styling for all pages
🎨 Layout & Styling Improvements: - Created custom page layout (_layouts/page.html) matching home page design - Added hero sections with gradient backgrounds for all pages - Implemented consistent typography and color scheme - Added breadcrumb navigation for better UX - Responsive design for mobile devices 📄 Page Updates: - Updated direct-framework.md with new layout and improved content - Updated langgraph-framework.md to use new layout - Added descriptions to all page headers for better SEO - Consistent styling across all documentation pages 🎯 Design Consistency: - Same color scheme (#42b883 green, #2c3e50 dark blue) - Matching code block styling with dark theme - Consistent button and link styling - Professional typography and spacing - Full-width layouts matching home page 🔧 Technical Improvements: - Custom CSS for consistent styling - Proper responsive breakpoints - Enhanced readability with better contrast - Improved navigation with breadcrumbs - SEO-friendly page descriptions
1 parent 3e10d72 commit cebe8c9

File tree

6 files changed

+301
-124
lines changed

6 files changed

+301
-124
lines changed

‎_layouts/page.html‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
---
2+
layout: default
3+
---
4+
5+
<style>
6+
/* Custom CSS for consistent styling across all pages */
7+
body { margin: 0; padding: 0; }
8+
.wrapper { max-width: none !important; }
9+
.page-content { max-width: none !important; }
10+
.site-header { max-width: none !important; }
11+
.site-footer { max-width: none !important; }
12+
13+
/* Hero section for pages */
14+
.page-hero {
15+
background: linear-gradient(135deg, #42b883 0%, #2c3e50 100%);
16+
color: white;
17+
padding: 3rem 0;
18+
text-align: center;
19+
width: 100%;
20+
margin: 0;
21+
}
22+
23+
.page-hero h1 {
24+
font-size: 3rem;
25+
font-weight: 700;
26+
margin-bottom: 1rem;
27+
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
28+
}
29+
30+
.page-hero p {
31+
font-size: 1.2rem;
32+
opacity: 0.9;
33+
max-width: 800px;
34+
margin: 0 auto;
35+
}
36+
37+
/* Content styling */
38+
.page-content-wrapper {
39+
max-width: 1200px;
40+
margin: 0 auto;
41+
padding: 3rem 1rem;
42+
line-height: 1.6;
43+
}
44+
45+
.page-content-wrapper h1 {
46+
color: #2c3e50;
47+
font-size: 2.5rem;
48+
margin-bottom: 2rem;
49+
border-bottom: 3px solid #42b883;
50+
padding-bottom: 0.5rem;
51+
}
52+
53+
.page-content-wrapper h2 {
54+
color: #2c3e50;
55+
font-size: 2rem;
56+
margin: 3rem 0 1.5rem 0;
57+
border-left: 4px solid #42b883;
58+
padding-left: 1rem;
59+
}
60+
61+
.page-content-wrapper h3 {
62+
color: #42b883;
63+
font-size: 1.5rem;
64+
margin: 2rem 0 1rem 0;
65+
}
66+
67+
.page-content-wrapper h4 {
68+
color: #2c3e50;
69+
font-size: 1.3rem;
70+
margin: 1.5rem 0 1rem 0;
71+
}
72+
73+
/* Code blocks */
74+
.page-content-wrapper pre {
75+
background: #1e1e1e;
76+
color: #d4d4d4;
77+
padding: 1.5rem;
78+
border-radius: 8px;
79+
overflow-x: auto;
80+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
81+
font-size: 14px;
82+
line-height: 1.5;
83+
margin: 2rem 0;
84+
border: 1px solid #333;
85+
}
86+
87+
.page-content-wrapper code {
88+
background: #f4f4f4;
89+
color: #d63384;
90+
padding: 0.2rem 0.4rem;
91+
border-radius: 4px;
92+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
93+
font-size: 0.9em;
94+
}
95+
96+
.page-content-wrapper pre code {
97+
background: transparent;
98+
color: #d4d4d4;
99+
padding: 0;
100+
}
101+
102+
/* Lists */
103+
.page-content-wrapper ul, .page-content-wrapper ol {
104+
margin: 1rem 0;
105+
padding-left: 2rem;
106+
}
107+
108+
.page-content-wrapper li {
109+
margin: 0.5rem 0;
110+
}
111+
112+
/* Tables */
113+
.page-content-wrapper table {
114+
width: 100%;
115+
border-collapse: collapse;
116+
margin: 2rem 0;
117+
background: white;
118+
border-radius: 8px;
119+
overflow: hidden;
120+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
121+
}
122+
123+
.page-content-wrapper th {
124+
background: #42b883;
125+
color: white;
126+
padding: 1rem;
127+
text-align: left;
128+
font-weight: 600;
129+
}
130+
131+
.page-content-wrapper td {
132+
padding: 1rem;
133+
border-bottom: 1px solid #eee;
134+
}
135+
136+
.page-content-wrapper tr:hover {
137+
background: #f8f9fa;
138+
}
139+
140+
/* Blockquotes */
141+
.page-content-wrapper blockquote {
142+
border-left: 4px solid #42b883;
143+
background: #f8f9fa;
144+
padding: 1rem 2rem;
145+
margin: 2rem 0;
146+
border-radius: 0 8px 8px 0;
147+
}
148+
149+
/* Buttons and links */
150+
.page-content-wrapper a {
151+
color: #42b883;
152+
text-decoration: none;
153+
font-weight: 500;
154+
}
155+
156+
.page-content-wrapper a:hover {
157+
color: #369870;
158+
text-decoration: underline;
159+
}
160+
161+
/* Navigation breadcrumb */
162+
.breadcrumb {
163+
background: #f8f9fa;
164+
padding: 1rem 0;
165+
border-bottom: 1px solid #eee;
166+
}
167+
168+
.breadcrumb-content {
169+
max-width: 1200px;
170+
margin: 0 auto;
171+
padding: 0 1rem;
172+
}
173+
174+
.breadcrumb a {
175+
color: #42b883;
176+
text-decoration: none;
177+
}
178+
179+
.breadcrumb a:hover {
180+
text-decoration: underline;
181+
}
182+
183+
/* Responsive design */
184+
@media (max-width: 768px) {
185+
.page-hero h1 {
186+
font-size: 2rem;
187+
}
188+
189+
.page-hero p {
190+
font-size: 1rem;
191+
}
192+
193+
.page-content-wrapper {
194+
padding: 2rem 1rem;
195+
}
196+
197+
.page-content-wrapper h1 {
198+
font-size: 2rem;
199+
}
200+
201+
.page-content-wrapper h2 {
202+
font-size: 1.5rem;
203+
}
204+
}
205+
</style>
206+
207+
<div class="breadcrumb">
208+
<div class="breadcrumb-content">
209+
<a href="/">Home</a> → {{ page.title }}
210+
</div>
211+
</div>
212+
213+
<div class="page-hero">
214+
<div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
215+
<h1>{{ page.title }}</h1>
216+
{% if page.description %}
217+
<p>{{ page.description }}</p>
218+
{% endif %}
219+
</div>
220+
</div>
221+
222+
<div class="page-content-wrapper">
223+
{{ content }}
224+
</div>

‎api-reference.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: page
33
title: API Reference
4-
permalink: /api-reference/
4+
description: Complete API specification for Agent Custom Resources and componentspermalink: /api-reference/
55
---
66

77
# KubeAgentic API Reference

0 commit comments

Comments
 (0)