Make exercises into details (so they can be collapsed)

assets/scss/bergamot.scss

@@ -2,8 +2,6 @@
 @import "mixins.scss";
 
 .bergamot-exercise {
-    @include bordered-block;
-    padding: 1em;
     counter-increment: bergamot-exercise;
 
     .bergamot-root {
@@ -69,7 +67,7 @@
     }
 
     .bergamot-button-group {
-        margin-top: 0.5em;
+        margin-top: 1em;
     }
 }
 

layouts/shortcodes/bergamot_exercise.html

@@ -1,9 +1,11 @@
 <div class="bergamot-exercise">
+    <details open>
+        <summary>
             <span class="bergamot-exercise-label">
-        {{ partial "icon.html" "edit-2" }}
                 <span class="bergamot-exercise-number"></span>
                 {{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
             </span>
+        </summary>
         {{ .Inner }}
 
         <div class="bergamot-button-group">
@@ -15,4 +17,5 @@
         </div>
 
         <div id="bergamot-widget-container-{{ .Get "id" }}"></div>
+    </details>
 </div>

layouts/shortcodes/bergamot_preset.html

@@ -2,5 +2,6 @@
     window.Bergamot.presets['{{ .Get "name" }}'] = {
         rules: '{{ .Inner }}',
         inputPrompt: '{{ .Get "prompt" }}',
+        query: '{{ .Get "query" }}',
     };
 </script>