add the header depth to two column layouts and add appropriate style

mixu · Oct 11, 2015 · 4089a05 · 4089a05
1 parent 8033da8
commit 4089a05
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 46 deletions.
diff --git a/builtin/partials/toc.hbs b/builtin/partials/toc.hbs
@@ -1,5 +1,5 @@
 <ul class="nav nav-list">
   {{#each headings}}
-    <li><a href="#{{id}}">{{text}}</a></li>
+    <li class="sidebar-header-{{depth}}"><a href="#{{id}}">{{text}}</a></li>
   {{/each}}
 </ul>
diff --git a/layouts/mixu-bootstrap-2col/assets/css/style.css b/layouts/mixu-bootstrap-2col/assets/css/style.css
@@ -0,0 +1,24 @@
+body {
+  background-color: #f6f6f6;
+  padding-top: 30px;
+}
+.main {
+  background-color: #fff;
+  border: 1px solid #CCC;
+  padding: 40px;
+}
+.container {
+  width: 1100px;
+}
+.nav-list {
+  font-size: 17px;
+}
+.nav-header {
+  font-size: 17px;
+  text-transform: none;
+  line-height: 30px;
+}
+.sidebar-header-2 { margin-left: 10px; }
+.sidebar-header-3 { margin-left: 20px; }
+.sidebar-header-4 { margin-left: 30px; }
+.sidebar-header-5 { margin-left: 40px; }
diff --git a/layouts/mixu-bootstrap-2col/page.html b/layouts/mixu-bootstrap-2col/page.html
@@ -4,31 +4,10 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>{{title}}</title>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap.css'}}"/>
-    <style>
-      body {
-        background-color: #f6f6f6;
-        padding-top: 30px;
-      }
-      .main {
-        background-color: #fff;
-        border: 1px solid #CCC;
-        padding: 40px;
-      }
-      .container {
-        width: 1100px;
-      }
-      .nav-list {
-        font-size: 17px;
-      }
-      .nav-header {
-        font-size: 17px;
-        text-transform: none;
-        line-height: 30px;
-      }
-    </style>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap-responsive.css'}}"/>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/pilcrow.css'}}"/>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/hljs-github.min.css'}}"/>
+    <link type="text/css" rel="stylesheet" href="{{asset 'css/style.css'}}"/>
   </head>
 <body>
 

diff --git a/layouts/mixu-gray/assets/css/style.css b/layouts/mixu-gray/assets/css/style.css
@@ -0,0 +1,25 @@
+body {
+  background: url('{{asset "img/textured_paper.png"}}') repeat top left;
+  background-color: #f6f6f6;
+}
+.main {
+  padding: 0px 40px;
+  background: rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 20px #d2d2d2;
+  box-shadow: 0 0 20px #d2d2d2;
+}
+.container {
+  width: 1100px;
+}
+.nav-list {
+  font-size: 17px;
+}
+.nav-header {
+  font-size: 17px;
+  text-transform: none;
+  line-height: 30px;
+}
+.sidebar-header-2 { margin-left: 10px; }
+.sidebar-header-3 { margin-left: 20px; }
+.sidebar-header-4 { margin-left: 30px; }
+.sidebar-header-5 { margin-left: 40px; }
diff --git a/layouts/mixu-gray/page.html b/layouts/mixu-gray/page.html
@@ -5,32 +5,10 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>{{title}}</title>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap.css'}}"/>
-    <style>
-      body {
-        background: url('{{asset "img/textured_paper.png"}}') repeat top left;
-        background-color: #f6f6f6;
-      }
-      .main {
-        padding: 0px 40px;
-        background: rgba(255,255,255,0.5);
-        -webkit-box-shadow: 0 0 20px #d2d2d2;
-        box-shadow: 0 0 20px #d2d2d2;
-      }
-      .container {
-        width: 1100px;
-      }
-      .nav-list {
-        font-size: 17px;
-      }
-      .nav-header {
-        font-size: 17px;
-        text-transform: none;
-        line-height: 30px;
-      }
-    </style>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap-responsive.css'}}"/>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/pilcrow.css'}}"/>
     <link type="text/css" rel="stylesheet" href="{{asset 'css/hljs-github.min.css'}}"/>
+    <link type="text/css" rel="stylesheet" href="{{asset 'css/style.css'}}"/>
   </head>
 <body>