Merge branch 'bookstyle-ntnsndr' into 'master'

Bookstyle ntnsndr

See merge request medlabboulder/communityrule!4

Gemfile.lock

@@ -4,17 +4,17 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.6)
-    em-websocket (0.5.1)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.2)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.13.0)
+    ffi (1.15.1)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
-    i18n (1.8.3)
+    i18n (1.8.10)
       concurrent-ruby (~> 1.0)
-    jekyll (4.1.0)
+    jekyll (4.1.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -29,20 +29,20 @@ GEM
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 1.8)
-    jekyll-feed (0.13.0)
+    jekyll-feed (0.15.1)
       jekyll (>= 3.7, < 5.0)
     jekyll-sass-converter (2.1.0)
       sassc (> 2.0.1, < 3.0)
-    jekyll-seo-tag (2.6.1)
-      jekyll (>= 3.3, < 5.0)
+    jekyll-seo-tag (2.7.1)
+      jekyll (>= 3.8, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.2.1)
+    kramdown (2.3.1)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.2.1)
+    listen (3.5.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
@@ -52,21 +52,21 @@ GEM
       jekyll-seo-tag (~> 2.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.5)
-    rb-fsevent (0.10.4)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.0)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rexml (3.2.4)
-    rouge (3.19.0)
+    rexml (3.2.5)
+    rouge (3.26.0)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
-    tzinfo (1.2.5)
+    tzinfo (1.2.9)
       thread_safe (~> 0.1)
-    tzinfo-data (1.2019.3)
+    tzinfo-data (1.2021.1)
       tzinfo (>= 1.0.0)
     unicode-display_width (1.7.0)
     wdm (0.1.1)
@@ -83,4 +83,4 @@ DEPENDENCIES
   wdm (~> 0.1.1)
 
 BUNDLED WITH
-   2.1.4
+   2.2.17

_about/modules.html

@@ -28,7 +28,7 @@ permalink: /modules/
         {% endif %}
         {% assign last_type = module.type %}
 		<span class="module" id="module-{{ module.title | slugify }}"
-			  draggable="true" ondragstart="drag(event)">
+			  draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
 		  <span id="module-name" title="{{ module.summary }}">{{ module.title }}</span>
           <a target="_blank" href="{{ module.url }}">
             <img title="More info" draggable="false" class="module-logo"

_includes/header.html

@@ -3,8 +3,8 @@
   <div class="wrapper">
 
     <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
-    <img src="{% link assets/bird-icon.png %}" alt="bird icon"
-         style="height:40px; padding: 5px 0 0 10px;" />
+    <img src="{% link assets/elements/icon_do.svg %}" alt="do-ocracy icon"
+         style="height:40px; padding: 5px 0 0 20px;" />
 
     <nav class="site-nav">
       <a href="#" class="menu-icon">
@@ -18,7 +18,7 @@
       <div class="trigger">
         {% for my_page in site.pages %}
           {% if my_page.title %}
-          <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
+          <a class="page-link{% if page.url == my_page.url %} page-link-active{% endif %}" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
           {% endif %}
         {% endfor %}
       </div>

_includes/rule-scripts.html

@@ -13,6 +13,10 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   }
   function drag(ev) {
       ev.dataTransfer.setData("text", ev.target.id);
+      document.getElementById("module-input").classList.add('drag-target');
+  }
+  function dragEnd(ev) {
+      document.getElementById("module-input").classList.remove('drag-target');
   }
   function drop(ev) {
       ev.preventDefault();
@@ -62,9 +66,9 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           module.id += "-" + nowModule.getTime();
       }
       // hide the info button
-      module.children[1].style.display = "none";
+    //   module.children[1].style.display = "none";
       // display the deletion button
-      module.children[2].style.display = "inline";
+    //   module.children[2].style.display = "inline";
       // pop it in!
       target.appendChild(module);
       // add module-field button (using HTML so it saves to Library)
@@ -92,8 +96,8 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
       var moduleName = module.children[0].innerHTML;
       var moduleTitle = module.children[0].title;
       if (editMode) {
-          var query = "How does the <strong>" + moduleName
-              + "</strong> module work?";
+          var query = "How does the <span class=\"module\">" + moduleName
+              + "</span> module work?";
           var destination = document.getElementById("builder-field");
           if (moduleName == null) { moduleName = ""; }     
           var output = '\n<div id="custom-field-container">';
@@ -266,76 +270,73 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   // Toggles whether editable fields are editable or not
   // and removes editing tools.
   function toggleEditMode() {
-      if (editMode === true) { // switch to preview mode
-          editMode = false;
-          classDisplayAll("prompt","none");
-          classDisplayAll("delete-module","none");
-          var editableFields = document.getElementsByClassName("editable");  
-          // de-editable-ize the editable fields
-          for (var i = 0; i < editableFields.length; i++) {
-              editableFields[i].contentEditable = "false";
-              editableFields[i].style.borderStyle = "none";
-              // Remove empty fields entirely
-              var content = editableFields[i].innerHTML;
-              content = stripHTML(content);
-              if (content === "") {
-                  editableFields[i].style.display = "none";
-              }   
-          }
-          // RuleBuilder sections
-          if (builderEmpty()) {
-              document.getElementById("rule-builder").style.display = "none";
-          } else {
-              document.getElementById("builder-field").innerHTML = displayBuilderHTML();
-              document.getElementById("module-input").style.border = "none";
-          }
-          if (document.contains(document.getElementById("custom-field-container"))) {
-              document.getElementById("custom-field-container").remove();
-          }
-          document.getElementById("module-menu").style.display = "none";
-          // Handle author link
-          var authorName = document.getElementById("author-text").value;
-          var authorURL = document.getElementById("author-url").value;
-          if (authorName != "") {
-              document.getElementById("authorship-words").style.display = "inline";
-              if (authorURL != "") { // both author and URL present                
-                  document.getElementById("authorship-result").innerHTML = "<a href='" + authorURL +"'>" + authorName + "</a>";
-                  document.getElementById("authorship-result").style.display = "inline";
-              } else { // only authorName present
-                  document.getElementById("authorship-result").innerHTML = authorName;
-                  document.getElementById("authorship-result").style.display = "inline";
-              }
-          } else {
-              document.getElementById("authorship").style.display = "none";
-          }
-          // Finally, change button name
-          document.getElementById("editToggle").innerHTML = "Customize";
-      } else { // Switch to editMode
-          editMode = true;
-          classDisplayAll("prompt","block");
-          classDisplayAll("editable","block");
-          // RuleBuilder handling
-          classDisplayAll("delete-module","inline");          
-          document.getElementById("rule-builder").style.display = "block";
-          document.getElementById("module-menu").style.display = "block";
-          document.getElementById("module-input").style.border = "";
-          document.getElementById("builder-field").innerHTML = "";
-          // link handling
-          classDisplayAll("link-text","inline");
-          classDisplayAll("link-url","inline");
-          document.getElementById("authorship-result").style.display = "none";
-          document.getElementById("authorship-words").style.display = "none";
-          document.getElementById("authorship").style.display = "block";
-          // make all editable fields visible
-          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";
-          }
-          // Change button name
-          document.getElementById("editToggle").innerHTML = "Preview";
+      if (editMode === true) {
+          disableEditMode();
+        } else {
+          enableEditMode();
       }
-  }
+    }
+
+  function disableEditMode() { // switch to preview mode
+        editMode = false;
+
+        document.getElementById("rulebox").classList.add('rulebox-preview');
+        document.getElementById("rulebox").classList.remove('rulebox-edit');
+
+        var editableFields = document.getElementsByClassName("editable");  
+        // de-editable-ize the editable fields
+        for (var i = 0; i < editableFields.length; i++) {
+            editableFields[i].contentEditable = "false";
+            // Remove empty fields entirely
+            var content = editableFields[i].innerHTML;
+            content = stripHTML(content);
+            if (content === "") {
+                // editableFields[i].style.display = "none";
+            }   
+        }
+
+        // RuleBuilder sections
+        if (builderEmpty()) {
+        } else {
+            document.getElementById("builder-field").innerHTML = displayBuilderHTML();
+        }
+        if (document.contains(document.getElementById("custom-field-container"))) {
+            document.getElementById("custom-field-container").remove();
+        }
+
+        // Handle author link
+        var authorName = document.getElementById("author-text").value;
+        var authorURL = document.getElementById("author-url").value;
+        if (authorName != "") {
+            if (authorURL != "") { // both author and URL present                
+                document.getElementById("authorship-result").innerHTML = "<a href='" + authorURL +"'>" + authorName + "</a>";
+            } else { // only authorName present
+                document.getElementById("authorship-result").innerHTML = authorName;
+            }
+            document.getElementById("authorship").style.display = "";
+        } else {
+            document.getElementById("authorship").style.display = "none";
+        }
+        // Finally, change button name
+        document.getElementById("editToggle").innerHTML = "Customize";
+    }
+
+  function enableEditMode() { // Switch to editMode
+        editMode = true;
+
+        document.getElementById("rulebox").classList.remove('rulebox-preview');
+        document.getElementById("rulebox").classList.add('rulebox-edit');
+
+        // RuleBuilder handling
+        document.getElementById("builder-field").innerHTML = "";
+        // make all editable fields visible
+        var editableFields = document.getElementsByClassName("editable");
+        for (var i = 0; i < editableFields.length; i++) {
+            editableFields[i].contentEditable = "true";
+        }
+        // Change button name
+        document.getElementById("editToggle").innerHTML = "Preview";
+    }
 
   // toggleDisplayMode()
   // toggles full displayMode, the Rule-only display for a published Rule
