Refactor aside menus, add extra wrapper
This commit is contained in:
Alex Shpak
parent
012ccee53d
commit
d9fe59a6e9
6 changed files with 22 additions and 19 deletions
10
README.md
10
README.md
|
|
@ -69,12 +69,12 @@ hugo server --minify --theme book
|
|||
|
||||
### File tree menu (default)
|
||||
|
||||
By default, the theme will render pages from the `content/docs` section as a menu in a tree structure.
|
||||
By default, the theme will render pages from the `content/docs` section as a menu in a tree structure.
|
||||
You can set `title` and `weight` in the front matter of pages to adjust the order and titles in the menu.
|
||||
|
||||
### Leaf bundle menu
|
||||
|
||||
You can also use leaf bundle and the content of its `index.md` file as menu.
|
||||
You can also use leaf bundle and the content of its `index.md` file as menu.
|
||||
Given you have the following file structure:
|
||||
|
||||
```
|
||||
|
|
@ -108,14 +108,14 @@ And Enable it by setting `BookMenuBundle: /menu` in Site configuration.
|
|||
|
||||
## Blog
|
||||
|
||||
A simple blog is supported in the section `posts`.
|
||||
A simple blog is supported in the section `posts`.
|
||||
A blog is not the primary usecase of this theme, so it has only minimal features.
|
||||
|
||||
## Configuration
|
||||
|
||||
### Site Configuration
|
||||
|
||||
There are a few configuration options that you can add to your `config.toml` file.
|
||||
There are a few configuration options that you can add to your `config.toml` file.
|
||||
You can also see the `yaml` example [here](https://github.com/alex-shpak/hugo-book/blob/master/exampleSite/config.yaml).
|
||||
|
||||
```toml
|
||||
|
|
@ -302,7 +302,7 @@ If you want lower maintenance, use one of the released versions. If you want to
|
|||
|
||||
### [Extra credits to contributors](https://github.com/alex-shpak/hugo-book/graphs/contributors)
|
||||
|
||||
Contributions are welcome and I will review and consider pull requests.
|
||||
Contributions are welcome and I will review and consider pull requests.
|
||||
Primary goals are:
|
||||
|
||||
- Keep it simple.
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ ul.pagination {
|
|||
flex: 0 0 $menu-width;
|
||||
font-size: $font-size-14;
|
||||
|
||||
nav {
|
||||
.book-menu-content {
|
||||
width: $menu-width;
|
||||
padding: $padding-16;
|
||||
background: var(--body-background);
|
||||
|
|
@ -209,7 +209,7 @@ ul.pagination {
|
|||
flex: 0 0 $toc-width;
|
||||
font-size: $font-size-12;
|
||||
|
||||
> nav {
|
||||
.book-toc-content {
|
||||
width: $toc-width;
|
||||
padding: $padding-16;
|
||||
|
||||
|
|
@ -297,7 +297,8 @@ ul.pagination {
|
|||
}
|
||||
|
||||
// Responsive styles
|
||||
aside nav,
|
||||
.book-menu-content,
|
||||
.book-toc-content,
|
||||
.book-page,
|
||||
.book-header aside,
|
||||
.markdown {
|
||||
|
|
@ -336,7 +337,7 @@ aside nav,
|
|||
visibility: initial;
|
||||
}
|
||||
|
||||
.book-menu nav {
|
||||
.book-menu .book-menu-content {
|
||||
transform: translateX($menu-width);
|
||||
box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -367,7 +368,7 @@ aside nav,
|
|||
|
||||
//for RTL support
|
||||
body[dir="rtl"] #menu-control:checked + main {
|
||||
.book-menu nav {
|
||||
.book-menu .book-menu-content {
|
||||
transform: translateX(-$menu-width);
|
||||
}
|
||||
}
|
||||
|
|
@ -376,8 +377,8 @@ aside nav,
|
|||
// Extra space for big screens
|
||||
@media screen and (min-width: $container-max-width) {
|
||||
.book-page,
|
||||
.book-menu nav,
|
||||
.book-toc > nav {
|
||||
.book-menu .book-menu-content,
|
||||
.book-toc .book-toc-content {
|
||||
padding: $padding-16 * 2 $padding-16;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"Target":"book.min.5284606b3d4d63899357ff95f4032c205e62b86963d9241c255c46093296e5a0.css","MediaType":"text/css","Data":{"Integrity":"sha256-UoRgaz1NY4mTV/+V9AMsIF5iuGlj2SQcJVxGCTKW5aA="}}
|
||||
{"Target":"book.min.6c7c6446dfdee7c8c933e9bbc6e80ee3ed6c913b2a59519f2092c3c6a9d63e55.css","MediaType":"text/css","Data":{"Integrity":"sha256-bHxkRt/e58jJM+m7xugO4+1skTsqWVGfIJLDxqnWPlU="}}
|
||||
|
|
@ -12,7 +12,9 @@
|
|||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
{{ template "menu" . }} <!-- Left menu Content -->
|
||||
<div class="book-menu-content">
|
||||
{{ template "menu" . }} <!-- Left menu Content -->
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="book-page">
|
||||
|
|
@ -36,11 +38,9 @@
|
|||
|
||||
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
|
||||
<aside class="book-toc">
|
||||
<nav>
|
||||
{{ partial "docs/inject/toc-before" . }}
|
||||
<div class="book-toc-content">
|
||||
{{ template "toc" . }} <!-- Table of Contents -->
|
||||
{{ partial "docs/inject/toc-after" . }}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
{{ end }}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
{{ partial "docs/inject/toc-before" . }}
|
||||
{{ .TableOfContents }}
|
||||
{{ partial "docs/inject/toc-after" . }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue