hdoc-tools 0.62.5 → 0.63.0

package/ui/css/theme-default/styles/components/content.css

@@ -1,7 +1,7 @@
 /* base doc content classes*/
 .DocContent .content-wrapper
 {
-  padding: 20px 0px;
+  padding: 10px 0px;
   margin: 0 0;
   overflow: initial;
   max-width:1500px;
@@ -13,15 +13,9 @@
   position:relative;
 }
 
-/* The container is a flex row holding the content pane and the TOC. The
-   content pane does all the flexing (basis 0, min-width 0 so wide content -
-   tables, code blocks - cannot force it wider); the TOC keeps a fixed,
-   non-shrinking basis. Giving both children a width made the row
-   over-committed, so both shrank pro-rata and the TOC collapsed to ~118px. */
 .DocContent .injected-document-content
 {
-  flex: 1 1 0;
-  min-width: 0;
+  width: 100%;
 }
 
 .DocContent .injected-document-toc
@@ -29,12 +23,9 @@
   height: fit-content;
   display:none;
   margin:0 0 0 50px;
-  flex: 0 0 clamp(260px, 26%, 400px);
+  width:400px;
 }
 
-.DocContent .injected-document-toc .H2{
-
-}
 .DocContent .injected-document-toc .H3{
   padding-left:10px;
 
@@ -69,59 +60,169 @@
 }
 /* eof nav tabs in doc content */
 
+/* No ".tab-content" rules here any more. The local <tabs> transformer in doc.hornbill.js emits
+   ul.nav.nav-tabs and toggles d-none on the <tab> elements directly - it never creates the
+   Bootstrap .tab-content/.tab-pane wrappers those four rules were scoped to, so they could not
+   match under any content. (.code-badge itself is styled in htl-doc.css and is live.) */
 
+/* WCAG AAA: Improve contrast for inactive code tab buttons */
+.DocContent .nav-tabs .nav-link {
+  color: #0050c7;
+}
+
+.DocContent .nav-tabs .nav-link.active {
+  color: #000000;
+}
+
+/* CODE BLOCK - make sure doesn't escape parent container width */
 .DocContent .code-badge-pre
 {
   max-width: 100%!important;
   min-width: 100%!important;
 }
 
