From e727fc51bb426b6f3fbb8f3545449cf2662318b2 Mon Sep 17 00:00:00 2001
From: jk <jk@nipponalba.scot>
Date: Thu, 26 Nov 2020 09:26:56 +0000
Subject: [PATCH] reformatting the webmentions section

---
 themes/nipponalba/layouts/_default/single.html   |  2 +-
 .../nipponalba/layouts/partials/webmention.html  |  8 ++++----
 themes/nipponalba/static/css/style.css           | 16 ++++++++++++----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/themes/nipponalba/layouts/_default/single.html b/themes/nipponalba/layouts/_default/single.html
index ab1813f0..7f3daf35 100644
--- a/themes/nipponalba/layouts/_default/single.html
+++ b/themes/nipponalba/layouts/_default/single.html
@@ -96,7 +96,7 @@
           {{ 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.Content }}{{ .Params.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/>
+              <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 "Mon, 02 Jan 2006 15:04:05 GMT" }}">{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 GMT" }}</time></a></span><br/>
               </section>{{ end }}
         </article>
       </section>
diff --git a/themes/nipponalba/layouts/partials/webmention.html b/themes/nipponalba/layouts/partials/webmention.html
index e5fe6a05..e4339564 100644
--- a/themes/nipponalba/layouts/partials/webmention.html
+++ b/themes/nipponalba/layouts/partials/webmention.html
@@ -3,20 +3,20 @@
 {{ if eq (index . "wm-property") "mention" }}
 <section class="mention interaction"><span class="remote_profile"><a href="{{ .author.url }}"><img src="{{ .author.photo }}" /></a></span><section class="intcontent"><span class="intactivity"><a href="{{ .author.url }}">{{ .author.name }}</a> mentioned this post in <a href="{{ .url }}">the post {{  .title }}</a></span>
 {{ if .content.html }}
-{{ .content.html | safeHTML }}
+<p>{{ .content.html | safeHTML }}</p>
 {{ else }}
 <p>{{ .content.text | safeHTML }}</p>
 {{ end }}
-<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .published ) }}</time></section></section>
+<time>{{ dateFormat "Mon, 02 Jan 2006 15:04:05 GMT" ( time .published ) }}</time></section></section>
 {{ end }}
 {{ if eq (index . "wm-property") "in-reply-to" }}
 <section class="reply interaction"><span class="remote_profile"><a href="{{ .author.url }}"><img src="{{ .author.photo }}" /></a></span><section class="intcontent"><span class="intactivity"><a href="{{ .author.url }}">{{ .author.name }}</a> replied to this post <a href="{{ .url }}">here</a><br/></span>
   {{ if .content.html }}
-  {{ .content.html | safeHTML }}
+  <p>{{ .content.html | safeHTML }}</p>
   {{ else }}
   <p>{{ .content.text | safeHTML }}</p>
   {{ end }}
-<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .published ) }}</time></section></section>
+<time>{{ dateFormat "Mon, 02 Jan 2006 15:04:05 GMT" ( time .published ) }}</time></section></section>
 {{ end }}
 {{ if eq (index . "wm-property") "bookmark" }}
 <section class="bookmark interaction"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> bookmarked this post</section>
diff --git a/themes/nipponalba/static/css/style.css b/themes/nipponalba/static/css/style.css
index 1143a410..921ea83b 100644
--- a/themes/nipponalba/static/css/style.css
+++ b/themes/nipponalba/static/css/style.css
@@ -372,7 +372,7 @@ margin-bottom: 200px;
   display:grid;
   grid-template-rows: repeat (20px, 40px, auto);
   width:100%;
-  border-top:1px dotted var(--text-colour);
+  border-top:1px solid var(--text-colour);
   padding-bottom:150px;
 }
 #webmention-form{
@@ -388,6 +388,7 @@ line-height: 2;
 }
 #webmentions{
   grid-row: 4;
+
   margin-top: 0 20px 0 0 ;
   padding: 0 0 200px 0;
 }
@@ -421,23 +422,30 @@ line-height: 2;
 }
 
 .interaction.mention, .interaction.reply{
-  border:1px dotted var(--text-colour);
+  border:1px solid var(--text-colour);
   display:flex;
   min-height: 60px;
   padding: 10px;
+  background-color: var(--border-colour);
+  box-shadow: 0 2px 3px var(--shadow-colour);
+  border-radius: 15px;
 }
 .interaction.mention .remote_profile, .interaction.reply .remote_profile{
   width: 90px;
-}
+  min-width: 90px;
+  }
 .interaction.mention .remote_profile img, .interaction.reply .remote_profile img, .remotePhoto img{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   object-fit:cover;
   margin: 0 auto;
+}
+.remotePhoto{
+
 }
 .intactivity{
-  font-size:13px;
+  font-size:15px;
   font-style: italic;
   line-height:18px;
   text-align:left;