44< head >
55 < meta charset ="UTF-8 " />
66 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7- < link href ="/output.css " rel ="stylesheet " />
7+ < style >
8+ html {
9+ font-size : 16px ;
10+ line-height : 1.5 ;
11+ background-color : # fff
12+ }
13+
14+ body {
15+ margin : 0 auto;
16+ max-width : 720px ;
17+ padding : 0 16px ;
18+ font-family : sans-serif;
19+ }
20+
21+ a {
22+ color : # db2777
23+ text-decoration : none;
24+ }
25+
26+ header {
27+ margin-bottom : 32px ;
28+ padding : 16px 0 ;
29+ }
30+
31+ nav {
32+ display : flex;
33+ justify-content : space-between;
34+ }
35+
36+ nav div a {
37+ margin-left : 16px ;
38+ }
39+
40+ ul {
41+ margin : 0 ;
42+ padding : 0 ;
43+ list-style : none;
44+ }
45+
46+ li {
47+ margin-bottom : 8px ;
48+ }
49+
50+ /* Dark mode styles */
51+ @media (prefers-color-scheme : dark) {
52+ html {
53+ background-color : # 1e293b
54+ color : # fff
55+ }
56+
57+ a {
58+
59+ }
60+ }
61+
62+ </ style >
863</ head >
964
10- < body class =" container mx-auto prose dark:prose-invert dark:bg-slate-900 pt-6 bg-white text-slate-900 " >
65+ < body >
1166 < header >
12- < nav class =" mx-auto flex items-center justify-between " >
67+ < nav >
1368 < strong > JSON Server</ strong >
14- < div class ="flex gap-x-6 ">
15- < a href ="https://github.com/typicode/json-server ">
16- < span class ="ml-2 "> Docs</ span >
17- </ a >
18- < a href ="https://github.com/sponsors/typicode " class ="text-red-500 font-semibold ">
19- < span class ="ml-2 "> ♡ Sponsor</ span >
20- </ a >
69+ < div >
70+ < a href ="https://github.com/typicode/json-server "> Docs</ a >
71+ < a href ="https://github.com/sponsors/typicode "> ♡ Sponsor</ a >
2172 </ div >
2273 </ nav >
2374 </ header >
2475 < main class ="my-12 ">
2576 < p class ="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text "> ✧*｡٩(ˊᗜˋ*)و✧*｡</ p >
26- < % if (Object.keys(it.data).length === 0) { %>
77+ < % if (Object.keys(it.data).length===0) { %>
2778 < p > No resources found in JSON file</ p >
2879 < % } %>
2980 < % Object.entries(it.data).forEach(function([name]) { %>
30- < div class ="py-1 ">
31- < a href ="<%= name %> "> /< %= name %> </ a >
32- < span class ="text-gray-500 ">
33- < % if (Array.isArray(it.data[name])) { %>
34- - < %= it.data[name].length %> < %= it.data[name].length > 1 ? 'items' : 'item' %> </ span >
81+ < ul >
82+ < li >
83+ < a href ="<%= name %> "> /< %= name %> </ a >
84+ < span >
85+ < % if (Array.isArray(it.data[name])) { %>
86+ - < %= it.data[name].length %>
87+ < %= it.data[name].length> 1 ? 'items' : 'item' %>
88+ </ span >
3589 < % } %>
36- </ div >
90+ </ li >
91+ </ ul >
3792 < % }) %>
3893 </ main >
3994</ body >
4095
41- </ html >
96+ </ html >
0 commit comments