feat(projects): improve project metadata

_layouts/project.html

@@ -4,14 +4,14 @@
 ---
 <header>
   <h1>{{ page.title }}</h1>
-  <aside class="project-metadata">
-    <div class="metadata-item timespan"><i class="twa twa-hourglass-not-done"></i> {{ page.timespan | safe }}</div>
+  <div class="project-metadata">
+    <div class="metadata-item timespan">{{ page.timespan | safe }}</div>
     {% for category in page.categories %}
       <div class="metadata-item tags">
-        <i class="twa twa-label"></i> {{ category }}
+        {{ category }}
       </div>
     {% endfor %}
-  </aside>
+  </div>
 </header>
 
 {{ content | safe }}

_sass/_emoji.scss

@@ -90,12 +90,6 @@ licensed under MIT: https://ellekasai.mit-license.org/
 .twa-cricket {
   background-image: url("/assets/images/icons/cricket.svg");
 }
-.twa-label {
-  background-image: url("/assets/images/icons/label.svg");
-}
-.twa-hourglass-not-done {
-  background-image: url("/assets/images/icons/hourglass.svg");
-}
 .twa-grinning-face-with-sweat {
   background-image: url("/assets/images/icons/grinning-face-with-sweat.svg");
 }

_sass/_gallery.scss

@@ -1,16 +1,21 @@
 
 .project-metadata {
   font-family: var(--font-mono);
-  font-size: var(--font-small);
+  font-size: var(--font-x-small);
+  text-transform: uppercase;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin-bottom: 1rem;
+  margin-left: -0.3rem;
 
   .metadata-item {
     white-space: nowrap;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
+    background-color: var(--color-emphasis);
+    padding: 0.2rem 0.3rem;
+    border-radius: 0.3rem;
   }
 }
 

_sass/_main.scss

@@ -29,6 +29,7 @@
   --font-mono: 'mono', monospace;
   --max-image-width: 50rem;
   --font-small: 0.85rem;
+  --font-x-small: 0.65rem;
 }
 
 :root.dark {