Просмотр исходного кода

style(docs): add reading-friendly typography for .docs-page

Adds a body class `.docs-page` to every documentation page and styles
its card-body for prose:

- More generous padding (1.5rem / 2rem on md+)
- Headings get vertical rhythm appropriate for long-form reading
  (margin-top: 1.75em, scaled font sizes per level)
- Paragraphs, lists, blockquotes, tables: 1.6 line-height + 1rem
  bottom margin
- Inline code gets a subtle pill background
- Block code preserves overflow-x and consistent spacing
- Reference tables get a hairline border + tertiary background on
  header cells
- Blockquotes render as info callouts (left border + subtle bg)
- Prose links get underline + offset for clearer affordance

Demo pages are unaffected -- everything is scoped under .docs-page.

Adds the partial to adminlte.scss imports.

Includes the docs-page class addition on all 25 docs page wrappers
(under src/html/pages/docs/).
Aigars Silkalns 11 часов назад
Родитель
Сommit
274ffcd794

+ 1 - 1
src/html/pages/docs/browser-support.astro

@@ -20,7 +20,7 @@ const page = "browser-support";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/color-mode.astro

@@ -20,7 +20,7 @@ const page = "color-mode";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/components/main-header.astro

@@ -26,7 +26,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/components/main-sidebar.astro

@@ -20,7 +20,7 @@ const page = "main-sidebar";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/customization.astro

@@ -17,7 +17,7 @@ const page = "customization";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/deployment.astro

@@ -17,7 +17,7 @@ const page = "deployment";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/faq.astro

@@ -20,7 +20,7 @@ const page = "faq";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/getting-started.astro

@@ -17,7 +17,7 @@ const page = "getting-started";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/how-to-contribute.astro

@@ -20,7 +20,7 @@ const page = "how-to-contribute";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/integrations.astro

@@ -17,7 +17,7 @@ const page = "integrations";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/introduction.astro

@@ -20,7 +20,7 @@ const page = "introduction";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/accessibility.astro

@@ -20,7 +20,7 @@ const page = "accessibility";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/card-widget.astro

@@ -20,7 +20,7 @@ const page = "card-widget";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/direct-chat.astro

@@ -20,7 +20,7 @@ const page = "direct-chat";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/fullscreen.astro

@@ -20,7 +20,7 @@ const page = "fullscreen";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/layout.astro

@@ -20,7 +20,7 @@ const page = "layout";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/plugins-overview.astro

@@ -17,7 +17,7 @@ const page = "plugins-overview";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/javascript/pushmenu.astro

@@ -20,7 +20,7 @@ const page = "pushmenu";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/treeview.astro

@@ -20,7 +20,7 @@ const page = "treeview";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/layout-blueprint.astro

@@ -17,7 +17,7 @@ const page = "layout-blueprint";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/layout.astro

@@ -19,7 +19,7 @@ const page = "layout";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/license.astro

@@ -20,7 +20,7 @@ const page = "license";
   </head>
   </head>
   <!--end::Head-->
   <!--end::Head-->
   <!--begin::Body-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/migration.astro

@@ -17,7 +17,7 @@ const page = "migration";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/recipes.astro

@@ -17,7 +17,7 @@ const page = "recipes";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/rtl.astro

@@ -17,7 +17,7 @@ const page = "rtl";
   <head>
   <head>
     <Head title={title} path={path} />
     <Head title={title} path={path} />
   </head>
   </head>
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <div class="app-wrapper">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 139 - 0
src/scss/_docs.scss

@@ -1,4 +1,143 @@
+//
+// Component: Docs
+//
+// Visual treatment for documentation pages. Body class `.docs-page` opts in.
+// Demo pages are not affected.
+//
+
+// Inline code blocks rendered by MDX (Astro highlight default class)
 .astro-code {
 .astro-code {
   padding: .75rem;
   padding: .75rem;
   @include border-radius($border-radius);
   @include border-radius($border-radius);
 }
 }
+
+.docs-page {
+  // Slightly more breathing room inside the card body so prose doesn't feel
+  // cramped against the card border, and prose typography tuning.
+  .card > .card-body {
+    padding: 1.5rem;
+
+    @include media-breakpoint-up(md) {
+      padding: 2rem;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+      margin-top: 1.75em;
+      margin-bottom: .5em;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h2,
+    .h2 {
+      font-size: 1.5rem;
+    }
+
+    h3,
+    .h3 {
+      font-size: 1.25rem;
+    }
+
+    h4,
+    .h4 {
+      font-size: 1.05rem;
+    }
+
+    h5,
+    .h5 {
+      font-size: .95rem;
+      font-weight: 600;
+    }
+
+    p,
+    ul,
+    ol,
+    dl,
+    blockquote,
+    table {
+      margin-bottom: 1rem;
+      line-height: 1.6;
+    }
+
+    // Inline code styling that complements MDX's syntax-highlighted blocks
+    p code,
+    li code,
+    td code,
+    th code {
+      padding: .125rem .375rem;
+      font-size: .875em;
+      color: var(--#{$prefix}emphasis-color);
+      background: var(--#{$prefix}tertiary-bg);
+      @include border-radius($border-radius-sm);
+    }
+
+    // Code blocks: align with paragraph spacing and constrain overflow
+    pre.astro-code,
+    pre {
+      margin-bottom: 1rem;
+      overflow-x: auto;
+      font-size: .85rem;
+      line-height: 1.5;
+    }
+
+    // Reference tables get a subtle hairline treatment
+    table {
+      width: 100%;
+      border-collapse: collapse;
+
+      th,
+      td {
+        padding: .5rem .75rem;
+        text-align: left;
+        vertical-align: top;
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+      }
+
+      th {
+        font-weight: 600;
+        background: var(--#{$prefix}tertiary-bg);
+      }
+
+      tr:last-child td {
+        border-bottom: 0;
+      }
+    }
+
+    // Blockquotes used as callouts
+    blockquote {
+      padding: .75rem 1rem;
+      color: var(--#{$prefix}emphasis-color);
+      background: var(--#{$prefix}info-bg-subtle);
+      border-left: 4px solid var(--#{$prefix}info-border-subtle);
+      @include border-radius($border-radius-sm);
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    // Prose links stand out a bit more than Bootstrap defaults
+    a:not(.btn):not(.nav-link) {
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 3px;
+
+      &:hover {
+        text-decoration-thickness: 2px;
+      }
+    }
+  }
+}

+ 3 - 0
src/scss/adminlte.scss

@@ -76,3 +76,6 @@
 
 
 // AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
 // AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
 @import "accessibility";
 @import "accessibility";
+
+// AdminLTE Documentation Styles (only applies to pages with body.docs-page)
+@import "docs";