Add metadata and links to review bubbles

searchmarkers · May 14, 2024 · 4e5bd42 · 4e5bd42
1 parent ece77a5
commit 4e5bd42
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -52,27 +52,43 @@ <h2>Introduction</h2>
 			</p>
 			<h2>My favourite reviews</h2>
 			<ul class="review-list">
-				<li>
-					<blockquote>
-						<p><mark>Simple and Extremely powerful.</mark>
-						Removes much of the frustration of search. <mark>Big time saver.</mark> Tons of keyboard shortcuts to get even faster & fully customizable as well.</p>
-					</blockquote>
-				</li>
-				<li>
-					<blockquote>
-						<p>I am waiting for this add-on for long-time! <mark>Good job and thank you so much!</mark></p>
-					</blockquote>
-				</li>
-				<li>
-					<blockquote>
-						<p>Very happy with it, does exactly what it says and has <mark>easy to understand options</mark> to customize your experience.</p>
-					</blockquote>
-				</li>
-				<li>
-					<blockquote>
-						<p>Thank you developer! <mark>Absolutely love this extension</mark> [...] I tried multiple searches to find an extension to highlight keywords in search results without ever seeing this wonderful new extension!</p>
-					</blockquote>
-				</li>
+				<li><figure>
+					<blockquote><p>
+						<mark>Simple and Extremely powerful.</mark>
+						Removes much of the frustration of search. <mark>Big time saver.</mark> Tons of keyboard shortcuts to get even faster &amp; fully customizable as well.
+					</p></blockquote>
+					<figcaption>
+						<cite><a href="https://addons.mozilla.org/en-GB/firefox/addon/mark-my-search/reviews/1938583/" target="_blank">Review</a></cite> on Firefox Browser Add-ons
+						<time datetime="2023-03-04">4 Mar 2023</time>
+					</figcaption>
+				</figure></li>
+				<li><figure>
+					<blockquote><p>
+						I am waiting for this add-on for long-time! <mark>Good job and thank you so much!</mark>
+					</p></blockquote>
+					<figcaption>
+						<cite><a target="_blank" href="https://addons.mozilla.org/en-GB/firefox/addon/mark-my-search/reviews/1939347/">Review</a></cite> on Firefox Browser Add-ons
+						<time datetime="2023-03-07">7 Mar 2023</time>
+					</figcaption>
+				</figure></li>
+				<li><figure>
+					<blockquote><p>
+						Very happy with it, does exactly what it says and has <mark>easy to understand options</mark> to customize your experience.
+					</p></blockquote>
+					<figcaption>
+						<cite><a target="_blank" href="https://addons.mozilla.org/en-GB/firefox/addon/mark-my-search/reviews/1993073/">Review</a></cite> on Firefox Browser Add-ons
+						<time datetime="2023-08-28">28 Aug 2023</time>
+					</figcaption>
+				</figure></li>
+				<li><figure>
+					<blockquote><p>
+						Thank you developer! <mark>Absolutely love this extension</mark> [...] I tried multiple searches to find an extension to highlight keywords in search results without ever seeing this wonderful new extension!
+					</p></blockquote>
+					<figcaption>
+						<cite>Review <a target="_blank" href="https://chromewebstore.google.com/detail/mark-my-search/lijbnhoniejpjjgemoifpjklobhakinb/reviews">(Reviews)</a></cite> on Chrome Web Store
+						<time datetime="2022-11-05">5 Nov 2022</time>
+					</figcaption>
+				</figure></li>
 			</ul>
 			<h2 aria-description="Questions and Answers">Q&A</h2>
 			<ul class="faq-list">

diff --git a/main.css b/main.css
@@ -331,8 +331,8 @@ input.info:checked::after {
 	border-bottom: 0.8em solid var(--outline-info-details);
 	border-left: 0.8em solid transparent;
 	border-right: 0.8em solid transparent;
-	left: -0.2em;
 	top: 1.2em;
+	left: -0.2em;
 }
 
 .info.details {

diff --git a/styles.css b/styles.css
@@ -1,16 +1,12 @@
 .review-list {
 	display: flex;
+	gap: 30px;
+	padding: 0;
 	overflow-x: auto;
-	padding-block: 6px; /* Stop shadows inside from being clipped */
-	padding-inline: 6px;
-	margin-inline: 0; /* Display up to the page edges */
 }
 
 .review-list li {
-	margin-inline: 14px;
 	width: 300px;
-	border: 2px solid hsl(0 0% 64%);
-	border-radius: 32px;
 	flex-shrink: 0;
 }
 
@@ -22,8 +18,34 @@
 	color: transparent;
 }
 
+.review-list figure {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	margin: 0;
+}
+
+.review-list figcaption {
+	margin-block: 10px;
+}
+
 .review-list blockquote {
-	margin: 10px;
+	position: relative;
+	flex-grow: 1;
+	margin: 0;
+	padding-inline: 10px;
+	border: 2px solid hsl(0 0% 64%);
+	border-radius: 32px;
+}
+
+.review-list blockquote::after {
+	content: "";
+	position: absolute;
+	border-top: 10px solid hsl(0 0% 64%);
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	top: 100%;
+	left: 20px;
 }
 
 .review-list li:not(:hover) blockquote {
@@ -44,6 +66,11 @@
 	color: var(--color);
 }
 
+.review-list time {
+	display: block;
+	color: hsl(0 0% 50%);
+}
+
 .faq-list h3 {
 	font-weight: normal;
 	font-style: italic;