fix: upstream styling changes from jsr

src/html/comrak_adapters.rs

@@ -219,7 +219,7 @@ impl SyntaxHighlighterAdapter for HighlightAdapter {
       attributes
         .entry("class".into())
         .or_default()
-        .push_str(" flex gap-2");
+        .push_str(" !flex gap-2");
     }
     comrak::html::write_opening_tag(output, "code", attributes)
   }

src/html/templates/doc_entry.hbs

@@ -13,7 +13,7 @@
 
       <code>
         {{~#if name_href~}}
-          <a class="font-bold link" href="{{name_href}}">{{{name}}}</a>
+          <a class="font-medium link" href="{{name_href}}">{{{name}}}</a>
         {{~else~}}
           <span class="font-bold">{{{name}}}</span>
         {{~/if~}}
@@ -27,7 +27,7 @@
   </div>
 
   {{~#if js_doc~}}
-    <div class="markdown_border">
+    <div class="max-w-prose">
       {{{~js_doc~}}} {{! markdown rendering }}
     </div>
   {{~/if~}}

src/html/templates/example.hbs

@@ -6,7 +6,7 @@
       <div>&#x25B6;</div>
       {{{~markdown_title~}}} {{! markdown rendering }}
     </summary>
-    <div class="!ml-2 markdown_border">
+    <div>
       {{{~markdown_body~}}} {{! markdown rendering }}
     </div>
   </details>

src/html/templates/pages/page.css

@@ -3,22 +3,26 @@
 @tailwind utilities;
 
 body {
-  @apply p-7 max-w-screen-xl w-full overflow-x-hidden mx-auto;
+  @apply max-w-screen-xl mx-auto px-4 md:px-8 lg:px-10 xl:px-14 lg:pt-4;
 }
 
 #content {
-  @apply flex gap-6 relative;
+  @apply mt-4 grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12;
 
   & > main {
-    @apply flex-1;
+    @apply min-w-0 col-span-full;
+  }
+
+  &:has(.toc) > main {
+    @apply lg:col-span-3 lg:row-start-1;
   }
 }
 
 .toc {
-  @apply w-64 flex-none max-lg:hidden sticky top-0 max-h-screen box-border;
+  @apply max-lg:row-start-1 lg:col-[span_1_/_-1] lg:top-0 lg:sticky lg:max-h-screen flex flex-col box-border gap-y-4 -mt-4 pt-4;
 
   > div {
-    @apply overflow-y-scroll max-h-full;
+    @apply max-h-full lg:overflow-y-scroll;
 
     > *:last-child {
       @apply pb-4;

src/html/templates/pages/top_nav.hbs

@@ -1,9 +1,13 @@
-<nav class="flex lg:items-center justify-between mb-6 gap-4 max-lg:flex-col-reverse">
-	{{~> breadcrumbs breadcrumbs_ctx ~}}
+<nav class="top-0 sticky bg-white z-50 py-3">
+  <div class="max-lg:flex md:items-center justify-between gap-4 max-md:flex-col-reverse lg:grid lg:grid-cols-4 lg:gap-12">
+    <div class="lg:col-span-3">
+      {{~> breadcrumbs breadcrumbs_ctx ~}}
+    </div>
 
-	<input
-		type="text"
-		id="searchbar"
-		style="display: none;"
-		class="flex-1 lg:max-w-80 py-2 px-2.5 rounded text-sm border border-gray-300 bg-transparent" />
+    <input
+      type="text"
+      id="searchbar"
+      style="display: none;"
+      class="lg:col-[span_1_/_-1] flex-1 py-2 px-2.5 rounded text-sm border border-gray-300 bg-transparent" />
+  </div>
 </nav>

src/html/templates/section.hbs

@@ -1,6 +1,6 @@
 <section class="section" id="{{header.anchor.id}}">
   <div>
-	  <h2 class="anchorable">
+	  <h2 class="anchorable mb-1">
       {{~> anchor header.anchor ~}}
 
 		  {{~#if header.href~}}
@@ -18,7 +18,7 @@
   {{~#if (eq content.kind "namespace_section")~}}
     {{~> namespace_section content.content ~}}
   {{~else~}}
-    <div class="ml-2 space-y-3">
+    <div class="mt-2 space-y-2">
       {{~#each content.content~}}
         {{~> (lookup ../content "kind") this ~}}
       {{~/each~}}

src/html/templates/styles.css

@@ -5,6 +5,10 @@ summary::-webkit-details-marker {
   @apply hidden;
 }
 
+a {
+  word-wrap: break-word;
+}
+
 & {
   --ddoc-selection-border-width: 2px;
   --ddoc-selection-border-color-default: #D6D3D1;
@@ -56,33 +60,39 @@ summary::-webkit-details-marker {
 }
 
 .docEntry {
-  @apply text-sm;
+  @apply text-sm mb-4;
 
   .docEntryHeader {
-    @apply flex justify-between items-start;
+    @apply flex justify-between items-start md:text-base;
 
     > span {
-      @apply flex items-center break-words gap-2;
+      @apply flex items-center break-words gap-2 items-baseline;
     }
   }
 }
 
 .section {
-  @apply space-y-6;
+  @apply space-y-6 mb-6;
 
   > div {
     @apply space-y-1;
 
     > h2 {
       @apply text-xl leading-6 font-semibold py-1;
     }
+
+    > .markdown_summary {
+      @apply text-base max-w-prose;
+    }
+
   }
 }
 
 .namespaceSection {
-  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-3 md:gap-x-8 md:gap-y-8;
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-10 md:gap-x-8 md:gap-y-8;
+
   .namespaceItem {
-    @apply flex gap-x-2.5;
+    @apply flex gap-x-2.5 md:min-h-[4rem] lg:pr-4;
 
     .docNodeKindIcon {
       @apply w-auto flex-col justify-start;
@@ -189,7 +199,7 @@ summary::-webkit-details-marker {
   }
 
   .documentNavigation {
-    @apply text-sm space-y-3;
+    @apply max-lg:hidden text-sm space-y-3;
 
     > ul {
       @apply space-y-2 block overflow-y-auto;
@@ -262,18 +272,19 @@ summary::-webkit-details-marker {
 }
 
 .contextLink {
-  @apply text-contextLink/80 underline decoration-[1.5px] decoration-contextLink/50 underline-offset-4 hover:text-contextLink hover:decoration-contextLink;
+  @apply text-contextLink/80 underline decoration-[1.5px] decoration-contextLink/50 underline-offset-[0.15em] hover:text-contextLink hover:decoration-contextLink;
+  text-decoration-skip-ink: auto
 }
 
 .breadcrumbs {
-  @apply break-all inline-flex gap-1 items-center;
+  @apply break-all inline-flex flex-wrap gap-1 items-center;
 
   > li:first-child {
-    @apply text-xl lg:text-2xl leading-none font-bold;
+    @apply text-2xl leading-none font-bold;
   }
 
   li {
-    @apply inline lg:text-xl leading-[0.9em];
+    @apply inline text-lg lg:text-xl leading-[0.9em];
   }
 }
 
@@ -294,11 +305,11 @@ summary::-webkit-details-marker {
   @apply inline text-stone-600;
 
   p {
-    @apply inline-block;
+    @apply inline-block line-clamp-4;
   }
 
   :not(pre) > code {
-    @apply font-mono text-sm py-0.5 px-1 rounded bg-stone-200;
+    @apply font-mono text-sm py-0.5 px-1.5 rounded bg-stone-200;
   }
 }
 
@@ -352,7 +363,7 @@ summary::-webkit-details-marker {
   /* Inline code */
 
   :not(pre) > code {
-    @apply font-mono text-sm py-0.5 px-1 rounded bg-stone-200;
+    @apply font-mono text-sm py-0.5 px-1.5 rounded-md bg-stone-200;
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -362,10 +373,10 @@ summary::-webkit-details-marker {
   }
 
   pre {
-    @apply font-mono text-sm rounded-lg text-black bg-stone-100;
+    @apply font-mono text-sm text-black bg-slate-50 border-t-1.5 border-b-1.5 border-slate-300 -mx-4 rounded-none md:rounded-md md:border-1.5 md:mx-0;
 
     & > code:first-child {
-      @apply overflow-x-auto p-4 block;
+      @apply overflow-x-auto px-6 py-4 block;
     }
   }
 
@@ -378,11 +389,19 @@ summary::-webkit-details-marker {
   }
 
   td {
-    @apply p-2 border border-stone-500;
+    @apply p-2;
   }
 
   th {
-    @apply font-bold text-center;
+    @apply font-bold text-center py-1.5;
+  }
+
+  th, td {
+    @apply border-1.5 border-slate-300;
+  }
+
+  tr:nth-child(2n) {
+    @apply bg-slate-50;
   }
 
   img {

tailwind.config.ts

@@ -46,6 +46,9 @@ export default {
         ...extraColors,
         "contextLink": "#0E6590",
       },
+      borderWidth: {
+        "1.5": "1.5px",
+      },
     },
   },
   darkMode: "class",