@@ -343,8 +344,9 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   var displayMode = false;
   function toggleDisplayMode() {
       if (displayMode == false) {
+          document.body.classList.add("display_rule");
           editMode = true;
-          toggleEditMode(); // turns off editMode
+          disableEditMode(); // turns off editMode
           classDisplayAll("site-nav","none");
           classDisplayAll("post-header","none");
           classDisplayAll("site-footer","none");
@@ -360,7 +362,8 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           // Finish
           displayMode = true;
       } else {
-          toggleEditMode() // turns on editMode
+          document.body.classList.remove("display_rule");
+          enableEditMode() // turns on editMode
           classDisplayAll("site-nav","block");
           classDisplayAll("post-header","block");
           classDisplayAll("site-footer","block");
@@ -586,21 +589,22 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   
   // END Publish tools
 
-  
+var rID;
+  window.onload = function() {
   // FINALLY, Page loading
   // First, grab the current URL
   var urlParams = new URLSearchParams(window.location.search);
   // Determine if it is a published Rule
   if (urlParams.has('r')) {
       // If so, grab the Rule from database and enter displayMode
-      var rID = urlParams.get('r');
+      rID = urlParams.get('r');
+      document.body.classList.add("display_rule");
       displayRule(rID);
   } else {
       // Otherwise, open in editMode as default
-      var editMode = true;
+      enableEditMode();
   }
   // eqip editable fields to remove formatting from pasted content    
-  window.onload = function() {
       var editableElements = document.getElementsByClassName("editable");
       for (var i = 0; i < editableElements.length; i++ ) {
           editableElements[i].addEventListener("paste", handleEditablePaste);

_layouts/library.html

@@ -20,14 +20,14 @@ layout: default
               var icon = rules[i]["icon"];
               var iconHTML = "";
               if (icon != null) {
-                  iconHTML = "<img src='/assets/tabler_icons/" + icon + "' /> ";
+                  iconHTML = "<img src='/assets/elements/" + icon + "' />";
               }
               // first the titles
               var title = rules[i]["communityname"];
               if (title == null) { title = "Untitled"; }
-              libHTML += "<div class='library-rule-name'>" + iconHTML +
-                  "<a href='/create/?r=" + rules[i]["ruleID"] + "'>" +
-                  title + "</a></div>\n";
+              libHTML += "<h2 class='library-rule-name'>" + 
+                  "<a href='/create/?r=" + rules[i]["ruleID"] + "'>" + iconHTML +
+                  title + "</a></h2>\n";
               // then the authors
               var author = rules[i]["author-text"];
               if (author != null) {

_layouts/rule.html

@@ -22,7 +22,7 @@ layout: default
 
   </header>
   
-  <div id="rulebox">
+  <div id="rulebox" class="rulebox">
 
     <span class="prompt">What is the community’s name?</span>
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
@@ -31,16 +31,16 @@ layout: default
     <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
     
     <!-- RuleBuilder -->
-    <div id="rule-builder">
-      <div id="module-input"
+    <div id="rule-builder" class="rulebuilder">
+      <div id="module-input" class="rulebuilder_input"
            ondrop="drop(event)" ondragover="allowDrop(event)">
         <span class="prompt" id="drag-directions">Browse modules from below and drag them here.</span>
       </div>
 
-      <div id="builder-field">
+      <div id="builder-field" class="rulebuilder_list">
       </div>
       
-      <div id="module-menu">
+      <div id="module-menu" class="rulebuilder_modules">
         
 		    <!-- Load preset modules from _modules/ -->
         {% assign modules_array = site.modules | sort: "type" %}
@@ -54,33 +54,37 @@ layout: default
         {{ module.type }}
           <button onclick="toggleVisible('module-type-{{ module.type }}')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
         </div>
-        <div class="module-questions">{{ site.data.module_types[module.type].question }}</div>
-        <div id="module-type-{{ module.type }}" style="display: none;">
+        <p class="module-questions">{{ site.data.module_types[module.type].question }}</p>
+        <div id="module-type-{{ module.type }}" class="module-type" style="display: none;">
           {% endif %}
           {% assign last_type = module.type %}
 		      <span class="module" id="module-{{ module.title | slugify }}"
-            draggable="true" ondragstart="drag(event)">
+            draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
             <span id="module-name" title="{{ module.summary }}">{{ module.title }}</span>
-            <a target="_blank" href="{{ module.url }}">
+            <a target="_blank" href="{{ module.url }}" class="module-info">
               <img title="More info" draggable="false" class="module-logo"
                 src="{% link assets/tabler_icons/info-circle.svg %}" /></a>
-            <a onclick="this.parentNode.remove()" class="delete-module"
-              style="display:none">
+            <a onclick="this.parentNode.remove()" class="delete-module">
             <img src="{% link assets/tabler_icons/x.svg %}" /></a>
           </span>
         {% endif %}
         {% endfor %}
         </div>
 
-        <div id="module-custom-container">
+        <div class="module-type-header">
+        <img src="{% link assets/tabler_icons/bulb.svg %}" />
+        Custom Module
+        </div>
+        <p class="module-questions">Create your own module.</p>
+        <div id="module-custom-container" class="module-type">
           <!-- Customizable module -->
-          <span class="module" id="module-custom"
-                draggable="true" ondragstart="drag(event)">
+          <span class="module module-custom" id="module-custom"
+                draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
+            <img class="module-info" src="{% link assets/tabler_icons/grid-dots.svg %}" draggable="false" />
             <input contenteditable="true" draggable="false" placeholder="Custom module..."/>
-            <img src="{% link assets/tabler_icons/bulb.svg %}" class="module-logo"
+            <img src="{% link assets/tabler_icons/bulb.svg %}"
                 draggable="false" />
-            <a onclick="this.parentNode.remove()" class="delete-module"
-        style="display:none">
+            <a onclick="this.parentNode.remove()" class="delete-module">
             <img src="{% link assets/tabler_icons/x.svg %}" /></a>
           </span>
         </div>
@@ -91,13 +95,19 @@ layout: default
       <span class="prompt"></span>
       <p id="rulewriter" contenteditable="true" class="editable output"></p>
     </div>
+
+    <div class="metadata_input">
+      <p class="prompt"><img src="{% link assets/tabler_icons/pencil.svg %}" /> Created by</p>
+      <input contenteditable="true" class="editable" id="author-text" placeholder="Creator Name" />
+      
+      <p class="prompt"><img src="{% link assets/tabler_icons/globe.svg %}" /> Creator URL</p>
+      <input contenteditable="true" class="editable" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*" />
+    </div>
   
-    <div id="authorship" class="linkbox">
-      <span id="authorship-words">Created by</span>
-      <input contenteditable="true" class="editable link-text" id="author-text" placeholder="Created by" />
+    <div id="authorship" class="linkbox metadata_display">
+      <span>Created by</span>
       <span class="link-divider"><img src="{% link assets/tabler_icons/pencil.svg %}" title="Add link" /></span>
-      <input contenteditable="true" class="editable link-url" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*" />
-      <span id="authorship-result"></span>
+      <span id="authorship-result" class="linkbox_result"></span>
     </div>
   
   </div><!--#rulebox-->

_sass/_base.scss

@@ -41,7 +41,12 @@ ul, ol, dl, figure,
     margin-bottom: $spacing-unit / 2;
 }
 
-
+hr {
+    border-color: $grey-color-light;
+    border-style: solid;
+    border-width: 1px 0 0;
+    margin: $spacing-unit - 1px 0 $spacing-unit;
+}
 
 /**
  * Images
@@ -86,9 +91,17 @@ li {
  * Headings
  */
 h1, h2, h3, h4, h5, h6 {
-    font-weight: $base-font-weight;
+    font-family: $header-font-family;
+    font-size: nth($header-font-size, -1); // default to smallest header size
+    font-weight: $base-font-weight ;
 }
 
+@for $i from 1 through length($header-font-size) {
+  h#{$i} {
+    font-size: nth($header-font-size, $i);
+    font-weight: nth($header-font-weight, $i);
+  }
+}
 
 /**
  * Links
@@ -116,8 +129,6 @@ blockquote {
     color: $grey-color;
     border-left: 4px solid $grey-color-light;
     padding-left: $spacing-unit / 2;
-    font-size: 18px;
-    letter-spacing: -1px;
     font-style: italic;
 
     > :last-child {
@@ -155,6 +166,17 @@ pre {
 
 
 
+/**
+ * additional tags
+ */
+
+mark {
+    background-color: $brand-yellow;
+    color: inherit;
+    box-shadow: -3px 0 0 0 $brand-yellow, 3px 0 0 0 $brand-yellow;
+}
+
+
 /**
  * Wrapper
  */

_sass/_fonts.scss

@@ -0,0 +1,287 @@
+// Reforma2018
+// https://pampatype.com/reforma
+
+/* Webfont: Reforma2018 Blanca */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.ttf') format('truetype');	 /* Safari, Android, iOS */
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Reforma2018 BlancaItalica */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.ttf') format('truetype');     /* Safari, Android, iOS */
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+// /* Webfont: Reforma2018 Gris */@font-face {
+//     font-family: 'Reforma2018';
+//     src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.woff2') format('woff2'), /* /* Super Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.eot') format('woff'),
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-Gris.ttf') format('truetype');	 /* Safari, Android, iOS */
+//     font-style: normal;
+//     font-weight: 500;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Reforma2018 GrisItalica */@font-face {
+//     font-family: 'Reforma2018';
+//     src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.woff2') format('woff2'), /* /* Super Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.eot') format('woff'),
+//          url('../assets/../assets/fonts/Reforma2018/Reforma2018-GrisItalica.ttf') format('truetype');     /* Safari, Android, iOS */
+//     font-style: italic;
+//     font-weight: 500;
+//     text-rendering: optimizeLegibility;
+// }
+
+/* Webfont: Reforma2018 Negra */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.ttf') format('truetype');	 /* Safari, Android, iOS */
+    font-style: normal;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Reforma2018 NegraItalica */@font-face {
+    font-family: 'Reforma2018';
+    src: url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.woff2') format('woff2'), /* /* Super Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.woff') format('woff'), /* Modern Browsers */
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.eot') format('woff'),
+         url('../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.ttf') format('truetype');     /* Safari, Android, iOS */
+    font-style: italic;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+}
+
+// LATO
+// https://www.latofonts.com/lato-free-../assets/fonts/lato/
+
+// /* Webfont: Lato-Black */@font-face {
+//     font-family: 'LatoWebBlack';
+//     src: url('../assets/fonts/lato/Lato-Black.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Black.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Black.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-BlackItalic */@font-face {
+//     font-family: 'LatoWebBlack';
+//     src: url('../assets/fonts/lato/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-BlackItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+/* Webfont: Lato-Bold */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Bold.ttf') format('truetype');
+    font-style: normal;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-BoldItalic */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-BoldItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Regular */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Regular.ttf') format('truetype');
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Italic */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Italic.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Italic.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Italic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Light */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-Light.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-Light.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-LightItalic */@font-face {
+    font-family: 'lato';
+    src: url('../assets/fonts/lato/Lato-LightItalic.eot'); /* IE9 Compat Modes */
+    src: url('../assets/fonts/lato/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../assets/fonts/lato/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */
+         url('../assets/fonts/lato/Lato-LightItalic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+// /* Webfont: Lato-Hairline */@font-face {
+//     font-family: 'LatoWebHairline';
+//     src: url('../assets/fonts/lato/Lato-Hairline.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Hairline.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-HairlineItalic */@font-face {
+//     font-family: 'LatoWebHairline';
+//     src: url('../assets/fonts/lato/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HairlineItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Heavy */@font-face {
+//     font-family: 'LatoWebHeavy';
+//     src: url('../assets/fonts/lato/Lato-Heavy.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Heavy.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-HeavyItalic */@font-face {
+//     font-family: 'LatoWebHeavy';
+//     src: url('../assets/fonts/lato/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-HeavyItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Medium */@font-face {
+//     font-family: 'LatoWebMedium';
+//     src: url('../assets/fonts/lato/Lato-Medium.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Medium.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Medium.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-MediumItalic */@font-face {
+//     font-family: 'LatoWebMedium';
+//     src: url('../assets/fonts/lato/Lato-MediumItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-MediumItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Semibold */@font-face {
+//     font-family: 'LatoWebSemibold';
+//     src: url('../assets/fonts/lato/Lato-Semibold.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Semibold.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-SemiboldItalic */@font-face {
+//     font-family: 'LatoWebSemibold';
+//     src: url('../assets/fonts/lato/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-SemiboldItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-Thin */@font-face {
+//     font-family: 'LatoWebThin';
+//     src: url('../assets/fonts/lato/Lato-Thin.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Thin.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-Thin.ttf') format('truetype');
+//     font-style: normal;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }
+
+// /* Webfont: Lato-ThinItalic */@font-face {
+//     font-family: 'LatoWebThin';
+//     src: url('../assets/fonts/lato/Lato-ThinItalic.eot'); /* IE9 Compat Modes */
+//     src: url('../assets/fonts/lato/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+//          url('../assets/fonts/lato/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */
+//          url('../assets/fonts/lato/Lato-ThinItalic.ttf') format('truetype');
+//     font-style: italic;
+//     font-weight: normal;
+//     text-rendering: optimizeLegibility;
+// }

_sass/_layout.scss

@@ -2,8 +2,9 @@
  * Site header
  */
 .site-header {
-    border-top: 5px solid $grey-color-dark;
-    border-bottom: 1px solid $grey-color-light;
+    background-color: $brand-yellow;
+    border-bottom: 3px solid #000;
+    padding: 5px 0;
     min-height: 56px;
 
     // Positioning context for the mobile navigation icon
@@ -11,20 +12,21 @@
 }
 
 .site-title {
+    font-family: $header-font-family;
     font-size: 26px;
-    font-weight: 300;
+    font-weight: bold;
     line-height: 56px;
-    letter-spacing: -1px;
     margin-bottom: 0;
     float: left;
 
     &,
     &:visited {
-        color: $grey-color-dark;
+        color: #000;
     }
 }
 
 .site-nav {
+    font-family: $header-font-family;
     float: right;
     line-height: 56px;
 
@@ -40,8 +42,14 @@
         &:not(:last-child) {
             margin-right: 20px;
         }
+        &:hover,
+        &.page-link-active {
+            border-bottom: 3px solid;
+            text-decoration: none;
+        }
     }
 
+
     @include media-query($on-palm) {
         position: absolute;
         top: 9px;
@@ -98,13 +106,9 @@
  * Site footer
  */
 .site-footer {
-    border-top: 1px solid $grey-color-light;
     padding: $spacing-unit 0;
-}
-
-.footer-heading {
-    font-size: 18px;
-    margin-bottom: $spacing-unit / 2;
+    background: #fff;
+    box-shadow: inset 0px 2px 5px 0px $grey-color-light;
 }
 
 .contact-list,
@@ -204,13 +208,6 @@
 }
 
 .post-title {
-    font-size: 42px;
-    letter-spacing: -1px;
-    line-height: 1;
-
-    @include media-query($on-laptop) {
-        font-size: 36px;
-    }
 }
 
 .post-content {

_sass/communityrule.scss

@@ -1,5 +1,6 @@
 /* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 
+@import "rulebox";
 
 /* CLASSES */
 .button {
@@ -14,8 +15,8 @@
   padding: 0;
 }
 .callout-text {
-    font-family: serif;
-    font-size:2em;
+    font-family: $header-font-family;
+    font-size:nth($header-font-size, 1);
     margin:1.5em 0 1em 0;
 }
 .callout-icon {
@@ -23,13 +24,6 @@
     margin:1.5em 0 1em 0;
 }
 
-.editable, input.editable { /* All editable fields */
-    padding: 10px 10px 10px 10px;
-    min-height: 1.5em;
-    font-family: serif;
-    border: none;
-    border-bottom: 1px dashed gray;
-}
 .prompt {
     color: gray;
 }
@@ -57,62 +51,28 @@
     border: 1px solid lightgray;
 }
 
-.module-type-header {
-    font-weight: bold;
-    font-size: 1em;
-    margin: 10px 5px 5px 5px;
-}
-.module-questions {
-    color: gray;
-    font-size: .8em;
-    margin: 0 10px 10px 10px;
-}
-
 .button:hover {
     background-color: lightgray;
 }
-
-#module-input {
-    overflow: hidden;
-    border: 1px solid lightgray;
-    border-radius: 6px;
-    padding: 10px 10px 10px 10px;
-    margin: 0 0 15px 0;
-    text-align: left;
-    min-height: 1.5em;
-}
   
 .module {
     display: block;
-    border: 1px solid gray;
-    color: black;
-    background-color: lightgray;
+    border: 2px solid #000;
+    color: $text-color;
+    background-color: #fff;
     text-align: center;
-    border-radius: 10px;
+    line-height: 1.5;
     padding: 5px;
     margin: 5px;
     display: inline-block;
+    font-family: $header-font-family;
     font-size: .8em;
     cursor: pointer;
 }
 
-.module:hover {
-    border-color: gray;
-}
-.module a:hover {
-}
-#module-name {
-
-}
 .delete-module {
     cursor: pointer;
 }
-.module-logo {
-}
-
-#module-custom-container {
-    margin: 20px 0 10px 0;
-}
 
 .builder-list {
     margin-bottom: 2em;
@@ -148,6 +108,16 @@
     font-size: 1.3em;
 }
 
+// DISPLAY MODE
+
+.display_rule {
+    .site-nav,
+    .post-header,
+    .site-footer {
+        display: none;
+    }
+}
+
 /* pushButton
 These are the major functional buttons*/
 .pushButton {
@@ -158,6 +128,7 @@ These are the major functional buttons*/
     border-radius: 6px;
     padding: 5px;
     margin: 0 5px 0 5px;
+    font-family: $header-font-family;
     font-size: 1.2em;
 }
 .pushButton:hover {
@@ -173,14 +144,7 @@ These are the major functional buttons*/
 /* link fields
 Enabling users to add links*/
 .linkbox {
-  position: relative;
-  display: block;
-  border: 1px solid lightgray;
-  background-color: white;
-  border-radius: 6px;
-  padding: 10px 0px 10px 0px;
-  margin-bottom: 15px;
-  text-align: center;
+
 }
 .link-text {
     width: 40%;
@@ -201,13 +165,7 @@ Enabling users to add links*/
     font-size: 1em;
 }
 #authorship {
-    margin: 40px 0 0 0;
-}
-#authorship-words {
-    display: none;
-}
-#authorship-result {
-    display: none;
+    
 }
 
 /* LIBRARY */
@@ -224,6 +182,10 @@ Enabling users to add links*/
     font-size: 1.2em;
     font-weight: bold;
 }
