Add fading on top/bottom of the search results container

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add active state to footer's "Powered by" links.
 - Add active state to footnotes' go back button.
 - Add active state to slider thumb.
+- Add fading on top/bottom of the search results container.
 - Add loading animation to "Load Comments" button.
 - Add special `switch` class for checkboxes (#70).
 - Add zoom-on-hover to custom comment emojis.

sass/_nav.scss

@@ -411,23 +411,29 @@
 		}
 	}
 
-	#search-results {
+	#search-results-container {
 		-webkit-backdrop-filter: var(--blur);
-		display: none;
+		display: flex;
 		position: absolute;
 		top: calc(100% + 0.5rem);
 		left: 0;
-		flex-direction: column;
-		gap: 0.5rem;
 		backdrop-filter: var(--blur);
-		box-shadow:
+		box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
-			var(--edge-highlight),
-			0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
 		border-radius: calc(var(--rounded-corner) + 0.5rem);
 		background-color: var(--nav-bg);
-		padding: 0.5rem;
 		width: 100%;
 		max-height: 50vh;
+	}
+
+	#search-results {
+		--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
+		-webkit-mask-image: var(--mask);
+		display: none;
+		flex: 1;
+		flex-direction: column;
+		gap: 0.5rem;
+		mask-image: var(--mask);
+		padding: 0.5rem;
 		overflow: auto;
 
 		.item {

templates/partials/nav.html

@@ -126,7 +126,9 @@
 				{{- macros_translate::translate(key="search", default="Search", language_strings=language_strings) -}}
 			</label>
 			<input id="search-bar" placeholder="{{ macros_translate::translate(key='search_for', default='Search for', language_strings=language_strings) }}…" autocomplete="off" type="search" disabled>
+			<div id="search-results-container">
 				<div id="search-results"></div>
 			</div>
+		</div>
 	{%- endif %}
 </header>