adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor aside menus, add extra wrapper

Browse source
This commit is contained in:
Alex Shpak 2021-01-26 22:20:17 +01:00
parent 012ccee53d
commit d9fe59a6e9
6 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/_main.scss
View file

@ -99,7 +99,7 @@ ul.pagination {
flex: 0 0 $menu-width; flex: 0 0 $menu-width;
font-size: $font-size-14; font-size: $font-size-14;
nav { .book-menu-content {
width: $menu-width; width: $menu-width;
padding: $padding-16; padding: $padding-16;
background: var(--body-background); background: var(--body-background);
@ -209,7 +209,7 @@ ul.pagination {
flex: 0 0 $toc-width; flex: 0 0 $toc-width;
font-size: $font-size-12; font-size: $font-size-12;
> nav { .book-toc-content {
width: $toc-width; width: $toc-width;
padding: $padding-16; padding: $padding-16;
@ -297,7 +297,8 @@ ul.pagination {
} }
// Responsive styles // Responsive styles
aside nav, .book-menu-content,
.book-toc-content,
.book-page, .book-page,
.book-header aside, .book-header aside,
.markdown { .markdown {
@ -336,7 +337,7 @@ aside nav,
visibility: initial; visibility: initial;
} }
.book-menu nav { .book-menu .book-menu-content {
transform: translateX($menu-width); transform: translateX($menu-width);
box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1); box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
} }
@ -367,7 +368,7 @@ aside nav,
//for RTL support //for RTL support
body[dir="rtl"] #menu-control:checked + main { body[dir="rtl"] #menu-control:checked + main {
.book-menu nav { .book-menu .book-menu-content {
transform: translateX(-$menu-width); transform: translateX(-$menu-width);
} }
} }
@ -376,8 +377,8 @@ aside nav,
// Extra space for big screens // Extra space for big screens
@media screen and (min-width: $container-max-width) { @media screen and (min-width: $container-max-width) {
.book-page, .book-page,
.book-menu nav, .book-menu .book-menu-content,
.book-toc > nav { .book-toc .book-toc-content {
padding: $padding-16 * 2 $padding-16; padding: $padding-16 * 2 $padding-16;
} }
} }

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
View file

File diff suppressed because one or more lines are too long

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
View file

@ -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="}}

8
layouts/_default/baseof.html
View file

@ -12,7 +12,9 @@
<input type="checkbox" class="hidden toggle" id="toc-control" /> <input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex"> <main class="container flex">
<aside class="book-menu"> <aside class="book-menu">
<div class="book-menu-content">
{{ template "menu" . }} <!-- Left menu Content --> {{ template "menu" . }} <!-- Left menu Content -->
</div>
</aside> </aside>
<div class="book-page"> <div class="book-page">
@ -36,11 +38,9 @@
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }} {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
<aside class="book-toc"> <aside class="book-toc">
<nav> <div class="book-toc-content">
{{ partial "docs/inject/toc-before" . }}
{{ template "toc" . }} <!-- Table of Contents --> {{ template "toc" . }} <!-- Table of Contents -->
{{ partial "docs/inject/toc-after" . }} </div>
</nav>
</aside> </aside>
{{ end }} {{ end }}
</main> </main>

2
layouts/partials/docs/toc.html
View file

@ -1 +1,3 @@
{{ partial "docs/inject/toc-before" . }}
{{ .TableOfContents }} {{ .TableOfContents }}
{{ partial "docs/inject/toc-after" . }}