+.library-rule-name img {
+    max-width: 50px;
+    margin: 0 15px 10px 0;
+}
 .library-rule-author {
     display: inline-block;    
     margin: 0 0 0 10px;
@@ -234,6 +196,7 @@ Enabling users to add links*/
     margin: 0;
 }
 .library-module {
+    border-width: 1px;
     font-size: .7em;
     padding: 1px 5px 1px 5px;
     margin: 0px;
@@ -241,17 +204,6 @@ Enabling users to add links*/
 }
 
 /* VARIOUS IDs */
-#rulebox {
-    border: 1px solid lightgray;
-    padding: 20px;
-    margin: 20px 0 30px 0;
-}
-#rulebox h3 {
-    font-family: serif;
-}
-#communityname {
-    font-weight: bold;
-}
 #structure {
     font-size: 1.3em;
 }

_sass/rulebox.scss

@@ -0,0 +1,208 @@
+// rulebox module skeleton for loading
+
+.rulebox:not([class*="rulebox-"]) {
+    .editable:empty {
+        background-color: $grey-color-light;
+    }
+    h1 {
+        max-width: 45%;
+    }
+
+    p {
+        min-height: 3em;
+    }
+
+    .rulebuilder_input {
+        $padding: 10px;
+        $height: 38px;
+        $widths: 80px, 78px, 140px, 90px, 200px, 130px;
+
+        $position: $padding;
+        $bg-img: null;
+        $bg-size: null;
+        $bg-pos: null;
+
+        @for $i from 1 through length($widths) {
+            $bg-img: $bg-img linear-gradient(white $height, transparent 0)#{if($i != length($widths), ',', '')};
+            $bg-size: $bg-size nth($widths, $i) $height#{if($i != length($widths), ',', '')};
+            $bg-pos: $bg-pos $position $padding#{if($i != length($widths), ',', '')};
+
+            $position: $position + nth($widths, $i) + $padding;
+        }
+        
+        background-color: $grey-color-light;
+        background-image: $bg-img;
+        background-size: $bg-size;
+        background-position: $bg-pos;
+        background-repeat: no-repeat;
+        height: $height + $padding * 2;
+    }
+
+    .rulebuilder_list {
+        background-color: $grey-color-light;
+        min-height: 9em;
+        max-width: 90%;
+    }
+}
+
+// Styles for the rulebox module
+
+.rulebox {
+    border: 1px solid $grey-color-light;
+    padding: 20px;
+    margin: 20px 0 30px 0;
+
+    .prompt,
+    .module-type-header {
+        color: $grey-color-dark;
+        font-family: $header-font-family;
+        font-weight: bold;
+    }
+
+    .module-questions {
+        color: $grey-color;
+        font-size: .8em;
+    }
+
+    .module-type {
+        margin-bottom: $spacing-unit/2;
+    }
+
+    .prompt,
+    .delete-module,
+    .rulebuilder_modules,
+    .linkbox_input,
+    .metadata_input {
+        display: none;
+    }
+
+    .editable, input.editable { /* All editable fields */
+        padding: 10px;
+        min-height: 1.5em;
+        border: none;
+    }
+
+    .editable[contenteditable="false"] { /* inactive editable fields */
+        border: none;
+    }
+    
+    // TODO: module display is set within the spreadsheet
+    .rulebuilder_input .module .delete-module {
+        display: none !important;
+    }
+
+    .rulebuilder {}
+    .rulebuilder_input {
+        overflow: hidden;
+        margin: 0 0 $spacing-unit;
+        text-align: left;
+        min-height: 1.5em;
+        .prompt {
+            color: $text-color;
+        }
+        .module .module-info {
+            display: none;
+        }
+    }
+    .rulebuilder_list {}
+
+    .rulebuilder_modules {
+        .module .delete-module {
+            display: none;
+        }
+    }
+
+    .metadata_input,
+    .metadata_display {
+        border: 1px solid $grey-color-light;
+        background-color: white;
+        margin: $spacing-unit 0 15px 0;
+        padding: 10px;
+    }
+    
+    .metadata_display {
+        border-radius: 6px;
+        text-align: center;
+    }
+
+    .metadata_input {
+        input {
+            margin-bottom: $spacing-unit / 2;
+        }
+    }
+
+    &.rulebox-preview {
+        // this class is toggled by toggleEditMode() in rule-scrips.html
+        // when preview/customize button is pressed
+        
+    }
+
+    &.rulebox-edit {
+        // this class is toggled by toggleEditMode() in rule-scrips.html
+        // when preview/customize button is pressed
+        .prompt,
+        .delete-module,
+        .rulebuilder_modules,
+        .metadata_input {
+            display: block;
+        }
+
+        .linkbox_input {
+            display: inline;
+        }
+    
+        .editable[contenteditable="true"] { /* active editable fields */
+            border-bottom: 1px dashed $grey-color-dark;
+        }
+
+        .metadata_display {
+            display: none;
+        }
+
+        .prompt .module {
+            margin: 0;
+            &:hover,
+            &:active {
+                border-color: inherit;
+                cursor: default;
+            }
+        }
+
+        .module:hover {
+            cursor: grab;
+            border-color: $grey-color-dark;
+            .module-logo {
+                cursor: pointer;
+            }
+        }
+        .module:active {
+            cursor: grabbing;
+            border-color: $brand-yellow;
+        }
+
+        .rulebuilder_input .module .delete-module {
+            display: inline !important;
+        }
+
+        .module.module-custom {
+            input {
+                border-width: 0 0 1px 0;
+                border-bottom: 1px dashed $grey-color-dark;
+                font-family: inherit;
+                font-size: inherit;
+                padding: 5px;
+            }
+        }
+
+        .rulebuilder {}
+        .rulebuilder_input {
+            &.drag-target {
+                background-color: $brand-yellow;
+                border-style: solid;
+            }
+            border: 4px dashed $brand-yellow;
+            color: $text-color;
+            padding: 10px 10px 10px 10px;
+        }
+    }
+}

