From cf0264b5a637e5f5aeb4d1bdd8ae63cd938ffead Mon Sep 17 00:00:00 2001
From: Danielle McLean <dani@00dani.me>
Date: Thu, 28 Jun 2018 12:10:19 +1000
Subject: [PATCH] Allow info fields to wrap if long, rather than squish the
 main content of the entry

---
 entries/jinja2/entries/h-entry.html     | 20 ++++++++++----------
 entries/static/entries/css/h-entry.styl | 11 +++++++++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/entries/jinja2/entries/h-entry.html b/entries/jinja2/entries/h-entry.html
index ea2fab8..77a0166 100644
--- a/entries/jinja2/entries/h-entry.html
+++ b/entries/jinja2/entries/h-entry.html
@@ -7,22 +7,22 @@
       {{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 class="dt-published media" datetime="{{ entry.published.isoformat() }}">
+        {{i}}<i class="fas fa-fw fa-calendar" aria-hidden="true"></i>
+        {{i}}<div class="media-body">{{ entry.published | naturaltime }}</div>
         {{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 class="dt-updated media" datetime="{{ entry.updated.isoformat() }}"{% if (entry.updated | naturaltime) == (entry.published | naturaltime) %} hidden{% endif %}>
+      {{i}}<i class="fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
+      {{i}}<div class="media-body">{{ entry.updated | naturaltime }}</div>
     {{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 class="u-url media" href="{{ entry.short_url }}">
+      {{i}}<i class="fas fa-fw fa-link" aria-hidden="true"></i>
+      {{i}}<div class="media-body">{{ entry.short_url | friendly_url }}</div>
     {{i}}</a>
   {{i}}</aside>
 
-  {{i}}<div class="card">
+  {{i}}<div class="card media-body">
     {% if entry.photo %}
     {{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" />
 
diff --git a/entries/static/entries/css/h-entry.styl b/entries/static/entries/css/h-entry.styl
index 42ba6ee..35ab62b 100644
--- a/entries/static/entries/css/h-entry.styl
+++ b/entries/static/entries/css/h-entry.styl
@@ -14,17 +14,24 @@ ol.entries, div.entry
 	> aside.info
 		display flex
 		flex-direction column
-		align-items center
+		align-items flex-start
 		font-size 0.8rem
-		margin-right 1rem
+		margin-right 0.4rem
+		width 7rem
 
 		a.p-author
+			align-self center
 			text-align center
 			img.u-photo
 				border-radius .25rem
 				height 3em
 		> *
 			margin-bottom .25rem
+		.media
+			align-items baseline
+			max-width 10rem
+			> :first-child
+				margin-right 2px
 	> .card
 		flex 1
 	.e-content