Главная Обзор Помощь
Регистрация Вход
wilson.silva
/
AdminLte
зеркало из https://github.com/almasaeed2010/AdminLTE
1
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

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 9 часов назад
Родитель
a08a6c57e0
Сommit
274ffcd794
27 измененных файлов с 167 добавлено и 25 удалено
Разделённый вид Показать статистику Diff
  1. 1 1
      src/html/pages/docs/browser-support.astro
  2. 1 1
      src/html/pages/docs/color-mode.astro
  3. 1 1
      src/html/pages/docs/components/main-header.astro
  4. 1 1
      src/html/pages/docs/components/main-sidebar.astro
  5. 1 1
      src/html/pages/docs/customization.astro
  6. 1 1
      src/html/pages/docs/deployment.astro
  7. 1 1
      src/html/pages/docs/faq.astro
  8. 1 1
      src/html/pages/docs/getting-started.astro
  9. 1 1
      src/html/pages/docs/how-to-contribute.astro
  10. 1 1
      src/html/pages/docs/integrations.astro
  11. 1 1
      src/html/pages/docs/introduction.astro
  12. 1 1
      src/html/pages/docs/javascript/accessibility.astro
  13. 1 1
      src/html/pages/docs/javascript/card-widget.astro
  14. 1 1
      src/html/pages/docs/javascript/direct-chat.astro
  15. 1 1
      src/html/pages/docs/javascript/fullscreen.astro
  16. 1 1
      src/html/pages/docs/javascript/layout.astro
  17. 1 1
      src/html/pages/docs/javascript/plugins-overview.astro
  18. 1 1
      src/html/pages/docs/javascript/pushmenu.astro
  19. 1 1
      src/html/pages/docs/javascript/treeview.astro
  20. 1 1
      src/html/pages/docs/layout-blueprint.astro
  21. 1 1
      src/html/pages/docs/layout.astro
  22. 1 1
      src/html/pages/docs/license.astro
  23. 1 1
      src/html/pages/docs/migration.astro
  24. 1 1
      src/html/pages/docs/recipes.astro
  25. 1 1
      src/html/pages/docs/rtl.astro
  26. 139 0
      src/scss/_docs.scss
  27. 3 0
      src/scss/adminlte.scss

+ 1 - 1
src/html/pages/docs/browser-support.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "browser-support";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/color-mode.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "color-mode";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/components/main-header.astro
Просмотреть файл 

@@ -26,7 +26,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/components/main-sidebar.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "main-sidebar";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/customization.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "customization";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/deployment.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "deployment";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/faq.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "faq";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/getting-started.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "getting-started";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <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>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/integrations.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "integrations";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/introduction.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "introduction";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/accessibility.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "accessibility";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/card-widget.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "card-widget";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/direct-chat.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "direct-chat";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/fullscreen.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "fullscreen";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/layout.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "layout";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/plugins-overview.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "plugins-overview";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/javascript/pushmenu.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "pushmenu";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/javascript/treeview.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "treeview";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/layout-blueprint.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "layout-blueprint";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/layout.astro
Просмотреть файл 

@@ -19,7 +19,7 @@ const page = "layout";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/license.astro
Просмотреть файл 

@@ -20,7 +20,7 @@ const page = "license";
 
   </head>
 
   <!--end::Head-->
 
   <!--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-->
 
     <div class="app-wrapper">
 
       <Topbar path={path} />

+ 1 - 1
src/html/pages/docs/migration.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "migration";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/recipes.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "recipes";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 1 - 1
src/html/pages/docs/rtl.astro
Просмотреть файл 

@@ -17,7 +17,7 @@ const page = "rtl";
 
   <head>
 
     <Head title={title} path={path} />
 
   </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">
 
       <Topbar path={path} />
 
       <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 {
 
   padding: .75rem;
 
   @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
 
 @import "accessibility";
 
+
 
+// AdminLTE Documentation Styles (only applies to pages with body.docs-page)
 
+@import "docs";