Following changes:

* Fixed appearance of images as thumbnails and as background for hero section
* Updated README.md docs, fixed layout breaks
* Other minor cosmetic fixes

3 files changed, 167 insertions, 143 deletions

diff --git a/README.md b/README.md
index 0079b2b..54322e4 100644
--- a/README.md
+++ b/README.md
@@ -659,27 +659,27 @@ Let's see them one by one.
 12. **User Experience** *(Type: Map/Dict/Object | Accepts value: - | Optional)*
     
     It contains settings that let's you customize your user's website/blog experience.
-    1. **Google Analytics** *(Type: Map/Dict/Object | Accepts value: - | Optional)*
+    1.  **Google Analytics** *(Type: Map/Dict/Object | Accepts value: - | Optional)*
       
-      Customize your Google Analytics
-      1. **Script** *(Type: Integer | Accepts value: Number | Optional | Default: 0)*
+       Customize your Google Analytics
+       1.  **Script** *(Type: Integer | Accepts value: Number | Optional | Default: 0)*
         
-        Accepts the following values:  
-        0: Default script by Google via Hugo's internal template. Works well with Cookie Consent solution, since it respects `window['ga-disable-GA_MEASUREMENT_ID'] = true;` to disable Google Analytics measurement. [See this](https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out). Has a higher chance of being blocked by AdBlockers. Only sync version of internal template works with gtag4;  
-        1: minimal-analytics by James Hill. May or may not work well with Cookie Consent solution. -- https://github.com/jahilldev/minimal-analytics/tree/main/packages/ga4 ;  
-        2: minimal-analytics-4 by Dariusz Więckiewicz. May or may not work well with Cookie Consent solution. Make sure you set Data Stream data retention to 14 months from default 2 and link your GA4 web data stream with Google Search Console -- https://gist.github.com/idarek/9ade69ac2a2ef00d98ab950426af5791 ;  
-        [Refer this for a good implementation discussion](https://discourse.gohugo.io/t/add-minimal-analytics-google-analytics-v4-to-hugo/39016)
-      2. **Loading Method** *(Type: String | Accepts value: Text | Optional | Default: "sync")*
+           Accepts the following values:  
+           0: Default script by Google via Hugo's internal template. Works well with Cookie Consent solution, since it respects `window['ga-disable-GA_MEASUREMENT_ID'] = true;` to disable Google Analytics measurement. [See this](https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out). Has a higher chance of being blocked by AdBlockers. Only sync version of internal template works with gtag4;  
+           1: minimal-analytics by James Hill. May or may not work well with Cookie Consent solution. -- https://github.com/jahilldev/minimal-analytics/tree/main/packages/ga4 ;  
+           2: minimal-analytics-4 by Dariusz Więckiewicz. May or may not work well with Cookie Consent solution. Make sure you set Data Stream data retention to 14 months from default 2 and link your GA4 web data stream with Google Search Console -- https://gist.github.com/idarek/9ade69ac2a2ef00d98ab950426af5791 ;  
+           [Refer this for a good implementation discussion](https://discourse.gohugo.io/t/add-minimal-analytics-google-analytics-v4-to-hugo/39016)
+       2.  **Loading Method** *(Type: String | Accepts value: Text | Optional | Default: "sync")*
         
-        It helps you customize whether Google Analytics JavaScript file loads 'Synchronously' or 'Asynchronously'. Avialable only if `script` is set to "0". Latest Google Analytics Tag 4 only works with `sync`.
-    2. **Post Images** *(Type: Map/Dict/Object | Accepts value: - | Optional)*
+           It helps you customize whether Google Analytics JavaScript file loads 'Synchronously' or 'Asynchronously'. Avialable only if `script` is set to "0". Latest Google Analytics Tag 4 only works with `sync`.
+    2.  **Post Images** *(Type: Map/Dict/Object | Accepts value: - | Optional)*
       
-      Customize behaviour for your posts' images
-      1. **Thumbnail Size** *(Type: Array | Accepts value: [Integer, String] | Optional | Default: [6.25, "rem"])*
+        Customize behaviour for your posts' images
+        1.  **Thumbnail Size** *(Type: Array | Accepts value: String | Optional | Default: "200px")*
         
-        Integer: Size of post images when they appear as thumbnails in lists, for example, on landing page.  
-        String: Unit of size. For example, "em", "rem", "px".  
-        Gets overridden by `thumbnailSize` specified in a page's front-matter.
+            Integer: Size of post images when they appear as thumbnails in lists, for example, on landing page.  
+            String: Unit of size. For example, "em", "rem", "px".  
+            Gets overridden by `thumbnailSize` specified in a page's front-matter.  
         
     Example:
     ```yaml
@@ -688,7 +688,7 @@ Let's see them one by one.
         script: 0
         loading: "sync"
       postImages:
-        thumbnailSize: [6.25, "rem"]
+        thumbnailSize: "200px"
     ```
 13. **Main Sections** *(Type: Array | Accepts value: Section names | Highly Recommended)*
     
@@ -748,24 +748,35 @@ Let's see them one by one.
 6.  **Image** *(Type: Map/Dict/Object | Accepts value: - | Recommended)*
     
     Specify an image for a post/page
-    1. **Source** *(Type: String | Accepts value: Path to Image | Required)*
+    1.  **Source** *(Type: String | Accepts value: Path to Image | Required)*
       
-      You can specify path to an image dedicated to current post. This image is used to optimize the display of content when shared on social media.
-    2. **Alternative Text** *(Type: String | Accepts value: Text | Recommended)*
+        You can specify path (relative to root) to an image dedicated to current post. This image is used to optimize the display of content when shared on social media.
+        
+        Example:
+        ```
+        The right way:
+        1. "/my-awesome-image.jpg"
+        2. "/images/my-awesome-image.jpg"
+        
+        The wrong way:
+        1. "my-awesome-image.jpg"
+        2. "images/my-awesome-image.jpg"
+        ```
+    2.  **Alternative Text** *(Type: String | Accepts value: Text | Recommended)*
       
-      This text is shown when for some reason an image is unable to load. It also helps in SEO and is especially helpful for screen readers.
-    3. **Thumbnail Size** *(Type: Array | Accepts value: [Integer, String] | Optional | Default: [6.25, "rem"])*
+        This text is shown when for some reason an image is unable to load. It also helps in SEO and is especially helpful for screen readers.
+    3.  **Thumbnail Size** *(Type: Array | Accepts value: String | Optional | Default: "200px")*
       
-      Integer: Size of post image when it appears as thumbnail in lists, for example, on landing page.  
-      String: Unit of size. For example, "em", "rem", "px".  
-      Overrides the setting set (if any) in `userExperience` -> `postImages` -> `thumbnailSize` in `config.yaml` file present at root of your webiste.
+        Integer: Size of post image when it appears as thumbnail in lists, for example, on landing page.  
+        String: Unit of size. For example, "em", "rem", "px".  
+        Overrides the setting set (if any) in `userExperience` -> `postImages` -> `thumbnailSize` in `config.yaml` file present at root of your webiste.
     
     Example:
     ```yaml
     image:
       src: "/images/post-1.png"
       alt: "Alternative text"
-      thumbnailSize: [6.25, "rem"]
+      thumbnailSize: "200px"
     ```
 7.  **Author** *(Type: String | Accepts value: Text | Recommended)*
     
@@ -1015,7 +1026,7 @@ params:
       script: 0 # accepts value: 0/1/2 | 0: Default script by Google via Hugo's internal template; 1: minimal-analytics by James Hill; 2: minimal-analytics-4 by Dariusz Więckiewicz | optional | default: 0
       loading: "sync" # accepts value: sync/async | determines whether Google Analytics JavaScript file loads 'Synchronously' or 'Asynchronously' | optional | default: "sync"
     postImages: # customize behaviour for your posts' images
-        thumbnailSize: [6.25, "rem"] # accepts value: [integer, string] | integer: size of post images when they appear as thumbnails; string: unit of size | default: [6.25, "rem"]
+        thumbnailSize: "200px" # accepts value: string | integer: size of post images when they appear as thumbnails; string: unit of size | default: "200px"
   mainSections: ["post"] # required, https://gohugo.io/functions/where/#mainsections
   #customVerification:
     #myWOT: "ba8579f668r8w3g62503" # content for meta tag to verify your website on 'Web Of Trust'
diff --git a/layouts/index.html b/layouts/index.html
index e7fdda9..706ccb8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -40,128 +40,141 @@ We donno how to have access to a specific page's taxonomies yet. Having that wou
     {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).ByDate.Reverse }}
       <div class="card mb-3">
         <div class="card-body">
