From ff9ee263ad1f5aae357da755e49949b567c10eff Mon Sep 17 00:00:00 2001
From: jk <jk@nipponalba.scot>
Date: Mon, 23 Nov 2020 23:59:08 +0000
Subject: [PATCH] some style changes

---
 layouts/_default/section.html                 |  38 ++++--
 layouts/partials/pagination.html              |   4 +-
 .../nipponalba/layouts/_default/single.html   |  33 +++--
 themes/nipponalba/layouts/index.html          |  41 +++++--
 themes/nipponalba/static/css/style.css        | 116 ++++++++++++------
 5 files changed, 155 insertions(+), 77 deletions(-)

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index a9c8e174..12faa351 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -12,30 +12,50 @@
                 <article class="index_content">
                   {{if eq .Type "article" }}<br/>{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<a href="{{ .Permalink }}" class="u-url"><h3 class="p-name entry-title">{{ .Title }}</h3></a><b>{{ .Description }}</b>{{ end }}
                   {{ if eq .Type "article" }}<section class="info">
-                  <span class="blogs_span">{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}</span><span class="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
-                  <span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
-                  <span class="tags_span">{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
+                  <span class="info-date"><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></span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/><br/>
+                  <span class="blogs_span">{{ with .Page.Params.Blog }}<i class="fa fa-pencil-square-o fa-1.5x fa-fw" aria-hidden="true" title="Tags"></i><b> {{ partial "taxonomy/blog.html" . }}{{ end }}</b></span><br/>
+                  <span class="categories_span">{{ with .Page.Params.category }}<i class="fa fa-tags fa-1.5x fa-fw" aria-hidden="true" title="Tags"></i>{{ partial "taxonomy/categories.html" . }}{{ end }}{{ with .Page.Params.tag }}, {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
                   </section>{{ end }}
                   <section class="e-content">
-                    {{ .Content }}
+                    {{ if eq .Type "article"}}{{ .Summary }}{{else}}{{ .Content }}{{end}}
                     {{ if eq .Type "photo"}}
-                    <section class="photogrid">
+                    <section class="photos">
                       {{$link := .Permalink}}
                       {{$summary := .Content}}
                       {{ range .Page.Params.Photo }}
                       {{ if isset . "value" }}
-                        <a href="{{ $link }}" class="u-url"><img class="u-photo thumb" src="{{ replace .value "800." "300."}}" title="{{ $summary }}" alt="{{ .alt }}"/></a>
+                        <a href="{{ $link }}" class="u-url"><img class="u-photo thumb" src="{{ .value}}" title="{{ .alt }}" alt="{{ .alt }}"/></a>
                         {{ else }}
-                        <a href="{{ $link }}" class="u-url"><img class="u-photo thumb" src="{{ replace . "800." "300."}}" title="{{ $summary }}" alt="Alt not yet added, will fix!"/></a>
+                        <a href="{{ $link }}" class="u-url"><img class="u-photo thumb" src="{{ . }}" title="{{ $summary }}" alt="Alt not yet added, will fix!"/></a>
                       {{end}}{{end}}
                     </section>
                       {{end}}
                   </section><br/>
                   {{ 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/>
+                    {{ $mention_ids := index $.Site.Data.index .RelPermalink }}
+
+                    {{ $mentions := apply $mention_ids "index" $.Site.Data.mentions "." }}
+                    {{ $.Scratch.Set "likecount" 0 }}
+                    {{ $.Scratch.Set "sharecount" 0 }}
+                    {{ $.Scratch.Set "commentcount" 0 }}
+                    {{ $.Scratch.Set "mentioncount" 0 }}
+                    {{ range $mentions }}
+                    {{ if eq (index . "wm-property") "like-of" }}{{ $.Scratch.Add "likecount" 1 }}{{ end }}
+                    {{ if eq (index . "wm-property") "repost-of" }}{{ $.Scratch.Add "sharecount" 1 }}{{ end }}
+                    {{ if eq (index . "wm-property") "in-reply-to" }}{{ $.Scratch.Add "commentcount" 1 }}{{ end }}
+                    {{ if eq (index . "wm-property") "mention" }}{{ $.Scratch.Add "mentioncount" 1 }}{{ end }}
+                    {{ end }}
+                    <a href="{{ .Permalink }}"><span class="mini_interactions">{{ $likecount := $.Scratch.Get "likecount" }}{{ if ne $likecount 0 }} <i class="fa fa-thumbs-up fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i>{{$likecount}} like{{if gt $likecount 1}}s{{end}}{{end}}
+                    {{ $sharecount := $.Scratch.Get "sharecount" }}{{ if ne $sharecount 0 }} <i class="fa fa-share fa-1.5x fa-fw" aria-hidden="true" title="Shares"></i>{{$sharecount}} share{{if gt $sharecount 1}}s{{end}}{{end}}
+                    {{ $commentcount := $.Scratch.Get "commentcount" }}{{ if ne $commentcount 0 }} <i class="fa fa-comment fa-1.5x fa-fw" aria-hidden="true" title="Replies"></i>{{$commentcount}} repl{{if gt $commentcount 1}}ies{{else}}y{{end}}{{end}}
+                    {{ $mentioncount := $.Scratch.Get "mentioncount" }}{{ if ne $mentioncount 0 }} <i class="fa fa-sticky-note fa-1.5x fa-fw" aria-hidden="true" title="Mentions"></i>{{$mentioncount}} mention{{if gt $mentioncount 1}}s{{end}}{{end}}</span></a>
+                    <span class="info-date-other"><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 class="syndication">
+                      {{ with .Page.Params.pleromaurl  }} -
+                      Syndication: <a href="{{ . }}"><i class="fa fa-pleroma fa-1.5x fa-fw" aria-hidden="true" title="Pleroma"></i></a>{{ end }}</span><span class="categories_span_other">{{ with .Page.Params.category }}{{ partial "taxonomy/categories.html" . }}{{ end }}{{ with .Page.Params.tag }}, {{ partial "taxonomy/tags.html" . }}{{ end }}</span></span>
                       </section>{{ end }}
                 </article>
-                </section><hr/>
+                </section>
                 {{ else }}
                 <section data-post-type="{{ .Params.posttype }}" data-post-id="{{ .Params.slug }}" class="h-entry" id="response">
                       <section class="author" style="display:none;">
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 145a6bb9..7d018afc 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -4,13 +4,13 @@
 <ul class="pagination">
   <li class="pagination__item pagination__item--previous">
   {{ if $paginator.HasPrev }}<a href="{{ $paginator.Prev.URL }}" class="pagination__link pagination__link--previous">{{end}}
-      PREVIOUS
+      OLDER
       {{ if $paginator.HasPrev }}</a>{{end}}
   </li>
   <li>Page {{ $paginator.PageNumber }} of {{ $paginator.TotalPages }}</li>
 <li class="pagination__item pagination__item--next">
 {{ if $paginator.HasNext }}<a href="{{ $paginator.Next.URL }}" class="pagination__link pagination__link--next">{{end}}
-  NEXT
+  NEWER
 {{ if $paginator.HasNext }}</a>{{end}}
 </li>
 </ul>
diff --git a/themes/nipponalba/layouts/_default/single.html b/themes/nipponalba/layouts/_default/single.html
index 209529d9..0cdbb8fb 100644
--- a/themes/nipponalba/layouts/_default/single.html
+++ b/themes/nipponalba/layouts/_default/single.html
@@ -1,24 +1,21 @@
 {{ define "main" }}
 {{ if not (eq .Type "response" "bookmarkof")}}
-<article class="post h-entry entry contents">
-  <section class="author" style="display:none;">
-    <a rel="author" class="u-author h-card" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}<img src="/images/profile.jpg"/></a>
-  </section>
-    {{ if eq .Type "article" }}{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="p-name entry-title">{{ .Title }}</h3><b>{{ .Description }}</b>
+{{ if ne .Type "article"}}<article class="post h-entry entry contents">{{else}}<article class="post longpost h-entry entry contents">{{end}}
+      {{ if eq .Type "article" }}{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="p-name entry-title">{{ .Title }}</h3><b>{{ .Description }}</b>
           <section class="info">
-          <span class="blogs_span">{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}</span><span class="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
-          <span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
-          <span class="tags_span">{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
+          <span class="info-date"><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></span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/><br/>
+          <span class="blogs_span">{{ with .Page.Params.Blog }}<i class="fa fa-pencil-square-o fa-1.5x fa-fw" aria-hidden="true" title="Tags"></i><b> {{ partial "taxonomy/blog.html" . }}{{ end }}</b></span><br/>
+          <span class="categories_span">{{ with .Page.Params.category }}<i class="fa fa-tags fa-1.5x fa-fw" aria-hidden="true" title="Tags"></i>{{ partial "taxonomy/categories.html" . }}{{ end }}{{ with .Page.Params.tag }}, {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
           </section>{{ end }}
 <section class="e-content">
   {{ .Content }}
   {{ if eq .Type "photo"}}
-    <section class="photogrid">
+    <section class="photos">
     {{ range .Page.Params.Photo }}
     {{ if isset . "value" }}
-      <a href="{{ .value }}"><img class="u-photo" src="{{ .value }}" alt="{{ .alt }}"/></a>
+      <a href="{{ .value }}"><img class="u-photo full" src="{{ .value }}" title="{{ .alt }}" alt="{{ .alt }}"/></a>
       {{ else }}
-        <a href="{{ . }}"><img class="u-photo" src="{{ . }}" alt="Alt not yet added, will fix!"/></a>
+        <a href="{{ . }}"><img class="u-photo full" src="{{ . }}" title="Alt not yet added, will fix!" alt="Alt not yet added, will fix!"/></a>
     {{end}}
     {{end}}
     </section>
@@ -28,12 +25,12 @@
       </section>
     {{ end }}<br/>
 </section>
-<section class="info">
-{{ if not (eq .Type "article") }}<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span>{{ end }}
-<span class="syndication">
-  {{ with .Page.Params.pleromaurl  }}
-  Syndicated to <a href="{{ . }}">Pleroma</a></span>{{ end }}
-<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></section>
+{{ if not (eq .Type "article") }}<section class="info">
+  <span class="info-date-other"><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 class="syndication">
+    {{ with .Page.Params.pleromaurl  }} -
+    Syndication: <a href="{{ . }}"><i class="fa fa-pleroma fa-1.5x fa-fw" aria-hidden="true" title="Pleroma"></i></a>{{ end }}</span><span class="categories_span_other">{{ with .Page.Params.category }}{{ partial "taxonomy/categories.html" . }}{{ end }}{{ with .Page.Params.tag }}, {{ partial "taxonomy/tags.html" . }}{{ end }}</span></span>
+    </section>{{ end }}
 <a href="https://brid.gy/publish/mastodon"></a>
 <section id="interactions"><h4>Interactions</h4>
 <section id="webmention-form">
@@ -51,7 +48,7 @@
 {{ if isset $mention_ids 0}}
 {{ $mentions := apply $mention_ids "index" $.Site.Data.mentions "." }}
 {{ $mentions := sort $mentions "wm-received" }}
-<section id="webmentions">
+<section href="webmentions" id="webmentions">
   <section class="like interaction"><h4>Likes</h4>{{ range $mentions }}{{ if eq (index . "wm-property") "like-of" }}
       <a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo }}" title="{{ .author.name }}" alt="{{ .author.name }}" /></a>{{ end}}
   {{ end }}</section>
diff --git a/themes/nipponalba/layouts/index.html b/themes/nipponalba/layouts/index.html
index d4651252..9e79c435 100644
--- a/themes/nipponalba/layouts/index.html
+++ b/themes/nipponalba/layouts/index.html
@@ -31,18 +31,20 @@
       <span class="p-category">Cooking</span>
       </section>
 </section>
-    <h1>Latest post</h1>
-    {{ range (first 1 (where .Site.RegularPages "Type" "!=" "response")) }}
+    <h1>Latest posts</h1>
+    {{ range (first 3 (where .Site.RegularPages "Type" "!=" "response")) }}
     <article class="post h-entry entry">
         {{ if eq .Type "article"}}{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="p-name entry-title"><a href="{{ .Permalink}}" class="u-url">{{ .Title }}</a></h3>{{ end }}
     <section class="e-content">{{ .Content }}
       {{ if eq .Type "photo"}}
-        <section class="photos">
+      <section class="photos">
+        {{$link := .Permalink}}
+        {{$summary := .Content}}
         {{ range .Page.Params.Photo }}
           {{ if isset . "value" }}
-          <a class="u-url" href="{{ . }}"><img class="u-photo thumb" src="{{ replace .value "800." "300."}}" alt="{{ .alt }}"/></a>
+          <a href="{{ $link }}" class="u-url"><img class="u-photo thumb" src="{{ replace .value "800." "300."}}" title="{{ .alt }}" alt="{{ .alt }}"/></a>
           {{ else }}
-          <a class="u-url" href="{{ . }}"><img class="u-photo thumb" src="{{ replace . "800." "300."}}" alt="Alt not yet added, will fix!"/></a>
+          <a href="{{ $link }}" class="u-url"><img class="u-photo thumb" src="{{ replace . "800." "300."}}" title="{{ $summary }}" alt="Alt not yet added, will fix!"/></a>
           {{ end }}
         {{end}}
         </section>
@@ -50,11 +52,32 @@
     </section>
     <section class="info">
       {{ if eq .Type "article" }}
-      <span class="blogs_span">{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}</span><span class="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
-      <span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
-      <span class="tags_span">{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
+      <span class="info-date"><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></span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/><br/>
+      <span class="blogs_span">{{ with .Page.Params.Blog }}<i class="fa fa-pencil-square-o fa-1.5x fa-fw" aria-hidden="true" title="Tags"></i><b> {{ partial "taxonomy/blog.html" . }}{{ end }}</b></span><br/>
+      <span class="categories_span">{{ with .Page.Params.category }}<i class="fa fa-tags fa-1.5x fa-fw" aria-hidden="true" title="Tags"></i>{{ partial "taxonomy/categories.html" . }}{{ end }}{{ with .Page.Params.tag }}, {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
       {{ else }}
-      <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/>
+      {{ $mention_ids := index $.Site.Data.index .RelPermalink }}
+
+      {{ $mentions := apply $mention_ids "index" $.Site.Data.mentions "." }}
+      {{ $.Scratch.Set "likecount" 0 }}
+      {{ $.Scratch.Set "sharecount" 0 }}
+      {{ $.Scratch.Set "commentcount" 0 }}
+      {{ $.Scratch.Set "mentioncount" 0 }}
+      {{ range $mentions }}
+      {{ if eq (index . "wm-property") "like-of" }}{{ $.Scratch.Add "likecount" 1 }}{{ end }}
+      {{ if eq (index . "wm-property") "repost-of" }}{{ $.Scratch.Add "sharecount" 1 }}{{ end }}
+      {{ if eq (index . "wm-property") "in-reply-to" }}{{ $.Scratch.Add "commentcount" 1 }}{{ end }}
+      {{ if eq (index . "wm-property") "mention" }}{{ $.Scratch.Add "mentioncount" 1 }}{{ end }}
+      {{ end }}
+      <a href="{{ .Permalink }}"><span class="mini_interactions">{{ $likecount := $.Scratch.Get "likecount" }}{{ if ne $likecount 0 }} <i class="fa fa-thumbs-up fa-1.5x fa-fw" aria-hidden="true" title="Likes"></i>{{$likecount}} like{{if gt $likecount 1}}s{{end}}{{end}}
+      {{ $sharecount := $.Scratch.Get "sharecount" }}{{ if ne $sharecount 0 }} <i class="fa fa-share fa-1.5x fa-fw" aria-hidden="true" title="Shares"></i>{{$sharecount}} share{{if gt $sharecount 1}}s{{end}}{{end}}
+      {{ $commentcount := $.Scratch.Get "commentcount" }}{{ if ne $commentcount 0 }} <i class="fa fa-comment fa-1.5x fa-fw" aria-hidden="true" title="Replies"></i>{{$commentcount}} repl{{if gt $commentcount 1}}ies{{else}}y{{end}}{{end}}
+      {{ $mentioncount := $.Scratch.Get "mentioncount" }}{{ if ne $mentioncount 0 }} <i class="fa fa-sticky-note fa-1.5x fa-fw" aria-hidden="true" title="Mentions"></i>{{$mentioncount}} mention{{if gt $mentioncount 1}}s{{end}}{{end}}</span></a>
+        <span class="info-date-other"><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 class="syndication">
+          {{ with .Page.Params.pleromaurl  }} -
+          Syndication: <a href="{{ . }}"><i class="fa fa-pleroma fa-1.5x fa-fw" aria-hidden="true" title="Pleroma"></i></a>{{ end }}</span><span class="categories_span_other">{{ with .Page.Params.category }}{{ partial "taxonomy/categories.html" . }}{{ end }}{{ with .Page.Params.tag }}, {{ partial "taxonomy/tags.html" . }}{{ end }}</span></span>
+
       {{ end }}
     </section>
 <a href="https://brid.gy/publish/mastodon"></a>
diff --git a/themes/nipponalba/static/css/style.css b/themes/nipponalba/static/css/style.css
index dd987413..77d45178 100644
--- a/themes/nipponalba/static/css/style.css
+++ b/themes/nipponalba/static/css/style.css
@@ -13,6 +13,10 @@ html { font-family: 'Inter', sans-serif;}
   --light-bg:#e8e8e8;
   --light-link:#004e7f;
   --light-opacity:1;
+  --light-shadow:rgba(0,0,0,0.06);
+  --light-border:rgba(150,150,150,0.3);
+  --border-colour: var(--light-border);
+  --shadow-colour: var(--light-shadow);
 
   --text-colour: var(--dark-text);
   --bg-colour: var(--dark-bg);
@@ -120,10 +124,11 @@ pre {
 #page{
   color: var(--text-colour);
   background: var(--bg-colour);
+
 }
+
 #page-top {
-  width: 100%;
-  max-width: 1000px;
+  width: 800px;
   z-index: 3;
   height: 60px;
   border-bottom: 1px solid var(--text-colour);
@@ -167,21 +172,22 @@ nav i{
   top:-5px;
 }
 main {
-  max-width: 1000px;
+  width: 800px;
   margin: 0 auto;
   background: var(--bg-colour);
 }
+
 .about, .archive, .bookmarks {
   height: calc(100vh - 150px);
 }
 .about .post{
-  border: 1px dotted var(--text-colour);
   padding: 10px;
-  margin:0;
+  margin:20px 0;
   vertical-align:top;
+  width: 98%;
 }
 .profile{
-  width:85% !important;
+  width:100% !important;
   display:grid;
   grid-template-columns: repeat (20%, 80%);
   margin: 0 auto;
@@ -234,15 +240,23 @@ main {
   margin-right: 5px;
 }
 .info{
-  padding: 30px 0;
+  padding: 10px 0;
   font-size:13px;
   display:grid;
   grid-template-columns: repeat (80%. 20%);
 }
-.blogs_span, .categories_span, .tags_span{
+.blogs_span{
   grid-column: 1;
 }
-.category, .blog, .tag {
+.categories_span, .categories_span_other, .info-date-other{
+  grid-column: 1 / span 2;
+}
+.categories_span_other{
+  display:inline;
+  text-align:right;
+  float:right;
+}
+.category, .blog, .tag, .syndication, .info-date-other{
   font-size: 13px;
   line-height: 1.5;
   display:inline;
@@ -250,12 +264,13 @@ main {
 .categories, .tags{
   display:inline;
   margin:0;padding:0;
+  text-align:right;
 }
 .categories li, .tags li{
   list-style:none;
   display:inline;
 }
-.tag::before {
+.tag::before, .category::before{
   content: "#";
   opacity: .75;
 }
@@ -265,9 +280,9 @@ main {
 .categories li:last-child:after, .tags li:last-child:after{
   content: "";
 }
-.info-date{
-  grid-column: 2;
-  text-align:right;
+.info-date,{
+  display:inline;
+  text-align:left;
   line-height:1.5;
 }
 .info-date .dt-published{
@@ -279,17 +294,11 @@ main {
   text-align:right;
   font-weight:bold;
 }
-.syndication{
-  grid-column:2;
-  text-align:right;
-  font-size:13px;
-  margin:0;
-}
-.stream{
+.stream, .h-feed{
   padding-bottom:150px;
 }
 .post{
-  margin: 30px 0;
+  margin: 20px 0;
   }
   .index_content{
     text-align:justify;
@@ -301,6 +310,14 @@ main {
   object-fit:scale-down;
   object-position:top;
 }
+.h-entry{
+  width: 98%;
+  box-shadow: 0 2px 3px var(--shadow-colour);
+  border: 1px solid var(--border-colour);
+  border-radius: 15px;
+  padding:10px;
+  margin:20px 0;
+}
 .h-entry p a {
   text-decoration: none;
   color: var(--link-colour);
@@ -309,11 +326,17 @@ main {
   color: var(--link-colour);
 }
 .h-entry img {
-  text-align: center;
-  max-width: 800px;
   margin: 0 auto;
   display:block;
-  padding:10px;
+}
+.h-entry img.full {
+  width:100%;
+  max-width: 600px;
+}
+
+.longpost img{
+  max-width:700px;
+  padding: 10px;
 }
 
 #interactions{
@@ -529,9 +552,12 @@ time{
   margin-bottom:10px;
 }
 img.thumb{
-  width:300px;
-  padding: 0px;
-  margin:10px;
+  width:600px;
+  max-height: 600px;
+  object-fit:cover;
+  object-position:top;
+  margin: 0 auto;
+
   border: 1px solid var(--text-colour);
 }
 hr{
@@ -544,12 +570,12 @@ hr{
    border:0px;
    padding-top:20px;
    display:flex;
-   max-width: 600px;
+   max-width: 340px;
    width:100%;
 }
 .pagination li{
-  padding:10px 50px;
-  font-weight:bold;
+  padding:10px 20px;
+  font-weight:normal;
 }
 .pagination-bottom{
   padding-bottom:100px;
@@ -595,7 +621,7 @@ hr{
   #page-top {
     width: 95%;
     padding: 10px 0;
-  }
+    }
   .about, .post, .archive, .stream, .bookmarks, #response{
     width:95%;
     margin:0 auto;
@@ -633,10 +659,7 @@ hr{
 .interactions{
   padding-bottom: 100px;
 }
-  .pagination li{
-    padding:10px 50px;
-    height: 30px;
-  }
+
   .pagination-bottom{
     margin-bottom:0px;
   }
@@ -645,15 +668,23 @@ hr{
   }
 }
 @media screen and (max-width: 560px) {
+
 #Bookmarks{
   display:none;
 }
 .pagination li{
-  padding:10px 40px;
   height: 30px;
 }
+.about, .post, .archive, .stream, .bookmarks, #response{
+  width:98%;
+  padding: 0px;
+  margin-left: -5px;
+}
+img.thumb{
+  max-width: 95%;
+}
 article img{
-  width: 95%;
+  width: 100%;
   text-align:center;
 }
 .interactions{
@@ -664,14 +695,21 @@ footer{
 }
 }
 @media screen and (max-width: 460px) {
+#page{
+  width: 100%}
+}
+main {
+  max-width: 95%;
+}
 nav #Blogs{
   display:none;
 }
 nav label{
   display:none;
 }
-.pagination li{
-  padding:10px 10px;
+
+.pagination{
   height: 30px;
+  max-width: 460px;
 }
 }