about.md

@@ -4,13 +4,13 @@ title: About
 permalink: /about/
 ---
 
-<span style="font-size: 1.2em">CommunityRule is a governance toolkit for great communities.</span>
+## CommunityRule is a governance toolkit for great communities!
 
-<em>"For everyone to have the opportunity to be involved in a given group and to participate in its activities the structure must be explicit, not implicit. The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized."</em> (Jo Freeman, "The Tyranny of Structurelessness")
+> *"For everyone to have the opportunity to be involved in a given group and to participate in its activities the structure must be explicit, not implicit. The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized."* (Jo Freeman, "The Tyranny of Structurelessness")
 
 Too many of our communities adopt default governance practices that rely on the unchecked authority of founders, admins, or moderators, lacking even basic features of small-scale democracy. The purpose of CommunityRule is to help communities establish appropriate norms for decision-making, stewardship, and culture.
 
-<strong>More background information is at the [FAQ]({% link _about/faq.md %}), and use the [Guides]({% link guides.md %}) to get started making a Rule of your own.</strong>
+**More background information is at the [FAQ]({% link _about/faq.md %}), and use the [Guides]({% link guides.md %}) to get started making a Rule of your own.**
 
 The governance practices we share here have long roots in diverse cultures. To ensure this inheritance remains a commons, content on CommunityRule is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-sa/4.0/), which means that anyone has the right to use and adapt it, and adaptations must be re-shared under the same license.
 

