adds new icons and styles

_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) {

_sass/_base.scss

@@ -124,8 +124,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 {

_sass/_layout.scss

@@ -11,10 +11,10 @@
 }
 
 .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;
 
@@ -25,6 +25,7 @@
 }
 
 .site-nav {
+    font-family: $header-font-family;
     float: right;
     line-height: 56px;
 

_sass/communityrule.scss

@@ -14,8 +14,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 {
@@ -26,10 +26,11 @@
 .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;
 }
+.editable[contenteditable="true"] { /* active editable fields */
+}
 .prompt {
     color: gray;
 }
@@ -92,6 +93,7 @@
     padding: 5px;
     margin: 5px;
     display: inline-block;
+    font-family: $header-font-family;
     font-size: .8em;
     cursor: pointer;
 }
@@ -158,6 +160,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 {
@@ -224,6 +227,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;

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_vector.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/icon_co_vector.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/icon_cr_vector.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/icon_do_vector.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/icon_eb_vector.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="13.06" cy="13.06" r="10.1" fill="#231f20"/><circle cx="67.73" cy="13.06" r="10.1" fill="#231f20"/><circle cx="40.39" cy="70.69" r="10.1" fill="#231f20"/><circle cx="13.06" cy="67.73" r="10.1" fill="#231f20"/><circle cx="67.73" cy="67.73" r="10.1" fill="#231f20"/><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" fill="#231f20"/></svg>

assets/elements/icon_ju_vector.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_vector.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/icon_sb_vector.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" fill="#231f20"/><circle cx="13.12" cy="13.12" r="10.15" fill="#231f20"/><circle cx="68.05" cy="13.12" r="10.15" fill="#231f20"/><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" fill="#231f20"/><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" fill="#231f20"/></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/user-check.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="13.06" cy="13.06" r="10.1" fill="#231f20"/><circle cx="67.73" cy="13.06" r="10.1" fill="#231f20"/><circle cx="40.39" cy="70.69" r="10.1" fill="#231f20"/><circle cx="13.06" cy="67.73" r="10.1" fill="#231f20"/><circle cx="67.73" cy="67.73" r="10.1" fill="#231f20"/><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" fill="#231f20"/></svg>

assets/elements/user-plus.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" fill="#231f20"/><circle cx="13.12" cy="13.12" r="10.15" fill="#231f20"/><circle cx="68.05" cy="13.12" r="10.15" fill="#231f20"/><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" fill="#231f20"/><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" fill="#231f20"/></svg>

css/main.scss

@@ -23,6 +23,7 @@ $spacing-unit:     30px;
 $text-color:       #111;
 $background-color: #fdfdfd;
 $brand-color:      #2a7ae2;
+$brand-yellow:     #FFC907;
 
 $grey-color:       #828282;
 $grey-color-light: lighten($grey-color, 40%);

index.md

@@ -6,10 +6,12 @@ permalink: /
 <div style="text-align: center">
 
     <div class="callout-text">
-        CommunityRule is a governance toolkit for great communities.
+        <strong>CommunityRule</strong> is a governance toolkit for great communities.
     </div>
 
-    <img src="{% link assets/birds.png %}" alt="Birds image from https://svgsilh.com/image/2022610.html" />
+    <img src="{% link assets/diagram_co.png %}" alt="Diagram of a consensus circle" />
+
+    <p><small>Consensus circle, <a href="/create/?r=consensus">see the template</a></small></p>
 
     <div class="callout-text">
         How does your community work?<br />