updating formatting of photo responses

content/response/604938a3/index.md

@@ -10,6 +10,8 @@ xAuthorUrl: 'https://mstdn.social/@JonathanMBR'
 xPhoto: 'https://mstdn.social/system/accounts/avatars/000/179/051/original/f8e979470ecfd9e4.jpg'
 xContent: '<p>Interesting fact about lions;</p><p>Did you know adult lions pretend to be hurt by the bites of their little ones to encourage their strength?</p>'
 xPublished: '2021-03-10T18:27:15+00:00'
+xContentPhoto:
+  - 'https://mstdn.social/system/media_attachments/files/105/866/908/388/598/413/original/6d5edff5e6867f8e.jpg'
+  - 'https://mstdn.social/system/media_attachments/files/105/866/908/634/890/968/original/befd0e7459dca22b.jpg'
 xPostType: photo
 ---
-

layouts/_default/section.html

@@ -68,7 +68,8 @@
                           {{ if eq .Params.posttype "like-of" }} liked  <i class="fa fa-thumbs-up fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i> <a href="{{ .Params.xAuthorUrl }}" target="_blank">{{ .Params.xAuthor }}</a>'s <a href="{{ index .Params "like-of" }}" class="u-like-of">{{ .Params.xPostType }}</a>{{ end }}
                           {{ if eq .Params.posttype "in-reply-to" }} replied to  <i class="fa fa-comment fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i> <a href="{{ .Params.xAuthorUrl }}" target="_blank">{{ .Params.xAuthor }}</a>'s <a href="{{ index .Params "in-reply-to" }}" class="u-in-reply-to">{{ .Params.xPostType }}</a>{{ end }}
                           {{ if eq .Params.posttype "repost-of"  }}  shared  <i class="fa fa-share fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i> <a href="{{ .Params.xAuthorUrl }}" target="_blank">{{ .Params.xAuthor }}</a>'s <a href="{{ index .Params "repost-of" }}" class="u-repost-of">{{ .Params.xPostType }}</a>{{ end }}</p>
-                          {{ if .Params.xContent }}<section class="p-name p-content"><span class="remotePhoto"><a href="{{ .Params.xAuthorUrl }}" target="_blank"><img src="{{ .Params.xPhoto }}" title="{{ .Params.xAuthor }}" alt="{{ .Params.xAuthor }}'s avatar"/></a></span><span class="response-date">{{ dateFormat "Mon, 02 Jan 2006 15:04:05 GMT" .Params.xPublished }}</span><br/><span class="response-text">{{ plainify .Params.xContent }}</span></section>{{end}}
+                          {{ if .Params.xContent }}<section class="p-content"><span class="remotePhoto"><a href="{{ .Params.xAuthorUrl }}" target="_blank"><img src="{{ .Params.xPhoto }}" title="{{ .Params.xAuthor }}" alt="{{ .Params.xAuthor }}'s avatar"/></a></span><span class="response-date">{{ dateFormat "Mon, 02 Jan 2006 15:04:05 GMT" .Params.xPublished }}</span><span class="response-text">{{ plainify .Params.xContent }}
+                          {{ if .Params.xContentPhoto }}<br/><br/>{{ range .Params.xContentPhoto }}<img class="u-photo xContentPhoto" src="{{ . }}"/>{{ end }}{{ end }}</span></section>{{end}}
                           {{ if .Content }}<br/>{{ .Content }}{{ end }}
                           {{ if not (eq .Type "article") }}<section class="info">
                               <span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>

themes/nipponalba/layouts/_default/single.html

@@ -93,15 +93,16 @@
       <section class="author" style="display:none;">
         <a rel="author" class="p-author  h-card" rel="me" href="https://jk.nipponalba.scot"><img src="/images/profile.jpg"/><div class="title">{{ .Site.Params.Title }}</div></a>
       </section>
