🥚 refactor: show word count as reading time tooltip

sass/parts/_misc.scss

@@ -127,3 +127,9 @@ table tbody tr:nth-child(even) {
 .meta span::before {
   content: attr(reading-time);
 }
+
+.meta span.reading-time span.word-count {
+  display: inline-block;
+  position: relative;
+  width: 61em; /* adjust this value as needed */
+}

templates/macros/macros.html

@@ -119,11 +119,10 @@
                     •
                 {% endif %}
 
-                <span reading-time="{{ page.reading_time }} min read" word-count="{{ page.word_count }} words">{% if page.taxonomies and page.taxonomies.tags %}&nbsp;{%
-                    endif %}</span>
+                <span title="{{ page.word_count }} words">{{ page.reading_time }} min read{% if page.taxonomies and page.taxonomies.tags %}&nbsp;•&nbsp;{%endif %}</span>
 
                 {% if page.taxonomies and page.taxonomies.tags %}
-                <nav class="nav tags"> • Categories:
+                <nav class="nav tags">Categories:
                     {% for tag in page.taxonomies.tags %}
                     <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>{% if not loop.last %},
                     {% endif %}