assets/diagrams/diagram_innner_bd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="604.44" height="1055.63" viewBox="0 0 604.44 1055.63"><circle cx="302.22" cy="319.31" r="86.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="9.19"/><polygon points="351.79 331.7 252.66 331.7 252.66 269.75 277.44 294.53 302.22 269.75 327 294.53 351.79 269.75 351.79 331.7"/><rect x="252.66" y="344.09" width="99.13" height="24.78"/><circle cx="179.43" cy="515.55" r="36.4" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="302.22" cy="515.55" r="36.4" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="425.01" cy="515.55" r="36.4" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="76.64" cy="808.02" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="189.43" cy="808.02" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="302.22" cy="808.02" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="415.01" cy="808.02" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="527.81" cy="808.02" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="126.76" cy="661.78" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="241.33" cy="661.78" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="355.9" cy="661.78" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/><circle cx="470.47" cy="661.78" r="36.4" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.7"/></svg>

assets/diagrams/diagram_innner_cr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="604.44" height="1055.63" viewBox="0 0 604.44 1055.63"><circle cx="302.22" cy="496.79" r="213.44" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="15.2"/><polygon points="311.25 416.49 221.72 537.87 371.6 554.71 311.25 416.49" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/><circle cx="221.72" cy="537.87" r="47.18" stroke="#000" stroke-miterlimit="10" stroke-width="5.03"/><circle cx="311.25" cy="416.49" r="47.18" stroke="#000" stroke-miterlimit="10" stroke-width="5.03"/><circle cx="371.6" cy="554.71" r="47.18" stroke="#000" stroke-miterlimit="10" stroke-width="5.03"/><polygon points="254.52 541.56 282.69 544.72 284.3 530.42 254.52 541.56" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/><polygon points="338.8 551.03 310.63 547.86 309.02 562.17 338.8 551.03" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/><polygon points="358.17 523.95 346.8 497.99 333.61 503.76 358.17 523.95" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/><polygon points="324.15 446.27 335.52 472.23 348.71 466.46 324.15 446.27" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/><polygon points="291.94 442.58 275.13 465.4 286.72 473.94 291.94 442.58" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/><polygon points="241.64 510.86 258.45 488.04 246.86 479.5 241.64 510.86" stroke="#000" stroke-miterlimit="10" stroke-width="6.08"/></svg>

