From 3455a3497c421b9b46db0e7978601dd40c5a97e5 Mon Sep 17 00:00:00 2001 From: razonyang Date: Tue, 27 Jul 2021 16:31:14 +0800 Subject: [PATCH] Move the TOC button to post panel --- assets/css/main.css | 2 +- layouts/partials/post/panel.html | 1 + layouts/partials/post/panel/toc.html | 8 ++++++++ layouts/partials/post/toc.html | 3 --- src/scss/_post.scss | 8 -------- 5 files changed, 10 insertions(+), 12 deletions(-) create mode 100644 layouts/partials/post/panel/toc.html diff --git a/assets/css/main.css b/assets/css/main.css index fbdb0ba21..bfb00c89b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -7,4 +7,4 @@ */@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;font-display:block;src:url("../fonts/fa-solid-900.eot");src:url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),url("../fonts/fa-solid-900.woff2") format("woff2"),url("../fonts/fa-solid-900.woff") format("woff"),url("../fonts/fa-solid-900.ttf") format("truetype"),url("../fonts/fa-solid-900.svg#fontawesome") format("svg")}.fa,.fas{font-family:'Font Awesome 5 Free';font-weight:900}/*! * Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - */@font-face{font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;font-display:block;src:url("../fonts/fa-brands-400.eot");src:url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),url("../fonts/fa-brands-400.woff2") format("woff2"),url("../fonts/fa-brands-400.woff") format("woff"),url("../fonts/fa-brands-400.ttf") format("truetype"),url("../fonts/fa-brands-400.svg#fontawesome") format("svg")}.fab{font-family:'Font Awesome 5 Brands';font-weight:400}.fa-rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.bg-blue{background-color:#1564bf !important}.bg-blue-gray{background-color:#34515e !important}.bg-brown{background-color:#795548 !important}.bg-cyan{background-color:#00838f !important}.bg-green{background-color:#2e7d32 !important}.bg-indigo{background-color:#3f51b5 !important}.bg-orange{background-color:#bb4d00 !important}.bg-pink{background-color:#c2185b !important}.bg-purple{background-color:#7e57c2 !important}.bg-red{background-color:#d32f2f !important}.bg-teal{background-color:#00796b !important}.bg-yellow{background-color:#bc5100 !important}.text-accent{color:var(--hbs-accent) !important}.palette-blue{--hbs-primary: #1564bf;--hbs-primary-light: #5e91f2;--hbs-accent: var(--hbs-primary)}.palette-blue-gray{--hbs-primary: #34515e;--hbs-primary-light: #8eacbb;--hbs-accent: var(--hbs-primary)}.palette-brown{--hbs-primary: #795548;--hbs-primary-light: #a98274;--hbs-accent: var(--hbs-primary)}.palette-cyan{--hbs-primary: #00838f;--hbs-primary-light: #4fb3bf;--hbs-accent: var(--hbs-primary)}.palette-green{--hbs-primary: #2e7d32;--hbs-primary-light: #60ad5e;--hbs-accent: var(--hbs-primary)}.palette-indigo{--hbs-primary: #3f51b5;--hbs-primary-light: #757de8;--hbs-accent: var(--hbs-primary)}.palette-orange{--hbs-primary: #bb4d00;--hbs-primary-light: #ffad42;--hbs-accent: var(--hbs-primary)}.palette-pink{--hbs-primary: #c2185b;--hbs-primary-light: #fa5788;--hbs-accent: var(--hbs-primary)}.palette-purple{--hbs-primary: #7e57c2;--hbs-primary-light: #b085f5;--hbs-accent: var(--hbs-primary)}.palette-red{--hbs-primary: #d32f2f;--hbs-primary-light: #ff6659;--hbs-accent: var(--hbs-primary)}.palette-teal{--hbs-primary: #00796b;--hbs-primary-light: #48a999;--hbs-accent: var(--hbs-primary)}.palette-yellow{--hbs-primary: #bc5100;--hbs-primary-light: #ffb04c;--hbs-accent: var(--hbs-primary)}.palette{height:1rem;width:1rem;margin-right:0.5rem}.palette.active::after{content:"√"}.mode-light,:root{--hbs-background: #e9ecef;--hbs-on-background: var(--bs-dark);--hbs-surface: #fff;--hbs-on-surface: var(--bs-dark);--hbs-primary-text: rgba(0,0,0,0.87);--hbs-secondary-text: rgba(0,0,0,0.54);--hbs-disabled-text: rgba(0,0,0,0.38);--hbs-accent: var(--hbs-primary);--hbs-shadow: rgba(0, 0, 0, 0.075);--hbs-navbar-bg: var(--hbs-primary)}.mode-dark{--hbs-background: #121212;--hbs-on-background: #fff;--hbs-surface: #1e1e1e;--hbs-on-surface: #fff;--hbs-primary-text: #fff;--hbs-secondary-text: rgba(225,225,225,0.7);--hbs-disabled-text: rgba(225,225,225,0.5);--hbs-accent: var(--hbs-primary-light);--hbs-shadow: rgba(0, 0, 0, 0.75);--hbs-navbar-bg: var(--hbs-surface)}#modeSwitcher{background-image:url("../images/icons/light.png");height:1.2rem;width:2.5rem;margin-bottom:0.25rem}#modeSwitcher:focus{background-image:url("../images/icons/light.png")}#modeSwitcher:checked{background-image:url("../images/icons/dark.png")}:root{--mode: none;--hbs-font-size: 1rem}@media (prefers-color-scheme: dark){:root{--mode: dark}:root:not(.mode-dark){--hbs-background: #121212;--hbs-on-background: #fff;--hbs-surface: #1e1e1e;--hbs-on-surface: #fff;--hbs-primary-text: #fff;--hbs-secondary-text: rgba(225,225,225,0.7);--hbs-disabled-text: rgba(225,225,225,0.5);--hbs-accent: var(--hbs-primary-light);--hbs-shadow: rgba(0, 0, 0, 0.75);--hbs-navbar-bg: var(--hbs-surface)}}html{position:relative}html,body{height:100%}body{background-color:var(--hbs-background);color:var(--hbs-on-background);display:flex;flex-flow:column;font-family:var(--bs-font-sans-serif);font-size:var(--hbs-font-size)}a{text-decoration:none;color:var(--hbs-primary-tex)}a:hover{color:var(--hbs-accent)}.btn{background-color:var(--hbs-accent);color:#fff}.btn:hover{color:#fff}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5{margin:1.5rem 0}table{color:var(--color)}main{margin-bottom:2rem}ul{padding-left:1.5rem}.surface{background-color:var(--hbs-surface);border-radius:0.25rem;box-shadow:0 0.5rem 1rem var(--hbs-shadow);color:var(--hbs-on-surface);margin-bottom:2rem;padding:1rem}.list-group-item .active{background-color:var(--hbs-accent);border:var(--hbs-accent)}.fa-fw{margin-right:0.25rem}.setting{margin-bottom:1rem}.white-space-pre-wrap{white-space:pre-wrap}.archive ul{padding-left:2rem}.archive .post-title,.archive .post-date{color:var(--hbs-secondary-text)}blockquote{background:var(--bs-light);border-left:0.5rem solid var(--hbs-accent);color:var(--hbs-on-surface);background-color:var(--hbs-surface);padding:1.2rem 2.5rem 0.2rem;position:relative}blockquote::before{content:"\201C";color:var(--hbs-accent);font-size:4em;position:absolute;left:0.5rem;top:-1rem}.breadcrumb-item .active{color:var(--hbs-secondary-text)}.navbar{background-color:var(--hbs-navbar-bg);color:rgba(225,225,225,0.7)}.navbar a:hover,.navbar a:focus,.navbar a:active,.navbar a.active{color:#fff}.search-bar .form-control{background-color:var(--hbs-background);border-color:var(--hbs-background);color:var(--hbs-secondary-text);padding-left:2rem}.search-bar .form-control:focus{color:var(--hbs-primary-text)}.search-bar .btn-search{background-color:transparent;color:var(--hbs-secondary-text);z-index:4 !important}.logo{height:26px;margin-right:0.5rem}.navbar-toggler{border:none}.navbar-toggler:focus{box-shadow:none}.navbar-toggler-icon{background-image:url("/images/icons/menu.png")}.nav-link{color:var(--hbs-primary-tex)}.nav-link:focus{outline:none;color:var(--hbs-accent)}.nav-link:hover{outline:none;color:var(--hbs-accent)}.dropdown-menu{background-color:var(--hbs-surface)}.dropdown-menu .dropdown-item{color:var(--hbs-on-surface)}.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus,.dropdown-menu .dropdown-item:active,.dropdown-menu .dropdown-item.active{color:#fff;background-color:var(--hbs-accent)}.sidebar h1,.sidebar .h1,.sidebar h2,.sidebar .h2,.sidebar h3,.sidebar .h3,.sidebar h4,.sidebar .h4,.sidebar h5,.sidebar .h5,.sidebar h6,.sidebar .h6{margin-top:1rem !important}.sidebar ul{padding-left:2rem !important}.sidebar ul li{color:var(--hbs-secondary-text)}.footer{color:var(--hbs-secondary-text)}.footer .powered-by a{color:var(--hbs-accent)}.footer .social-link{padding:0.5rem}.pagination .page-link{background-color:var(--hbs-surface);border-color:var(--hbs-secondary-text);color:var(--hbs-secondary-text)}.pagination .page-item .page-link{border-color:var(--hbs-secondary-text)}.pagination .page-item .page-link:focus{box-shadow:none}.pagination .page-item.active .page-link{background-color:var(--hbs-accent)}.pagination .page-item.disabled .page-link{color:var(--hbs-disabled-text);background-color:var(--hbs-surface)}.post{position:relative}.post .post-panel-wrapper{position:sticky;top:84px;z-index:1}.post .post-panel-wrapper .post-panel{position:absolute;text-align:right;right:-1rem;top:-1rem}.post .post-panel-wrapper .post-panel .action{margin-bottom:0.5rem}.post .post-panel-wrapper .post-panel .action.active{color:var(--hbs-accent)}.post .post-meta{color:var(--hbs-secondary-text);word-break:break-all}.post .post-summary{color:var(--hbs-secondary-text)}.post .post-toc{z-index:1}.post .post-toc ul{margin-bottom:0}.post .post-toc.position-sticky{top:84px}.post-taxonomy{margin:0 0.5rem 0.5rem 0}.post-taxonomy .badge{background-color:#fff;color:var(--hbs-accent)}.post-taxonomy.btn{color:#fff}#btnTOC{z-index:1;bottom:5rem;right:1.25rem;padding:0;color:var(--hbs-accent)}#offcanvasTOC{margin-bottom:0}.post-content a{color:var(--hbs-accent)}.post-content a:hover{text-decoration:underline}.post-nav{width:50%;display:flex;margin:0 0.125rem}.post-nav .prev-post,.post-nav .next-post{display:flex;align-items:center}.post-nav .prev-post a:hover,.post-nav .next-post a:hover{text-decoration:none;color:#fff}.post-nav .prev-post::before,.post-nav .next-post::before{display:flex;align-items:center}.post-nav .prev-post::before{content:"<\00a0"}.post-nav .next-post{text-align:right;flex-direction:row-reverse}.post-nav .next-post::before{content:"\00a0>"}.post-comments .utterances{max-width:100%}.post-reward-content{text-align:center}.post-reward-img{max-width:280px}.btn.btn-reward{color:#fff;background-color:var(--hbs-accent)}.btn-scroll-to-top{bottom:1.5rem;color:var(--hbs-accent);opacity:0;transition:opacity 0.5s;position:fixed;right:1.25rem}.btn-scroll-to-top.active{opacity:1}.form-control:focus{box-shadow:0 0 0 0.125rem var(--hbs-accent)}.form-check-input:checked{background-color:var(--hbs-accent);border-color:var(--hbs-accent)}.profile{color:var(--hbs-secondary-text)}:target::before{content:"";display:block}.anchor{font-size:75%;margin-left:0.5rem;opacity:0;transition:opacity 0.5s}h1:hover .anchor,.h1:hover .anchor,h2:hover .anchor,.h2:hover .anchor,h3:hover .anchor,.h3:hover .anchor,h4:hover .anchor,.h4:hover .anchor,h5:hover .anchor,.h5:hover .anchor,h6:hover .anchor,.h6:hover .anchor{opacity:1}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-thumb{background:var(--hbs-accent)}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-corner{background:var(--hbs-accent)}.highlight-wrapper{position:relative;margin:1.5rem auto 1rem}.highlight-wrapper .lang{color:white;position:absolute;right:0;top:0;font-size:0.75rem;font-style:italic;opacity:0.5;padding:0.25rem 0.75rem 0.25rem 0.5rem;text-transform:uppercase}.highlight-wrapper .panel{position:absolute;top:-1.5rem;right:0;padding:0 0.5rem;margin-bottom:0;opacity:0;transition:opacity 0.5s}.highlight-wrapper .panel .action:not(:last-child){margin-right:1rem}.highlight-wrapper .panel .action.active{color:var(--hbs-accent)}.highlight-wrapper:hover .panel{opacity:1}pre{background:var(--hbs-background);border-radius:0.25rem;color:var(--hbs-on-background);padding:1rem;position:relative}code{color:var(--hbs-accent);font-weight:bold}code.no-ln .ln{display:none}.popover{background-color:var(--hbs-background)}.popover .popover-body{color:var(--hbs-on-background)}.bs-popover-bottom .popover-arrow::after,.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after{border-bottom-color:var(--hbs-background)}.bs-popover-start .popover-arrow::after,.bs-popover-auto[data-popper-placement^="left"] .popover-arrow::after{border-left-color:var(--hbs-background)}.bs-popover-auto[data-popper-placement^=bottom] .popover-arrow::after{border-bottom-color:var(--hbs-background)}.bs-popover-auto[data-popper-placement^=left] .popover-arrow::after{border-left-color:var(--hbs-background)} + */@font-face{font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;font-display:block;src:url("../fonts/fa-brands-400.eot");src:url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),url("../fonts/fa-brands-400.woff2") format("woff2"),url("../fonts/fa-brands-400.woff") format("woff"),url("../fonts/fa-brands-400.ttf") format("truetype"),url("../fonts/fa-brands-400.svg#fontawesome") format("svg")}.fab{font-family:'Font Awesome 5 Brands';font-weight:400}.fa-rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.bg-blue{background-color:#1564bf !important}.bg-blue-gray{background-color:#34515e !important}.bg-brown{background-color:#795548 !important}.bg-cyan{background-color:#00838f !important}.bg-green{background-color:#2e7d32 !important}.bg-indigo{background-color:#3f51b5 !important}.bg-orange{background-color:#bb4d00 !important}.bg-pink{background-color:#c2185b !important}.bg-purple{background-color:#7e57c2 !important}.bg-red{background-color:#d32f2f !important}.bg-teal{background-color:#00796b !important}.bg-yellow{background-color:#bc5100 !important}.text-accent{color:var(--hbs-accent) !important}.palette-blue{--hbs-primary: #1564bf;--hbs-primary-light: #5e91f2;--hbs-accent: var(--hbs-primary)}.palette-blue-gray{--hbs-primary: #34515e;--hbs-primary-light: #8eacbb;--hbs-accent: var(--hbs-primary)}.palette-brown{--hbs-primary: #795548;--hbs-primary-light: #a98274;--hbs-accent: var(--hbs-primary)}.palette-cyan{--hbs-primary: #00838f;--hbs-primary-light: #4fb3bf;--hbs-accent: var(--hbs-primary)}.palette-green{--hbs-primary: #2e7d32;--hbs-primary-light: #60ad5e;--hbs-accent: var(--hbs-primary)}.palette-indigo{--hbs-primary: #3f51b5;--hbs-primary-light: #757de8;--hbs-accent: var(--hbs-primary)}.palette-orange{--hbs-primary: #bb4d00;--hbs-primary-light: #ffad42;--hbs-accent: var(--hbs-primary)}.palette-pink{--hbs-primary: #c2185b;--hbs-primary-light: #fa5788;--hbs-accent: var(--hbs-primary)}.palette-purple{--hbs-primary: #7e57c2;--hbs-primary-light: #b085f5;--hbs-accent: var(--hbs-primary)}.palette-red{--hbs-primary: #d32f2f;--hbs-primary-light: #ff6659;--hbs-accent: var(--hbs-primary)}.palette-teal{--hbs-primary: #00796b;--hbs-primary-light: #48a999;--hbs-accent: var(--hbs-primary)}.palette-yellow{--hbs-primary: #bc5100;--hbs-primary-light: #ffb04c;--hbs-accent: var(--hbs-primary)}.palette{height:1rem;width:1rem;margin-right:0.5rem}.palette.active::after{content:"√"}.mode-light,:root{--hbs-background: #e9ecef;--hbs-on-background: var(--bs-dark);--hbs-surface: #fff;--hbs-on-surface: var(--bs-dark);--hbs-primary-text: rgba(0,0,0,0.87);--hbs-secondary-text: rgba(0,0,0,0.54);--hbs-disabled-text: rgba(0,0,0,0.38);--hbs-accent: var(--hbs-primary);--hbs-shadow: rgba(0, 0, 0, 0.075);--hbs-navbar-bg: var(--hbs-primary)}.mode-dark{--hbs-background: #121212;--hbs-on-background: #fff;--hbs-surface: #1e1e1e;--hbs-on-surface: #fff;--hbs-primary-text: #fff;--hbs-secondary-text: rgba(225,225,225,0.7);--hbs-disabled-text: rgba(225,225,225,0.5);--hbs-accent: var(--hbs-primary-light);--hbs-shadow: rgba(0, 0, 0, 0.75);--hbs-navbar-bg: var(--hbs-surface)}#modeSwitcher{background-image:url("../images/icons/light.png");height:1.2rem;width:2.5rem;margin-bottom:0.25rem}#modeSwitcher:focus{background-image:url("../images/icons/light.png")}#modeSwitcher:checked{background-image:url("../images/icons/dark.png")}:root{--mode: none;--hbs-font-size: 1rem}@media (prefers-color-scheme: dark){:root{--mode: dark}:root:not(.mode-dark){--hbs-background: #121212;--hbs-on-background: #fff;--hbs-surface: #1e1e1e;--hbs-on-surface: #fff;--hbs-primary-text: #fff;--hbs-secondary-text: rgba(225,225,225,0.7);--hbs-disabled-text: rgba(225,225,225,0.5);--hbs-accent: var(--hbs-primary-light);--hbs-shadow: rgba(0, 0, 0, 0.75);--hbs-navbar-bg: var(--hbs-surface)}}html{position:relative}html,body{height:100%}body{background-color:var(--hbs-background);color:var(--hbs-on-background);display:flex;flex-flow:column;font-family:var(--bs-font-sans-serif);font-size:var(--hbs-font-size)}a{text-decoration:none;color:var(--hbs-primary-tex)}a:hover{color:var(--hbs-accent)}.btn{background-color:var(--hbs-accent);color:#fff}.btn:hover{color:#fff}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5{margin:1.5rem 0}table{color:var(--color)}main{margin-bottom:2rem}ul{padding-left:1.5rem}.surface{background-color:var(--hbs-surface);border-radius:0.25rem;box-shadow:0 0.5rem 1rem var(--hbs-shadow);color:var(--hbs-on-surface);margin-bottom:2rem;padding:1rem}.list-group-item .active{background-color:var(--hbs-accent);border:var(--hbs-accent)}.fa-fw{margin-right:0.25rem}.setting{margin-bottom:1rem}.white-space-pre-wrap{white-space:pre-wrap}.archive ul{padding-left:2rem}.archive .post-title,.archive .post-date{color:var(--hbs-secondary-text)}blockquote{background:var(--bs-light);border-left:0.5rem solid var(--hbs-accent);color:var(--hbs-on-surface);background-color:var(--hbs-surface);padding:1.2rem 2.5rem 0.2rem;position:relative}blockquote::before{content:"\201C";color:var(--hbs-accent);font-size:4em;position:absolute;left:0.5rem;top:-1rem}.breadcrumb-item .active{color:var(--hbs-secondary-text)}.navbar{background-color:var(--hbs-navbar-bg);color:rgba(225,225,225,0.7)}.navbar a:hover,.navbar a:focus,.navbar a:active,.navbar a.active{color:#fff}.search-bar .form-control{background-color:var(--hbs-background);border-color:var(--hbs-background);color:var(--hbs-secondary-text);padding-left:2rem}.search-bar .form-control:focus{color:var(--hbs-primary-text)}.search-bar .btn-search{background-color:transparent;color:var(--hbs-secondary-text);z-index:4 !important}.logo{height:26px;margin-right:0.5rem}.navbar-toggler{border:none}.navbar-toggler:focus{box-shadow:none}.navbar-toggler-icon{background-image:url("/images/icons/menu.png")}.nav-link{color:var(--hbs-primary-tex)}.nav-link:focus{outline:none;color:var(--hbs-accent)}.nav-link:hover{outline:none;color:var(--hbs-accent)}.dropdown-menu{background-color:var(--hbs-surface)}.dropdown-menu .dropdown-item{color:var(--hbs-on-surface)}.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus,.dropdown-menu .dropdown-item:active,.dropdown-menu .dropdown-item.active{color:#fff;background-color:var(--hbs-accent)}.sidebar h1,.sidebar .h1,.sidebar h2,.sidebar .h2,.sidebar h3,.sidebar .h3,.sidebar h4,.sidebar .h4,.sidebar h5,.sidebar .h5,.sidebar h6,.sidebar .h6{margin-top:1rem !important}.sidebar ul{padding-left:2rem !important}.sidebar ul li{color:var(--hbs-secondary-text)}.footer{color:var(--hbs-secondary-text)}.footer .powered-by a{color:var(--hbs-accent)}.footer .social-link{padding:0.5rem}.pagination .page-link{background-color:var(--hbs-surface);border-color:var(--hbs-secondary-text);color:var(--hbs-secondary-text)}.pagination .page-item .page-link{border-color:var(--hbs-secondary-text)}.pagination .page-item .page-link:focus{box-shadow:none}.pagination .page-item.active .page-link{background-color:var(--hbs-accent)}.pagination .page-item.disabled .page-link{color:var(--hbs-disabled-text);background-color:var(--hbs-surface)}.post{position:relative}.post .post-panel-wrapper{position:sticky;top:84px;z-index:1}.post .post-panel-wrapper .post-panel{position:absolute;text-align:right;right:-1rem;top:-1rem}.post .post-panel-wrapper .post-panel .action{margin-bottom:0.5rem}.post .post-panel-wrapper .post-panel .action.active{color:var(--hbs-accent)}.post .post-meta{color:var(--hbs-secondary-text);word-break:break-all}.post .post-summary{color:var(--hbs-secondary-text)}.post .post-toc{z-index:1}.post .post-toc ul{margin-bottom:0}.post .post-toc.position-sticky{top:84px}.post-taxonomy{margin:0 0.5rem 0.5rem 0}.post-taxonomy .badge{background-color:#fff;color:var(--hbs-accent)}.post-taxonomy.btn{color:#fff}#offcanvasTOC{margin-bottom:0}.post-content a{color:var(--hbs-accent)}.post-content a:hover{text-decoration:underline}.post-nav{width:50%;display:flex;margin:0 0.125rem}.post-nav .prev-post,.post-nav .next-post{display:flex;align-items:center}.post-nav .prev-post a:hover,.post-nav .next-post a:hover{text-decoration:none;color:#fff}.post-nav .prev-post::before,.post-nav .next-post::before{display:flex;align-items:center}.post-nav .prev-post::before{content:"<\00a0"}.post-nav .next-post{text-align:right;flex-direction:row-reverse}.post-nav .next-post::before{content:"\00a0>"}.post-comments .utterances{max-width:100%}.post-reward-content{text-align:center}.post-reward-img{max-width:280px}.btn.btn-reward{color:#fff;background-color:var(--hbs-accent)}.btn-scroll-to-top{bottom:1.5rem;color:var(--hbs-accent);opacity:0;transition:opacity 0.5s;position:fixed;right:1.25rem}.btn-scroll-to-top.active{opacity:1}.form-control:focus{box-shadow:0 0 0 0.125rem var(--hbs-accent)}.form-check-input:checked{background-color:var(--hbs-accent);border-color:var(--hbs-accent)}.profile{color:var(--hbs-secondary-text)}:target::before{content:"";display:block}.anchor{font-size:75%;margin-left:0.5rem;opacity:0;transition:opacity 0.5s}h1:hover .anchor,.h1:hover .anchor,h2:hover .anchor,.h2:hover .anchor,h3:hover .anchor,.h3:hover .anchor,h4:hover .anchor,.h4:hover .anchor,h5:hover .anchor,.h5:hover .anchor,h6:hover .anchor,.h6:hover .anchor{opacity:1}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-thumb{background:var(--hbs-accent)}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-corner{background:var(--hbs-accent)}.highlight-wrapper{position:relative;margin:1.5rem auto 1rem}.highlight-wrapper .lang{color:white;position:absolute;right:0;top:0;font-size:0.75rem;font-style:italic;opacity:0.5;padding:0.25rem 0.75rem 0.25rem 0.5rem;text-transform:uppercase}.highlight-wrapper .panel{position:absolute;top:-1.5rem;right:0;padding:0 0.5rem;margin-bottom:0;opacity:0;transition:opacity 0.5s}.highlight-wrapper .panel .action:not(:last-child){margin-right:1rem}.highlight-wrapper .panel .action.active{color:var(--hbs-accent)}.highlight-wrapper:hover .panel{opacity:1}pre{background:var(--hbs-background);border-radius:0.25rem;color:var(--hbs-on-background);padding:1rem;position:relative}code{color:var(--hbs-accent);font-weight:bold}code.no-ln .ln{display:none}.popover{background-color:var(--hbs-background)}.popover .popover-body{color:var(--hbs-on-background)}.bs-popover-bottom .popover-arrow::after,.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after{border-bottom-color:var(--hbs-background)}.bs-popover-start .popover-arrow::after,.bs-popover-auto[data-popper-placement^="left"] .popover-arrow::after{border-left-color:var(--hbs-background)}.bs-popover-auto[data-popper-placement^=bottom] .popover-arrow::after{border-bottom-color:var(--hbs-background)}.bs-popover-auto[data-popper-placement^=left] .popover-arrow::after{border-left-color:var(--hbs-background)} diff --git a/layouts/partials/post/panel.html b/layouts/partials/post/panel.html index 436367d7b..0ba6c93bd 100644 --- a/layouts/partials/post/panel.html +++ b/layouts/partials/post/panel.html @@ -4,5 +4,6 @@ {{ partial "post/panel/translations" . }} {{ partial "post/panel/reward" . }} {{ partial "post/panel/copyright" . }} + {{ partial "post/panel/toc" . }} diff --git a/layouts/partials/post/panel/toc.html b/layouts/partials/post/panel/toc.html new file mode 100644 index 000000000..5fda71f75 --- /dev/null +++ b/layouts/partials/post/panel/toc.html @@ -0,0 +1,8 @@ +{{- $enable := and (default true .Params.toc) (default true .Site.Params.toc) -}} +{{- $wordCount := default 280 .Site.Params.tocWordCount -}} +{{- $toc := .TableOfContents -}} +{{- $valid := and $toc (and (ne $toc "") (gt .WordCount $wordCount)) -}} +{{- if and $enable $valid -}} + + +{{- end -}} diff --git a/layouts/partials/post/toc.html b/layouts/partials/post/toc.html index 97e01ec87..a4d62bb11 100644 --- a/layouts/partials/post/toc.html +++ b/layouts/partials/post/toc.html @@ -3,9 +3,6 @@ {{- $toc := .TableOfContents -}} {{- $valid := and $toc (and (ne $toc "") (gt .WordCount $wordCount)) -}} {{- if and $enable $valid -}} - - -
{{ i18n "table_of_contents" }}
diff --git a/src/scss/_post.scss b/src/scss/_post.scss index 9d107172d..d4c4c4b26 100644 --- a/src/scss/_post.scss +++ b/src/scss/_post.scss @@ -57,14 +57,6 @@ } } -#btnTOC { - z-index: 1; - bottom: 5rem; - right: 1.25rem; - padding: 0; - color: var(--hbs-accent); -} - #offcanvasTOC { margin-bottom: 0; }