jean
/
bifocal
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 1 Wiki Activity

Abstracting CSS for Tocbot

This commit is contained in:
Jean Viscogliosi-Pate 2024-08-01 21:11:17 -07:00
parent dacf3f4786
commit aff79fb1ad
3 changed files with 20 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/css/tocbot.css
View File

@ -52,6 +52,12 @@ a.toc-link {
width: 2px
}
@media (prefers-color-scheme: dark) {
.toc-link::before {
background-color: #EEE;
}
}
.is-active-link::before {
background-color: #54BC4B
}
@ -68,6 +74,8 @@ a.toc-link {
.toc-list {
overflow: hidden;
list-style: none;
font-size: 16px;
line-height: 1.4;
}
@media (min-width: 1300px) {
@ -77,6 +85,7 @@ a.toc-link {
bottom: 0;
margin-top: 4vmin;
grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
width: 250px;
}
.gh-toc {
@ -85,6 +94,12 @@ a.toc-link {
}
}
a.toc-link {
text-decoration: none;
}
.gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */
}
/* Additional style information from Jean interspersed */

1
assets/js/lib/tocbot.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

45
default.hbs
View File

@ -6,48 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
<style>
.gh-content {
position: relative;
}
.gh-toc > .toc-list {
position: relative;
}
.toc-list {
overflow: hidden;
list-style: none;
font-size: 16px;
line-height: 1.4;
}
@media (min-width: 1300px) {
.gh-sidebar {
position: absolute;
top: 0;
bottom: 0;
margin-top: 4vmin;
grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
width: 250px;
}
.gh-toc {
position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
top: 4vmin;
}
}
a.toc-link {
text-decoration: none;
}
.gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */
}
</style>
<link rel="stylesheet" href="{{asset "css/tocbot.css"}}">
{{#is "home"}}
{{#if @site.cover_image}}
@ -109,7 +68,7 @@
<script src="{{asset "built/main.min.js"}}"></script>
{{! Tocbot is used for the table of contents }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
<script src="{{asset "built/tocbot.min.js"}}"></script>
<script>
tocbot.init({
// Where to render the table of contents.