Switch to SVG category icon to improve mobile compatibility; improve …

…alt text of docs categories
raspberrypi · Dec 9, 2024 · 54f5e4d · 54f5e4d
1 parent 50ba5b6
commit 54f5e4d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html
@@ -37,7 +37,7 @@ <h1 id="docs-header-title">
                   <label class="toc-toggle" for="{{ subdir.path }}" onclick="event.stopPropagation()">
                     <div class="toc-toggle-container">
                       <a class="level1" href="{{ site.baseurl }}{{ subdir.path }}">
-                        <a alt="expand documentation category" title="expand documentation category"
+                        <a alt="expand {{ item.title | markdownify }}" title="expand {{ item.title | markdownify }}"
                           {% if page.url contains subdir.path %}
                           class="bold toc-item"
                           {% else %}
@@ -64,7 +64,7 @@ <h1 id="docs-header-title">
                       <label class="toc-toggle" for="{{ item.path }}">
                         <div class="toc-toggle-container">
                           <a class="level2" href="{{ site.baseurl }}{{ item.path }}">
-                            <a alt="expand documentation category" title="expand documentation category"
+                            <a alt="expand {{ item.title | markdownify }}" title="expand {{ item.title | markdownify }}"
                               {% if page.url contains item.path %}
                               class="bold toc-item"
                               {% else %}
@@ -97,15 +97,15 @@ <h1 id="docs-header-title">
                             <div class="toc-toggle-container">
                               {% if entry.subsections[0] %}
                               <a class="level3" href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}" >
-                                <a id="{{ item.path }}#{{entry.anchor}}-toc" class="toc-item" alt="expand documentation category" title="expand documentation category"
+                                <a id="{{ item.path }}#{{entry.anchor}}-toc" class="toc-item" alt="expand {{ entry.heading | markdownify }}" title="expand {{ entry.heading | markdownify }}"
                                 >
                                 <script type="text/javascript">if (window.location.href.includes('{{ item.path }}#{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }</script>
                                   {{ entry.heading | markdownify }}
                                 </a>
                               </a>
                               {% else %}
                               <a class="level3">
-                                <a id="{{ item.path }}#{{entry.anchor}}-toc" alt="expand documentation category" title="expand documentation category"
+                                <a id="{{ item.path }}#{{entry.anchor}}-toc" alt="expand {{ entry.heading | markdownify }}" title="expand {{ entry.heading | markdownify }}"
                                   href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}"
                                   onclick="document.getElementById('mobile-toggle').checked = false;"
                                   class="toc-item no-dropdown"

diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css
@@ -341,8 +341,11 @@ input:checked + li span label div .toc-item::before {
 }
 
 .toc-item.no-dropdown::before {
+  transition: .1s ease-in;
   content: '';
-  padding: 6px;
+  width: 13px;
+  height: 13px;
+  clip-path: polygon(0% 0%);
 }
 
 .bold {
@@ -355,9 +358,11 @@ input:checked + li span label div .toc-item::before {
 
 .toc-item::before {
   transition: .1s ease-in;
-  content: var(--not-expanded-label);
-  font-size: 1em !important;
-  font-style: normal !important;
+  content: '';
+  background-color: var(--accent);
+  width: 13px;
+  height: 13px;
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
 }
 
 #docs-content {
@@ -1500,6 +1505,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
     background-color: var(--code-bg-colour);
     z-index: 100;
     max-height: 50px;
+    width: 300px;
   }
 
   #docs-header {