add list functionality for general features, unify success color

_src/_assets/scss/_variables.scss

@@ -9,6 +9,8 @@ $brand-05:                  #eaf3f5 !default;
 $brand-06:                  #444 !default;
 $brand-07:                  #0e475d !default;
 
+$brand-success:             #6bcc74 !default; // adjust-hue($brand-01, 170%)
+
 //
 // Typography
 //

_src/_assets/scss/page-front.scss

@@ -39,6 +39,33 @@
     margin-bottom: $spacer / $line-height;
 }
 
+.feature__list {
+    margin: 0;
+    padding: 0;
+    margin-top: $spacer;
+
+    li {
+        display: block;
+        color: $brand-02;
+
+        @media ($screen-sm) {
+            display: inline-block;
+            margin-left: $spacer * 2;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+
+        &:before {
+            content: '\2714';
+            font-size: $font-size-small;
+            color: $brand-success;
+            margin-right: $spacer / 4;
+        }
+    }
+}
+
 .connect__title {
     font-size: $font-size-h3;
 }
@@ -107,7 +134,7 @@
         &:after {
             content: '\2714';
             color: $brand-03;
-            background: adjust-hue($brand-01, 170%);
+            background: $brand-success;
         }
     }
 

_src/_data/colors.yml

@@ -18,3 +18,6 @@
 
 - name: "brand-07"
   hex: "0e475d"
+
+- name: "brand-success"
+  hex: "6bcc74"

_src/_data/content-front.yml

@@ -22,6 +22,10 @@ intro:
           text: "The IPDB Foundation is run by its internet-loving Caretakers around the world."
         - title: "A Dashboard for your IPDB apps"
           text: "Manage your apps, give users access, and get statistical insights about your app’s API usage."
+          list:
+              - API usage statistics
+              - Access control
+              - User management
 
 foundation:
     title: "IPDB Foundation: human-scale governance"

_src/index.html

@@ -86,6 +86,13 @@ css: page-front
                     <div class="grid__col grid__col--4">
                         <h1 class="feature__title">{{ feature.title }}</h1>
                         <div class="feature__text">{{ feature.text | markdownify }}</div>
+                        {% if feature.list %}
+                            <ul class="feature__list">
+                                {% for item in feature.list %}
+                                    <li>{{ item }}</li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
                     </div>
                 </div>
             </div>