-      <section><p>{{ .Site.Params.Title }}
+      <article class="h-cite"><p>{{ .Site.Params.Title }}
           {{ if eq .Params.posttype "like-of" }} liked  <i class="fa fa-thumbs-up fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i> <a href="{{ .Params.xAuthorUrl }}" target="_blank">{{ .Params.xAuthor }}</a>'s <a href="{{ index .Params "like-of" }}" class="u-like-of u-target">{{ .Params.xPostType }}</a>{{ end }}
           {{ if eq .Params.posttype "in-reply-to" }} replied to  <i class="fa fa-comment fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i> <a href="{{ .Params.xAuthorUrl }}" target="_blank">{{ .Params.xAuthor }}</a>'s <a href="{{ index .Params "in-reply-to" }}" class="u-in-reply-to u-target">{{ .Params.xPostType }}</a>{{ end }}
           {{ if eq .Params.posttype "repost-of"  }}  shared  <i class="fa fa-share fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i> <a href="{{ .Params.xAuthorUrl }}" target="_blank">{{ .Params.xAuthor }}</a>'s <a href="{{ index .Params "repost-of" }}" class="u-repost-of u-target">{{ .Params.xPostType }}</a>{{ end }}</p>
-          {{ if .Params.xContent }}<section class="h-cite"><span class="remotePhoto"><a href="{{ .Params.xAuthorUrl }}" target="_blank"><img src="{{ .Params.xPhoto }}" title="{{ .Params.xAuthor }}" alt="{{ .Params.xAuthor }}'s avatar"/></a></span><span class="response-date">{{ dateFormat "Mon, 02 Jan 2006 15:04:05 GMT" .Params.xPublished }}</span><br/><span class="response-text">{{ plainify .Params.xContent }}</span></section>{{end}}
+          {{ if .Params.xContent }}<section class="p-content"><span class="remotePhoto"><a href="{{ .Params.xAuthorUrl }}" target="_blank"><img src="{{ .Params.xPhoto }}" title="{{ .Params.xAuthor }}" alt="{{ .Params.xAuthor }}'s avatar"/></a></span><span class="response-date">{{ dateFormat "Mon, 02 Jan 2006 15:04:05 GMT" .Params.xPublished }}</span><span class="response-text">{{ plainify .Params.xContent }}
+          {{ if .Params.xContentPhoto }}<br/><br/>{{ range .Params.xContentPhoto }}<img class="u-photo xContentPhoto" src="{{ . }}"/>{{ end }}{{ end }}</span></section>{{end}}
           {{ if .Content }}<section class="p-name e-content"><br/>{{ .Content }}</section>{{ end }}
           {{ if not (eq .Type "article") }}<section class="info">
               <span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
-              </section>{{ end }}</section>
+              </section>{{ end }}</article>
         <a class="u-url" style="display:none;" href="https://fed.brid.gy/">https://fed.brid.gy/</a>
       </article>
                       {{end}}

themes/nipponalba/static/css/style.css

@@ -477,6 +477,12 @@ margin-bottom: 300px;
   width:100%;
   max-width: 600px;
 }
+.h-entry img.xContentPhoto {
+  max-width: 310px;
+  display:inline;
+  margin-right: 10px;
+  border-radius:5px;
+}
 
 .longpost img{
   max-width:700px;
@@ -484,28 +490,34 @@ margin-bottom: 300px;
 }
 #response .h-cite .p-content{
   background-color: var(--border-colour);
-  display:block;
+  display:grid;
   min-height: 80px;
   border-radius: 15px;
-  padding: 10px 10px 20px 10px;
+  grid-template-columns: 80px calc(90% - 20px);
+  grid-template-rows: 40px auto;
+  max-height: calc(100% - 50px);
 }
 .remotePhoto{
-  float:left;
   width: 70px;
-  padding: 10px 0;
+  display:inline;
+  padding: 15px 0px;
+  grid-column: 1;
 }
 .remotePhoto img{
   display:block;
 }
 .response-text{
-  min-height: calc(100% - 15px);
+  grid-column: 2;
+  vertical-align: top;
+  margin-bottom: 20px;
 }
 .response-date{
   width: 100%;
   font-size: 13px;
-  display:block;
   text-align:right;
-  vertical-align:bottom;
+  grid-column: 2;
+  margin-right: 20px;
+  margin-top: 10px;
 }
 
 #interactions{