!publish! table of contents + foldable menus..

config/_default/config.toml

@@ -11,3 +11,9 @@ relativeurls = true
 
 [outputs]
     list = ["html", "js"]
+
+[markup]
+    [markup.tableOfContents]
+        endLevel=4
+        ordered = false
+        startLevel = 1

static/css/styles.css

@@ -1 +1 @@
-/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}a{background-color:transparent}b{font-weight:bolder}img{border-style:none}p{margin:0}ul{list-style:none;margin:0;padding:0}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;line-height:1.5}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}img{border-style:solid}a{color:inherit;text-decoration:inherit}img{display:block;vertical-align:middle}img{max-width:100%;height:auto}.bg-CoconutCream{background-color:#f2f6d5}.bg-AuChico{background-color:#996561}.border-CoconutCream{border-color:#f2f6d5}.border-b-8{border-bottom-width:8px}.cursor-pointer{cursor:pointer}.block{display:block}.flex{display:-webkit-box;display:flex}.justify-between{-webkit-box-pack:justify;justify-content:space-between}.font-vg5000{font-family:vg5000-regular,sans}.font-playfair{font-family:playfairdisplay regular,sans}.font-bold{font-weight:700}.h-full{height:100%}.leading-none{line-height:1}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-12{margin-bottom:3rem}.p-1{padding:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pr-4{padding-right:1rem}.pt-6{padding-top:1.5rem}.pb-8{padding-bottom:2rem}.pt-16{padding-top:4rem}.pt-32{padding-top:8rem}.static{position:static}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.text-CoconutCream{color:#f2f6d5}.text-xs{font-size:.75rem}.text-base{font-size:1rem}.w-2\/5{width:40%}.w-3\/5{width:60%}.z-10{z-index:10}@font-face{font-family:playfairdisplay regular;font-weight:400;src:url(../fonts/PlayfairDisplay-Regular.woff)format('woff')}@font-face{font-family:vg5000-regular;font-weight:400;src:url(../fonts/VG5000-Regular_web.woff)format('woff')}html{font-size:1.2em;background-color:#f2f6d5}h1{font-size:1.875rem}h2{font-size:1.5rem}h3{font-size:1.25rem}blockquote{font-style:italic}p{padding-bottom:.5rem;line-height:1.25}footer{font-family:vg5000-regular,sans;font-size:.75rem;color:#29102f}article ul{position:relative;list-style-type:none;margin-left:0;padding-left:.75rem}article ul li:before{font-family:vg5000-regular,sans;color:#996561;font-size:.75rem;left:0;position:absolute;padding-top:.5rem;padding-bottom:.5rem;content:"•"}article li{padding-left:.5rem}a{color:#996561}a:hover{text-decoration:underline}.edit-button{border-bottom-width:4px;border-color:#f2f6d5;padding-left:.25rem;padding-right:.25rem;background-color:#996561;margin-bottom:.5rem;font-family:vg5000-regular,sans;color:#f2f6d5}.edit-button:hover{background-color:#f2f6d5;color:#996561;border-bottom-width:2px;border-color:#996561}.title-text{font-family:playfairdisplay regular,sans;font-size:2.25rem;color:#996561}.title-pretext{font-family:vg5000-regular,sans;font-size:1rem;color:#996561}.content-text{font-family:playfairdisplay regular,sans;font-size:1.25rem;color:#29102f}.sidebar-title{font-family:vg5000-regular,sans;font-size:1rem;color:#996561}.sidebar-list{font-family:vg5000-regular,sans;font-size:1.25rem;color:#996561}.logo{font-family:vg5000-regular,sans;font-size:1.25rem;color:#996561;padding-top:.5rem}
+/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}a{background-color:transparent}b{font-weight:bolder}img{border-style:none}input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}input{overflow:visible}[type=checkbox]{box-sizing:border-box;padding:0}p{margin:0}ul{list-style:none;margin:0;padding:0}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;line-height:1.5}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}img{border-style:solid}input::-webkit-input-placeholder{color:#a0aec0}input::-moz-placeholder{color:#a0aec0}input:-ms-input-placeholder{color:#a0aec0}input::-ms-input-placeholder{color:#a0aec0}input::placeholder{color:#a0aec0}table{border-collapse:collapse}a{color:inherit;text-decoration:inherit}input{padding:0;line-height:inherit;color:inherit}img{display:block;vertical-align:middle}img{max-width:100%;height:auto}.bg-CoconutCream{background-color:#f2f6d5}.bg-AuChico{background-color:#996561}.border-CoconutCream{border-color:#f2f6d5}.border-b-8{border-bottom-width:8px}.cursor-pointer{cursor:pointer}.block{display:block}.flex{display:-webkit-box;display:flex}.table{display:table}.justify-between{-webkit-box-pack:justify;justify-content:space-between}.font-vg5000{font-family:vg5000-regular,sans}.font-playfair{font-family:playfairdisplay regular,sans}.font-bold{font-weight:700}.h-full{height:100%}.leading-none{line-height:1}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-12{margin-bottom:3rem}.p-1{padding:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pr-4{padding-right:1rem}.pt-6{padding-top:1.5rem}.pb-8{padding-bottom:2rem}.pt-16{padding-top:4rem}.pt-32{padding-top:8rem}.static{position:static}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.text-CoconutCream{color:#f2f6d5}.text-xs{font-size:.75rem}.text-base{font-size:1rem}.w-2\/5{width:40%}.w-3\/5{width:60%}.z-10{z-index:10}@font-face{font-family:playfairdisplay regular;font-weight:400;src:url(../fonts/PlayfairDisplay-Regular.woff)format('woff')}@font-face{font-family:vg5000-regular;font-weight:400;src:url(../fonts/VG5000-Regular_web.woff)format('woff')}html{font-size:1.2em;background-color:#f2f6d5}h1{font-size:1.875rem}h2{font-size:1.5rem}h3{font-size:1.25rem}blockquote{font-style:italic}p{padding-bottom:.5rem;line-height:1.25}footer{font-family:vg5000-regular,sans;font-size:.75rem;color:#29102f}article ul{position:relative;list-style-type:none;margin-left:0;padding-left:.75rem}article ul li:before{font-family:vg5000-regular,sans;color:#996561;font-size:.75rem;left:0;position:absolute;padding-top:.5rem;padding-bottom:.5rem;content:"•"}article li{padding-left:.5rem}a{color:#996561}a:hover{text-decoration:underline}.edit-button{border-bottom-width:4px;border-color:#f2f6d5;padding-left:.25rem;padding-right:.25rem;background-color:#996561;margin-bottom:.5rem;font-family:vg5000-regular,sans;color:#f2f6d5}.edit-button:hover{background-color:#f2f6d5;color:#996561;border-bottom-width:2px;border-color:#996561}.title-text{font-family:playfairdisplay regular,sans;font-size:2.25rem;color:#996561}.title-pretext{font-family:vg5000-regular,sans;font-size:1rem;color:#996561}.content-text{font-family:playfairdisplay regular,sans;font-size:1.25rem;color:#29102f}.sidebar-title{font-family:vg5000-regular,sans;font-size:1rem;color:#996561}.sidebar-list{font-family:vg5000-regular,sans;font-size:1.25rem;color:#996561}.logo{font-family:vg5000-regular,sans;font-size:1.25rem;color:#996561;padding-top:.5rem}.ddmenu .sidebar-title{cursor:pointer}.ddmenu input{display:none}.ddmenu .hiddendiv{padding-bottom:.25rem;display:none}.ddmenu input:not(:checked)~.hiddendiv{display:block;padding-bottom:1rem}#TableOfContents{font-family:vg5000-regular,sans;font-size:1.25rem;color:#996561;margin-left:-.5rem}#TableOfContents ul{margin-left:.5rem}#TableOfContents li:before{content:"> "}

themes/piratecare/assets/css/site.css

@@ -135,3 +135,32 @@ a:hover {
     @apply font-vg5000 text-xl text-AuChico pt-2;
 }
 
+/* dropdown menu */
+
+.ddmenu .sidebar-title {
+    cursor: pointer;
+}
+
+.ddmenu input {
+    display: none;
+}
+
+.ddmenu .hiddendiv {
+    @apply pb-1 hidden;
+}
+
+.ddmenu input:not(:checked) ~ .hiddendiv {
+    @apply block pb-4;
+}
+
+#TableOfContents {
+    @apply font-vg5000 text-xl text-AuChico -ml-2;
+}
+
+#TableOfContents ul {
+    @apply ml-2;
+}
+
+#TableOfContents li:before {
+    content: "> ";
+}

