add a shortcode for placing images. page section bloc, others details

themes/hugoplate/assets/scss/buttons.scss

@@ -1,5 +1,5 @@
 .btn {
-  @apply inline-block rounded border border-transparent px-5 py-2 font-semibold capitalize transition;
+  @apply inline-block rounded border border-transparent px-5 py-2 font-semibold transition;
 }
 
 .btn-sm {

themes/hugoplate/layouts/_default/single.html

@@ -1,11 +1,13 @@
 {{ define "main" }}
   {{ partial "page-header" . }}
 
-
   <section class="section-sm">
     <div class="container">
       <div class="row justify-center">
         <div class="lg:col-10">
+          <div class="chapo mb-8">
+            {{ .Description }}
+          </div>
           <div class="content">
             {{ .Content }}
           </div>

themes/hugoplate/layouts/partials/components/breadcrumb.html

@@ -3,14 +3,14 @@
 {{ $base := site.BaseURL }}
 
 
-<ul class="{{ $class }} inline-flex space-x-1 capitalize">
+<ul class="{{ $class }} inline-flex space-x-1">
   <li>
     <a
       class="text-primary dark:text-darkmode-primary"
       href="{{ $base | relLangURL }}">
       {{ i18n "home" | default "Home" }}
     </a>
-    <span class="inlin-block mr-1">/</span>
+    <span class="inlin-block mr-1"><i class="fa fa-arrow-right"></i></span>
   </li>
   {{ range $i, $e:= $context.Ancestors.Reverse }}
     {{ if and (not .IsHome) (ne .Title "Pages") }}
@@ -20,7 +20,7 @@
           href="{{ .RelPermalink }}">
           {{ .Title }}
         </a>
-        <span class="inlin-block mr-1">/</span>
+        <span class="inlin-block mr-1"><i class="fa fa-arrow-right"></i></span>
       </li>
     {{ end }}
   {{ end }}

themes/hugoplate/layouts/partials/page-header.html

@@ -1,9 +1,17 @@
-<section>
+<section class="dark page-hero pt-14 mb-14">
   <div class="container text-center">
-    <div
-      class="from-body to-theme-light dark:from-darkmode-body dark:to-darkmode-theme-light rounded-2xl bg-gradient-to-b px-8 py-14">
-      <h1>{{ .Title | title }}</h1>
+    <div class="px-8 py-14 dark:from-darkmode-body dark:to-darkmode-theme-light">
+      <!-- bg-gradient-to-b from-body to-theme-light rounded-2xl -->
+      <h1>{{ .Title }}</h1><!-- | title -->
       {{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
     </div>
+    <!--         
+      {{ $image:= .Params.image }}
+      {{ if $image }}
+      <div class="mb-10">
+        {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "w-full rounded") }}
+      </div>
+      {{ end }}
+    -->      
   </div>
 </section>

themes/hugoplate/layouts/shortcodes/place-image.html

@@ -0,0 +1,25 @@
+{{/* layouts/shortcodes/place-image.html */}}
+
+{{ $base := ref . "." }}
+{{ $src := .Get "src" }}
+{{ $baseSrc := print $base $src }}
+
+{{ $alt := .Get "alt" }}
+{{ $class := .Get "class" }}
+{{ $float := .Get "float" }}
+{{ $width := .Get "width" }}
+{{ $height := .Get "height" }}
+
+<figure class="image {{ with $float }}{{ $float }}{{ else }}center{{ end }}">
+    <img src="{{ $baseSrc }}"
+        alt="{{ $alt }}"
+        class="{{ $class }}"
+        width="{{ $width }}"
+        height="{{ $height }}"
+    >
+    {{ with .Get "caption" }}
+        <figcaption>
+            {{ . }}
+        </figcaption>
+    {{ end }}
+</figure>