CommunityRuleFrontend/_layouts/rule.html

---
layout: default
---

<style type="text/css">
/* CLASSES */
.editable {
    padding: 10px 10px 10px 10px;
    min-height: 1.5em;
    font-family: serif;
    border-bottom: 1px dashed gray;
}
.question {
    color: gray;
}
  /* TOOLTIP https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right */
.button {
  position: relative;
  display: inline-block;
  float: right;
  border: 1px solid gray;
  color: gray;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 0 5px 0 5px;
}
.button .tooltiptext {
  visibility: hidden;
  width: 250px;
  border: 1px solid black;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}
.button:hover .tooltiptext {
    visibility: visible;
  }
.icons {
    /* icons are from https://github.com/tabler/tabler-icons */
    margin: 0 5px 0 0;
}
/* IDs */
#rulebox {
    border: 1px solid lightgray;
    padding: 20px;
    margin: 20px 0 30px 0;
}
#rulebox h2 {
    font-family: serif;
}
#name {
    font-weight: bold;
}
#editToggle {
  float: right;
  clear: both;
  border: 1px solid gray;
  color: gray;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  font-size: 1.2em;
}
#toggleDisplayMode {
  clear: both;
  border: 1px solid gray;
  color: gray;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  font-size: 1.2em;
  margin: 0 0 10px 0;
}
#basicstructure {
  font-size: 1.3em;
}
</style>

<script>
  function toggleVisible(id) {
      var x = document.getElementById(id);
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }

  function classDisplayAll(className, value) {
      var elements = document.getElementsByClassName(className);
      for (var i = 0; i < elements.length; i++) {
          elements[i].style.display = value;
      } 
  }
  
  function toggleEditMode() {
      if (editMode === true) {
          editMode = false;
          classDisplayAll("section","block");
          classDisplayAll("button","none");
          classDisplayAll("question","none");
          var editableFields = document.getElementsByClassName("editable");  
          for (var i = 0; i < editableFields.length; i++) {
              editableFields[i].contentEditable = "false";
              editableFields[i].style.borderStyle = "none";
              if (editableFields[i].innerHTML === "") {
                  editableFields[i].style.display = "none";
              }
          }
          document.getElementById("editToggle").innerHTML = "Edit";
      } else {
          editMode = true;
          classDisplayAll("button","block");
          classDisplayAll("question","block");
          classDisplayAll("editable","block");          
          var editableFields = document.getElementsByClassName("editable");
          for (var i = 0; i < editableFields.length; i++) {
              editableFields[i].style.borderStyle = "none none dashed none";
              editableFields[i].contentEditable = "true";
          }
          document.getElementById("editToggle").innerHTML = "Preview";
      }
  }

  var editMode = true;
  window.onload = function() {
      if ((window.location.href.indexOf("/templates/") != -1) ||
          (window.location.href.indexOf("/about/") != -1)) {
          toggleEditMode();
      }
  }

  var displayMode = false;
  function toggleDisplayMode() {
      if (displayMode == false) {
          editMode = true;
          toggleEditMode(); // turns off editMode
          classDisplayAll("site-nav","none");
          classDisplayAll("post-header","none");
          classDisplayAll("explanatory","none");
          classDisplayAll("site-footer","none");
          document.getElementById("toggleDisplayMode").innerHTML = "Edit";
          displayMode = true;
      } else {
          toggleEditMode() // turns on editMode
          classDisplayAll("site-nav","block");
          classDisplayAll("post-header","block");
          classDisplayAll("explanatory","block");
          classDisplayAll("site-footer","block");
          document.getElementById("toggleDisplayMode").innerHTML = "Display";
          displayMode = false;
      }
  }
  
</script>

