From eee03c4ed45ad57e629d5183a7f574563d42b0cb Mon Sep 17 00:00:00 2001
From: erciccione <erciccione@protonmail.com>
Date: Sat, 15 May 2021 10:55:52 +0200
Subject: [PATCH] roadmap: replace unicode emojis with svgs from openmoji

- add a license section in the README where we link to our and openmoji's license
- refactor css
- add img/emojis/ which will store the emojis we intend to use
---
 README.md                  |  5 +++
 css/custom.css             | 75 ++++++++++----------------------------
 img/emojis/1F6A7.svg       | 36 ++++++++++++++++++
 img/emojis/1F9ED.svg       | 20 ++++++++++
 img/emojis/2714.svg        |  8 ++++
 resources/roadmap/index.md |  6 +--
 6 files changed, 91 insertions(+), 59 deletions(-)
 create mode 100644 img/emojis/1F6A7.svg
 create mode 100644 img/emojis/1F9ED.svg
 create mode 100644 img/emojis/2714.svg

diff --git a/README.md b/README.md
index 82c20d27..84802379 100644
--- a/README.md
+++ b/README.md
@@ -384,3 +384,8 @@ Where `LINK-TO-PUBLICATION` is the URL of the actual publication. If it's a reso
 After you found the `library` category, add your placeholder and value after the last entry of the list. For example: `mypublication: "This is the description of my publication"`. In this example `mypublication` is the placeholder and needs to be also added to the entry in `index.md`, the result will be `<p>{% t library.mypublication %}</p>` and the value contained in the placeholder will be correctly displayed.
 
 Save the changes.
+
+## License
+This repository is licensed under the [BSD 3-Clause "New" or "Revised" License](LICENSE).
+
+All emojis designed by [OpenMoji](https://openmoji.org/) – the open-source emoji and icon project. License: [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/#)
\ No newline at end of file
diff --git a/css/custom.css b/css/custom.css
index 24350b2e..27c0af13 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1495,38 +1495,6 @@ h2#main-h2 {
     border-bottom: 2px solid #a1aabb;
 }
 
-.pre-roadmap {
-    margin-bottom: 2rem;
-}
-
-.pre-roadmap p {
-    margin-bottom: 2.5rem;
-    display: inline;
-    padding: 0;
-}
-
-.pre-roadmap p.pre-completed:before {
-  content: "\02714";
-  color: green;
-  font-size: 2.5rem;
-  padding-right: 4%;
-  vertical-align: middle;
-}
-
-.pre-roadmap p.pre-ongoing:before {
-  content: "\01F6A7";
-  font-size: 2rem;
-  padding-right: 4%;
-  vertical-align: middle;
-}
-
-.pre-roadmap p.pre-upcoming:before {
-  content: "\01F9ED";
-  font-size: 2rem;
-  padding-right: 4%;
-  vertical-align: middle;
-}
-
 .hangouts ul {
     margin-bottom: 2.5rem;
 }
@@ -1566,10 +1534,6 @@ h1 {
     margin: 1rem 0 0.7rem 0;
 }
 
-.pre-roadmap p, .container.description p {
-    margin-bottom: 1.5rem;
-}
-
 .container.description p {
     padding: 0 1rem;
 }
@@ -1629,11 +1593,6 @@ h1 {
     padding: 0 1rem;
 }
 
-.pre-roadmap p, .container.description p {
-    margin-bottom: 1rem;
-    margin-top: -0.5rem;
-}
-
 .about-main h3, .about-monero h3 {
     font-size: 1.1rem;
 }
@@ -3600,34 +3559,38 @@ h3.months {
   margin-bottom: 0.5rem
 }
 
+.pre-roadmap {
+  margin-bottom: 2rem;
+}
+
+img.emoji {
+  width: 2.5rem;
+  vertical-align: middle;
+  padding-right: 0.5rem;
+}
+
 .roadmap ul {
   list-style: none ;
   margin-left: 2rem;
   line-height: 1.3;
 }
 
