Implements the "keep the header" features requested in #18.

Resolves #18. Signed-off-by: Tao He <sighingnow@gmail.com>
sighingnow · Mar 27, 2022 · 0cbb5a2 · 0cbb5a2
1 parent 036963c
commit 0cbb5a2
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 52 deletions.
diff --git a/_includes/body.html b/_includes/body.html
@@ -1,33 +1,20 @@
-<div class="body-inner">
-    <div class="book-header" role="navigation">
-        <!-- Title -->
-        <h1>
-            <i class="fa fa-circle-o-notch fa-spin"></i>
-            {% if page.title %}
-                <a href="." >{{ page.title | escape }}</a>
-            {% else %}
-                <a href="." >{{ site.title | escape }}</a>
-            {% endif %}
-        </h1>
-    </div>
-    <div class="page-wrapper" tabindex="-1" role="main">
-        <div class="page-inner">
-            <div id="book-search-results">
-                <div class="search-noresults">
-                    <section class="normal markdown-section">
-
-                        {% if page.title %}
-                            <h1 id="{{ page.id }}">{{ page.title | escape }}</h1>
-                        {% else %}
-                            <h1 id="{{ page.id }}">{{ site.title | escape }}</h1>
-                        {% endif %}
+<div class="page-wrapper" tabindex="-1" role="main">
+    <div class="page-inner">
+        <div id="book-search-results">
+            <div class="search-noresults">
+                <section class="normal markdown-section">
 
-                        {{ content }}
-                    </section>
-                </div>
+                    {% if page.title %}
+                        <h1 id="{{ page.id }}">{{ page.title | escape }}</h1>
+                    {% else %}
+                        <h1 id="{{ page.id }}">{{ site.title | escape }}</h1>
+                    {% endif %}
 
-                {%- include search.html -%}
+                    {{ content }}
+                </section>
             </div>
+
+            {%- include search.html -%}
         </div>
     </div>
 </div>
diff --git a/_includes/head.html b/_includes/head.html
@@ -27,6 +27,8 @@
 
 <link rel="stylesheet" href="{{site.baseurl}}/gitbook/rouge/{{ site.syntax_highlighter_style }}.css">
 
+<link rel="stylesheet" href="{{site.baseurl}}/gitbook/custom.css">
+
 <meta name="HandheldFriendly" content="true"/>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <meta name="apple-mobile-web-app-capable" content="yes">

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -16,13 +16,27 @@
             {%- include toc-date.html -%}
 
             <div class="book-body">
-                {%- include body.html -%}
-
-                {% if reversed_posts %}
-                    <a href="{{site.baseurl}}{{reversed_posts.first.url}}" class="navigation navigation-next navigation-unique" aria-label="Next page: {{reversed_posts.first.title}}">
-                        <i class="fa fa-angle-right"></i>
-                    </a>
-                {% endif %}
+                <div class="book-header" role="navigation">
+                    <!-- Title -->
+                    <h1>
+                        <i class="fa fa-circle-o-notch fa-spin"></i>
+                        {% if page.title %}
+                            <a href="." >{{ page.title | escape }}</a>
+                        {% else %}
+                            <a href="." >{{ site.title | escape }}</a>
+                        {% endif %}
+                    </h1>
+                </div>
+
+                <div class="body-inner">
+                    {%- include body.html -%}
+
+                    {% if reversed_posts %}
+                        <a href="{{site.baseurl}}{{reversed_posts.first.url}}" class="navigation navigation-next navigation-unique" aria-label="Next page: {{reversed_posts.first.title}}">
+                            <i class="fa fa-angle-right"></i>
+                        </a>
+                    {% endif %}
+                </div>
             </div>
 
             <script>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -20,23 +20,37 @@
             {%- include toc-date.html -%}
 
             <div class="book-body">
-                {%- include body.html -%}
-
-                {% if page.previous %}
-                    <a href="{{site.baseurl}}{{page.previous.url}}" class="navigation navigation-prev navigation-unique" aria-label="Previous page: {{page.previous.title}}">
-                        <i class="fa fa-angle-left"></i>
-                    </a>
-                {% else %}
-                    <a href="{{site.baseurl}}/" class="navigation navigation-prev navigation-unique" aria-label="Previous page: {{site.title}}">
-                        <i class="fa fa-angle-left"></i>
-                    </a>
-                {% endif %}
-
-                {% if page.next %}
-                    <a href="{{site.baseurl}}{{page.next.url}}" class="navigation navigation-next navigation-unique" aria-label="Next page: {{page.next.title}}">
-                        <i class="fa fa-angle-right"></i>
-                    </a>
-                {% endif %}
+                <div class="book-header" role="navigation">
+                    <!-- Title -->
+                    <h1>
+                        <i class="fa fa-circle-o-notch fa-spin"></i>
+                        {% if page.title %}
+                            <a href="." >{{ page.title | escape }}</a>
+                        {% else %}
+                            <a href="." >{{ site.title | escape }}</a>
+                        {% endif %}
+                    </h1>
+                </div>
+
+                <div class="body-inner">
+                    {%- include body.html -%}
+
+                    {% if page.previous %}
+                        <a href="{{site.baseurl}}{{page.previous.url}}" class="navigation navigation-prev navigation-unique" aria-label="Previous page: {{page.previous.title}}">
+                            <i class="fa fa-angle-left"></i>
+                        </a>
+                    {% else %}
+                        <a href="{{site.baseurl}}/" class="navigation navigation-prev navigation-unique" aria-label="Previous page: {{site.title}}">
+                            <i class="fa fa-angle-left"></i>
+                        </a>
+                    {% endif %}
+
+                    {% if page.next %}
+                        <a href="{{site.baseurl}}{{page.next.url}}" class="navigation navigation-next navigation-unique" aria-label="Next page: {{page.next.title}}">
+                            <i class="fa fa-angle-right"></i>
+                        </a>
+                    {% endif %}
+                </div>
             </div>
 
             <script>

diff --git a/gitbook/custom.css b/gitbook/custom.css
@@ -0,0 +1,55 @@
+.book-body {
+    overflow-y: hidden;
+}
+
+.book-body .book-header {
+    position: fixed;
+    width: calc(100% - 300px);
+}
+
+.book-body .body-inner {
+    overflow-y: scroll;
+    margin-top: 50px;
+    height: calc(100% - 50px);
+    min-height: calc(100% - 50px);
+}
+
+.book-body .body-inner .page-wrapper {
+    min-height: calc(100% - 46px);
+}
+
+.book-body .body-inner .page-wrapper .page-inner {
+    padding-bottom: 20px;
+}
+
+@media (max-width: 1240px) {
+    .book-body .body-inner .navigation {
+        max-width: calc(50% - 3px);
+        width: calc(50% - 3px);
+    }
+}
+
+
+/* scrollbar */
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+::-webkit-scrollbar-track-piece {
+    /* background-color: rgba(125, 125, 125, 0.2); */
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+
+  height: 5px;
+  background-color: rgba(7, 17, 27, .2);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  width: 5px;
+  background-color: rgba(125, 125, 125, 0.2);
+  -webkit-border-radius: 6px;
+}
diff --git a/gitbook/gitbook-plugin-back-to-top-button/plugin.js b/gitbook/gitbook-plugin-back-to-top-button/plugin.js
@@ -14,7 +14,7 @@ require([
             $(this).css('cursor', 'auto');
         });
 
-        $('.book-body,.body-inner').on('scroll', function () {
+        $('.book-body,.body-inner,.page-wrapper').on('scroll', function () {
             if ($(this).scrollTop() > 100) { 
                 $('.back-to-top').fadeIn();
             } else {