fixed margin with show more articles button

docs/docs/shortcodes/index.html

@@ -54,8 +54,8 @@ Like</button>
 </span></span><span class=line><span class=cl>  <span class=p>}]</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
 </span></span><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span>
-</span></span></code></pre></div><div class=chart><canvas id=981245673></canvas>
-<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("981245673"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
+</span></span></code></pre></div><div class=chart><canvas id=589123764></canvas>
+<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("589123764"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
 </span></span></code></pre></div><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>figure</span>
 </span></span><span class=line><span class=cl>    <span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span>
 </span></span><span class=line><span class=cl>    <span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span>

exampleSite/config/_default/params.toml

@@ -25,7 +25,7 @@ mainSections = ["docs", "samples"]
   layout = "custom" # valid options: page, profile, custom
   showRecent = false
   showRecentItems = 5
-  showMoreLink = false
+  showMoreLink = true
   showMoreLinkDest = "/docs"
  
 [article]

layouts/partials/recent-articles.html

@@ -5,7 +5,7 @@
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 {{ end }}
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
-<section class="space-y-10 w-max">
+<section class="space-y-10 w-full">
   {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
   {{ partial "article-link.html" . }}
   {{ end }}
@@ -14,7 +14,7 @@
 {{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
 {{ end }}
-<div class="flex justify-center">
+<div class="mt-10 flex justify-center">
   <a href="{{ $showMoreLinkDest }}">
     <button
       class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show