assets/elements/arrows-minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.75" height="79.75" viewBox="0 0 79.75 79.75"><circle cx="39.87" cy="9.97" r="9.97" fill="#231f20"/><circle cx="9.97" cy="39.87" r="9.97" fill="#231f20"/><circle cx="69.78" cy="39.87" r="9.97" fill="#231f20"/><circle cx="12.89" cy="12.89" r="9.97" fill="#231f20"/><circle cx="66.86" cy="12.89" r="9.97" fill="#231f20"/><circle cx="39.87" cy="69.78" r="9.97" fill="#231f20"/><circle cx="12.89" cy="66.86" r="9.97" fill="#231f20"/><circle cx="66.86" cy="66.86" r="9.97" fill="#231f20"/><rect width="79.74" height="79.75" fill="none"/></svg>

assets/elements/circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.77" height="80.77" viewBox="0 0 80.77 80.77"><path d="M40.39,0A40.39,40.39,0,1,0,80.77,40.39,40.39,40.39,0,0,0,40.39,0ZM33,65.14a14.63,14.63,0,1,1,2.13-20.58A14.63,14.63,0,0,1,33,65.14ZM25.8,19.72A14.63,14.63,0,1,1,40.43,34.34,14.63,14.63,0,0,1,25.8,19.72ZM68.35,63a14.63,14.63,0,1,1-2.13-20.57A14.63,14.63,0,0,1,68.35,63Z" fill="#231f20"/></svg>

assets/elements/clipboard-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.79" height="80.79" viewBox="0 0 80.79 80.79"><circle cx="40.39" cy="10.1" r="10.1" fill="#231f20"/><circle cx="20.2" cy="30.3" r="10.1" fill="#231f20"/><path d="M40.39,32,0,80.79H80.79Zm0,38.66a10.1,10.1,0,1,1,10.1-10.1A10.1,10.1,0,0,1,40.39,70.69Z" fill="#231f20"/><circle cx="60.59" cy="30.3" r="10.1" fill="#231f20"/></svg>

assets/elements/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.79" height="80.79" viewBox="0 0 80.79 80.79"><polygon points="80.79 50.49 0 50.49 0 0 20.2 20.2 40.4 0 60.59 20.2 80.79 0 80.79 50.49" fill="#231f20"/><rect y="60.59" width="80.79" height="20.2" fill="#231f20"/></svg>

assets/elements/friends.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.86" height="80.86" viewBox="0 0 80.86 80.86"><path d="M60.66,60.59A10.11,10.11,0,0,1,69,57.71V23.08A10.09,10.09,0,0,1,57.78,11.83H23.15A10.09,10.09,0,0,1,11.9,23.08V57.71A10.09,10.09,0,0,1,23.15,69H57.78A10.11,10.11,0,0,1,60.66,60.59Z"/><path d="M23.15,11.83A10.1,10.1,0,1,0,11.9,23.08V11.83Z"/><path d="M69,23.08A10.1,10.1,0,1,0,57.78,11.83H69Z"/><path d="M11.9,57.71A10.1,10.1,0,1,0,23.15,69H11.9Z"/><path d="M69,57.71V69H57.78A10.1,10.1,0,1,0,69,57.71Z"/><rect x="0.07" width="80.79" height="80.79" fill="none"/></svg>

assets/elements/icon_bd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.79" height="80.79" viewBox="0 0 80.79 80.79"><polygon points="80.79 50.49 0 50.49 0 0 20.2 20.2 40.4 0 60.59 20.2 80.79 0 80.79 50.49"/><rect y="60.59" width="80.79" height="20.2"/></svg>

assets/elements/icon_co.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.75" height="79.75" viewBox="0 0 79.75 79.75"><circle cx="39.87" cy="9.97" r="9.97"/><circle cx="9.97" cy="39.87" r="9.97"/><circle cx="69.78" cy="39.87" r="9.97"/><circle cx="12.89" cy="12.89" r="9.97"/><circle cx="66.86" cy="12.89" r="9.97"/><circle cx="39.87" cy="69.78" r="9.97"/><circle cx="12.89" cy="66.86" r="9.97"/><circle cx="66.86" cy="66.86" r="9.97"/><rect width="79.74" height="79.75" fill="none"/></svg>

assets/elements/icon_cr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.77" height="80.77" viewBox="0 0 80.77 80.77"><path d="M40.39,0A40.39,40.39,0,1,0,80.77,40.39,40.39,40.39,0,0,0,40.39,0ZM33,65.14a14.63,14.63,0,1,1,2.13-20.58A14.63,14.63,0,0,1,33,65.14ZM25.8,19.72A14.63,14.63,0,1,1,40.43,34.34,14.63,14.63,0,0,1,25.8,19.72ZM68.35,63a14.63,14.63,0,1,1-2.13-20.57A14.63,14.63,0,0,1,68.35,63Z"/></svg>

assets/elements/icon_do.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.92" height="79.92" viewBox="0 0 79.92 79.92"><path d="M79.92,40,0,0,20,40l-20,40ZM40,31.69A8.27,8.27,0,1,1,31.68,40,8.27,8.27,0,0,1,40,31.69Z"/><rect width="79.92" height="79.92" fill="none"/></svg>

assets/elements/icon_eb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.79" height="80.79" viewBox="0 0 80.79 80.79"><circle cx="40.39" cy="10.1" r="10.1"/><circle cx="13.06" cy="13.06" r="10.1"/><circle cx="67.73" cy="13.06" r="10.1"/><circle cx="40.39" cy="70.69" r="10.1"/><circle cx="13.06" cy="67.73" r="10.1"/><circle cx="67.73" cy="67.73" r="10.1"/><polygon points="0 27.34 0 53.45 27.34 53.45 40.4 40.4 53.45 53.45 80.79 53.45 80.79 27.34 0 27.34"/></svg>

