STYLE: Reduce footprint of toggle buttons (#37)

Author: choldgraf

sphinx_togglebutton/_static/togglebutton.css

@@ -65,8 +65,9 @@ button.toggle-button {
 }
 
 details.toggle-details .tb-icon {
-    height: 1.3em;
-    width: 1.3em;
+    height: 1.4em;
+    width: 1.4em;
+    margin-top: 0.1em;  /* To center the button vertically */
 }
 
 .toggle-button-hidden .tb-icon {
@@ -92,8 +93,12 @@ details.toggle-details summary {
     border-radius: .4em;
     border: 1px solid #ccc;
     background: #f8f8f8;
-    padding: 0.4em 1em 0.4em 0.5em; /* Less padding on left because the SVG has left margin */
-    font-size: .9em;
+    padding: 0.2em 0.7em 0.3em 0.5em; /* Less padding on left because the SVG has left margin */
+    font-size: 0.8em;
+}
+
+.toggle-details__summary-text {
+    margin-left: 0.2em;
 }
 
 details.toggle-details summary:hover {

sphinx_togglebutton/_static/togglebutton.js

@@ -25,7 +25,7 @@ var initToggleItems = () => {
       }
       // This is the button that will be added to each item to trigger the toggle
       var collapseButton = `
-        <button type="button" id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}", data-toggle-hint="${toggleHintShow}">
+        <button type="button" id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}" data-toggle-hint="${toggleHintShow}" aria-label="Click to toggle content">
             ${toggleChevron}
         </button>`;
 
@@ -50,9 +50,9 @@ var initToggleItems = () => {
       // Define the structure of the details block and insert it as a sibling
       var detailsBlock = `
         <details class="toggle-details">
-            <summary>
+            <summary class="toggle-details__summary">
               ${toggleChevron}
-              <span>${toggleHintShow}</span>
+              <span class="toggle-details__summary-text">${toggleHintShow}</span>
             </summary>
         </details>`;
       item.insertAdjacentHTML("beforebegin", detailsBlock);