Skip to content

T
theme-apachecn

OpenDocCN / theme-apachecn

通知 0
Star 0
Fork 0
T
theme-apachecn

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 076aff9d 编写于 作者: S Samy Pessé
浏览文件
操作

Make customization of sidebar more easy

上级 7802f7bd
隐藏空白更改
内联 并排
Showing with 184 addition and 190 deletion
_layouts/website/page.html
浏览文件 @ 076aff9d
......@@ -29,11 +29,13 @@
{% block body %}
<div class="book">
<div class="book-summary">
{% block search_input %}{% endblock %}
{% block book_summary %}
<nav role="navigation">
{% include "website/summary.html" %}
</nav>
{% block book_sidebar %}
{% block search_input %}{% endblock %}
{% block book_summary %}
<nav role="navigation">
{% include "website/summary.html" %}
</nav>
{% endblock %}
{% endblock %}
</div>
......
src/less/website/body.less
浏览文件 @ 076aff9d
......@@ -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")
}
}
}
src/less/website/header.less
浏览文件 @ 076aff9d
.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 {
......
src/less/website/page.less
浏览文件 @ 076aff9d
.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;
}
}
}
src/less/website/search.less
浏览文件 @ 076aff9d
......@@ -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%;
......
src/less/website/summary.less
浏览文件 @ 076aff9d
.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;
......
src/less/website/variables.less
浏览文件 @ 076aff9d
......@@ -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);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或