Merge pull request #520 from picturepan2/0.5.4 v0.5.4

0.5.4

6 files changed, 73 insertions, 20 deletions

diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug
index ccde5e1..9d61c69 100644
--- a/docs/src/contents/breadcrumbs.pug
+++ b/docs/src/contents/breadcrumbs.pug
@@ -22,7 +22,7 @@ p Breadcrumbs are used as navigational hierarchies to indicate current location.
       li.breadcrumb-item
         a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
       li.breadcrumb-item
-        | Search result:
+        | Search result: 
         a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre
 
 p
diff --git a/docs/src/contents/browers.pug b/docs/src/contents/browsers.pug
index dfa95cd..dfa95cd 100644
--- a/docs/src/contents/browers.pug
+++ b/docs/src/contents/browsers.pug
diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug
index f1ee876..b14cc89 100644
--- a/docs/src/contents/code.pug
+++ b/docs/src/contents/code.pug
@@ -2,7 +2,7 @@ p Code is used for styling inline and multiline code snippets.
 p
   | For inline code, you can use the #{'<code>'} element. 
   | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
-  | The #[code data-lang] ibute is rendered as the language name in the top right.
+  | The #[code data-lang] attribute is rendered as the language name in the top right.
 
 pre.code(data-lang='HTML')
   code
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
index a21357e..367fdac 100644
--- a/docs/src/contents/custom.pug
+++ b/docs/src/contents/custom.pug
@@ -177,31 +177,31 @@ p
       .color-subtitle Error
 .columns
   .column.col-3.col-md-6
-    .docs-color(style='background:#454d5d;color:#fff;')
-      .color-title #454d5d
+    .docs-color(style='background:#303742;color:#fff;')
+      .color-title #303742
       .color-subtitle Dark
   .column.col-3.col-md-6
-    .docs-color(style='background:#727e96;color:#fff;')
-      .color-title #727e96
+    .docs-color(style='background:#66758c;color:#fff;')
+      .color-title #66758c
       .color-subtitle Gray dark
   .column.col-3.col-md-6
-    .docs-color(style='background:#acb3c2;color:#fff;')
-      .color-title #acb3c2
+    .docs-color(style='background:#bcc3ce;color:#303742;')
+      .color-title #bcc3ce
       .color-subtitle Gray
   .column.col-3.col-md-6
-    .docs-color(style='background:#e7e9ed;color:#727e96;')
-      .color-title #e7e9ed
+    .docs-color(style='background:#f7f8f9;color:#303742;')
+      .color-title #f7f8f9
       .color-subtitle Gray light
   .column.col-3.col-md-6
-    .docs-color(style='background:#f0f1f4;color:#727e96;')
-      .color-title #f0f1f4
+    .docs-color(style='background:#bcc3ce;color:#303742;')
+      .color-title #bcc3ce
       .color-subtitle Border
   .column.col-3.col-md-6
-    .docs-color(style='background:#f8f9fa;color:#727e96;')
-      .color-title #f8f9fa
+    .docs-color(style='background:#f7f8f9;color:#303742;')
+      .color-title #f7f8f9
       .color-subtitle Background
   .column.col-3.col-md-6
-    .docs-color(style='background:#fff;color:#727e96;')
+    .docs-color(style='background:#fff;color:#303742;')
       .color-title #fff
       .color-subtitle Light
 
diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug
index 4e73fed..7f49b1f 100644
--- a/docs/src/contents/position.pug
+++ b/docs/src/contents/position.pug
@@ -9,12 +9,13 @@ pre.code(data-lang='HTML')
       <!-- float: left and right -->
       <div class="float-left"></div>
       <div class="float-right"></div>
-      <!-- position: relative, absolute and fixed -->
-      <div class="relative"></div>
-      <div class="absolute"></div>
-      <div class="fixed"></div>
+      <!-- position: relative, absolute, fixed and sticky -->
+      <div class="p-relative"></div>
+      <div class="p-absolute"></div>
+      <div class="p-fixed"></div>
+      <div class="p-sticky"></div>
       <!-- centered block -->
-      <div class="centered"></div>
+      <div class="p-centered"></div>
 
       <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
       <div class="m-1"></div>
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index 4cb996c..5466959 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -52,4 +52,56 @@ pre.code(data-lang='HTML')
             <td>14 October 1994</td>
           </tr>
         </tbody>
+      </table>
+
+
+.docs-demo.columns
+  .column.col-12
+    table.table.table-striped.table-scroll
+      thead
+        tr
+          th Name
+          th Rating
+          th Duration
+          th Genre
+          th Release date
+          th Director
+      tbody
+        tr
+          td The Shawshank Redemption
+          td R
+          td 2h 22min
+          td Crime, Drama
+          td 14 October 1994
+          td Frank Darabont
+        tr
+          td The Godfather
+          td R
+          td 2h 55min
+          td Crime, Drama
+          td 24 March 1972
+          td Francis Ford Coppola
+        tr
+          td Schindler's List
+          td R
+          td 3h 15min
+          td Biography, Drama, History
+          td 4 February 1994
+          td Steven Spielberg
+        tr
+          td Se7en
+          td R
+          td 2h 7min
+          td Crime, Drama, Mystery
+          td 22 September 1995
+          td David Fincher
+
+p
+  | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <table class="table table-striped table-scroll">
+        ...
       </table>
\ No newline at end of file