Skip to content

Commit 1593f5c

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #707 from TineoC/render-kep-readme
Render KEP README content on k8s.dev
2 parents 38fd3ac + c4dbee0 commit 1593f5c

4 files changed

Lines changed: 548 additions & 184 deletions

File tree

‎assets/scss/_styles_project.scss‎

Lines changed: 342 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -28,34 +28,234 @@ body.td-home div.lead p {
2828

2929
/* KEP page styles */
3030
.kep-page {
31-
.kep-stage-badge {
32-
margin-bottom: 1rem;
31+
padding: 1rem 0;
3332

34-
.badge {
35-
font-size: 0.9rem;
36-
padding: 0.5em 1em;
37-
border-radius: 4px;
33+
.kep-banner-container {
34+
background-color: #fff;
35+
border: 1px solid #e0e4e8;
36+
border-radius: 4px;
37+
overflow: hidden;
38+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
39+
}
40+
41+
.kep-banner-grid {
42+
display: grid;
43+
grid-template-columns: 1fr 1fr;
44+
45+
@media (max-width: 991px) {
46+
grid-template-columns: 1fr;
3847
}
3948
}
4049

41-
.kep-stage-alpha .badge {
42-
background-color: #ffc107;
43-
color: #000;
50+
.kep-banner-col {
51+
padding: 2rem;
52+
position: relative;
53+
54+
&.border-start-refined {
55+
border-left: 1px solid #e0e4e8;
56+
57+
@media (max-width: 991px) {
58+
border-left: none;
59+
border-top: 1px solid #e0e4e8;
60+
}
61+
}
4462
}
4563

46-
.kep-stage-beta .badge {
47-
background-color: #17a2b8;
48-
color: #fff;
64+
.kep-banner-label {
65+
font-family: var(--bs-font-monospace);
66+
font-size: 0.7rem;
67+
text-transform: uppercase;
68+
letter-spacing: 0.15em;
69+
color: #8a94a6;
70+
margin-bottom: 2rem;
71+
display: block;
72+
font-weight: 600;
4973
}
5074

51-
.kep-stage-stable .badge {
52-
background-color: #28a745;
53-
color: #fff;
75+
.kep-banner-sublabel {
76+
font-family: var(--bs-font-monospace);
77+
font-size: 0.65rem;
78+
text-transform: uppercase;
79+
letter-spacing: 0.1em;
80+
color: #a0aec0;
81+
margin-bottom: 0.75rem;
82+
font-weight: 600;
5483
}
5584

56-
.kep-stage-deprecated .badge {
57-
background-color: #6c757d;
58-
color: #fff;
85+
/* Refined Badges */
86+
.kep-badge-refined {
87+
display: inline-flex;
88+
align-items: center;
89+
padding: 0.4rem 0.8rem;
90+
font-size: 0.75rem;
91+
font-weight: 700;
92+
border-radius: 4px;
93+
letter-spacing: 0.05em;
94+
95+
&.kep-stage-alpha {
96+
background-color: #fff8e1;
97+
color: #b45309;
98+
border: 1px solid #fef3c7;
99+
}
100+
101+
&.kep-stage-beta {
102+
background-color: #e0f2fe;
103+
color: #0369a1;
104+
border: 1px solid #bae6fd;
105+
}
106+
107+
&.kep-stage-stable {
108+
background-color: #ecfdf5;
109+
color: #15803d;
110+
border: 1px solid #d1fae5;
111+
}
112+
113+
&.kep-stage-deprecated {
114+
background-color: #f3f4f6;
115+
color: #4b5563;
116+
border: 1px solid #e5e7eb;
117+
}
118+
119+
&.kep-status-generic {
120+
background-color: #f8fafc;
121+
color: #475569;
122+
border: 1px solid #e2e8f0;
123+
}
124+
}
125+
126+
/* Data Grid for Timeline/Milestones */
127+
.kep-data-grid {
128+
display: flex;
129+
flex-direction: column;
130+
gap: 0.5rem;
131+
}
132+
133+
.kep-data-row {
134+
display: flex;
135+
justify-content: space-between;
136+
align-items: center;
137+
font-size: 0.9rem;
138+
padding: 0.25rem 0;
139+
140+
.kep-data-label {
141+
color: #64748b;
142+
display: flex;
143+
align-items: center;
144+
145+
.dot {
146+
width: 8px;
147+
height: 8px;
148+
border-radius: 50%;
149+
margin-right: 8px;
150+
display: inline-block;
151+
152+
&.alpha { background-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
153+
&.beta { background-color: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
154+
&.stable { background-color: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }
155+
&.deprecated { background-color: #94a3b8; }
156+
}
157+
}
158+
159+
.kep-data-value {
160+
font-weight: 500;
161+
color: #1e293b;
162+
163+
code {
164+
background: #f1f5f9;
165+
padding: 0.1rem 0.4rem;
166+
border-radius: 3px;
167+
color: #475569;
168+
}
169+
}
170+
}
171+
172+
/* Ownership Links */
173+
.kep-main-link {
174+
font-size: 1.25rem;
175+
font-weight: 700;
176+
color: #0f172a;
177+
text-decoration: none;
178+
transition: color 0.2s ease;
179+
180+
&:hover {
181+
color: var(--bs-primary);
182+
}
183+
}
184+
185+
.kep-tag-link {
186+
display: inline-block;
187+
padding: 0.25rem 0.5rem;
188+
background-color: #64748b;
189+
border-radius: 4px;
190+
font-size: 0.75rem;
191+
font-weight: 500;
192+
color: #ffffff;
193+
text-decoration: none;
194+
transition: all 0.2s ease;
195+
196+
&:hover {
197+
background-color: #475569;
198+
color: #ffffff;
199+
transform: translateY(-1px);
200+
}
201+
}
202+
203+
.kep-people-grid {
204+
display: grid;
205+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
206+
gap: 0.75rem;
207+
}
208+
209+
.kep-person-link {
210+
font-size: 0.85rem;
211+
color: #475569;
212+
text-decoration: none;
213+
display: flex;
214+
align-items: center;
215+
gap: 6px;
216+
transition: all 0.2s ease;
217+
218+
i { color: #94a3b8; }
219+
220+
&:hover {
221+
color: var(--bs-primary);
222+
transform: translateX(4px);
223+
i { color: var(--bs-primary); }
224+
}
225+
}
226+
227+
.kep-link-list {
228+
list-style: none;
229+
padding: 0;
230+
margin: 0;
231+
232+
li {
233+
margin-bottom: 0.5rem;
234+
235+
a {
236+
font-size: 0.85rem;
237+
color: #334155;
238+
text-decoration: none;
239+
display: flex;
240+
align-items: center;
241+
gap: 8px;
242+
transition: all 0.2s ease;
243+
244+
i {
245+
font-size: 0.7rem;
246+
color: #94a3b8;
247+
line-height: 1;
248+
}
249+
250+
&:hover {
251+
color: var(--bs-primary);
252+
transform: translateX(4px);
253+
i { color: var(--bs-primary); }
254+
}
255+
256+
strong { font-weight: 500; }
257+
}
258+
}
59259
}
60260

61261
h2 {
@@ -65,13 +265,131 @@ body.td-home div.lead p {
65265
margin-top: 1.5rem;
66266
}
67267

68-
.kep-sigs-owner {
69-
font-weight: bold;
70-
margin-bottom: 0.25rem;
268+
.kep-content {
269+
background-color: transparent;
270+
padding: 0;
271+
margin-bottom: 3rem;
272+
line-height: 1.7;
273+
274+
// Hide duplicate KEP title from README if present
275+
h1:first-of-type {
276+
display: none;
277+
}
278+
279+
h2,
280+
h3,
281+
h4,
282+
h5,
283+
h6 {
284+
margin-top: 2.5rem;
285+
margin-bottom: 1.25rem;
286+
font-weight: 700;
287+
}
288+
289+
h2 {
290+
font-size: 1.5rem;
291+
color: #1a1a1a;
292+
}
293+
294+
p {
295+
margin-bottom: 1.5rem;
296+
color: #3a3a3a;
297+
}
298+
299+
// Ensure images don't overflow
300+
img {
301+
max-width: 100%;
302+
height: auto;
303+
border-radius: 8px;
304+
margin: 2rem 0;
305+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
306+
}
307+
308+
// Handle tables in markdown
309+
table {
310+
width: 100%;
311+
margin: 2rem 0;
312+
border-collapse: separate;
313+
border-spacing: 0;
314+
border: 1px solid #dee2e6;
315+
border-radius: 8px;
316+
overflow: hidden;
317+
318+
th,
319+
td {
320+
padding: 1rem;
321+
border: 1px solid #dee2e6;
322+
}
323+
324+
th {
325+
background-color: #f8f9fa;
326+
font-weight: 600;
327+
text-transform: uppercase;
328+
font-size: 0.8rem;
329+
letter-spacing: 0.05em;
330+
}
331+
}
332+
333+
// Blockquotes
334+
blockquote {
335+
padding: 1.5rem 2rem;
336+
margin: 2rem 0;
337+
background: #fdfdfe;
338+
border-left: 4px solid #dee2e6;
339+
font-style: italic;
340+
color: #4a4a4a;
341+
342+
p:last-child {
343+
margin-bottom: 0;
344+
}
345+
}
346+
347+
// Code blocks
348+
pre {
349+
background-color: #1e1e1e;
350+
color: #d4d4d4;
351+
padding: 1.5rem;
352+
border-radius: 8px;
353+
font-size: 0.9rem;
354+
margin: 2rem 0;
355+
}
71356
}
72357

73-
.table {
74-
max-width: 600px;
358+
// Status-specific content borders
359+
360+
.kep-metadata-container {
361+
background: #f8f9fa;
362+
padding: 2rem;
363+
border-radius: 8px;
364+
margin-top: 4rem;
365+
display: grid;
366+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
367+
gap: 2rem;
368+
369+
h2 {
370+
margin-top: 0;
371+
font-size: 1.25rem;
372+
border-bottom: 2px solid #dee2e6;
373+
padding-bottom: 0.5rem;
374+
margin-bottom: 1.5rem;
375+
display: block;
376+
color: #6c757d;
377+
text-transform: uppercase;
378+
letter-spacing: 0.1em;
379+
}
380+
381+
div {
382+
margin-top: 0 !important;
383+
}
384+
385+
ul {
386+
padding-left: 1.25rem;
387+
}
388+
389+
p {
390+
margin-bottom: 0.75rem;
391+
font-size: 0.95rem;
392+
}
75393
}
76394
}
77395

@@ -80,7 +398,7 @@ body.td-home div.lead p {
80398
background-color: rgba(var(--bs-primary-rgb), 0.1);
81399
color: var(--bs-primary);
82400
transition: all 0.2s ease;
83-
401+
84402
&.active {
85403
background-color: var(--bs-primary);
86404
color: #fff;

0 commit comments

Comments
 (0)