From be4605cdfbee814ba9f8db6f64b2cecd356c3114 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Thu, 29 Aug 2024 06:28:18 +0300
Subject: [PATCH] Add margin between article heading and details (fixes #68)

Additionally fix the tags not floating to the end of article card, and
add a nice top border to details
---
 CHANGELOG.md                        | 13 ++++++++++++-
 content/blog/long-long-man/index.md |  2 +-
 sass/_article-list.scss             | 23 +++++++++++++++--------
 sass/_nav.scss                      |  2 +-
 sass/_tags.scss                     |  1 +
 templates/partials/search.html      |  2 +-
 6 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f9030f..0c262b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v4.7.1...main)
 
-- Add optional LaTeX rendering using the KaTeX library.
+### Added
+
+- Add optional LaTeX rendering using the KaTeX library (#65).
+
+### Changed
+
+- Add separator between article description and details.
+
+### Fixed
+
+- Fix missing margin between article card heading and its details if no description is set (#68).
+- Fix tags not floating to the end of the article card.
 
 ## [4.7.1](https://codeberg.org/daudix/duckquill/compare/v4.7.0...v4.7.1) - 2024-08-28
 
diff --git a/content/blog/long-long-man/index.md b/content/blog/long-long-man/index.md
index a32f4b8..a90a3c0 100644
--- a/content/blog/long-long-man/index.md
+++ b/content/blog/long-long-man/index.md
@@ -1,5 +1,5 @@
 +++
-authors = ["Looong Looong Man", "Brfxxccxxmnpcccclllmmnprxvclmnckssqlbb11116"]
+authors = ["Looong Looong Man", "Alexander Maximilian Jonathan"]
 title = "Loooooong Loooooong Loooooong Loooooong Loooooong Man"
 description = "Pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious pseudopseudohypoparathyroidism."
 date = 2017-01-01
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 4ea996f..b67c444 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -32,13 +32,17 @@
 			margin: 0;
 		}
 
-		.tags a {
-			background-color: var(--primary-color-alpha);
-			color: var(--primary-color);
+		.tags {
+			justify-content: flex-end;
 
-			&:hover {
-				background-color: var(--primary-color);
-				color: var(--contrast-color);
+			a {
+				background-color: var(--primary-color-alpha);
+				color: var(--primary-color);
+	
+				&:hover {
+					background-color: var(--primary-color);
+					color: var(--contrast-color);
+				}
 			}
 		}
 
@@ -236,7 +240,7 @@
 		.featured-badge,
 		.hot-badge,
 		.poor-badge {
-			display: block;
+			display: inline-block;
 			box-shadow: var(--edge-highlight);
 			border-radius: 999px;
 			padding: 0.5rem 0.75rem;
@@ -315,9 +319,12 @@
 
 		.details {
 			display: flex;
-			flex-wrap: wrap;
+			flex-wrap: nowrap;
 			justify-content: space-between;
 			gap: 0.25rem;
+			margin-block-start: 1rem;
+			border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
+			padding-block-start: 0.5rem;
 		}
 	}
 }
diff --git a/sass/_nav.scss b/sass/_nav.scss
index c0a83a4..6612d17 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -423,7 +423,7 @@
 				}
 			}
 
-			div {
+			span {
 				margin-block-start: 0.5rem;
 				border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
 				padding-block-start: 0.25rem;
diff --git a/sass/_tags.scss b/sass/_tags.scss
index c777cc7..80e95ca 100644
--- a/sass/_tags.scss
+++ b/sass/_tags.scss
@@ -25,6 +25,7 @@
 		color: var(--fg-muted-4);
 		font-size: 0.875rem;
 		text-decoration: none;
+		white-space: nowrap;
 
 		&:hover {
 			background-color: var(--primary-color-alpha);
diff --git a/templates/partials/search.html b/templates/partials/search.html
index a529f68..29617e4 100644
--- a/templates/partials/search.html
+++ b/templates/partials/search.html
@@ -127,7 +127,7 @@
     function formatSearchResultItem(item, terms) {
         return '<div class="item">'
             + `<a href="${item.ref}">${item.doc.title}</a>`
-            + `<div>${makeTeaser(item.doc.body, terms)}</div>`
+            + `<span>${makeTeaser(item.doc.body, terms)}</span>`
             + '</div>';
     }