Skip to content

Commit 23b9d01

Browse files
samarJ19samarJ19
authored
docs: Modernize Docs UI with Tailwind, Dark Mode, and Improved Layout (#3814)
* fix: fix link issues of _doc.html * fix:wrong changes done * docs:Improved the UI for Docs page * docs:final changes to UI redesign * fix:fixes dark light mode toggle in demo page * fix: fixed linting error after dark mode changes * feat:add mobile responsive design * fix: fix broken links of nav bar * fix:dark mode flash fix and backward url compatibility * fix:demo page fix * fix: fix linting error * fix:clean url and hamburger menu button * fix:fix formatting issues and more device inclusive responsive design * fix: reverts build.js to original state
1 parent 9657f0b commit 23b9d01

File tree

9 files changed

+1308
-688
lines changed

9 files changed

+1308
-688
lines changed

‎docs/_document.html‎

Lines changed: 437 additions & 96 deletions
Large diffs are not rendered by default.

‎docs/css/hljs-github.css‎

Lines changed: 101 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
/*!
2-
Theme: GitHub
3-
Description: Light theme as seen on github.com
4-
Author: github.com
5-
Maintainer: @Hirse
6-
Updated: 2021-05-15
7-
8-
Outdated base version: https://github.com/primer/github-syntax-light
9-
Current colors taken from GitHub's CSS
2+
Theme: GitHub (Adapted for dynamic light/dark mode)
103
*/
114

125
.hljs {
13-
color: #24292e;
14-
background: #ffffff;
6+
color: var(--text-color);
7+
background: var(--background-color);
158
}
169

1710
.hljs-doctag,
@@ -21,15 +14,13 @@
2114
.hljs-template-variable,
2215
.hljs-type,
2316
.hljs-variable.language_ {
24-
/* prettylights-syntax-keyword */
2517
color: #d73a49;
2618
}
2719

2820
.hljs-title,
2921
.hljs-title.class_,
3022
.hljs-title.class_.inherited__,
3123
.hljs-title.function_ {
32-
/* prettylights-syntax-entity */
3324
color: #6f42c1;
3425
}
3526

@@ -43,83 +34,158 @@
4334
.hljs-selector-attr,
4435
.hljs-selector-class,
4536
.hljs-selector-id {
46-
/* prettylights-syntax-constant */
4737
color: #005cc5;
4838
}
4939

5040
.hljs-regexp,
5141
.hljs-string,
5242
.hljs-meta .hljs-string {
53-
/* prettylights-syntax-string */
5443
color: #032f62;
5544
}
5645

5746
.hljs-built_in,
5847
.hljs-symbol {
59-
/* prettylights-syntax-variable */
6048
color: #e36209;
6149
}
6250

6351
.hljs-comment,
6452
.hljs-code,
6553
.hljs-formula {
66-
/* prettylights-syntax-comment */
67-
color: #6a737d;
54+
color: var(--subtle-text-color);
6855
}
6956

7057
.hljs-name,
7158
.hljs-quote,
7259
.hljs-selector-tag,
7360
.hljs-selector-pseudo {
74-
/* prettylights-syntax-entity-tag */
7561
color: #22863a;
7662
}
7763

7864
.hljs-subst {
79-
/* prettylights-syntax-storage-modifier-import */
80-
color: #24292e;
65+
color: var(--text-color);
8166
}
8267

8368
.hljs-section {
84-
/* prettylights-syntax-markup-heading */
8569
color: #005cc5;
8670
font-weight: bold;
8771
}
8872

8973
.hljs-bullet {
90-
/* prettylights-syntax-markup-list */
9174
color: #735c0f;
9275
}
9376

9477
.hljs-emphasis {
95-
/* prettylights-syntax-markup-italic */
96-
color: #24292e;
78+
color: var(--text-color);
9779
font-style: italic;
9880
}
9981

10082
.hljs-strong {
101-
/* prettylights-syntax-markup-bold */
102-
color: #24292e;
83+
color: var(--text-color);
10384
font-weight: bold;
10485
}
10586

10687
.hljs-addition {
107-
/* prettylights-syntax-markup-inserted */
10888
color: #22863a;
10989
background-color: #f0fff4;
11090
}
11191

11292
.hljs-deletion {
113-
/* prettylights-syntax-markup-deleted */
11493
color: #b31d28;
11594
background-color: #ffeef0;
11695
}
11796

118-
.hljs-char.escape_,
119-
.hljs-link,
120-
.hljs-params,
121-
.hljs-property,
122-
.hljs-punctuation,
123-
.hljs-tag {
124-
/* purposely ignored */
97+
/*!
98+
Theme: GitHub Dark
99+
Description: Dark theme as seen on github.com
100+
*/
101+
102+
.dark .hljs {
103+
color: #c9d1d9;
104+
}
105+
106+
.dark .hljs-doctag,
107+
.dark .hljs-keyword,
108+
.dark .hljs-meta .hljs-keyword,
109+
.dark .hljs-template-tag,
110+
.dark .hljs-template-variable,
111+
.dark .hljs-type,
112+
.dark .hljs-variable.language_ {
113+
color: #ff7b72;
114+
}
115+
116+
.dark .hljs-title,
117+
.dark .hljs-title.class_,
118+
.dark .hljs-title.class_.inherited__,
119+
.dark .hljs-title.function_ {
120+
color: #d2a8ff;
121+
}
122+
123+
.dark .hljs-attr,
124+
.dark .hljs-attribute,
125+
.dark .hljs-literal,
126+
.dark .hljs-meta,
127+
.dark .hljs-number,
128+
.dark .hljs-operator,
129+
.dark .hljs-variable,
130+
.dark .hljs-selector-attr,
131+
.dark .hljs-selector-class,
132+
.dark .hljs-selector-id {
133+
color: #79c0ff; /* This is the light blue for variables */
134+
}
135+
136+
.dark .hljs-regexp,
137+
.dark .hljs-string,
138+
.dark .hljs-meta .hljs-string {
139+
color: #a5d6ff; /* This is the light blue for strings */
140+
}
141+
142+
.dark .hljs-built_in,
143+
.dark .hljs-symbol {
144+
color: #ffa657;
145+
}
146+
147+
.dark .hljs-comment,
148+
.dark .hljs-code,
149+
.dark .heading.local .hljs-formula {
150+
color: #8b949e;
151+
}
152+
153+
.dark .hljs-name,
154+
.dark .hljs-quote,
155+
.dark .hljs-selector-tag,
156+
.dark .s.h.s .hljs-selector-pseudo {
157+
color: #7ee787;
125158
}
159+
160+
.dark .hljs-subst {
161+
color: #c9d1d9;
162+
}
163+
164+
.dark .hljs-section {
165+
color: #1f6feb;
166+
font-weight: bold;
167+
}
168+
169+
.dark .hljs-bullet {
170+
color: #f2cc60;
171+
}
172+
173+
.dark .hljs-emphasis {
174+
color: #c9d1d9;
175+
font-style: italic;
176+
}
177+
178+
.dark .hljs-strong {
179+
color: #c9d1d9;
180+
font-weight: bold;
181+
}
182+
183+
.dark .hljs-addition {
184+
color: #aff5b4;
185+
background-color: #033a16;
186+
}
187+
188+
.dark .hljs-deletion {
189+
color: #ffdcd7;
190+
background-color: #67060c;
191+
}

‎docs/css/shared.css‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,42 @@
1-
.github-corner {
2-
position: absolute;
1+
a.github-corner {
2+
position: fixed !important;
33
top: 0;
4-
border: 0;
54
right: 0;
5+
border: 0;
6+
z-index: 9999 !important;
7+
display: block;
68
}
79

8-
.github-corner svg {
9-
fill: var(--github-corner-fill);
10-
color: var(--github-corner-color);
11-
transition: fill 0.3s ease, color 0.3s ease;
10+
/*
11+
FIX: Explicitly apply light mode styles ONLY when .dark is NOT present.
12+
This prevents the light mode rule from conflicting with the dark mode rule.
13+
*/
14+
html:not(.dark) a.github-corner svg {
15+
fill: #0d1117 !important; /* Dark triangle */
16+
color: #f0f6fc !important; /* White octocat */
1217
}
1318

14-
.github-corner:hover .octo-arm {
15-
animation:octocat-wave 560ms ease-in-out;
19+
/*
20+
FIX: Increased specificity for the dark mode rule.
21+
*/
22+
html.dark a.github-corner svg {
23+
fill: #f0f6fc !important; /* White triangle */
24+
color: #0d1117 !important; /* Dark octocat */
1625
}
1726

18-
@keyframes octocat-wave {
19-
0%,100%{transform:rotate(0)}
20-
20%,60%{transform:rotate(-25deg)}
21-
40%,80%{transform:rotate(10deg)}
27+
a.github-corner:hover .octo-arm {
28+
animation: octocat-wave 560ms ease-in-out;
2229
}
2330

24-
@media (max-width:500px) {
25-
.github-corner:hover .octo-arm {
26-
animation:none
27-
}
31+
@keyframes octocat-wave {
32+
0%, 100% { transform: rotate(0); }
33+
20%, 60% { transform: rotate(-25deg); }
34+
40%, 80% { transform: rotate(10deg); }
35+
}
2836

29-
.github-corner .octo-arm {
30-
animation:octocat-wave 560ms ease-in-out;
37+
/* Mobile: Hide GitHub corner on small screens */
38+
@media (max-width: 768px) {
39+
a.github-corner {
40+
display: none;
3141
}
32-
}
42+
}

0 commit comments

Comments
 (0)