Skip to content

Commit d61d012

Browse files
0xrinegade0xrinegade
authored
Merge pull request #17 from openSVM/copilot/fix-16
Integrate docs/book content into documentation website with grayscale ink styling
2 parents 4104823 + 3641d11 commit d61d012

21 files changed

+3030
-143
lines changed

‎frontend/public/docs.css‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
body {
2+
font-family: 'Courier New', Courier, monospace;
3+
background-color: #FFFFFF;
4+
color: #262626;
5+
}
6+
.header {
7+
background-color: #171717;
8+
padding: 1rem;
9+
color: white;
10+
}
11+
.nav-link {
12+
display: inline-block;
13+
padding: 0.5rem 1rem;
14+
margin: 0.25rem;
15+
border: 1px solid #525252;
16+
border-radius: 0.25rem;
17+
color: #A3A3A3;
18+
text-decoration: none;
19+
transition: all 0.2s ease;
20+
background-color: #262626;
21+
}
22+
.nav-link:hover {
23+
background-color: #737373;
24+
color: #FFFFFF;
25+
border-color: #737373;
26+
}
27+
.nav-link.active {
28+
background-color: #404040;
29+
color: #FFFFFF;
30+
font-weight: bold;
31+
border-color: #404040;
32+
}
33+
.main-container {
34+
width: 100%;
35+
max-width: 1200px;
36+
margin: 0 auto;
37+
padding: 0 1rem;
38+
}
39+
#content {
40+
padding: 2rem 0;
41+
}
42+
#markdown-content {
43+
background-color: #f5f5f5;
44+
padding: 2rem;
45+
border-radius: 0.5rem;
46+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
47+
line-height: 1.6;
48+
}
49+
#markdown-content h1 {
50+
font-size: 2rem;
51+
margin-bottom: 1rem;
52+
padding-bottom: 0.5rem;
53+
border-bottom: 2px solid #525252;
54+
}
55+
#markdown-content h2 {
56+
font-size: 1.5rem;
57+
margin-top: 2rem;
58+
margin-bottom: 1rem;
59+
padding-bottom: 0.25rem;
60+
border-bottom: 1px solid #737373;
61+
}
62+
#markdown-content h3 {
63+
font-size: 1.25rem;
64+
margin-top: 1.5rem;
65+
margin-bottom: 0.75rem;
66+
}
67+
#markdown-content ul, #markdown-content ol {
68+
padding-left: 1.5rem;
69+
margin-bottom: 1rem;
70+
}
71+
#markdown-content ul {
72+
list-style-type: disc;
73+
}
74+
#markdown-content ol {
75+
list-style-type: decimal;
76+
}
77+
#markdown-content pre {
78+
background-color: #262626;
79+
color: #ffffff;
80+
padding: 1rem;
81+
border-radius: 0.25rem;
82+
overflow-x: auto;
83+
margin: 1rem 0;
84+
}
85+
#markdown-content code {
86+
background-color: #d4d4d4;
87+
padding: 0.2rem 0.4rem;
88+
border-radius: 0.25rem;
89+
font-family: monospace;
90+
}
91+
#markdown-content pre code {
92+
background-color: transparent;
93+
padding: 0;
94+
}
95+
#markdown-content table {
96+
width: 100%;
97+
border-collapse: collapse;
98+
margin: 1.5rem 0;
99+
}
100+
#markdown-content th, #markdown-content td {
101+
border: 1px solid #d4d4d4;
102+
padding: 0.5rem 1rem;
103+
text-align: left;
104+
}
105+
#markdown-content th {
106+
background-color: #e5e5e5;
107+
}
108+
#markdown-content blockquote {
109+
border-left: 4px solid #737373;
110+
padding-left: 1rem;
111+
margin: 1rem 0;
112+
color: #525252;
113+
}
114+
#markdown-content a {
115+
color: #0ea5e9;
116+
text-decoration: none;
117+
}
118+
#markdown-content a:hover {
119+
text-decoration: underline;
120+
}
121+
#sidebar {
122+
width: 250px;
123+
min-width: 250px;
124+
padding-right: 1.5rem;
125+
}
126+
127+
/* Book-specific styling with grayscale ink effect */
128+
.book-container {
129+
position: relative;
130+
}
131+
132+
.book-content {
133+
/* Apply grayscale ink effect */
134+
filter: grayscale(100%) contrast(120%) brightness(0.95);
135+
background-color: #fafafa;
136+
padding: 2rem;
137+
border-radius: 0.5rem;
138+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
139+
margin-bottom: 1rem;
140+
/* Subtle paper texture effect */
141+
background-image:
142+
linear-gradient(45deg, transparent 24%, rgba(64, 64, 64, 0.02) 25%, rgba(64, 64, 64, 0.02) 26%, transparent 27%, transparent 74%, rgba(64, 64, 64, 0.02) 75%, rgba(64, 64, 64, 0.02) 76%, transparent 77%, transparent),
143+
linear-gradient(-45deg, transparent 24%, rgba(64, 64, 64, 0.02) 25%, rgba(64, 64, 64, 0.02) 26%, transparent 27%, transparent 74%, rgba(64, 64, 64, 0.02) 75%, rgba(64, 64, 64, 0.02) 76%, transparent 77%, transparent);
144+
background-size: 20px 20px;
145+
}
146+
147+
/* Enhanced typography for book content */
148+
.book-content h1 {
149+
font-size: 2.25rem;
150+
margin-bottom: 1.5rem;
151+
padding-bottom: 0.75rem;
152+
border-bottom: 3px solid #404040;
153+
color: #171717;
154+
font-weight: bold;
155+
}
156+
157+
.book-content h2 {
158+
font-size: 1.75rem;
159+
margin-top: 2.5rem;
160+
margin-bottom: 1.25rem;
161+
padding-bottom: 0.5rem;
162+
border-bottom: 2px solid #525252;
163+
color: #262626;
164+
}
165+
166+
.book-content h3 {
167+
font-size: 1.375rem;
168+
margin-top: 2rem;
169+
margin-bottom: 1rem;
170+
color: #404040;
171+
}
172+
173+
.book-content p {
174+
margin-bottom: 1.25rem;
175+
line-height: 1.8;
176+
text-align: justify;
177+
color: #262626;
178+
}
179+
180+
.book-content ul, .book-content ol {
181+
margin-bottom: 1.5rem;
182+
padding-left: 2rem;
183+
}
184+
185+
.book-content li {
186+
margin-bottom: 0.5rem;
187+
line-height: 1.7;
188+
}
189+
190+
.book-content code {
191+
background-color: #e5e5e5;
192+
padding: 0.25rem 0.5rem;
193+
border-radius: 0.25rem;
194+
font-family: 'Courier New', Courier, monospace;
195+
color: #171717;
196+
font-weight: bold;
197+
}
198+
199+
.book-content pre {
200+
background-color: #171717;
201+
color: #f5f5f5;
202+
padding: 1.5rem;
203+
border-radius: 0.5rem;
204+
overflow-x: auto;
205+
margin: 1.5rem 0;
206+
border: 1px solid #404040;
207+
}
208+
209+
.book-content pre code {
210+
background-color: transparent;
211+
padding: 0;
212+
color: #f5f5f5;
213+
font-weight: normal;
214+
}
215+
216+
/* Book navigation styling */
217+
.book-navigation {
218+
margin-top: 2rem;
219+
}
220+
221+
.book-nav-btn {
222+
background-color: #404040;
223+
color: #ffffff;
224+
padding: 0.75rem 1.5rem;
225+
border: none;
226+
border-radius: 0.375rem;
227+
font-family: 'Courier New', Courier, monospace;
228+
font-size: 0.875rem;
229+
font-weight: bold;
230+
cursor: pointer;
231+
transition: all 0.2s ease;
232+
text-transform: uppercase;
233+
letter-spacing: 0.5px;
234+
}
235+
236+
.book-nav-btn:hover {
237+
background-color: #525252;
238+
transform: translateY(-1px);
239+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
240+
}
241+
242+
.book-nav-btn:active {
243+
transform: translateY(0);
244+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
245+
}
246+
247+
.book-nav-btn:focus {
248+
outline: 2px solid #525252;
249+
outline-offset: 2px;
250+
}
251+
252+
.book-nav-btn.prev {
253+
text-align: left;
254+
}
255+
256+
.book-nav-btn.next {
257+
text-align: right;
258+
}
259+
260+
/* Book chapter navigation in sidebar */
261+
.book-chapter {
262+
font-size: 0.875rem;
263+
color: #525252;
264+
padding-left: 1rem;
265+
border-left: 2px solid #d4d4d4;
266+
}
267+
268+
.book-chapter:hover {
269+
border-left-color: #737373;
270+
background-color: #f5f5f5;
271+
}
272+
273+
.book-chapter.font-bold {
274+
border-left-color: #404040;
275+
background-color: #e5e5e5;
276+
}
277+
278+
/* Mermaid diagram styling */
279+
.mermaid-diagram {
280+
text-align: center;
281+
margin: 2rem 0;
282+
background-color: #fafafa;
283+
padding: 1rem;
284+
border-radius: 0.5rem;
285+
border: 1px solid #d4d4d4;
286+
}
287+
288+
.mermaid-diagram svg {
289+
max-width: 100%;
290+
height: auto;
291+
}

0 commit comments

Comments
 (0)