Redesign the display of entry 'metadata', like author and category, to be way more space-efficient - should make tiny statuses less 'heavy'

entries/jinja2/entries/h-entry.html

@@ -1,6 +1,40 @@
 {% macro hEntry(entry, indent_width) -%}
 {%- set i = ' ' * indent_width -%}
-<article class="card h-entry">
+<article class="h-entry media">
+  {{i}}<aside class="info">
+    {{i}}<a class="p-author h-card" href="{{ entry.author.url }}">
+      {{i}}<img class="u-photo img-fluid" src="{{ entry.author.avatar.url }}" alt="{{ entry.author.name }}" />
+      {{i}}<span class="p-name sr-only">{{ entry.author.name }}</span>
+    {{i}}</a>
+    {{i}}<a class="u-uid u-url" href="{{ entry.url }}">
+      {{i}}<time class="dt-published" datetime="{{ entry.published.isoformat() }}">
+        {{i}}<i class="fas fa-calendar" aria-hidden="true"></i>
+        {{i}}{{ entry.published | naturaltime }}
+        {{i}}</time>
+    {{i}}</a>
+    {{i}}<time class="dt-updated" datetime="{{ entry.updated.isoformat() }}"{% if (entry.updated | naturaltime) == (entry.published | naturaltime) %} hidden{% endif %}>
+      {{i}}<i class="fas fa-pencil-alt" aria-hidden="true"></i>
+      {{i}}{{ entry.updated | naturaltime }}
+    {{i}}</time>
+    {{i}}<a class="u-url" href="{{ entry.short_url }}">
+      {{i}}<i class="fas fa-link" aria-hidden="true"></i>
+      {{i}}{{ entry.short_url | friendly_url }}
+    {{i}}</a>
+    {% for c in entry.cats.all() %}
+    {{i}}<a class="p-category" href="{{ c.url }}">
+      {{i}}<i class="fas fa-paw" aria-hidden="true"></i>
+      {{i}}{{ c.name }}
+    {{i}}</a>
+    {% endfor %}
+    {% for s in entry.syndications.all() %}
+    {{i}}<a class="u-syndication" href="{{ s.url }}">
+      {{i}}<i class="{{ s.profile.site.icon }}" aria-hidden="true"></i>
+      {{i}}{{ s.profile }}
+    {{i}}</a>
+    {% endfor %}
+  {{i}}</aside>
+
+  {{i}}<div class="card">
     {% if entry.photo %}
     {{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" />
 
@@ -13,52 +47,8 @@
         {{i}}{{ entry.content | markdown }}
       {{i}}</div>
     {{i}}</div>
-
-  {{i}}<div class="card-footer">
-    {{i}}<a class="p-author h-card" href="{{ entry.author.url }}">
-      {{i}}<img class="u-photo" src="{{ entry.author.avatar.url }}" />
-      {{i}}{{ entry.author.name }}
-    {{i}}</a>
-    {{i}}<a class="u-uid u-url" href="{{ entry.url }}">
-      {{i}}<time class="dt-published" datetime="{{ entry.published.isoformat() }}">
-        {{i}}<i class="fas fa-calendar" aria-hidden="true"></i>
-        {{i}}{{ entry.published | naturaltime }}
-      {{i}}</time>
-    {{i}}</a>
-    {% if entry.updated != entry.published %}
-    {{i}}<time class="dt-updated" datetime="{{ entry.updated.isoformat() }}">
-      {{i}}<i class="fas fa-pencil-alt" aria-hidden="true"></i>
-      {{i}}{{ entry.updated | naturaltime }}
-    {{i}}</time>
-    {% endif %}
-    {{i}}<a class="u-url" href="{{ entry.short_url }}">
-      {{i}}<i class="fas fa-link" aria-hidden="true"></i>
-      {{i}}{{ entry.short_url | friendly_url }}
-    {{i}}</a>
   {{i}}</div>
 
-  {% if entry.cats.exists() %}
-  {{i}}<div class="card-footer">
-    {% for c in entry.cats.all() %}
-    {{i}}<a class="p-category" href="{{ c.url }}">
-      {{i}}<i class="fas fa-paw" aria-hidden="true"></i>
-      {{i}}{{ c.name }}
-    {{i}}</a>
-    {% endfor %}
-  {{i}}</div>
-
-  {% endif %}
-  {% if entry.syndications.exists() %}
-  {{i}}<div class="card-footer">
-    {% for s in entry.syndications.all() %}
-    {{i}}<a class="u-syndication" href="{{ s.url }}">
-      {{i}}<i class="{{ s.profile.site.icon }}" aria-hidden="true"></i>
-      {{i}}{{ s.profile }}
-    {{i}}</a>
-    {% endfor %}
-  {{i}}</div>
-
-  {% endif %}
   {{i}}<script class="p-json-ld" type="application/ld+json">{{ entry.json_ld | tojson }}</script>
 {{i}}</article>
 {%- endmacro %}

entries/static/entries/css/h-entry.styl

@@ -10,7 +10,23 @@ ol.entries, div.entry
 		&:last-child
 			margin-bottom 0
 
-.card.h-entry
+.h-entry.media
+	> aside.info
+		display flex
+		flex-direction column
+		align-items center
+		font-size 0.8rem
+		margin-right 1rem
+
+		a.p-author
+			text-align center
+			img.u-photo
+				border-radius .25rem
+				height 3em
+		> *
+			margin-bottom .25rem
+	> .card
+		flex 1
 	.e-content
 		ul
 			list-style-type disc
@@ -26,14 +42,3 @@ ol.entries, div.entry
 			max-width 100%
 		> :last-child
 			margin-bottom 0
-
-	.card-footer
-		text-align center
-		> *
-			display inline-block
-			margin-right 1rem
-			&:last-child
-				margin-right 0
-		.h-card > img
-			height 1em
-			vertical-align baseline