Replace unicode list marker emojis with twemoji images

Author: steos

themes/lingual/assets/css/main.css

@@ -50,3 +50,19 @@ prose-code:bg-stone-200
 .emphasized {
   @apply font-bold bg-gradient-to-r from-sky-200 to-sky-200 bg-repeat-x bg-[length:100%_6px] bg-[center_top_90%];
 }
+
+.emoji-list {
+  @apply list-none !pl-0;
+}
+
+.emoji-list li {
+  @apply flex items-start gap-4 !pl-0;
+}
+
+.emoji-list li img {
+  @apply size-6 !m-0 !mt-[6px];
+}
+
+.emoji-list-sm li img {
+  @apply size-5 !mt-[8px];
+}

themes/lingual/layouts/_default/home.html

@@ -22,21 +22,30 @@ <h1 class="text-center">
       If you ever worked with translations you certainly experienced one or more
       of the following:
     </p>
-    <ul>
-      <li class="list-['😕']">Sync scripts are cobbled together manually</li>
-      <li class="list-['🙁']">
-        Translations in a TMS are <strong>global state</strong> and as such don’t play well with
-        development in feature branches
+    <ul class="emoji-list">
+      <li>
+        <img src="/twemoji/1f615.svg" />
+        <div>Sync scripts are cobbled together manually</div>
+      </li>
+      <li>
+        <img src="/twemoji/1f641.svg" />
+        <div>Translations in a TMS are <strong>global state</strong> and as such don’t play well with
+        development in feature branches</div>
       </li>
-      <li class="list-['☹️']">
-        Merging translation files in GIT causes <strong>spurious conflicts</strong> that are just
-        annoying to resolve
+      <li>
+        <img src="/twemoji/1f627.svg" />
+        <div>Merging translation files in GIT causes <strong>spurious conflicts</strong> that are just
+        annoying to resolve</div>
       </li>
-      <li class="list-['😦']">
-        Branching support of existing translation management systems leave a lot
-        to be desired and/or are <strong>prohibitively expensive</strong>
+      <li>
+        <img src="/twemoji/1f635.svg" />
+        <div>Branching support of existing translation management systems leave a lot
+        to be desired and/or are <strong>prohibitively expensive</strong></div>
+      </li>
+      <li>
+        <img src="/twemoji/1f629.svg" />
+        <div>Coordinating translations across feature branches and/or teams takes a significant amount of effort</div>
       </li>
-      <li class="list-['😩']">Coordinating translations across feature branches and/or teams takes a significant amount of effort</li>
     </ul>
 
     <h2 class="text-center border-y-4 border-zinc-600 py-6 !my-16">
@@ -54,9 +63,15 @@ <h2>First-class Branching</h2>
       Lingual uses the same <strong>industry-standard branching model</strong> as GIT but it
       works on translation data-structures.
     </p>
-    <ul class="list-['✔️']">
-      <li><strong class="emphasized">No more GIT merge conflicts</strong> to resolve in your translations</li>
-      <li><strong class="emphasized">No more friction</strong> caused by translations as global state</li>
+    <ul class="emoji-list emoji-list-sm">
+      <li>
+        <img src="/twemoji/2705.svg" />
+        <div><strong class="emphasized">No more GIT merge conflicts</strong> to resolve in your translations</div>
+      </li>
+      <li>
+        <img src="/twemoji/2705.svg" />
+        <div><strong class="emphasized">No more friction</strong> caused by translations as global state</div>
+      </li>
     </ul>
 
     <div class="bg-zinc-800 p-2 aspect-video not-prose rounded-md flex flex-col">
@@ -71,12 +86,16 @@ <h2>State-of-the-Art CLI</h2>
       Lingual comes with a state-of-the-art CLI to sync translations, branch, merge and
       even set up your project.
     </p>
-    <ul class="list-['✔️']">
+    <ul class="emoji-list emoji-list-sm">
+      <li>
+        <img src="/twemoji/2705.svg" />
+        <div><strong class="emphasized">Stay in the terminal</strong> for project setup, translation sync, branching
+        merging, etc.</div>
+      </li>
       <li>
-        <strong class="emphasized">Stay in the terminal</strong> for project setup, translation sync, branching
-        merging, etc.
+        <img src="/twemoji/2705.svg" />
+        <div><strong class="emphasized">No more sync scripts</strong> held together by duct-tape and bubblegum</div>
       </li>
-      <li><strong class="emphasized">No more sync scripts</strong> held together by duct-tape and bubblegum</li>
     </ul>
     <div class="bg-black py-4 px-1 aspect-video not-prose rounded-md flex flex-col">
       <video autoplay muted loop class="w-full aspect-video block">
@@ -88,12 +107,12 @@ <h2>And more</h2>
     <p>
       Of course Lingual also provides all the standard features you would expect like
     </p>
-    <ul class="list-['✔️']">
-      <li>Team/Organization management</li>
-      <li>Customizable, role-based access control</li>
-      <li>Authentication through Google/Github/etc. account</li>
-      <li>CI/CD automation and Github/Gitlab/etc. integration</li>
-      <li>Automatic machine-translations</li>
+    <ul class="emoji-list emoji-list-sm">
+      <li><img src="/twemoji/2705.svg" /><div>Team/Organization management</div></li>
+      <li><img src="/twemoji/2705.svg" /><div>Customizable, role-based access control</div></li>
+      <li><img src="/twemoji/2705.svg" /><div>Authentication through Google/Github/etc. account</div></li>
+      <li><img src="/twemoji/2705.svg" /><div>CI/CD automation and Github/Gitlab/etc. integration</div></li>
+      <li><img src="/twemoji/2705.svg" /><div>Automatic machine-translations</div></li>
     </ul>
     <div class="bg-zinc-800 p-2 not-prose rounded-md">
       <div class="glide">