Improved appearance of module tooltips

_layouts/rule.html

@@ -335,7 +335,7 @@ layout: default
     
       <span class="question">What is the basic structure of the community?</span>
       <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>
+        <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/federation/">federation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/membership/">membership</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/multicameralism/">multicameralism</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/ritual/">ritual</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/stake_weight/">stake weight</a></span>
       </div>
       <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
 
@@ -344,12 +344,12 @@ layout: default
 
       <span class="question">What core values does the community hold?</span>
       <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>
+        <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/solidarity/">solidarity</a> <a target="_blank" class="module" 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"><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>
+        <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/ownership/">ownership</a></span>
       </div>
       <p contenteditable="true" class="editable output" id="legal">{{ page.legal }}</p>
       
@@ -368,25 +368,25 @@ layout: default
     
     <span class="question">How does someone become a participant?</span>
         <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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/membership/">membership</a> <a target="_blank" class="module" 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"><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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" 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"><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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/delegation/">delegation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/representation/">representation</a> <a target="_blank" class="module" 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"><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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/fact_finding/">fact-finding</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/ranked_choice/">ranked choice</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/representation/">representation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/reputation/">reputation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/sortition/">sortition</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/term_limit/">term limits</a></span>
     </div>
   <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
 
@@ -407,19 +407,19 @@ layout: default
     
     <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
     <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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/holographic_consensus/">holographic consensus</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/quadratic_voting/">quadratic voting</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/referendum/">referendum</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/representation/">representation</a> <a target="_blank" class="module" 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"><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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/lazy_consensus/">lazy consensus</a> <a target="_blank" class="module" 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"><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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/board/">board</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/judiciary/">jury</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/precedent/">precedent</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/refusal/">refusal</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/rough_consensus/">rough consensus</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="oversight">{{ page.oversight }}</p>
     
@@ -442,13 +442,13 @@ layout: default
 
     <span class="question">Where does the community deliberate about policies and governance?</span>
     <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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/caucus/">caucus</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/coalition/">coalition</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/board/">board</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/debate/">debate</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/lobbying/">lobbying</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/recess/">recess</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a> <a target="_blank" class="module" 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"><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>
+      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/audit/">audit</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/debate/">debate</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/restorative_justice/">restorative justice</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/recess/">recess</a></span>
     </div>
     <p contenteditable="true" class="editable output" id="grievances">{{ page.grievances }}</p>
     

_sass/communityrule.scss

@@ -42,7 +42,7 @@
   background-color: white;
   text-align: center;
   border-radius: 6px;
-  padding: 5px 0;
+  padding: 10px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
@@ -55,6 +55,30 @@
 .button:hover .tooltiptext {
     visibility: visible;
 }
+
+/* Modules */
+
+.module {
+  border: 1px solid gray;
+  color: black;
+  background-color: lightgray;
+  text-align: center;
+  border-radius: 10px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
+}
+.module:hover {
+    background-color: gray;
+}
+a.module:hover {
+    text-decoration: none;
+    color: white;
+}
+a.module:visited {
+    color: black;
+}
+
 /* pushButton
 These are the major functional buttons*/
 .pushButton {