Cross-sell component

Author: csswizardry

_includes/cross-sell.html

@@ -0,0 +1,9 @@
+<aside class="c-cross-sell">
+
+  {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}
+
+  <h4 class="c-cross-sell__title">You might also like…</h4>
+  <h5 class="c-cross-sell__link"><a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a></h5>
+
+</aside>
+

_includes/css/csswizardry.min.css

@@ -26,6 +26,8 @@ rewriting entire projects just to maintain feature parity with the previous
 iteration. This is not meaningful or productive work—it is time sunk into merely
 keeping themselves at square one.
 
+{% include cross-sell.html %}
+
 It’s a form of open-source vendor lock-in, and adding even the most trivial of
 performance improvements becomes impossible as frameworks obscure or sometimes
 remove the ability to fiddle with the nuts and bolts. The worst thing? You get
@@ -84,6 +86,8 @@ Every layer of abstraction made in the browser moves you further from the
 platform, ties you further into framework lock-in, and moves you further away
 from fast.
 
+{% include cross-sell.html %}
+
 I remain convinced that the typical developer doesn’t know enough about business
 analysis, and the typical business analyst doesn’t know enough about
 development, to fully reconcile the two sides of the coin. Deeper and more

_posts/2025-01-23-build-for-the-web-build-on-the-web-build-with-the-web.md

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   #CROSS-SELL
+   ========================================================================== */
+
+/**
+ * Cross-link other articles from post-to-post.
+ */
+
+.c-cross-sell {
+  width: 50%;
+  float: left;
+  margin-right: 12px;
+}
+
+.c-cross-sell__title {
+  font-size: 12px;
+  line-height: 2;
+  margin-bottom: 0;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #999;
+}
+
+@media screen and (min-width: 45em) {
+  .c-cross-sell {
+    margin-left: -12px;
+  }
+
+  .c-cross-sell:nth-of-type(even) {
+    float: right;
+    text-align: right;
+    margin-right: -12px;
+    margin-left:   12px;
+  }
+
+}

css/_components.cross-sell.scss

@@ -66,6 +66,7 @@
  * Footnotes............Article footnote styles
  * Embeds...............Embedded Tweets etc. need to look nicer
  * Highlights...........Call-outs and highlights.
+ * Cross-sell...........Linked-articles cross-sell component.
  *
  * SCOPES
  * Post.................Styles scoped specifically to blog post pages
@@ -209,6 +210,7 @@ $inuit-enable-list-ui--small:   true;
 @import "components.footnotes";
 @import "components.embeds";
 @import "components.highlights";
+@import "components.cross-sell";