- {% block search_input %}{% endblock %}
- {% block book_summary %}
-
+ {% block book_sidebar %}
+ {% block search_input %}{% endblock %}
+ {% block book_summary %}
+
+ {% endblock %}
{% endblock %}
diff --git a/src/less/website/body.less b/src/less/website/body.less
index 3195b94dd67d61aa3947f548539a93738911d358..b33c04dd48c25836d41ac2f0d41f6d51532c43c6 100755
--- a/src/less/website/body.less
+++ b/src/less/website/body.less
@@ -3,38 +3,6 @@
width: 100%;
height: 100%;
- .book-body {
- position: absolute;
- top: 0px;
- right: 0px;
- left: 0px;
- bottom: 0px;
- overflow-y: auto;
-
- color: @page-color;
- background: @body-background;
- .transition(left @sidebar-transition-duration ease);
-
- .body-inner {
- position: absolute;
- top: 0px;
- right: 0px;
- left: 0px;
- bottom: 0px;
- overflow-y: auto;
- }
-
- @media (max-width: @mobileMaxWidth) {
- .transition-transform(@sidebar-transition-duration ease);
- padding-bottom: 20px;
-
- .body-inner {
- position: static;
- min-height: calc(~"100% - 50px")
- }
- }
- }
-
&.with-summary {
@media (min-width: @sidebar-breakpoint) {
.book-body {
@@ -55,4 +23,36 @@
.transition(none) !important;
}
}
-}
\ No newline at end of file
+}
+
+.book-body {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ left: 0px;
+ bottom: 0px;
+ overflow-y: auto;
+
+ color: @page-color;
+ background: @body-background;
+ .transition(left @sidebar-transition-duration ease);
+
+ .body-inner {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ left: 0px;
+ bottom: 0px;
+ overflow-y: auto;
+ }
+
+ @media (max-width: @mobileMaxWidth) {
+ .transition-transform(@sidebar-transition-duration ease);
+ padding-bottom: 20px;
+
+ .body-inner {
+ position: static;
+ min-height: calc(~"100% - 50px")
+ }
+ }
+}
diff --git a/src/less/website/header.less b/src/less/website/header.less
index c783548920da8d1cd043cf6b7d9a41f004b6aeaa..5812466f7eb7ce2b77d886ed218c9859092c3d94 100755
--- a/src/less/website/header.less
+++ b/src/less/website/header.less
@@ -1,74 +1,74 @@
-.book {
- .book-header {
- font-family: @font-family-sans;
+.book-header {
+ font-family: @font-family-sans;
- overflow: visible;
- height: @header-height;
- padding: 0px 8px;
- z-index: 2;
+ overflow: visible;
+ height: @header-height;
+ padding: 0px 8px;
+ z-index: 2;
- font-size: 0.85em;
- color: @header-color;
- background: @header-background;
+ font-size: 0.85em;
+ color: @header-color;
+ background: @header-background;
- .btn {
- display: block;
- height: @header-height;
- padding: 0px 15px;
- border-bottom: none;
- color: @header-button-color;
- text-transform: uppercase;
- line-height: @header-height;
- .box-shadow(none) !important;
- position:relative;
- font-size: @font-size-base;
+ .btn {
+ display: block;
+ height: @header-height;
+ padding: 0px 15px;
+ border-bottom: none;
+ color: @header-button-color;
+ text-transform: uppercase;
+ line-height: @header-height;
+ .box-shadow(none) !important;
+ position:relative;
+ font-size: @font-size-base;
- &:hover {
- position: relative;
- text-decoration: none;
- color: @header-button-hover-color;
- background: @header-button-hover-background;
- }
+ &:hover {
+ position: relative;
+ text-decoration: none;
+ color: @header-button-hover-color;
+ background: @header-button-hover-background;
}
+ }
- h1 {
- margin: 0px;
- font-size: 20px;
- font-weight: 200;
- text-align: center;
- line-height: @header-height;
- opacity: 0;
- .transition(opacity ease 0.4s);
+ h1 {
+ margin: 0px;
+ font-size: 20px;
+ font-weight: 200;
+ text-align: center;
+ line-height: @header-height;
+ opacity: 0;
+ .transition(opacity ease 0.4s);
- padding-left: 200px;
- padding-right: 200px;
- .transition(opacity 0.2s ease);
+ padding-left: 200px;
+ padding-right: 200px;
+ .transition(opacity 0.2s ease);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
- a, a:hover {
- color: inherit;
- text-decoration: none;
- }
+ a, a:hover {
+ color: inherit;
+ text-decoration: none;
+ }
- @media (max-width: 1000px) {
- display: none;
- }
+ @media (max-width: 1000px) {
+ display: none;
+ }
- i {
- display: none;
- }
+ i {
+ display: none;
}
+ }
- &:hover {
- h1 {
- opacity: 1;
- }
+ &:hover {
+ h1 {
+ opacity: 1;
}
}
+}
+.book {
&.is-loading {
.book-header h1 {
i {
diff --git a/src/less/website/page.less b/src/less/website/page.less
index b3859835199d430c599b3a871d2291d90755a9bc..a87392b5019aa1691fa4d65f8f99fefdac82e606 100644
--- a/src/less/website/page.less
+++ b/src/less/website/page.less
@@ -1,18 +1,18 @@
.page-wrapper {
position: relative;
outline: none;
+}
- .page-inner {
- max-width: 800px;
- margin: 0px auto;
- padding: 20px 15px 40px 15px;
+.page-inner {
+ max-width: 800px;
+ margin: 0px auto;
+ padding: 20px 15px 40px 15px;
- .btn-group {
- .btn {
- border-radius: 0px;
- background: #eee;
- border: 0px;
- }
+ .btn-group {
+ .btn {
+ border-radius: 0px;
+ background: #eee;
+ border: 0px;
}
}
}
diff --git a/src/less/website/search.less b/src/less/website/search.less
index 85874526adc48ffa61048d9a52bbf0d3e8a55f8d..97a412ca75b708beb939830419e25afb67798cf8 100644
--- a/src/less/website/search.less
+++ b/src/less/website/search.less
@@ -5,14 +5,14 @@
#book-search-input {
padding: 6px;
background: transparent;
-
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
transition: top 0.5s ease;
background: #fff;
border-bottom: 1px solid @header-border;
+ border-top: 1px solid @header-border;
+ margin-bottom: 10px;
+
+ // Move top to hide top border
+ margin-top: -1px;
input, input:focus, input:hover {
width: 100%;
diff --git a/src/less/website/summary.less b/src/less/website/summary.less
index 005f2cef3a55bbd5b473590f7d41f51ea8ee1948..3907b777848f8d484439fbb7a442fcc6c5fe4022 100755
--- a/src/less/website/summary.less
+++ b/src/less/website/summary.less
@@ -1,107 +1,100 @@
-.book {
- .book-summary {
- font-family: @font-family-sans;
+.book-summary {
+ font-family: @font-family-sans;
- position: absolute;
- top: 0px;
- left: -@sidebar-width;
- bottom: 0px;
- z-index: 1;
+ position: absolute;
+ top: 0px;
+ left: -@sidebar-width;
+ bottom: 0px;
+ z-index: 1;
+ overflow-y: auto;
- width: @sidebar-width;
- color: @sidebar-color;
- background: @sidebar-background;
- border-right: @sidebar-border-right;
+ width: @sidebar-width;
+ color: @sidebar-color;
+ background: @sidebar-background;
+ border-right: @sidebar-border-right;
- .transition(left @sidebar-transition-duration ease);
+ .transition(left @sidebar-transition-duration ease);
- ul.summary {
- position: absolute;
- top: @search-height;
- left: 0px;
- right: 0px;
- bottom: 0px;
+ ul.summary {
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
- overflow-y: auto;
+ .transition(top 0.5s ease);
+ li {
list-style: none;
- margin: 0px;
- padding: 0px;
- .transition(top 0.5s ease);
-
- li {
- list-style: none;
-
- &.header {
- padding: @sidebar-link-padding-v @sidebar-link-padding-h;
- padding-top: 20px;
- text-transform: uppercase;
- color: @sidebar-header-color;
- }
+ &.header {
+ padding: @sidebar-link-padding-v @sidebar-link-padding-h;
+ padding-top: 20px;
+ text-transform: uppercase;
+ color: @sidebar-header-color;
+ }
- &.divider {
- height: 1px;
- margin: 7px 0;
- overflow: hidden;
- background: @sidebar-divider-color;
- }
+ &.divider {
+ height: 1px;
+ margin: 7px 0;
+ overflow: hidden;
+ background: @sidebar-divider-color;
+ }
- i.fa-check {
- display: none;
- position: absolute;
- right: 9px;
- top: 16px;
- font-size: 9px;
- color: @sidebar-icon-color;
- }
+ i.fa-check {
+ display: none;
+ position: absolute;
+ right: 9px;
+ top: 16px;
+ font-size: 9px;
+ color: @sidebar-icon-color;
+ }
- &.done {
- > a {
- color: @sidebar-link-completed;
- font-weight: @sidebar-link-completed-weight;
+ &.done {
+ > a {
+ color: @sidebar-link-completed;
+ font-weight: @sidebar-link-completed-weight;
- i {
- display: inline;
- }
+ i {
+ display: inline;
}
}
+ }
- a, span {
- display: block;
- padding: @sidebar-link-padding-v @sidebar-link-padding-h;
- border-bottom: none;
- color: @sidebar-link-color;
- background: @sidebar-link-background;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- position: relative;
- }
+ a, span {
+ display: block;
+ padding: @sidebar-link-padding-v @sidebar-link-padding-h;
+ border-bottom: none;
+ color: @sidebar-link-color;
+ background: @sidebar-link-background;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ }
- a:hover {
- text-decoration: underline;
- }
+ a:hover {
+ text-decoration: underline;
+ }
- &.active > a {
- color: @sidebar-link-hover-color;
- background: @sidebar-link-hover-background;
- text-decoration: none;
- }
+ &.active > a {
+ color: @sidebar-link-hover-color;
+ background: @sidebar-link-hover-background;
+ text-decoration: none;
+ }
- ul {
- padding-left: @sidebar-nested-padding;
- }
+ ul {
+ padding-left: @sidebar-nested-padding;
}
}
+ }
- @media (max-width: @sidebar-breakpoint) {
- width: calc(~"100% - 60px");
- bottom: 0px;
- left: -100%;
- }
+ @media (max-width: @sidebar-breakpoint) {
+ width: calc(~"100% - 60px");
+ bottom: 0px;
+ left: -100%;
}
+}
+.book {
&.with-summary {
.book-summary {
left: 0px;
diff --git a/src/less/website/variables.less b/src/less/website/variables.less
index 044577466e407acff0130edc30ed09c2bc95ca0f..f26b1cab1a4237c18f0821963f44f92821b80cd8 100644
--- a/src/less/website/variables.less
+++ b/src/less/website/variables.less
@@ -51,7 +51,6 @@
@sidebar-link-completed-weight: normal;
// Search
-@search-height: 50px;
@search-padding-default: 1.5rem;
@search-results-opacity: 0.95;
@search-highlight-color: rgba(255, 220, 0, 0.4);