themes/piratecare/layouts/_default/list.html

@@ -3,15 +3,19 @@
     <div class="leading-none mb-12">
         <span class="title-pretext">syllabus ⦚ </span><span class="title-text pt-6">{{ .Title }}</span>
     </div>
-
+    <div class="ddmenu">
-    <div class="sidebar-title mb-1">▒▒ has topics ▽</div>
+    <input id="toggly" type="checkbox">
-    <ul>
+    <label for="toggly" class="sidebar-title mb-1" tabindex="1">▒▒ has topics ▽</label>
+    <div class="hiddendiv">
+    <ul class="mt-4">
         {{ range split .Params.has_topics "," }}
         {{ with $.GetPage (trim . " ") }}
         <li><a class="sidebar-list text-base" href="{{ .RelPermalink }}{{ if eq hugo.Environment "offline" }}index.html{{ end }}">> {{ .Title }}</a></li>
         {{ end }}
         {{ end }}
     </ul>
+    </div>
+    </div>
 {{ end }}
 
 {{ define "main" }}

themes/piratecare/layouts/session/single.html

@@ -2,8 +2,25 @@
     <div class="leading-none mb-12">
         <span class="title-pretext">session ⦚ </span><span class="title-text pt-6">{{ .Title }}</span>
     </div>
