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 width: 2px
} }
@media (prefers-color-scheme: dark) {
.toc-link::before {
background-color: #EEE;
}
}
.is-active-link::before { .is-active-link::before {
background-color: #54BC4B background-color: #54BC4B
} }
@ -68,6 +74,8 @@ a.toc-link {
.toc-list { .toc-list {
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
font-size: 16px;
line-height: 1.4;
} }
@media (min-width: 1300px) { @media (min-width: 1300px) {
@ -77,6 +85,7 @@ a.toc-link {
bottom: 0; bottom: 0;
margin-top: 4vmin; margin-top: 4vmin;
grid-column: wide-start / main-start; /* Place the TOC to the left of the content */ grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
width: 250px;
} }
.gh-toc { .gh-toc {
@ -85,6 +94,12 @@ a.toc-link {
} }
} }
a.toc-link {
text-decoration: none;
}
.gh-toc .is-active-link::before { .gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */ 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title> <title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}"> <link rel="stylesheet" href="{{asset "built/screen.css"}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css"> <link rel="stylesheet" href="{{asset "css/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>
{{#is "home"}} {{#is "home"}}
{{#if @site.cover_image}} {{#if @site.cover_image}}
@ -109,7 +68,7 @@
<script src="{{asset "built/main.min.js"}}"></script> <script src="{{asset "built/main.min.js"}}"></script>
{{! Tocbot is used for the table of contents }} {{! 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> <script>
tocbot.init({ tocbot.init({
// Where to render the table of contents. // Where to render the table of contents.