-@media (min-width: 1000px) {
-  
-  .DocContent .injected-document-content
-  {
-    /*width: 900px;*/
-  }
+
+
+/* LAYOUT MODS */
+
+/* table-list*/
+.DocContent.article-wide .injected-document-content
+{
+    /* take up max width - overrides max-width set in [.DocContent .injected-document-content] */
+    max-width:100%;
 }
 
+.DocContent.article-wide .injected-document-content table
+{
+    /* make all tables 100% */
+    width:100%;
+    display:table;
+}
 
-/* style overrides to apply on screens that are 1500px and wider */
+/* style overrides to apply on screens that are 1790px and wider */
 @media (min-width: 1500px) {
-  
+
   .DocContent .injected-document-toc
   {
     display:inline-block;
+    /* Do NOT let the TOC flex-shrink. .injected-document-container is a flex row
+       (.hb-container-horizontal) whose children inherit flex-shrink:1 from
+       htldoc.layouts.css. The content pane declares width:100%, so its flex-basis is the
+       full container width; add the TOC's 400px basis and the row is over-committed on every
+       screen, so BOTH items shrank pro-rata and the TOC collapsed to ~118px - the "squished
+       table of contents". The 900px content cap below only fires for .article-toc, i.e. only
+       when a page's frontmatter declares layout: article-toc, which most pages do not - so
+       the cap cannot be relied on to keep the row within budget. Fixed here instead: the TOC
+       takes a non-shrinking basis and the content pane absorbs all of the flexing.
+       clamp() rather than a flat 400px so the TOC gives some width back at the low end of
+       this breakpoint (400px flat left the content pane at 650px at exactly 1500px). Wide
+       content does not need the content pane to grow - code blocks and tables scroll
+       themselves (overflow-x:auto in htl-doc.css). */
+    flex: 0 0 clamp(260px, 26%, 400px);
+    width: auto;
+    margin-left: clamp(24px, 3%, 50px);
+  }
+
+  .DocContent .injected-document-content
+  {
+      /* basis 0 + grow, not the declared width:100%, so this pane is what yields width;
+         min-width:0 defeats the automatic minimum size (max-content), which a long
+         unwrapped code line would otherwise use to push the TOC out again */
+      flex: 1 1 0;
+      min-width: 0;
+      width: auto;
+  }
+
+  .DocContent.article-toc .injected-document-content
+  {
+      width: 900px;
   }
 
-  /* Room for the TOC comes from its own flex basis now - a width here would be
-     ignored anyway (flex-basis 0 on the content pane wins over width). */
 
 }
 
-/* style overrides to apply on screens that are 1920px and wider */
-@media (min-width: 1790px) {
-  
-  .DocContent .content-wrapper
+/* ---- Narrow-screen TOC (hamburger fallback) ---- */
+/* Hidden by default; at >=1500px the inline .injected-document-toc is shown instead (see media query above) */
+.DocContent .toc-mobile
+{
+  display:none;
+}
+
+@media (max-width: 1499.98px) {
+
+  .DocContent .toc-mobile
   {
-    /*margin-left: 20px*/
+    display:block;
   }
-}
 
+  .DocContent .toc-mobile-btn
+  {
+    position:fixed;
+    right:20px;
+    /* tablet / small-laptop: vertically centred on the book title band. The variable is
+       measured and set by positionTocMobileBtn() (doc.hornbill.js); 74px is the fallback
+       before the first measure (dock just below the 58px toolbar) */
+    top:var(--toc-mobile-btn-top, 74px);
+    z-index:1000;
+    width:48px;
+    height:48px;
+    border-radius:50%;
+    border:none;
+    background:var(--htl-c-brand);
+    color:var(--htl-c-text-dark-1);
+    box-shadow:var(--htl-shadow-3);
+    font-size:1.4rem;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    cursor:pointer;
+  }
 
+  .DocContent .toc-mobile-btn:hover
+  {
+    filter:brightness(1.05);
+  }
 
-/* LAYOUT MODS */
+  .DocContent .toc-mobile-backdrop
+  {
+    position:fixed;
+    inset:0;
+    background:rgba(0,0,0,0.4);
+    z-index:1000;
+  }
 
-/* table-list*/
-.DocContent.article-wide .injected-document-content
-{
-    /* take up max width - overrides max-width set in [.DocContent .injected-document-content] */
-    max-width:100%;
+  .DocContent .toc-mobile-panel
+  {
+    position:fixed;
+    top:0;
+    right:0;
+    height:100%;
+    width:85%;
+    max-width:360px;
+    background:var(--htl-c-bg);
+    box-shadow:var(--htl-shadow-3);
+    z-index:1001;
+    overflow-y:auto;
+    padding:20px;
+    transform:translateX(100%);
+    transition:transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .DocContent .toc-mobile-panel.open
+  {
+    transform:translateX(0);
+  }
 }
 
-.DocContent.article-wide .injected-document-content table
-{
-    /* make all tables 100% */
-    width:100%;
-    display:table;
+/* mobile: move the floating button to the bottom (thumb reach), toolbar search is hidden here */
+@media (max-width: 602px) {
+
+  .DocContent .toc-mobile-btn
+  {
+    top:auto;
+    bottom:20px;
+  }
 }
 
+
+

package/ui/css/theme-default/styles/components/custom-block.css

@@ -1,6 +1,6 @@
 .custom-block {
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--htl-box-radius);
   padding: 16px 16px 8px;
   line-height: 24px;
   font-size: var(--htl-default-font-size);