-          <h2>
-            {{ if .Params.image.src }}<img src="{{ .Params.image.src }}" height="
-            {{- if .Params.image.thumbnailSize }}
-              {{- .Params.image.thumbnailSize -}}
-            {{- else if site.Params.postImages.thumbnailSize }}
-              {{- site.Params.postImages.thumbnailSize -}}
-            {{- else -}}
-              6.25rem
-            {{- end -}}
-            "{{ if .Params.image.alt }} alt="{{ .Params.image.alt }}"{{ end }}></img>{{ end }}
-            <a class="text-reset" href="{{ .Permalink }}"><span class="card-title text-reset"> {{ .Title }}</span></a>
-          </h2>
-          <div class="card-text">
-            {{- $postMetaTop := false }}
-            {{- $postMetaBottom := false }}
-            {{- range site.Params.position.postMeta }}
-              {{- if eq .summary "top" }}
-                {{- $postMetaTop = true }}
-              {{- else if eq .summary "bottom" }}
-                {{- $postMetaBottom = true }}
-              {{- end }}
-            {{- end }}
-            
-            {{- if and site.Params.position.postMeta $postMetaTop }}
-            <div class="font-weight-bold small post-meta">
+          
+          <div class="row">
+          
+            <div class="col-md-auto my-auto">
+              {{ if .Params.image.src }}<img src="{{ .Params.image.src }}" height="
+                {{- if .Params.image.thumbnailSize }}
+                  {{- .Params.image.thumbnailSize -}}
+                {{- else if site.Params.postImages.thumbnailSize }}
+                  {{- site.Params.postImages.thumbnailSize -}}
+                {{- else -}}
+                  200px
+                {{- end -}}
+                "{{ if .Params.image.alt }} alt="{{ .Params.image.alt }}"{{ end }}></img>{{ end }}
+            </div>
             
