Modules into tooltips - initial effort

_layouts/create.html

@@ -9,6 +9,36 @@ layout: default
     min-height: 1.5em;
     font-family: monospace;
   }
+  .questions {
+    color: gray;
+  }
+  /* TOOLTIP https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right */
+  .tooltip {
+  position: relative;
+  display: inline-block;
+  float: right;
+  border: 1px solid black;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  }
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  top: -5px;
+  left: 105%;
+  }
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  }
 </style>
 
 <article class="post">
@@ -41,24 +71,27 @@ layout: default
 
   <p></p>
 
-  <em>What is the community’s name?</em>
+  <span class="question">What is the community’s name?</span>
   <h1 contenteditable="true" class="editable">
     {{ page.community-name }}
   </h1>
 
   <h2 id="purpose">Purpose</h2>
-  <em>What is the community’s mission?</em>
+  <span class="question">What is the community’s mission?</span>
   <p contenteditable="true" class="editable">
     {{ page.mission }}
   </p>
   
-  <em>What core values does it hold?</em>
+  <span class="question">What core values does it hold?</span>
   <p contenteditable="true" class="editable">
     {{ page.values }}
   </p>
   <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/solidarity/">solidarity</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></p>
   
-  <em>What is the basic structure of the community?</em>
+  <span class="question">What is the basic structure of the community?</span>
+  <div class="tooltip">Modules
+    <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/federation/">federation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/membership/">membership</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/multicameralism/">multicameralism</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ritual/">ritual</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/separation_of_powers/">separation of powers</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/stake_weight/">stake weight</a></span>
+  </div>
   <p contenteditable="true" class="editable">
     {{ page.structure }}
   </p>
@@ -66,12 +99,12 @@ layout: default
   
   <h2 id="members">Members</h2>
   
-  <em>How does someone become a member?</em>
+  <span class="question">How does someone become a member?</span>
   <p contenteditable="true" class="editable">
     {{ page.membership }}
   </p>
   
-  <em>How are members suspended or removed?</em>
+  <span class="question">How are members suspended or removed?</span>
   <p contenteditable="true" class="editable">
     {{ page.removal }}
   </p>
@@ -79,31 +112,31 @@ layout: default
   
   <h2 id="stewards">Stewards</h2>
   
-  <em>Who has the capacity to make and change agreements, and how are they chosen?</em>
+  <span class="question">Who has the capacity to make and change agreements, and how are they chosen?</span>
   <p contenteditable="true" class="editable">
     {{ page.decisions }}
   </p>
   <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/do-ocracy/">do-ocracy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/holographic_consensus/">holographic consensus</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/referendum/">referendum</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a></p>
   
-  <em>Where do stewards and community members deliberate about potential agreements?</em>
+  <span class="question">Where do stewards and community members deliberate about potential agreements?</span>
   <p contenteditable="true" class="editable">
     {{ page.deliberation }}
   </p>
   <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/caucus/">caucus</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/coalition/">coalition</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/debate/">debate</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lobbying/">lobbying</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/recess/">recess</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></p>
 
-  <em>How are the agreements implemented?</em>
+  <span class="question">How are the agreements implemented?</span>
   <p contenteditable="true" class="editable">
     {{ page.implementation }}
   </p>
   <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lazy_consensus/">lazy consensus</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/restorative_justice/">restorative justice</a></p>
   
-  <em>Who oversees the implementation of the agreements?</em>
+  <span class="question">Who oversees the implementation of the agreements?</span>
   <p contenteditable="true" class="editable">
     {{ page.oversight }}
   </p>
   <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/judiciary/">jury</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/precedent/">precedent</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/refusal/">refusal</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/rough_consensus/">rough consensus</a></p>
   
-  <em>How are each of the stewardship roles determined and limited?</em>
+  <span class="question">How are each of the stewardship roles determined and limited?</span>
   <p contenteditable="true" class="editable">
     {{ page.limits }}
   </p>
@@ -111,19 +144,19 @@ layout: default
   
   <h2 id="agreements">Agreements</h2>
 
-  <em>What are the basic rights inscribed in this Rule?</em>
+  <span class="question">What are the basic rights inscribed in this Rule?</span>
   <p contenteditable="true" class="editable">
     {{ page.rights }}
   </p>
   
-  <em>Where do we keep our additional agreements?</em>
+  <span class="question">Where do we keep our additional agreements?</span>
   <p contenteditable="true" class="editable">
     {{ page.agreements }}
   </p>
   
   <h2 id="evolution">Evolution</h2>
 
-  <em>How can this Rule be changed?</em>
+  <span class="question">How can this Rule be changed?</span>
   <p contenteditable="true" class="editable">
     {{ page.evolution }}
   </p>