+.roadmap li:before {
+  display: inline-block;
+  vertical-align: middle;
+  width: 3rem;
+}
+
 .roadmap li.completed:before {
-  content: "\02714";
-  color: green;
-  font-size: 2rem;
-  padding-right: 2%;
-  vertical-align: -8%;
+  content: url("/img/emojis/2714.svg");
 }
 
 .roadmap li.ongoing:before {
-  content: "\01F6A7";
-  font-size:2rem;
-  padding-right: 2%;
-  vertical-align: middle;
-  line-height: 1.6;
+  content: url("/img/emojis/1F6A7.svg");
 }
 
 .roadmap li.upcoming:before {
-  content: "\01F9ED";
-  font-size:2rem;
-  padding-right: 2%;
-  vertical-align: middle;
-  line-height: 1.6;
+  content: url("/img/emojis/1F9ED.svg");
 }
 
 .roadmap .tabPanel-content span, .roadmap .ms-completed, .roadmap .ms-upcoming {
diff --git a/img/emojis/1F6A7.svg b/img/emojis/1F6A7.svg
new file mode 100644
index 00000000..9f3f9b8b
--- /dev/null
+++ b/img/emojis/1F6A7.svg
@@ -0,0 +1,36 @@
+<svg id="emoji" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="color">
+    <path fill="#fff" d="m15.35 59.08h-1.779c-0.6839 0-1.238-0.578-1.238-1.291v-34.83c0-0.713 0.5544-1.291 1.238-1.291h1.779c0.6839 0 1.238 0.578 1.238 1.291v34.83c0 0.713-0.5545 1.291-1.238 1.291z"/>
+    <path fill="#fff" d="m58.46 59.08h-1.779c-0.6839 0-1.238-0.7131-1.238-1.593v-32.97c0-0.8796 0.5544-1.593 1.238-1.593h1.779c0.6839 0 1.238 0.7131 1.238 1.593v32.97c0 0.8796-0.5545 1.593-1.238 1.593z"/>
+    <path fill="#fcea2b" d="m7.45 43.47h7.743l-7.743 7.743z"/>
+    <path fill="#3F3F3F" d="m15.19 43.47h12.34l-7.743 7.743-12.34-0.05808z"/>
+    <path fill="#fcea2b" d="m27.48 43.47h12.34l-7.743 7.743h-12.29z"/>
+    <path fill="#3F3F3F" d="m39.82 43.47h12.34l-7.743 7.743h-12.34z"/>
+    <path fill="#fcea2b" d="m52.16 43.47 11.89-0.1839-7.612 7.612h-11.7z"/>
+    <path fill="#3F3F3F" d="m64.05 43.29v7.612h-7.612z"/>
+    <path fill="#fcea2b" d="m7.95 28.33 7.646-0.03371-7.646 7.646z"/>
+    <path fill="#3F3F3F" d="m15.6 28.3h11.94l-7.695 7.646h-11.89z"/>
+    <path fill="#fcea2b" d="m27.48 28.3h12.34l-7.743 7.743h-12.29z"/>
+    <path fill="#3F3F3F" d="m39.82 28.3h12.34l-7.743 7.743h-12.34z"/>
+    <path fill="#fcea2b" d="m52.16 28.3h12.34l-8.062 7.646-12.02 0.09764z"/>
+    <path fill="#3F3F3F" d="m64.05 28.33v7.612h-7.612z"/>
+  </g>
+  <g id="line" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+    <path d="m12.74 42.72v-6.348"/>
+    <path d="m16.92 50.9v6.509c0 0.6723-0.5448 1.217-1.217 1.217h-1.748c-0.672 0-1.217-0.5451-1.217-1.217v-6.071"/>
+    <path d="m16.92 36.37v6.348"/>
+    <path d="m12.74 28.24v-5.907m4.181 0v5.812"/>
+    <path d="m55.1 43.29v-6.921"/>
+    <path d="m59.28 51.34v6.071c0 0.6723-0.5448 1.217-1.217 1.217h-1.748c-0.672 0-1.217-0.5451-1.217-1.217v-6.071"/>
+    <path d="m59.28 36.37v5.969"/>
+    <path d="m55.1 28.03v-5.891m4.181 0v5.796"/>
+    <path d="m7.95 28.33h56.1v7.612h-56.1z"/>
+    <path d="m7.95 43.29h56.1v7.612h-56.1z"/>
+    <ellipse cx="14.83" cy="17.97" rx="4.594" ry="4.596"/>
+    <ellipse cx="57.19" cy="17.97" rx="4.594" ry="4.596"/>
+  </g>
+  <g id="color-foreground" transform="translate(-2.525 -.094)" fill="#f4aa41" fill-rule="evenodd" stroke="#e27022" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+    <ellipse cx="17.36" cy="18.06" rx="4.594" ry="4.596"/>
+    <ellipse cx="59.71" cy="18.06" rx="4.594" ry="4.596"/>
+  </g>
+</svg>
diff --git a/img/emojis/1F9ED.svg b/img/emojis/1F9ED.svg
new file mode 100644
index 00000000..277c3d5c
--- /dev/null
+++ b/img/emojis/1F9ED.svg
@@ -0,0 +1,20 @@
+<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g id="line-supplement">
+    <polyline points="33.2 33.2 48 24 38.8 38.8"/>
+  </g>
+  <g id="color">
+    <circle cx="36" cy="36" r="24" fill="#fcea2b"/>
+    <path fill="#f1b31c" d="M53,19A24.0417,24.0417,0,0,1,36,60a24.302,24.302,0,0,1-17-7"/>
+    <polyline fill="#fff" points="33.2 33.2 24 48 38.8 38.8"/>
+    <polyline fill="#ea5a47" points="33.2 33.2 48 24 38.8 38.8"/>
+  </g>
+  <g id="line">
+    <circle cx="36" cy="36" r="24" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <polyline fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="33.2 33.2 24 48 38.8 38.8"/>
+    <polyline fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="33.2 33.2 48 24 38.8 38.8"/>
+    <line x1="36" x2="36" y1="21" y2="16" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line x1="36" x2="36" y1="56" y2="51" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line x1="51" x2="56" y1="36" y2="36" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line x1="16" x2="21" y1="36" y2="36" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/img/emojis/2714.svg b/img/emojis/2714.svg
new file mode 100644
index 00000000..631b6ab9
--- /dev/null
+++ b/img/emojis/2714.svg
@@ -0,0 +1,8 @@
+<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g id="color">
+    <path fill="#b1cc33" d="m61.5 23.3-8.013-8.013-25.71 25.71-9.26-9.26-8.013 8.013 17.42 17.44z"/>
+  </g>
+  <g id="line">
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m10.5 39.76 17.42 17.44 33.58-33.89-8.013-8.013-25.71 25.71-9.26-9.26z"/>
+  </g>
+</svg>
diff --git a/resources/roadmap/index.md b/resources/roadmap/index.md
index 28f97fcc..73daefc5 100644
--- a/resources/roadmap/index.md
+++ b/resources/roadmap/index.md
@@ -8,13 +8,13 @@ permalink: /resources/roadmap/index.html
     <div class="pre-roadmap container">
         <div class="row center-xs">
             <div class="col-sm-3 col-xs-4">
-                <p class="pre-completed">{% t roadmap.completed %}</p>
+                <p><img class="emoji" src="/img/emojis/2714.svg">{% t roadmap.completed %}</p>
             </div>
             <div class="col-sm-3 col-xs-4">
-                <p class="pre-ongoing">{% t roadmap.ongoing %}</p>
+                <p><img class="emoji" src="/img/emojis/1F6A7.svg">{% t roadmap.ongoing %}</p>
             </div>
             <div class="col-sm-3 col-xs-4">
-                <p class="pre-upcoming">{% t roadmap.upcoming %}</p>
+                <p><img class="emoji" src="/img/emojis/1F9ED.svg">{% t roadmap.upcoming %}</p>
             </div>
         </div>
     </div>