-              {{- $wordCount := "" }}
-              {{- $readingTime := "" }}
-              {{- $author := "" }}
-              {{- $lastUpdated := "" }}
-              
-              {{- if and site.Params.position.postMeta.wordCount.summary (eq site.Params.position.postMeta.wordCount.summary "top") }}
-                {{- $wordCount = print (.WordCount) " words" }}
-              {{- end }}
-              {{- if and site.Params.position.postMeta.readingTime.summary (eq site.Params.position.postMeta.readingTime.summary "top") }}
-                {{- $readingTime = print (lang.NumFmt 0 (div .WordCount 130)) " min read" -}}
-              {{- end }}
-              {{- if and site.Params.position.postMeta.author.summary (eq site.Params.position.postMeta.author.summary "top") }}
-                {{- $author = print "By " (default site.Params.meta.author .Params.author) }}
-              {{- end }}
-              {{- if .Lastmod }}
-                {{- if and site.Params.position.postMeta.lastUpdated.summary (eq site.Params.position.postMeta.lastUpdated.summary "top") }}
-                  {{- $lastUpdated = print "<span class=''>Last updated: " (.Lastmod.Format "January 2, 2006") }}</span>
+            <div class="col-md-auto my-auto">
+              <h2>
+                <a class="text-reset" href="{{ .Permalink }}"><span class="card-title text-reset"> {{ .Title }}</span></a>
+              </h2>
+              <div class="card-text">
+                {{- $postMetaTop := false }}
+                {{- $postMetaBottom := false }}
+                {{- range site.Params.position.postMeta }}
+                  {{- if eq .summary "top" }}
+                    {{- $postMetaTop = true }}
+                  {{- else if eq .summary "bottom" }}
+                    {{- $postMetaBottom = true }}
+                  {{- end }}
                 {{- end }}
-              {{- end }}
-              
-              {{- $postMetaPre := slice $author $wordCount $readingTime $lastUpdated }}
-              {{ $postMeta := slice }}
-              {{ range $postMetaPre }}
-                {{ if . }}
-                  {{ $postMeta = $postMeta | append . }}
+                
+                {{- if and site.Params.position.postMeta $postMetaTop }}
+                <div class="font-weight-bold small post-meta">
+                
+                  {{- $wordCount := "" }}
+                  {{- $readingTime := "" }}
+                  {{- $author := "" }}
+                  {{- $lastUpdated := "" }}
+                  
+                  {{- if and site.Params.position.postMeta.wordCount.summary (eq site.Params.position.postMeta.wordCount.summary "top") }}
+                    {{- $wordCount = print (.WordCount) " words" }}
+                  {{- end }}
+                  {{- if and site.Params.position.postMeta.readingTime.summary (eq site.Params.position.postMeta.readingTime.summary "top") }}
+                    {{- $readingTime = print (lang.NumFmt 0 (div .WordCount 130)) " min read" -}}
+                  {{- end }}
+                  {{- if and site.Params.position.postMeta.author.summary (eq site.Params.position.postMeta.author.summary "top") }}
+                    {{- $author = print "By " (default site.Params.meta.author .Params.author) }}
+                  {{- end }}
+                  {{- if .Lastmod }}
+                    {{- if and site.Params.position.postMeta.lastUpdated.summary (eq site.Params.position.postMeta.lastUpdated.summary "top") }}
+                      {{- $lastUpdated = print "<span class=''>Last updated: " (.Lastmod.Format "January 2, 2006") }}</span>
+                    {{- end }}
+                  {{- end }}
+                  
+                  {{- $postMetaPre := slice $author $wordCount $readingTime $lastUpdated }}
+                  {{ $postMeta := slice }}
+                  {{ range $postMetaPre }}
+                    {{ if . }}
+                      {{ $postMeta = $postMeta | append . }}
+                    {{ end }}
+                  {{ end }}
+                  
+                  {{- delimit $postMeta " &#183; " -}}
+                  
+                </div>
                 {{ end }}
