Skip to content

Commit 0400428

Browse files
madhuramendismadhuramendis
authored
Merge pull request #49 from sameerajayasoma/main
Update OpenChoreo Documentation styles
2 parents a248772 + e882e2d commit 0400428

File tree

2 files changed

+232
-63
lines changed

2 files changed

+232
-63
lines changed

‎_config.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
title: Jekyll Bootstrap 5 Starter
2-
baseurl: ""
3-
url: ""
1+
title: OpenChoreo
2+
description: "Open-source Internal Developer Platform (IDP) that provides a comprehensive framework for platform engineering teams"
3+
author: OpenChoreo
44
permalink: pretty
55

66
# Table of Contents configuration

‎css/openchoreo-docs.css‎

Lines changed: 229 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,195 @@
1-
.sidebar {
2-
position: sticky;
3-
top: 67px;
4-
height: 100vh;
5-
overflow-y: auto;
6-
}
7-
.toc {
8-
position: sticky;
9-
height: 100vh;
10-
top: 60px;
11-
padding: 30px;
12-
overflow: scroll;
13-
14-
}
15-
.toc a {
16-
font-size: 0.875rem;
17-
display: block;
18-
margin-bottom: 0.5rem;
19-
color: #3a3a3a;
20-
21-
}
22-
#toc-list li {
23-
margin-left: 0 !important;
24-
}
25-
26-
.highlight {
27-
border-radius: 10px;
28-
margin-bottom: 30px;
29-
}
30-
31-
tbody, td, tfoot, th, thead, tr {
32-
border-color: inherit;
33-
border-style: solid;
34-
border-width: 0;
35-
border: 1px solid #c2c2c2 !important;
36-
padding: 10px;
1+
/* Improved OpenChoreo Documentation Styles */
2+
3+
/* Base Layout */
4+
.sidebar {
5+
position: sticky;
6+
top: 56px;
7+
height: calc(100vh - 56px);
8+
overflow-y: auto;
9+
background-color: #f8f9fa;
10+
border-right: 1px solid #dee2e6;
3711
}
3812

13+
/* Main Content Area */
14+
main.py-4 {
15+
padding: 2rem !important;
16+
max-width: 900px;
17+
margin: 0 auto;
18+
}
19+
20+
/* Typography Improvements */
21+
main h1 {
22+
font-size: 2.2rem;
23+
font-weight: 600;
24+
margin-bottom: 1.5rem;
25+
color: #212529;
26+
border-bottom: 2px solid #e9ecef;
27+
padding-bottom: 0.5rem;
28+
}
29+
30+
main h2 {
31+
font-size: 2rem;
32+
font-weight: 600;
33+
margin-top: 2rem;
34+
margin-bottom: 1rem;
35+
color: #212529;
36+
}
37+
38+
main h3 {
39+
font-size: 1.5rem;
40+
font-weight: 600;
41+
margin-top: 1.5rem;
42+
margin-bottom: 0.75rem;
43+
color: #212529;
44+
}
45+
46+
main h4 {
47+
font-size: 1.25rem;
48+
font-weight: 600;
49+
margin-top: 1rem;
50+
margin-bottom: 0.5rem;
51+
color: #212529;
52+
}
53+
54+
main p {
55+
font-size: 1rem;
56+
line-height: 1.7;
57+
color: #495057;
58+
margin-bottom: 1rem;
59+
}
60+
61+
main a {
62+
color: #0066cc;
63+
text-decoration: none;
64+
}
65+
66+
main a:hover {
67+
color: #0052a3;
68+
text-decoration: underline;
69+
}
70+
71+
/* ========= Inline Code (`code`) ========= */
72+
code.highlighter-rouge.language-plaintext {
73+
background-color: #f6f8fa;
74+
color: #495057;
75+
font-size: 0.9em;
76+
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
77+
white-space: nowrap;
78+
border: 1px solid #e1e4e8;
79+
}
80+
81+
/* ========= Fenced Code Block (```code```) ========= */
82+
.highlighter-rouge .highlight {
83+
background-color: #2c3035;
84+
color: #dcdcdc;
85+
border-radius: 6px;
86+
overflow: auto;
87+
margin-top: 1em;
88+
margin-bottom: 1em;
89+
font-size: 0.9em;
90+
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
91+
line-height: 1.5;
92+
}
93+
94+
.highlighter-rouge .highlight pre {
95+
padding: 1em;
96+
margin: 0;
97+
}
98+
99+
.highlighter-rouge .highlight code {
100+
background-color: transparent;
101+
padding: 0;
102+
color: inherit;
103+
}
104+
105+
/* Tables */
39106
table {
40-
margin-bottom: 60px ;
107+
width: 100%;
108+
margin-bottom: 1rem;
109+
border-collapse: collapse;
41110
}
42111

43-
main.py-4 {
44-
padding: 60px !important;
112+
table th,
113+
table td {
114+
padding: 0.75rem;
115+
border: 1px solid #dee2e6;
116+
}
117+
118+
table thead th {
119+
background-color: #f8f9fa;
120+
font-weight: 600;
121+
color: #495057;
122+
border-bottom: 2px solid #dee2e6;
123+
}
124+
125+
table tbody tr:nth-child(even) {
126+
background-color: #f8f9fa;
127+
}
128+
129+
130+
/* Table of Contents */
131+
.toc {
132+
position: sticky;
133+
top: 56px;
134+
height: calc(100vh - 56px);
135+
padding: 1.5rem;
136+
overflow-y: auto;
137+
background-color: #fff;
138+
border-left: 1px solid #e9ecef;
139+
}
140+
141+
.toc h6 {
142+
font-size: 0.875rem;
143+
font-weight: 600;
144+
text-transform: uppercase;
145+
color: #6c757d;
146+
margin-bottom: 1rem;
147+
}
148+
149+
.toc a {
150+
display: block;
151+
padding: 0.25rem 0;
152+
color: #6c757d;
153+
font-size: 0.875rem;
154+
line-height: 1.5;
155+
transition: color 0.2s ease;
156+
}
157+
158+
.toc a:hover {
159+
color: #0066cc;
160+
text-decoration: none;
161+
}
162+
163+
.toc .ms-2 {
164+
padding-left: 1rem;
165+
font-size: 0.825rem;
166+
}
167+
168+
.toc .ms-3 {
169+
padding-left: 2rem;
170+
font-size: 0.8rem;
171+
}
172+
173+
/* Lists */
174+
main ul,
175+
main ol {
176+
margin-bottom: 1rem;
177+
padding-left: 2rem;
178+
}
179+
180+
main li {
181+
margin-bottom: 0.25rem;
182+
line-height: 1.7;
183+
color: #495057;
184+
}
185+
186+
/* Blockquotes */
187+
blockquote {
188+
margin: 1rem 0;
189+
padding: 0.5rem 1rem;
190+
border-left: 4px solid #0066cc;
191+
background-color: #f8f9fa;
192+
color: #495057;
45193
}
46194

47195
.collapse-arrow {
@@ -111,26 +259,28 @@ color: #36a1ff !important;
111259
transition: var(--bs-accordion-btn-icon-transition);
112260
}
113261

114-
115-
116262
body.cDarkMode main {
117-
background-color: #121212 !important;
263+
background-color: #0d1117;
264+
}
265+
266+
body.cDarkMode {
267+
background-color: #0d1117;
118268
}
119269

120270
body.cDarkMode .toc , body.cDarkMode .sidebar {
121-
background-color: #000 !important;
271+
background-color: #0d1117 !important;
122272
}
123273

124274
body.cDarkMode .border-start {
125-
border-left: 1px solid #262626 !important;
275+
border-left: 1px solid #0d1117 !important;
126276
}
127277

128278
body.cDarkMode p , body.cDarkMode li , body.cDarkMode tbody, body.cDarkMode td, body.cDarkMode tfoot, body.cDarkMode th, body.cDarkMode thead, body.cDarkMode tr {
129279
color: #B7B7B7 !important;
130280
}
131281

132282
body.cDarkMode .accordion-button ,body.cDarkMode .accordion , body.cDarkMode .accordion-body {
133-
background-color: #000 !important;
283+
background-color: #0d1117 !important;
134284
}
135285

136286
body.cDarkMode .accordion-item button {
@@ -145,27 +295,46 @@ body.cDarkMode .accordion-button:not(.collapsed)::after {
145295
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
146296
}
147297

298+
/* Dark Mode: Fenced Code Blocks */
299+
body.cDarkMode .highlighter-rouge .highlight {
300+
background-color: #2c3035;
301+
color: #dcdcdc;
302+
}
148303

149-
body.cDarkMode .toc a {
150-
color: #B7B7B7 !important;
304+
/* Dark Mode: Inline Code */
305+
body.cDarkMode code.highlighter-rouge.language-plaintext {
306+
background-color: #ffffff1a;
307+
color: #c9d1d9;
308+
border: 1px solid #ffffff1a;
309+
}
151310

152-
}
311+
body.cDarkMode .toc a {
312+
color: #B7B7B7 !important;
153313

154-
body.cDarkMode p a {
155-
color: #B7B7B7 !important;
314+
}
315+
316+
body.cDarkMode p a {
317+
color: #B7B7B7 !important;
156318

157-
}
319+
}
158320

159321
/* #mainAccordion a {
160322
color: #B7B7B7;
161323
} */
162324

163-
164-
165-
166-
167-
168-
@media (max-width: 991.98px) {
169-
.sidebar { position: relative; height: auto; }
170-
.toc { display: none; }
171-
}
325+
/* Responsive */
326+
@media (max-width: 991.98px) {
327+
.sidebar {
328+
position: relative;
329+
height: auto;
330+
top: auto;
331+
}
332+
333+
.toc {
334+
display: none;
335+
}
336+
337+
main.py-4 {
338+
padding: 1.5rem !important;
339+
}
340+
}

0 commit comments

Comments
 (0)