Skip to content

Commit adc1f97

Browse files
authored
fix: design update to Docs tab (#468)
Quite a long list of style changes affecting the Docs tab. I did them all in the jsr repo instead of ddoc because it was an easier dev workflow but it may be better to use this as a reference for what needs to change in deno_doc with the goal of eliminating nearly every `body .ddoc` style out of the stylesheet with the exception of any jsr theme colors. If we want to review and merge this we can but if we want to leave it as a TODO list and then close it out when deno_doc gets the updates, that's fine too. also fixes #451 ![jsr test_@oak_oak_doc](https://github.com/jsr-io/jsr/assets/776987/7d68ed6d-c19d-4701-ad84-609a52cdae4e)
1 parent 69144b0 commit adc1f97

File tree

2 files changed

+79
-8
lines changed

2 files changed

+79
-8
lines changed

frontend/routes/package/(_components)/Docs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function DocsView(
2323
</Head>
2424

2525
{docs.breadcrumbs && (
26-
<div class="flex md:items-center justify-between mb-4 md:mb-8 gap-4 max-md:flex-col-reverse">
26+
<div class="flex md:items-center justify-between mb-4 gap-4 max-md:flex-col-reverse">
2727
<div
2828
class="ddoc"
2929
dangerouslySetInnerHTML={{ __html: docs.breadcrumbs }}

frontend/static/styles.css

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
}
135135

136136
.link {
137-
@apply text-jsr-cyan-700 hover:text-jsr-cyan-600 underline
137+
@apply text-jsr-cyan-700 hover:text-jsr-cyan-900 underline decoration-jsr-cyan-700/50 underline-offset-2
138138
outline-none focus-visible:ring-2 ring-jsr-cyan-700 ring-offset-2 rounded-sm;
139139
}
140140

@@ -199,26 +199,96 @@ body .ddoc a {
199199

200200
body .ddoc .markdown pre {
201201
@apply bg-slate-50 border-t-1.5 border-b-1.5 border-slate-300 -mx-6 rounded-none md:rounded-md md:border-1.5 md:mx-0;
202-
202+
203203
& > code:first-child {
204204
@apply px-6;
205-
205+
206206
&.flex {
207207
display: flex;
208208
}
209209
}
210210
}
211211

212212
body .ddoc .markdown :not(pre) > code {
213-
@apply bg-slate-50 border-slate-300 rounded-md;
213+
@apply bg-jsr-cyan-100/50 rounded-md;
214+
@apply px-1.5;
215+
}
216+
217+
body .ddoc .markdown_summary a:not(.no_color) {
218+
@apply link;
214219
}
215220

216221
body .ddoc .markdown a:not(.no_color) {
217222
@apply link;
218223
}
219224

220225
body .ddoc .usage {
221-
@apply bg-jsr-cyan-50 border-jsr-cyan-100 -mx-6 md:mx-0;
226+
@apply bg-jsr-cyan-50 border-jsr-cyan-100 -mx-6 md:mx-0 pt-4 pb-5;
227+
}
228+
229+
body .ddoc .usage nav details > summary {
230+
@apply border-jsr-cyan-200 py-1.5 px-2.5 !important;
231+
}
232+
233+
body .ddoc .markdown .highlight .context_button {
234+
@apply hover:bg-jsr-cyan-50;
235+
@apply border-none;
236+
}
237+
238+
body .ddoc .contextLink {
239+
text-decoration: underline;
240+
text-decoration-skip-ink: auto;
241+
text-decoration-thickness: 1.5px;
242+
/* cyan 700 at 25%; */
243+
text-decoration-color: #0e659040;
244+
text-underline-offset: 0.15em;
245+
color: theme("colors.jsr-cyan.700");
246+
}
247+
248+
body .ddoc .breadcrumbs li:first-child .contextLink {
249+
@apply text-2xl;
250+
}
251+
252+
body .ddoc .breadcrumbs li {
253+
@apply text-lg;
254+
}
255+
256+
body .ddoc .markdown_summary > p {
257+
@apply line-clamp-4;
258+
}
259+
260+
body .ddoc .namespaceSection {
261+
@apply gap-y-6 gap-x-10;
262+
}
263+
264+
body .ddoc .namespaceSection .namespaceItem {
265+
@apply lg:pr-4;
266+
@apply md:min-h-[4rem];
267+
}
268+
269+
.ddoc .markdown_summary :not(pre) > code {
270+
@apply bg-jsr-cyan-100/50 !important;
271+
@apply px-1.5 !important;
272+
}
273+
274+
body .ddoc section.section {
275+
@apply mb-6;
276+
}
277+
278+
body .ddoc section.section > div > h2 {
279+
@apply mb-1;
280+
}
281+
282+
body .ddoc section.section > div > div.markdown_summary > p {
283+
@apply text-base;
284+
@apply max-w-prose;
285+
}
286+
287+
/* only affect search box width on docs tab
288+
TODO have a better way to target on a specific page */
289+
.ddoc + div > input#symbol-search-input {
290+
@apply w-full md:min-w-80;
291+
@apply bg-white border-1.5 border-jsr-cyan-900/30;
222292
}
223293

224294
body .ddoc .usage pre.highlight {
@@ -246,7 +316,8 @@ body .ddoc > section > nav.py-4 > ul {
246316
scrollbar-width: thin;
247317
}
248318

249-
body .ddoc #module_doc, body .ddoc main {
319+
body .ddoc #module_doc,
320+
body .ddoc main {
250321
@apply pb-8;
251322
}
252323

@@ -260,7 +331,7 @@ body .ddoc .markdown tr:nth-child(2n) {
260331
}
261332

262333
body .ddoc .markdown th,
263-
body .ddoc .markdown td {
334+
body .ddoc .markdown td {
264335
@apply border-1.5 border-slate-300;
265336
}
266337

0 commit comments

Comments
 (0)