Improve Tikui template to fix padding and title size issues

tikui · Aug 6, 2024 · d9ff47e · d9ff47e
1 parent 0c60650
commit d9ff47e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tikuidoc-tikui",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Tikui documentation",
   "main": "tikuidoc.json",
   "files": [

diff --git a/src/documentation/layout-atomic.pug b/src/documentation/layout-atomic.pug
@@ -4,8 +4,9 @@ block title
   title Tikui
 block body
   .tikui-template-page--header
-    .tikui-template-page--container
+    .tikui-template-page--header-container
       block header
   .tikui-template-page--body(data-navigable)
     .tikui-template-page--container
-      block content
+      .tikui-template-page--container-content
+        block content
diff --git a/src/documentation/quark/title/_title.scss b/src/documentation/quark/title/_title.scss
@@ -10,6 +10,8 @@ $tikui-title-color-text: $tikui-color-text-dark !default;
   color: $tikui-title-color-text;
   font-family: $tikui-title-font-family;
   font-weight: bold;
+  hyphens: auto;
+  overflow-wrap: anywhere;
 }
 
 @import 'title-brand';

diff --git a/src/documentation/template/template-page/_template-page.scss b/src/documentation/template/template-page/_template-page.scss
@@ -13,11 +13,10 @@ $tikui-template-page-nav-width: 340px !default;
   position: fixed;
   inset: 0;
   flex-direction: column;
+  min-height: 0;
 
-  &--container {
+  &--header-container {
     box-sizing: content-box;
-    flex-basis: 0;
-    flex-grow: 1;
     margin: 0 auto;
     padding: 0 $tikui-template-page-spacing;
     width: auto;
@@ -27,17 +26,34 @@ $tikui-template-page-nav-width: 340px !default;
 
   &--body {
     display: flex;
+    flex-basis: 0;
     flex-grow: 1;
     background-color: $tikui-color-background;
-    padding: $tikui-template-page-spacing 0;
+    padding: 0;
+    min-height: 0;
     overflow: auto;
   }
 
+  &--container {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &--container-content {
+    box-sizing: content-box;
+    margin: 0 auto;
+    padding: $tikui-template-page-spacing;
+    width: auto;
+    max-width: $tikui-template-page-container-width;
+  }
+
   &--nav {
     box-sizing: content-box;
     position: sticky;
     top: 0;
-    padding: 0 $tikui-template-page-nav-padding;
+    padding: $tikui-template-page-spacing $tikui-template-page-nav-padding;
     width: $tikui-template-page-nav-width;
     overflow: auto;
   }
@@ -59,11 +75,16 @@ $tikui-template-page-nav-width: 340px !default;
   .tikui-template-page {
     overflow: auto;
 
+    &--header-container,
     &--container {
       padding: 0 $tikui-template-page-small-spacing;
       width: auto;
     }
 
+    &--container-content {
+      padding: 0;
+    }
+
     &--body {
       display: block;
       padding: $tikui-template-page-small-spacing 0;
@@ -72,6 +93,7 @@ $tikui-template-page-nav-width: 340px !default;
 
     &--nav {
       position: static;
+      padding: 0;
       width: auto;
     }
   }