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 ;)
This commit is contained in:
Badri Sunderarajan 2020-04-10 18:45:07 +05:30
parent c08e9246cf
commit 6b6b689ebf
3 changed files with 39 additions and 5 deletions

32
src/css/icon-lists.css Normal file
View file

@ -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";
}

View file

@ -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>

View file

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