-              {{ end }}
-              
-              {{- delimit $postMeta " &#183; " -}}
-              
-            </div>
-            {{ end }}
-            
-            {{ if and (site.Params.position.postMeta.tags.summary) (eq site.Params.position.postMeta.tags.summary "top") }}
-              <div class="pb-1 mt-1">
-              {{- range .Params.tags -}}
-                <a href="/tags/{{ . | urlize }}/"><span class="badge badge-pill bg-clr2 text-nav mr-2 mb-1 py-2">#{{ . | humanize | upper }}</span></a>
-              {{- end -}}
+                
+                {{ if and (site.Params.position.postMeta.tags.summary) (eq site.Params.position.postMeta.tags.summary "top") }}
+                  <div class="pb-1 mt-1">
+                  {{- range .Params.tags -}}
+                    <a href="/tags/{{ . | urlize }}/"><span class="badge badge-pill bg-clr2 text-nav mr-2 mb-1 py-2">#{{ . | humanize | upper }}</span></a>
+                  {{- end -}}
+                  </div>
+                {{ end }}
+                
               </div>
-            {{ end }}
-            
-            <p>{{ .Summary }}</p>
-            
-            {{ if or (and site.Params.position.postMeta $postMetaBottom) (and (site.Params.position.postMeta.tags.summary) (eq site.Params.position.postMeta.tags.summary "bottom")) }}
+          
             
-            <div class="mb-3">
-            {{- if and site.Params.position.postMeta $postMetaBottom }}
-            <div class="font-weight-bold small post-meta">
-            
-              {{- $wordCount := "" }}
-              {{- $readingTime := "" }}
-              {{- $author := "" }}
-              {{- $lastUpdated := "" }}
-              
-              {{- if and site.Params.position.postMeta.wordCount.summary (eq site.Params.position.postMeta.wordCount.summary "bottom") }}
-                {{- $wordCount = print (.WordCount) " words" }}
-              {{- end }}
-              {{- if and site.Params.position.postMeta.readingTime.summary (eq site.Params.position.postMeta.readingTime.summary "bottom") }}
-                {{- $readingTime = print (lang.NumFmt 0 (div .WordCount 130)) " min read" -}}
-              {{- end }}
-              {{- if and site.Params.position.postMeta.author.summary (eq site.Params.position.postMeta.author.summary "bottom") }}
-                {{- $author = print "By " (default site.Params.meta.author .Params.author) }}
-              {{- end }}
-              {{- if .Lastmod }}
-                {{- if and site.Params.position.postMeta.lastUpdated.summary (eq site.Params.position.postMeta.lastUpdated.summary "bottom") }}
-                  {{- $lastUpdated = print "<span class=''>Last updated: " (.Lastmod.Format "January 2, 2006") }}</span>
-                {{- end }}
-              {{- end }}
+              <p>{{ .Summary }}</p>
               