assets/elements/icon_ju.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.86" height="80.86" viewBox="0 0 80.86 80.86"><path d="M60.66,60.59A10.11,10.11,0,0,1,69,57.71V23.08A10.09,10.09,0,0,1,57.78,11.83H23.15A10.09,10.09,0,0,1,11.9,23.08V57.71A10.09,10.09,0,0,1,23.15,69H57.78A10.11,10.11,0,0,1,60.66,60.59Z"/><path d="M23.15,11.83A10.1,10.1,0,1,0,11.9,23.08V11.83Z"/><path d="M69,23.08A10.1,10.1,0,1,0,57.78,11.83H69Z"/><path d="M11.9,57.71A10.1,10.1,0,1,0,23.15,69H11.9Z"/><path d="M69,57.71V69H57.78A10.1,10.1,0,1,0,69,57.71Z"/><rect x="0.07" width="80.79" height="80.79" fill="none"/></svg>

assets/elements/icon_pe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80.79" height="80.79" viewBox="0 0 80.79 80.79"><circle cx="40.39" cy="10.1" r="10.1"/><circle cx="20.2" cy="30.3" r="10.1"/><path d="M40.39,32,0,80.79H80.79Zm0,38.66a10.1,10.1,0,1,1,10.1-10.1A10.1,10.1,0,0,1,40.39,70.69Z"/><circle cx="60.59" cy="30.3" r="10.1"/></svg>

assets/elements/icon_sb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81.16" height="81.16" viewBox="0 0 81.16 81.16"><circle cx="40.58" cy="10.15" r="10.15"/><circle cx="13.12" cy="13.12" r="10.15"/><circle cx="68.05" cy="13.12" r="10.15"/><polygon points="0 28.49 0 60.87 20.29 60.87 20.29 60.87 40.58 40.58 60.87 60.87 60.87 60.87 81.17 60.87 81.17 28.49 0 28.49"/><path d="M40.58,43.23,58.22,60.87,40.58,78.51,22.94,60.87,40.58,43.23m0-2.65L20.29,60.87,40.58,81.16,60.87,60.87,40.58,40.58Z"/></svg>

assets/elements/lock-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.92" height="79.92" viewBox="0 0 79.92 79.92"><path d="M79.92,40,0,0,20,40l-20,40ZM40,31.69A8.27,8.27,0,1,1,31.68,40,8.27,8.27,0,0,1,40,31.69Z" fill="#231f20"/><rect width="79.92" height="79.92" fill="none"/></svg>

assets/elements/re2_do.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="162.5" height="130" viewBox="0 0 162.5 130"><rect x="2" y="2" width="126" height="126" fill="#fff"/><polygon points="126 65 126 126 4 126 4 4 97.5 4 97.5 0 0 0 0 130 130 130 130 65 126 65"/><polygon points="158.5 0 101.5 0 97.5 0 97.5 4 97.5 61 97.5 65 101.5 65 158.5 65 162.5 65 162.5 61 162.5 4 162.5 0 158.5 0" fill="#fff"/><path d="M158.49,32.5,101.51,4,115.76,32.5,101.51,61ZM130,26.6a5.9,5.9,0,1,1-5.9,5.9A5.9,5.9,0,0,1,130,26.6Z"/><rect x="101.51" y="4.01" width="56.97" height="56.97" fill="none"/><path d="M60.63,70.57a27.84,27.84,0,0,1-2,10.64A24.93,24.93,0,0,1,53,89.64a25.54,25.54,0,0,1-8.7,5.55,31,31,0,0,1-11.3,2H12.38V44H33a30.55,30.55,0,0,1,11.3,2A25.84,25.84,0,0,1,53,51.55,24.56,24.56,0,0,1,58.64,60,27.76,27.76,0,0,1,60.63,70.57ZM48,70.57a23.19,23.19,0,0,0-1-7.12A15.22,15.22,0,0,0,44,58.06a12.7,12.7,0,0,0-4.69-3.39A15.92,15.92,0,0,0,33,53.48H24.79v34.2H33a15.92,15.92,0,0,0,6.31-1.18A12.61,12.61,0,0,0,44,83.1,15.09,15.09,0,0,0,47,77.72,23.34,23.34,0,0,0,48,70.57Z"/><path d="M82.36,58.74a21.83,21.83,0,0,1,7.84,1.35A17.2,17.2,0,0,1,96.28,64a17.4,17.4,0,0,1,3.94,6.11,22,22,0,0,1,1.41,8.09,22.39,22.39,0,0,1-1.41,8.16,17.43,17.43,0,0,1-3.94,6.16,17.15,17.15,0,0,1-6.08,3.91,21.62,21.62,0,0,1-7.84,1.37,22,22,0,0,1-7.91-1.37A17.14,17.14,0,0,1,64.34,86.32a22.6,22.6,0,0,1-1.4-8.16,22.21,22.21,0,0,1,1.4-8.09,17.35,17.35,0,0,1,4-6.11,17.59,17.59,0,0,1,6.13-3.87A22.18,22.18,0,0,1,82.36,58.74Zm0,30.62a6.45,6.45,0,0,0,5.75-2.75C89.33,84.77,90,82,90,78.23s-.62-6.53-1.84-8.36a6.45,6.45,0,0,0-5.75-2.73q-4,0-5.88,2.73c-1.24,1.83-1.86,4.61-1.86,8.36s.62,6.54,1.86,8.38S79.68,89.36,82.36,89.36Z"/></svg>

assets/elements/re2_eb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="162.5" height="130" viewBox="0 0 162.5 130"><rect x="2" y="2" width="126" height="126" fill="#fff"/><polygon points="126 65 126 126 4 126 4 4 97.5 4 97.5 0 0 0 0 130 130 130 130 65 126 65"/><polygon points="158.5 0 101.5 0 97.5 0 97.5 4 97.5 61 97.5 65 101.5 65 158.5 65 162.5 65 162.5 61 162.5 4 162.5 0 158.5 0" fill="#fff"/><path d="M46.62,44v9.49H24.79V65.89H41.51V75H24.79V87.68H46.62v9.49H12.38V44Z"/><path d="M51.87,97.17V42.53H63.19V63.34A17.18,17.18,0,0,1,68,60a14.65,14.65,0,0,1,6.29-1.26A12,12,0,0,1,79.76,60a12.34,12.34,0,0,1,4.34,3.74,18.93,18.93,0,0,1,2.87,6,29.29,29.29,0,0,1,1,8.14,25.14,25.14,0,0,1-1.19,7.88A19.79,19.79,0,0,1,83.5,92.1a15.28,15.28,0,0,1-5.11,4.16,14.42,14.42,0,0,1-6.59,1.5,12.55,12.55,0,0,1-3-.33,10.54,10.54,0,0,1-2.45-.93,10.43,10.43,0,0,1-2-1.44,24.11,24.11,0,0,1-1.81-1.83l-.4,1.9a2.45,2.45,0,0,1-.93,1.61,3.22,3.22,0,0,1-1.77.43ZM70.34,67.24a9.62,9.62,0,0,0-2.24.24,8.38,8.38,0,0,0-1.86.68,6.69,6.69,0,0,0-1.59,1.11,15.68,15.68,0,0,0-1.46,1.55V86.88a7.13,7.13,0,0,0,2.77,2,8.74,8.74,0,0,0,3.14.57A6.67,6.67,0,0,0,72,88.82a5.89,5.89,0,0,0,2.28-2,10.67,10.67,0,0,0,1.52-3.56,22.56,22.56,0,0,0,.55-5.33,24.69,24.69,0,0,0-.44-5,10.41,10.41,0,0,0-1.22-3.3,4.83,4.83,0,0,0-1.88-1.81A5.48,5.48,0,0,0,70.34,67.24Z"/><circle cx="130" cy="11.12" r="7.12"/><circle cx="110.71" cy="13.21" r="7.12"/><circle cx="149.29" cy="13.21" r="7.12"/><circle cx="130" cy="53.87" r="7.12"/><circle cx="110.71" cy="51.79" r="7.12"/><circle cx="149.29" cy="51.79" r="7.12"/><polygon points="101.5 23.29 101.5 41.71 120.79 41.71 130 32.5 139.21 41.71 158.5 41.71 158.5 23.29 101.5 23.29"/></svg>

