Style page with gitbook-markdown-css

5 files changed, 27 insertions, 2 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Page.less b/packages/gitbook-plugin-theme-default/less/Page.less
new file mode 100644
index 0000000..979377c
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/less/Page.less
@@ -0,0 +1,15 @@
+.Page {
+    position: relative;
+    outline: none;
+    width: 100%;
+    max-width: @page-width;
+    margin: 0px auto;
+    padding: 20px 15px 40px 15px;
+
+    .gitbook-markdown(@md-color: @page-color, @md-line-height: @page-line-height);
+
+    .glossary-term {
+        cursor: help;
+        text-decoration: underline;
+    }
+}
diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less
index 957d229..8acbdf8 100644
--- a/packages/gitbook-plugin-theme-default/less/main.less
+++ b/packages/gitbook-plugin-theme-default/less/main.less
@@ -1,10 +1,12 @@
 @import "../node_modules/preboot/less/preboot.less";
+@import "../node_modules/gitbook-markdown-css/less/mixin.less";
 
 @import "reset.less";
 @import "variables.less";
 
 @import "Sidebar.less";
 @import "Summary.less";
+@import "Page.less";
 
 body, html {
     margin: 0px;
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index a988847..ff46cfc 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -7,3 +7,7 @@
 @summary-article-padding-h:   15px;
 @summary-article-color:       hsl(207, 15%, 25%);
 @summary-article-hover-color: hsl(207, 100%, 50%);
+// Page
+@page-width:                  800px;
+@page-color:                  #333333;
+@page-line-height:            1.7;
diff --git a/packages/gitbook-plugin-theme-default/src/components/Page.js b/packages/gitbook-plugin-theme-default/src/components/Page.js
index dda8eba..a7d8ef7 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Page.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Page.js
@@ -11,7 +11,9 @@ const Page = React.createClass({
 
         return (
             <div className="Page page-wrapper">
-                <GitBook.HTMLContent html={page.content} />
+                <GitBook.InjectedComponent matching={{ role: 'page:container' }} props={this.props}>
+                    <GitBook.HTMLContent html={page.content} />
+                </GitBook.InjectedComponent>
             </div>
         );
     }
diff --git a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
index de89f97..9a60ff4 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
@@ -16,7 +16,9 @@ const Toolbar = React.createClass({
     render() {
         return (
             <div className="Toolbar book-toolbar">
-                <button onClick={this.onToggle}>Toggle</button>
+                <GitBook.Button onClick={this.onToggle}>
+                    <GitBook.Icon id="align-justify" />
+                </GitBook.Button>
                 <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} />
                 <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} />
             </div>