fix: replace roadmap emoji with svg

tomoayan · Mar 21, 2024 · 6bae9db · 6bae9db
1 parent 78fd97a
commit 6bae9db
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/assets/motorway.svg b/assets/motorway.svg
diff --git a/index.html b/index.html
@@ -117,7 +117,7 @@ <h3>Tomo</h3>
         </div>
         <div class="roadMap">
             <div class="roadmap-wrapper">
-                <h1>🛣️ Roadmap</h1>
+                <h1><span class="img"><img onload="this.style.opacity=1" src="./assets/motorway.svg" alt="roadmap icon"></span> Roadmap</h1>
                 <div class="active">
                     <h4>Active</h4>
                     <div class="task">

diff --git a/main.css b/main.css
@@ -227,11 +227,27 @@ h6 {
     width: 100%;
 }
 
+.roadMap .img {
+    border-radius: 6px;
+    overflow: hidden;
+    width: 2rem;
+    height: 2rem;
+    background-color: hsla(0, 0%, 100%, 0.07);
+}
+.roadMap .img img {
+    transition: opacity 0.1s ease-in;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .roadMap h1 {
+    display: flex;
+    align-items: center;
+    gap: 7px;
     width: 100%;
     margin-bottom: 16px;
     padding-bottom: 6px;
-
 }
 
 .roadmap-wrapper .active, .roadmap-wrapper .planned {