diff options
| author | qiugits <qiu.gits@gmail.com> | 2018-06-24 22:08:08 +0300 |
|---|---|---|
| committer | qiugits <qiu.gits@gmail.com> | 2018-06-24 22:08:08 +0300 |
| commit | a34c29a1ac7d0141846ae75a7048013de4eb9d21 (patch) | |
| tree | fb55a500957b9cf2e1449def6f65ff3baaa264fe | |
| parent | d035734cd9b90c88ce38c498beb63d0caa703a9c (diff) | |
Update: sticky side can be scrolled alone, while main content scrolls smoothly.v0.2.2
| -rw-r--r-- | layouts/_default/baseof.html | 8 | ||||
| -rw-r--r-- | layouts/_default/single.html | 4 | ||||
| -rw-r--r-- | static/assets/style.css | 24 |
3 files changed, 20 insertions, 16 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 25be3db..5a66fe0 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -31,9 +31,11 @@ {{ end }} </div> - <div id="side" class="pr-3"> - {{ block "side" . }} - {{ end }} + <div id="side" class="pr-1"> + <aside class="pr-3"> + {{ block "side" . }} + {{ end }} + </aside> </div> </div> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index b01f972..11f6576 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -17,12 +17,10 @@ {{ define "side" }} {{ if and (gt .WordCount 0 ) (ne .Params.toc "false") }} -<aside> - <div id="toc" class="Box Box--blue"> + <div id="toc" class="Box Box--blue mb-3"> <b>{{.Title}}</b> {{ .TableOfContents }} </div> -</aside> {{ end }} {{ end }} diff --git a/static/assets/style.css b/static/assets/style.css index cb44861..f638dd9 100644 --- a/static/assets/style.css +++ b/static/assets/style.css @@ -5,26 +5,34 @@ #holy { display: grid; - grid-template-rows: auto calc(100vh - 55px); - grid-template-columns: 1fr 230px; + grid-template-rows: auto 1fr; + grid-template-columns: 1fr auto; grid-template-areas: "header header" "main side"; } #header { grid-area: header; - position: sticky; - top: 0; } #main { grid-area: main; - overflow: auto; } #side { grid-area: side; - overflow: auto; + width: 230px; +} +aside { + position: sticky; + top: 0; + max-height: 100vh; + display: block; + overflow-y: scroll; } +#toc { + margin-top: 1.5rem; + padding: 0.7rem; +} #toc * { list-style: none; display: block; @@ -32,10 +40,6 @@ overflow: hidden; text-overflow: ellipsis; } -#toc { - margin-top: 1.5rem; - padding: 0.7rem; -} #toc ul { padding-left: 0.8rem; } |