Allow icon-lists (where each list bullet is an icon)

Currently implemented for check-circle and chevron, but more can
be added easily via icomoon ;)

src/css/icon-lists.css

@@ -0,0 +1,32 @@
+.icomoon {
+    /* copied from icomoon.css, because that's the best way we found of doing it
+     * without tampering with autogenerated icomoon code                         */
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+  
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-list-item {
+  @apply icomoon;
+  @apply mr-1;
+  @apply -ml-4;
+}
+
+.list-chevron li:before {
+  @apply icon-list-item;
+  content: "\f138";
+}
+
+.list-check-circle li:before {
+  @apply icon-list-item;
+  content: "\f058";
+}

src/index.htm

@@ -23,7 +23,7 @@
             <h1 class="text-2xl">Aspiring writers <i class="icon-paperclip"></i></h1>
           </a>
           <p>Whether it's giving you tips or writing paragraphs for you—we'll help you as much or as little as you need.</p>
-          <ul class="list-disc">
+          <ul class="list-check-circle m-4">
             <li>Brainstorming help</li>
             <li>Layout and structure</li>
             <li>Grammar and punctuation</li>
@@ -40,7 +40,7 @@
             <h1 class="text-2xl">Scientists &amp; researchers <i class="icon-flask"></i></h1>
           </a>
           <p>Share your work beyond its specific niche. Put your technical writing on hold and let creativity run wild—because it's time the rest of the world knows what you're doing.</p>
-          <ul class="list-disc">
+          <ul class="list-check-circle m-4">
             <li>Stories showcase the science</li>
             <li>Explain points using metaphors</li>
             <li>Grip readers with fiction techniques</li>
@@ -56,7 +56,7 @@
             <h1 class="text-2xl">Established writers <i class="icon-edit"></i></h1>
           </a>
           <p>Try out a new writing style, with new quirky rules. What we're doing here is neither fact nor fiction—but something in between.</p>
-          <ul class="list-disc">
+          <ul class="list-check-circle m-4">
             <li>Breathe new life into old pieces</li>
             <li>Try out new writing styles</li>
             <li>New people to brainstorm with</li>
@@ -75,7 +75,7 @@
         </div>
         <div class="sm:w-full md:w-auto lg:w-1/3 p-4">
           <h2 class="text-center uppercase">You give us</h2>
-          <ul class="list-disc">
+          <ul class="list-chevron m-3">
             <li>Content written in the Snipette Style</li>
             <li>Rights to publish your piece on our <a href="//www.snipettemag.com" target="_blank" class="text-orange-800 hover:text-orange-900">website</a> and <a href="//medium.com/snipette" target="_blank" class="text-orange-800 hover:text-orange-900">Medium publication</a></li>
             <li>Credit-lines to Snipette if you re-post elsewhere</li>
@@ -84,7 +84,7 @@
         </div>
         <div class="sm:w-full md:w-auto lg:w-1/3 p-4">
           <h2 class="text-center uppercase">We give you</h2>
-          <ul class="list-disc">
+          <ul class="list-chevron m-3">
             <li>Help and guidance creating your piece</li>
             <li>More exposure for your piece</li>
             <li>Custom illustrations</li>

src/style.css

@@ -1,5 +1,7 @@
 @import "./css/icomoon.css";
 
 @import "tailwindcss/base";
+@import "./css/icon-lists.css";
+
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";