-      <div class="sidebar-title mb-4">▒▒ is in ▽</div>
+
-  <ul>
+    {{ if ne (trim .Page.TableOfContents "\n") "<nav id=\"TableOfContents\"></nav>" }}
+    <div class="ddmenu">
+        <input id="toggly-toc" type="checkbox" >
+        <label for="toggly-toc" class="sidebar-title" tabindex="1">▒▒ table of contents ▽</label>
+        <div class="hiddendiv">
+            <div class="mt-4">
+                {{ .Page.TableOfContents }}
+            </div>
+        </div>
+    </div>
+    {{ end }}
+
+      <div class="ddmenu">
+          <input id="toggly-isin" type="checkbox">
+          <label for="toggly-isin" class="sidebar-title mt-4 mb-1" tabindex="1">▒▒ is in ▽</label>
+          <div class="hiddendiv">
+
+  <ul class="mt-4">
   {{ $currentNode := . }}
   {{ range (where $.Site.RegularPages ".Section" "topic") }}
     {{ if in .Params.has_sessions $currentNode.File.BaseFileName }}
@@ -11,6 +28,8 @@
     {{ end }}
   {{ end }}
   </ul>
+          </div>
+      </div>
 {{ end }}
 
 {{define "main" }}

themes/piratecare/layouts/topic/single.html

@@ -3,18 +3,43 @@
 <div class="leading-none mb-12">
     <span class="title-pretext">topic ⦚ </span><span class="title-text pt-6">{{ .Title }}</span>
 </div>
-<div class="sidebar-title mb-1">▒▒ has sessions ▽</div>
+
-<ul>
+{{ if ne (trim .Page.TableOfContents "\n") "<nav id=\"TableOfContents\"></nav>" }}
+<div class="ddmenu">
+    <input id="toggly-toc" type="checkbox" >
+    <label for="toggly-toc" class="sidebar-title" tabindex="1">▒▒ table of contents ▽</label>
+    <div class="hiddendiv">
+        <div class="mt-4">
+            {{ .Page.TableOfContents }}
+        </div>
+    </div>
+</div>
+{{ end }}
+
+<div class="ddmenu">
+    <input id="toggly-sessions" type="checkbox">
+    <label for="toggly-sessions" class="sidebar-title mb-1" tabindex="1">▒▒ has sessions ▽</label>
+    <div class="hiddendiv">
+<ul class="mt-4">
     {{ range split .Params.has_sessions "," }}
     {{ with $.GetPage (trim . " ") }}
     <li><a class="sidebar-list text-base" href="{{ .RelPermalink }}{{ if eq hugo.Environment "offline" }}index.html{{ end }}">> {{ .Title }}</a></li>
         {{ end }}
     {{ end }}
 </ul>
-<div class="sidebar-title mt-4 mb-1">▒▒ is in ▽</div>
+    </div>
-<ul>
+</div>
+
+<div class="ddmenu">
+    <input id="toggly-isin" type="checkbox">
+    <label for="toggly-isin" class="sidebar-title mt-4 mb-1" tabindex="1">▒▒ is in ▽</label>
+    <div class="hiddendiv">
+<ul class="mt-4">
     <li><a class="sidebar-list text-base" href="{{ .Site.Home.RelPermalink }}{{ if eq hugo.Environment "offline" }}index.html{{ end }}">↖ syllabus ⦚ {{ .Site.Home.Title }}</a></li>
 </ul>
+    </div>
+</div>
+
 {{ end }}
 
 {{define "main" }}