Moved CommunityRule-specific CSS to separate file

_sass/_base.scss

@@ -205,16 +205,114 @@ pre {
 }
 
 
-/* CUSTOM EXTRAS */
+/* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 
+/* CLASSES */
 .callout-text {
     font-family: serif;
     font-size:2em;
-    text-align:center;
     margin:1.5em 0 1em 0;
 }
 .callout-icon {
     font-size:2em;
-    text-align:center;
     margin:1.5em 0 1em 0;
 }
+
+.editable { /* All editable fields */
+    padding: 10px 10px 10px 10px;
+    min-height: 1.5em;
+    font-family: serif;
+    border-bottom: 1px dashed gray;
+}
+.question {
+    color: gray;
+}
+
+/* Tooltip for Modules
+   https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 
+   This could bear substantial improvement. */
+.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;
+  right: 100%;
+}
+.button:hover {
+    background-color: lightgray;
+}
+.button:hover .tooltiptext {
+    visibility: visible;
+}
+/* pushButton
+These are the major functional buttons*/
+.pushButton {
+  border: 1px solid gray;
+  color: gray;
+  background-color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  font-size: 1.2em;
+}
+.pushButton:hover {
+    background-color: lightgray;
+}
+.plus { /* The maximize/minimize button */
+    font-size: 1em;
+}
+.icons {
+    /* icons are from https://github.com/tabler/tabler-icons */
+    margin: 0 5px 0 0;
+}
+/* VARIOUS IDs */
+#rulebox {
+    border: 1px solid lightgray;
+    padding: 20px;
+    margin: 20px 0 30px 0;
+}
+#rulebox h2 {
+    font-family: serif;
+}
+#communityname {
+    font-weight: bold;
+}
+#editToggle {
+  float: right;
+  clear: both;
+}
+#toggleDisplayMode {
+    margin: 0 0 10px 0;
+    display: none;
+}
+#publishRule {
+  margin: 0 0 10px 0;
+}
+#structure {
+  font-size: 1.3em;
+}
+#attribution {
+    font-family: serif;
+    font-size: .8em;
+    text-align: right;
+}
+#trash {
+    display: none;
+}

_sass/_communityrule.sass

@@ -0,0 +1,111 @@
+/* BEGIN COMMUNITYRULE-SPECIFIC CSS */
+
+/* CLASSES */
+.callout-text {
+    font-family: serif;
+    font-size:2em;
+    margin:1.5em 0 1em 0;
+}
+.callout-icon {
+    font-size:2em;
+    margin:1.5em 0 1em 0;
+}
+
+.editable { /* All editable fields */
+    padding: 10px 10px 10px 10px;
+    min-height: 1.5em;
+    font-family: serif;
+    border-bottom: 1px dashed gray;
+}
+.question {
+    color: gray;
+}
+
+/* Tooltip for Modules
+   https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 
+   This could bear substantial improvement. */
+.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;
+  right: 100%;
+}
+.button:hover {
+    background-color: lightgray;
+}
+.button:hover .tooltiptext {
+    visibility: visible;
+}
+/* pushButton
+These are the major functional buttons*/
+.pushButton {
+  border: 1px solid gray;
+  color: gray;
+  background-color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  font-size: 1.2em;
+}
+.pushButton:hover {
+    background-color: lightgray;
+}
+.plus { /* The maximize/minimize button */
+    font-size: 1em;
+}
+.icons {
+    /* icons are from https://github.com/tabler/tabler-icons */
+    margin: 0 5px 0 0;
+}
+/* VARIOUS IDs */
+#rulebox {
+    border: 1px solid lightgray;
+    padding: 20px;
+    margin: 20px 0 30px 0;
+}
+#rulebox h2 {
+    font-family: serif;
+}
+#communityname {
+    font-weight: bold;
+}
+#editToggle {
+  float: right;
+  clear: both;
+}
+#toggleDisplayMode {
+    margin: 0 0 10px 0;
+    display: none;
+}
+#publishRule {
+  margin: 0 0 10px 0;
+}
+#structure {
+  font-size: 1.3em;
+}
+#attribution {
+    font-family: serif;
+    font-size: .8em;
+    text-align: right;
+}
+#trash {
+    display: none;
+}

index.md

@@ -3,40 +3,43 @@ layout: page
 permalink: /
 ---
 
-<div class="callout-text">
-    CommunityRule is a governance toolkit for great communities.
-</div>
+<div style="text-align: center">
 
-![]({% link assets/birds.png %})
-<!-- img src https://svgsilh.com/image/2022610.html -->
+    <div class="callout-text">
+        CommunityRule is a governance toolkit for great communities.
+    </div>
 
-<div class="callout-text">
-    How does your community work?<br />
-    Are you ready to make hard decisions?
-</div>
+    <img src="{% link assets/birds.png %}" alt="Birds image from https://svgsilh.com/image/2022610.html" />
 
-Too often, we leave the most basic questions unstated and unanswered. CommunityRule makes it easier to clarify the basics so you can focus on other things.
+    <div class="callout-text">
+        How does your community work?<br />
+        Are you ready to make hard decisions?
+    </div>
 
-<div class="callout-icon">
-    <img src="{% link assets/tabler_icons/edit.svg %}" width="10%" />
-</div>
+    Too often, we leave the most basic questions unstated and unanswered. CommunityRule makes it easier to clarify the basics so you can focus on other things.
 
-<div class="callout-text">
-    <a href="create/">Start from scratch</a> or <a href="templates/">choose a template</a>
-</div>
+    <div class="callout-icon">
+        <img src="{% link assets/tabler_icons/edit.svg %}" width="10%" />
+    </div>
 
-<div class="callout-icon">
-    <img src="{% link assets/tabler_icons/chart-candle.svg %}" width="10%" />
-</div>
+    <div class="callout-text">
+        <a href="create/">Start from scratch</a> or <a href="templates/">choose a template</a>
+    </div>
 
-<div class="callout-text">
-    Tailor a Rule to your community's needs and values
-</div>
+    <div class="callout-icon">
+        <img src="{% link assets/tabler_icons/chart-candle.svg %}" width="10%" />
+    </div>
 
-<div class="callout-icon">
-    <img src="{% link assets/tabler_icons/license.svg %}" width="10%" />
-</div>
+    <div class="callout-text">
+        Tailor a Rule to your community's needs and values
+    </div>
+
+    <div class="callout-icon">
+        <img src="{% link assets/tabler_icons/license.svg %}" width="10%" />
+    </div>
+
+    <div class="callout-text">
+        Then publish your Rule and <a href="library/">share it with others</a>
+    </div>
 
-<div class="callout-text">
-    Then publish your Rule and <a href="library/">share it with others</a>
 </div>