assets/elements/re2_ju.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="162.5" height="130" viewBox="0 0 162.5 130"><rect x="2" y="2" width="126" height="126" fill="#fff"/><polygon points="126 65 126 126 4 126 4 4 97.5 4 97.5 0 0 0 0 130 130 130 130 65 126 65"/><polygon points="158.5 0 101.5 0 97.5 0 97.5 4 97.5 61 97.5 65 101.5 65 158.5 65 162.5 65 162.5 61 162.5 4 162.5 0 158.5 0" fill="#fff"/><path d="M35,77.9A27.85,27.85,0,0,1,33.9,86a17.24,17.24,0,0,1-3.36,6.25,15,15,0,0,1-5.64,4.06,20.36,20.36,0,0,1-8,1.44,39.81,39.81,0,0,1-4.11-.22,36.3,36.3,0,0,1-4.22-.73l.66-7.19A2.15,2.15,0,0,1,10,88.09a2.79,2.79,0,0,1,1.88-.59,7.64,7.64,0,0,1,1.53.2,10,10,0,0,0,2.19.2,9,9,0,0,0,3.12-.49,4.86,4.86,0,0,0,2.21-1.64,8.13,8.13,0,0,0,1.32-3,20.66,20.66,0,0,0,.43-4.6V44H35Z"/><path d="M53.12,59.32v24a6.61,6.61,0,0,0,1.28,4.34,4.59,4.59,0,0,0,3.76,1.54,8.05,8.05,0,0,0,3.48-.77A12.93,12.93,0,0,0,64.8,86.3v-27H76.12V97.17h-7a2.67,2.67,0,0,1-2.78-1.89l-.69-2.19A22.21,22.21,0,0,1,63.38,95a13.85,13.85,0,0,1-2.5,1.46,15.1,15.1,0,0,1-2.87,1,15.27,15.27,0,0,1-3.36.35,13.22,13.22,0,0,1-5.49-1.08,11.3,11.3,0,0,1-4-3,12.9,12.9,0,0,1-2.48-4.56,18.88,18.88,0,0,1-.84-5.77v-24Z"/><path d="M144.25,46.75a7.09,7.09,0,0,1,5.9-2V20.28a7.11,7.11,0,0,1-7.93-7.93H117.78a7.11,7.11,0,0,1-7.93,7.93V44.72a7.11,7.11,0,0,1,7.93,7.93h24.44A7.09,7.09,0,0,1,144.25,46.75Z"/><path d="M117.78,12.35a7.13,7.13,0,1,0-7.93,7.93V12.35Z"/><path d="M150.15,20.28a7.13,7.13,0,1,0-7.93-7.93h7.93Z"/><path d="M109.85,44.72a7.13,7.13,0,1,0,7.93,7.93h-7.93Z"/><path d="M150.15,44.72v7.93h-7.93a7.13,7.13,0,1,0,7.93-7.93Z"/><rect x="101.5" y="4" width="57" height="57" fill="none"/></svg>

assets/elements/re2_pe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="162.5" height="130" viewBox="0 0 162.5 130"><rect x="2" y="2" width="126" height="126" fill="#fff"/><polygon points="126 65 126 126 4 126 4 4 97.5 4 97.5 0 0 0 0 130 130 130 130 65 126 65"/><polygon points="158.5 0 101.5 0 97.5 0 97.5 4 97.5 61 97.5 65 101.5 65 158.5 65 162.5 65 162.5 61 162.5 4 162.5 0 158.5 0" fill="#fff"/><circle cx="130" cy="11.12" r="7.12"/><circle cx="115.75" cy="25.37" r="7.12"/><path d="M130,26.6,101.5,61h57Zm0,27.27a7.13,7.13,0,1,1,7.12-7.12A7.13,7.13,0,0,1,130,53.87Z"/><circle cx="144.25" cy="25.38" r="7.12"/><path d="M24.72,79.4V97.17H12.38V44H31.14a30.79,30.79,0,0,1,9.65,1.34A18.53,18.53,0,0,1,47.44,49a14.35,14.35,0,0,1,3.85,5.52,18.59,18.59,0,0,1,1.24,6.86,20.24,20.24,0,0,1-1.28,7.3,14.65,14.65,0,0,1-3.9,5.69,18.6,18.6,0,0,1-6.66,3.71,30.5,30.5,0,0,1-9.55,1.33Zm0-9.31h6.42q4.81,0,6.94-2.3a9.12,9.12,0,0,0,2.11-6.42,9.67,9.67,0,0,0-.54-3.32A6.77,6.77,0,0,0,38,55.47a7.49,7.49,0,0,0-2.81-1.66,12.38,12.38,0,0,0-4-.58H24.72Z"/><path d="M72.35,58.74a19.48,19.48,0,0,1,6.88,1.17,15,15,0,0,1,5.36,3.39,15.56,15.56,0,0,1,3.51,5.46,20,20,0,0,1,1.26,7.32,16.58,16.58,0,0,1-.11,2.08,3.58,3.58,0,0,1-.4,1.28,1.56,1.56,0,0,1-.79.65,3.74,3.74,0,0,1-1.26.18H65q.54,4.76,2.88,6.88a8.55,8.55,0,0,0,6,2.14,11,11,0,0,0,3.4-.47,17.2,17.2,0,0,0,2.53-1.06l2-1.06a4.2,4.2,0,0,1,2-.48,2.33,2.33,0,0,1,2,1l3.29,4.05a16.87,16.87,0,0,1-3.78,3.27,19.94,19.94,0,0,1-4.16,2,22.69,22.69,0,0,1-4.27,1,30.73,30.73,0,0,1-4.07.28,21.08,21.08,0,0,1-7.46-1.3,17.11,17.11,0,0,1-6.1-3.85,18,18,0,0,1-4.12-6.35,23.5,23.5,0,0,1-1.52-8.83A19.85,19.85,0,0,1,55,70.24a17.43,17.43,0,0,1,9.6-10A19.33,19.33,0,0,1,72.35,58.74Zm.22,7.81a6.87,6.87,0,0,0-5.08,1.84,9.66,9.66,0,0,0-2.41,5.31H79.21a10,10,0,0,0-.35-2.62,6.25,6.25,0,0,0-1.13-2.28,5.81,5.81,0,0,0-2.06-1.63A7.11,7.11,0,0,0,72.57,66.55Z"/></svg>