Added tabler_icons for Module and Expand buttons on rule.html

_guides/first_rule.md

@@ -12,16 +12,16 @@ Whether your community is already up and running or still just an ambition, choo
 
 **It may be easiest to start with a [template]({% link templates.md %}), but you can also [start from scratch]({% link create.md %}).** On a template, press the <span class="pushButton">Customize</span> button to get started. Even if you end up changing almost everything you find in a template, the process can spur thinking in ways that a blank canvas would not.
 
-**Press the <span class="pushButton">+</span> buttons to expand each section and start exploring.** You don't need to fill every field or even every section. If you don't leave an answer, the field will simply disappear when you publish.
+**Press the <span class="pushButton"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></span> buttons to expand each section and start exploring.** You don't need to fill every field or even every section. If you don't leave an answer, the field will simply disappear when you publish.
 
 **Answer the questions in complete sentences**, because the questions will disappear when you publish. Make sure what you write will make sense when the questions are no longer there.
 
-**Use the Modules for inspiration.** These suggestions are drawn from [Democratic Mediums](https://democraticmediums.info), a sister project that aims to collect governance patterns from diverse contexts.
+**Use the Modules for inspiration.** Access them via <span class="pushButton"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" /></span> alongside a given question. These suggestions are drawn from [Democratic Mediums](https://democraticmediums.info), a sister project that aims to collect governance patterns from diverse contexts.
 
 **Read and re-read.** Be sure that all the terminology and processes are consistent. Inevitably there will be loopholes and bugs, but try to resolve as many of them as you can. The <span class="pushButton">Preview</span> button provides a clean display for easy reading. Just press <span class="pushButton">Customize</span> when you're ready to edit again.
 
 **When you've finished a draft, show it to your community for feedback.** Others will probably think of things that didn't occur to you. This may even raise some important issues about how different members were perceiving the community differently. Aim to reach unanimity---or something close to it---about your first Rule.
 
-**When you're ready to adopt your Rule, put it in a place where your community can easily find it.** Depending on the spaces and tools your community uses, this can mean different things. But one way or another, make your Rule accessible. CommunityRule offers two options: [Publish your Rule to the Library]({% link _guides/publish_rule.md %}) (and provide your community with a link), or download it as a Markdown file (which you can add to your own website or [Git repository]({% link _guides/git_repo.md %}).
+**When you're ready to adopt your Rule, put it in a place where your community can easily find it.** Depending on the spaces and tools your community uses, this can mean different things. But one way or another, make your Rule accessible. CommunityRule offers two options: [Publish your Rule to the Library]({% link _guides/publish_rule.md %}) (and provide your community with a link), or export it as a Markdown file (which you can add to your own website or [Git repository]({% link _guides/git_repo.md %}).
 
 **Prepare for your Rule to evolve.** Make sure you and your Rule are prepared for change. Often, soon after a Rule is up and running, simple problems arise that would have been hard to notice or predict on paper. Celebrate once you've adopted your first Rule, but let it be a living document.

_layouts/rule.html

@@ -283,12 +283,12 @@ layout: default
       <img src="{% link assets/tabler_icons/info-circle.svg %}"
            class="icons" />
       <span class="subhead output">Basics</span>
-      <button onclick="toggleVisible('s1')" class="button plus"> + </button>
+      <button onclick="toggleVisible('s1')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
     </h2>
     <div class="section" id="s1" style="display:none">
     
       <span class="question">What is the basic structure of the community?</span>
-      <div class="button">Modules
+      <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
         <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/federation/">federation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/membership/">membership</a>, <a target="_blank" href="https://democraticmediums.info/mediums/multicameralism/">multicameralism</a>, <a target="_blank" href="https://democraticmediums.info/mediums/ritual/">ritual</a>, <a target="_blank" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a>, <a target="_blank" href="https://democraticmediums.info/mediums/stake_weight/">stake weight</a></span>
       </div>
       <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
@@ -297,12 +297,12 @@ layout: default
       <p contenteditable="true" class="editable output" id="mission">{{ page.mission }}</p>
 
       <span class="question">What core values does the community hold?</span>
-      <div class="button">Modules
+      <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
         <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/solidarity/">solidarity</a>, <a target="_blank" href="https://democraticmediums.info/mediums/transparency/">transparency</a></span>
       </div>
       <p contenteditable="true" class="editable output" id="values">{{ page.values }}</p>
       <span class="question">What is the legal status of the community’s assets and creations?</span>
-      <div class="button">Modules
+      <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
         <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ownership/">ownership</a></span>
       </div>
       <p contenteditable="true" class="editable output" id="legal">{{ page.legal }}</p>
@@ -315,31 +315,31 @@ layout: default
       <img src="{% link assets/tabler_icons/user.svg %}"
            class="icons" />
       <span class="subhead output">Participants</span>
-      <button onclick="toggleVisible('s2')" class="button plus"> + </button>
+      <button onclick="toggleVisible('s2')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
     </h2>
   
     <div class="section" id="s2" style="display:none">
     
     <span class="question">How does someone become a participant?</span>
-        <div class="button">Modules
+        <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/membership/">membership</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="membership">{{ page.membership }}</p>
   
     <span class="question">How are participants suspended or removed?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>
 
     <span class="question">What special roles can participants hold, and how are roles assigned?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/delegation/">delegation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a></span>
     </div> 
     <p contenteditable="true" class="editable output" id="roles">{{ page.roles }}</p>
 
     <span class="question">Are there limits on the terms or powers of participant roles?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/fact_finding/">fact-finding</a>, <a target="_blank" href="https://democraticmediums.info/mediums/ranked_choice/">ranked choice</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/sortition/">sortition</a>, <a target="_blank" href="https://democraticmediums.info/mediums/term_limit/">term limits</a></span>
     </div>
   <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
@@ -352,7 +352,7 @@ layout: default
     <img src="{% link assets/tabler_icons/news.svg %}"
          class="icons" />
     <span class="subhead output">Policy</span>
-    <button onclick="toggleVisible('s3')" class="button plus"> + </button>
+    <button onclick="toggleVisible('s3')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
   </h2>
   <div class="section" id="s3" style="display:none">
 
@@ -360,19 +360,19 @@ layout: default
     <p contenteditable="true" class="editable output" id="rights">{{ page.rights }}</p>
     
     <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/holographic_consensus/">holographic consensus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/quadratic_voting/">quadratic voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/referendum/">referendum</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/sortition/">sortition</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="decision">{{ page.decision }}</p>
   
     <span class="question">How are policies implemented?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://democraticmediums.info/mediums/lazy_consensus/">lazy consensus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/restorative_justice/">restorative justice</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="implementation">{{ page.implementation }}</p>
   
     <span class="question">How does the community monitor and evaluate its policy implementation? </span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/board/">board</a>, <a target="_blank" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/judiciary/">jury</a>, <a target="_blank" href="https://democraticmediums.info/mediums/precedent/">precedent</a>, <a target="_blank" href="https://democraticmediums.info/mediums/refusal/">refusal</a>, <a target="_blank" href="https://democraticmediums.info/mediums/rough_consensus/">rough consensus</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="oversight">{{ page.oversight }}</p>
@@ -384,7 +384,7 @@ layout: default
     <img src="{% link assets/tabler_icons/refresh.svg %}"
          class="icons" />
     <span class="subhead output">Process</span>
-    <button onclick="toggleVisible('s4')" class="button plus"> + </button>
+    <button onclick="toggleVisible('s4')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
   </h2>
   <div class="section" id="s4" style="display:none">
 
@@ -395,13 +395,13 @@ layout: default
     <p contenteditable="true" class="editable output" id="economics">{{ page.economics }}</p>
 
     <span class="question">Where does the community deliberate about policies and governance?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/caucus/">caucus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/coalition/">coalition</a>, <a target="_blank" href="https://democraticmediums.info/mediums/board/">board</a>, <a target="_blank" href="https://democraticmediums.info/mediums/debate/">debate</a>, <a target="_blank" href="https://democraticmediums.info/mediums/lobbying/">lobbying</a>, <a target="_blank" href="https://democraticmediums.info/mediums/recess/">recess</a>, <a target="_blank" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/transparency/">transparency</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="deliberation">{{ page.deliberation }}</p>
     
     <span class="question">How are grievances among participants addressed?</span>
-    <div class="button">Modules
+    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/audit/">audit</a>, <a target="_blank" href="https://democraticmediums.info/mediums/debate/">debate</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/restorative_justice/">restorative justice</a>, <a target="_blank" href="https://democraticmediums.info/mediums/recess/">recess</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="grievances">{{ page.grievances }}</p>
@@ -413,7 +413,7 @@ layout: default
     <img src="{% link assets/tabler_icons/adjustments.svg %}"
          class="icons" />
     <span class="subhead output">Evolution</span>
-    <button onclick="toggleVisible('s5')" class="button plus"> + </button>
+    <button onclick="toggleVisible('s5')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
   </h2>
   <div class="section" id="s5" style="display:none">