<article class="post">

  <header class="post-header">
    <h1 class="post-title" id="title">      
        {{ page.title }}
    </h1>


  <button id="editToggle" onclick="toggleEditMode()">Preview</button>

  <div class="post-content">    
    {{ content }}
  </div>

  </header>
  
  <div id="rulebox">

  <span class="question">What is the community’s name?</span>

  <h1 contenteditable="true" class="editable" id="name">{{ page.community-name }}</h1>

  <h2 id="basics">
    <img src="{% link assets/tabler_icons/info-circle.svg %}"
         class="icons" />
    Basics
    <button onclick="toggleVisible('s1')" class="button"> + </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
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/federation/">federation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/membership/">membership</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/multicameralism/">multicameralism</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ritual/">ritual</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/separation_of_powers/">separation of powers</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/stake_weight/">stake weight</a></span>
    </div>
    <p contenteditable="true" class="editable" id="basicstructure">{{ page.structure }}</p>

    <span class="question">What is the community’s mission?</span>
    <p contenteditable="true" class="editable">{{ page.mission }}</p>

    <span class="question">What core values does it hold?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/solidarity/">solidarity</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></span>
    </div>
    <p contenteditable="true" class="editable">{{ page.values }}</p>
  
    <span class="question">What are the basic rights that this Rule guarantees?</span>
    <p contenteditable="true" class="editable">{{ page.rights }}</p>

  </div><!--hiding section s1-->

  <h2 id="participants">
    <img src="{% link assets/tabler_icons/user.svg %}"
         class="icons" />
    Participants
    <button onclick="toggleVisible('s2')" class="button"> + </button>
  </h2>
  <div class="section" id="s2" style="display:none">

    <span class="question">How does someone become a member?</span>
    <p contenteditable="true" class="editable">{{ page.membership }}</p>
  
    <span class="question">How are members suspended or removed?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/reputation/">reputation</a></span>
    </div>
  
    <p contenteditable="true" class="editable">{{ page.removal }}</p>

  </div><!--hiding section s2-->
  
  <h2 id="policies">
    <img src="{% link assets/tabler_icons/news.svg %}"
         class="icons" />
    Policies
    <button onclick="toggleVisible('s3')" class="button"> + </button>
  </h2>
  <div class="section" id="s3" style="display:none">
 
    <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/holographic_consensus/">holographic consensus</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/referendum/">referendum</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a></span>
    </div>
    <p contenteditable="true" class="editable">{{ page.decision }}</p>
  
    <span class="question">Where do community members deliberate about potential policies?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/caucus/">caucus</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/coalition/">coalition</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/debate/">debate</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lobbying/">lobbying</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/recess/">recess</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></span>
    </div>
    <p contenteditable="true" class="editable">{{ page.deliberation }}</p>

    <span class="question">How are policies implemented?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lazy_consensus/">lazy consensus</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/restorative_justice/">restorative justice</a></span>
    </div>
    <p contenteditable="true" class="editable">{{ page.implementation }}</p>
  
    <span class="question">Who oversees the implementation of policies?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/judiciary/">jury</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/precedent/">precedent</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/refusal/">refusal</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/rough_consensus/">rough consensus</a></span>
    </div>
    <p contenteditable="true" class="editable">{{ page.oversight }}</p>
  
    <span class="question">What limits are there on member roles and policies?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/fact_finding/">fact-finding</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ranked_choice/">ranked choice</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/reputation/">reputation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/term_limit/">term limits</a></span>
  </div>
  
  <p contenteditable="true" class="editable">{{ page.limits }}</p>

  </div><!--hiding section s3-->
  
  <h2 id="evolution">
    <img src="{% link assets/tabler_icons/adjustments.svg %}"
         class="icons" />
    Evolution
    <button onclick="toggleVisible('s4')" class="button"> + </button>
  </h2>
  <div class="section" id="s4" style="display:none">

    <span class="question">Where do we maintain our policies and records?</span>
    <p contenteditable="true" class="editable">{{ page.records }}</p>

    <span class="question">How can this Rule be modified?</span>
    <p contenteditable="true" class="editable">{{ page.modification }}</p>

  </div><!--hiding section s4-->
  
  </div><!--#rulebox-->

  <p class="explanatory">When you're finished, use the button below and print, copy/paste, or save your Rule to where your community can keep track of it and edit it in the future.</p>
  
  <button id="toggleDisplayMode" onclick="toggleDisplayMode()">Display</button>
    
</article>