-              {{- $postMetaPre := slice $author $wordCount $readingTime $lastUpdated }}
-              {{ $postMeta := slice }}
-              {{ range $postMetaPre }}
-                {{ if . }}
-                  {{ $postMeta = $postMeta | append . }}
-                {{ end }}
+              {{ if or (and site.Params.position.postMeta $postMetaBottom) (and (site.Params.position.postMeta.tags.summary) (eq site.Params.position.postMeta.tags.summary "bottom")) }}
+                <div class="mb-3">
+                  {{- if and site.Params.position.postMeta $postMetaBottom }}
+                    <div class="font-weight-bold small post-meta">
+                    
+                      {{- $wordCount := "" }}
+                      {{- $readingTime := "" }}
+                      {{- $author := "" }}
+                      {{- $lastUpdated := "" }}
+                      
+                      {{- if and site.Params.position.postMeta.wordCount.summary (eq site.Params.position.postMeta.wordCount.summary "bottom") }}
+                        {{- $wordCount = print (.WordCount) " words" }}
+                      {{- end }}
+                      {{- if and site.Params.position.postMeta.readingTime.summary (eq site.Params.position.postMeta.readingTime.summary "bottom") }}
+                        {{- $readingTime = print (lang.NumFmt 0 (div .WordCount 130)) " min read" -}}
+                      {{- end }}
+                      {{- if and site.Params.position.postMeta.author.summary (eq site.Params.position.postMeta.author.summary "bottom") }}
+                        {{- $author = print "By " (default site.Params.meta.author .Params.author) }}
+                      {{- end }}
+                      {{- if .Lastmod }}
+                        {{- if and site.Params.position.postMeta.lastUpdated.summary (eq site.Params.position.postMeta.lastUpdated.summary "bottom") }}
+                          {{- $lastUpdated = print "<span class=''>Last updated: " (.Lastmod.Format "January 2, 2006") }}</span>
+                        {{- end }}
+                      {{- end }}
+                      
+                      {{- $postMetaPre := slice $author $wordCount $readingTime $lastUpdated }}
+                      {{ $postMeta := slice }}
+                      {{ range $postMetaPre }}
+                        {{ if . }}
+                          {{ $postMeta = $postMeta | append . }}
+                        {{ end }}
+                      {{ end }}
+                      
+                      {{- delimit $postMeta " &#183; " -}}
+                      
+                    </div>
+                  {{ end }}
+                  
+                  {{ if and (site.Params.position.postMeta.tags.summary) (eq site.Params.position.postMeta.tags.summary "bottom") }}
+                    <div class="pb-1 mt-1">
+                    {{- range .Params.tags -}}
+                      <a href="/tags/{{ . | urlize }}/"><span class="badge badge-pill bg-clr2 text-nav mr-2 py-2">#{{ . | humanize | upper }}</span></a>
+                    {{- end -}}
+                    </div>
+                  {{ end }}
+                  
+                </div>
               {{ end }}
               
-              {{- delimit $postMeta " &#183; " -}}
-              
+              <a class="font-weight-bold text-reset text-decoration-none" href="{{ .Permalink }}"><nobr>Read more →</nobr></a>
             </div>
-            {{ end }}
-            
-            {{ if and (site.Params.position.postMeta.tags.summary) (eq site.Params.position.postMeta.tags.summary "bottom") }}
-              <div class="pb-1 mt-1">
-              {{- range .Params.tags -}}
-                <a href="/tags/{{ . | urlize }}/"><span class="badge badge-pill bg-clr2 text-nav mr-2 py-2">#{{ . | humanize | upper }}</span></a>
-              {{- end -}}
-              </div>
-            {{ end }}
-            
-            </div>
-            {{ end }}
-            
-            <a class="font-weight-bold text-reset text-decoration-none" href="{{ .Permalink }}"><nobr>Read more →</nobr></a>
+        
           </div>
+            
         </div>
+        
       </div>
     {{ end }}
   </div>
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 25af594..7e4922a 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
-<div class="container-fluid bg-clr1 text-light text-center {{- if and (ne site.Params.backgImage.post "disable") (.Params.image.src) }} py-5{{ else }} pb-3 pt-4{{ end }} position-relative shadow"
+<div class="container-fluid  text-light text-center {{- if and (ne site.Params.backgImage.post "disable") (.Params.image.src) }} py-5{{ else }} bg-clr1 pb-3 pt-4 shadow{{ end }} position-relative"
 {{- if and (ne site.Params.backgImage.post "disable") (.Params.image.src) }}
- style="background: url('{{ .Params.image.src | safeURL }}') 50% 50% / cover no-repeat fixed; box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.65);"
+ style="background: url('{{ .Params.image.src | safeURL }}') 50% 95% / cover no-repeat fixed; box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.65);"
 {{- end -}}
 >
   <div style="height:3.5rem;"></div>
@@ -35,7 +35,7 @@
       <div class="py-1">
         <div class="row">
           {{- if and site.Params.position.postMeta $postMetaTop }}
-          <div class="col-md-7 small text-muted post-meta my-1">
+          <div class="col-md-7 small text-muted post-meta my-auto">
             
             {{- $wordCount := "" }}
             {{- $readingTime := "" }}
@@ -71,9 +71,9 @@
           {{ end }}
           
           {{ if and site.Params.social.share (eq site.Params.position.social.share "top") }}
-          <div class="col-md-auto ml-3 my-1">
+          <div class="col-md-auto ml-3 my-auto">
             <div class="row">
-              <div class="col-auto p-0">
+              <div class="col-auto p-0 my-auto">
               Share on:&nbsp;&nbsp;
               </div>
               <div class="col p-0">