From 9daf083f4642390d2551070e513c9e54eea7feea Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:36:19 +1000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20featured=20images=20overla?=
 =?UTF-8?q?p=20page=20title=20when=20metadata=20hidden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes: #827
---
 CHANGELOG.md                            |  4 ++++
 assets/css/compiled/main.css            | 12 ++++++++----
 exampleSite/config/_default/params.toml |  2 +-
 layouts/_default/single.html            |  8 ++++----
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b43c4f8..a99b911 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Upgrade to Typography v0.5.13 ([#864](https://github.com/jpanther/congo/pull/864))
 
+### Fixed
+
+- Featured images overlap page title when article metadata hidden ([#827](https://github.com/jpanther/congo/issues/827))
+
 ## [2.8.2] - 2024-04-17
 
 ### Added
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 3d208df..f2d0824 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1903,14 +1903,14 @@ code {
   margin-top: -0.75rem;
 }
 
-.-mt-4 {
-  margin-top: -1rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -1927,6 +1927,10 @@ code {
   margin-bottom: 1.5rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 0418c98..0489c5d 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -72,7 +72,7 @@ fingerprintAlgorithm = "sha256"
   # site = "ABC12345"
 
 #[umamiAnalytics]
-#  site = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"  
+#  site = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
 #  region = "eu"  # Can be either "eu" or "us"
 
 [verification]
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index da9ee23..2f2668c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,7 +7,7 @@
       {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
         {{ partial "breadcrumbs.html" . }}
       {{ end }}
-      <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
+      <h1 class="mb-8 mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
         {{ .Title | emojify }}
       </h1>
       {{ if or
@@ -17,14 +17,14 @@
         (and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0))
         (.Params.showEdit | default (.Site.Params.article.showEdit | default false))
       }}
-        <div class="mb-12 mt-8 text-base text-neutral-500 print:hidden dark:text-neutral-400">
+        <div class="mb-10 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
           {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
         </div>
       {{ end }}
       {{ with $feature }}
         <div class="prose">
           {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
-          {{ $class := "mb-6 -mt-4 rounded-md" }}
+          {{ $class := "mb-6 rounded-md" }}
           {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
           {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false "webp" $webp) }}
           {{ with $.Params.coverCaption }}
@@ -36,7 +36,7 @@
     <section class="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row">
       {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
         <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
-          <div class="toc pe-5 print:hidden lg:sticky lg:top-10">
+          <div class="toc pe-5 lg:sticky lg:top-10 print:hidden">
             {{ partial "toc.html" . }}
           </div>
         </div>