From 6b6b689ebf79842dc59620534f4ff0a170213ca0 Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Fri, 10 Apr 2020 18:45:07 +0530
Subject: [PATCH] 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 | 32 ++++++++++++++++++++++++++++++++
 src/index.htm          | 10 +++++-----
 src/style.css          |  2 ++
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/css/icon-lists.css

diff --git a/src/css/icon-lists.css b/src/css/icon-lists.css
new file mode 100644
index 0000000..1da1db8
--- /dev/null
+++ b/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";
+}
diff --git a/src/index.htm b/src/index.htm
index aec2501..7d67aa4 100644
--- a/src/index.htm
+++ b/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>
diff --git a/src/style.css b/src/style.css
index 4ca1ffc..cf2aa14 100644
--- a/src/style.css
+++ b/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";