Dark style secondary nav should be darker than content area (#9)

_includes/relatedposts.html

@@ -0,0 +1,34 @@
+<div class="relatedposts">
+
+    <h2>Related Posts</h2>
+
+    {% assign maxRelated = 4 %}
+    {% assign minCommonTags =  1 %}
+    {% assign maxRelatedCounter = 0 %}
+
+      {% for post in site.posts %}
+
+        {% assign sameTagCount = 0 %}
+        {% assign commonTags = '' %}
+
+        {% for tag in post.tags %}
+          {% if post.url != page.url %}
+            {% if page.tags contains tag %}
+              {% assign sameTagCount = sameTagCount | plus: 1 %}
+              {% capture tagmarkup %} <span class="label label-default">{{ tag }}</span> {% endcapture %}
+              {% assign commonTags = commonTags | append: tagmarkup %}
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+
+        {% if sameTagCount >= minCommonTags %}
+          {% include featured.html %}
+          {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
+          {% if maxRelatedCounter >= maxRelated %}
+            {% break %}
+          {% endif %}
+        {% endif %}
+
+      {% endfor %}
+
+    </div>

_includes/twitter-card.html

@@ -22,25 +22,11 @@
   <p>{{ include.contents }}</p>
 
   {% if include.image %}
-    <a href="{{ permalink }}">
-      {% assign prefix = include.image | slice: 0, 4 %}
-      {% if prefix == "http" %}
-        {% assign image = include.image %}
-      {% else %}
-        {% assign image = include.image | prepend: site.baseurl %}
-      {% endif %}
-      <img src="{{ image }}" />
-    </a>
-  {% elsif include.video %}
-    {% assign prefix = include.video | slice: 0, 4 %}
-    {% if prefix == "http" %}
-      {% assign video = include.video %}
-    {% else %}
-      {% assign video = include.video | prepend: site.baseurl %}
-    {% endif %}
-    <video width="600" controls loop>
-      <source src="{{ video }}" type="video/mp4">
-    </video>
+  <img class="tweet-img" src="{{ include.image }}">
+  {% else.if include.video %}
+  <video width="600" controls>
+    <source src="{{ include.video }}" type="video/mp4">
+  </video>
   {% endif %}
 
   <footer>

_posts/2020-07-16-twitter-embeds.md

@@ -13,6 +13,7 @@ We wanted to quote/embed a tweet in our blog, but don't like the idea of pulling
   avatar="/images/cassidy.jpg"
   id="1281816033343537152"
   timestamp="2020-07-10"
+  image="/images/pinebook/card.jpg"
   contents="Got my PINEBOOK Pro! Super duper first impressions: damn, this
     hardware quality is nice for the price. I would love to see what they could
     do around the $500–750 price, honestly. Performance is great; I would not
@@ -28,73 +29,46 @@ turns into:
   avatar="/images/cassidy.jpg"
   id="1281816033343537152"
   timestamp="2020-07-10"
+  image="/images/pinebook/card.jpg"
   contents="Got my PINEBOOK Pro! Super duper first impressions: damn, this
     hardware quality is nice for the price. I would love to see what they could
     do around the $500–750 price, honestly. Performance is great; I would not
     guess it was ARM just from using it. It’s fanless!"
 %}
 
-## Embedded Media
-
-You can pass in a path to a local or remote `image` to be embedded in the Tweet. Ideally this is a local asset to avoid hitting a third-party server.
-
-```liquid
-{% raw %}{% include twitter-card.html
-  name="Daniel Foré"
-  account="DanileFore"
-  avatar="/images/dan.jpg"
-  id="1379129474638258179"
-  timestamp="2020-07-10"
-  image="/images/tweet.jpg"
-  contents="Thanks to <a href='https://twitter.com/bluesabredavis'>@bluesabredavis</a>
-    you can now quickly switch audio input and output devices from the sound
-    indicator in elementary OS 6!"
-%}{% endraw %}
-```
-
-turns into:
-
-{% include twitter-card.html
-  name="Daniel Foré"
-  account="DanileFore"
-  avatar="/images/dan.jpg"
-  id="1379129474638258179"
-  timestamp="2021-04-05"
-  image="/images/tweet.jpg"
-  contents="Thanks to <a href='https://twitter.com/bluesabredavis'>@bluesabredavis</a>
-    you can now quickly switch audio input and output devices from the sound
-    indicator in elementary OS 6!"
-%}
-
-Similarly, you can pass in a path to a local or remote `video`. This must be in mp4 format.
-
-
+### For Tweets with Video
 ```liquid
 {% raw %}{% include twitter-card.html
   name="Cassidy James Blaede"
   account="CassidyJames"
   avatar="https://gravatar.com/avatar/41275ecc8271aca852ce2c0ff72d2610?s=128"
-  id="1369878542448619521"
-  timestamp="2021-03-10"
-  video="/images/tweet.mp4"
-  contents="And a rough demo from screenshots to show what I mean:"
+  id="1281816033343537152"
+  timestamp="2020-07-10"
+  video="/images/pinebook/mov_bbb.mp4"
+  contents="Got my PINEBOOK Pro! Super duper first impressions: damn, this
+    hardware quality is nice for the price. I would love to see what they could
+    do around the $500–750 price, honestly. Performance is great; I would not
+    guess it was ARM just from using it. It’s fanless!
+    <br>Video courtesy of Big Buck Bunny"
 %}{% endraw %}
 ```
 
-turns into:
+Turns into:
 
 {% include twitter-card.html
   name="Cassidy James Blaede"
   account="CassidyJames"
   avatar="https://gravatar.com/avatar/41275ecc8271aca852ce2c0ff72d2610?s=128"
-  id="1369878542448619521"
-  timestamp="2021-03-10"
-  video="/images/tweet.mp4"
-  contents="And a rough demo from screenshots to show what I mean:"
+  id="1281816033343537152"
+  timestamp="2020-07-10"
+  video="/images/pinebook/mov_bbb.mp4"
+  contents="Got my PINEBOOK Pro! Super duper first impressions: damn, this
+    hardware quality is nice for the price. I would love to see what they could
+    do around the $500–750 price, honestly. Performance is great; I would not
+    guess it was ARM just from using it. It’s fanless!
+    <br>Video courtesy of Big Buck Bunny"
 %}
 
----
-
-This is all rendered and styled locally, ensuring we're not hitting Twitter's tracking code just to show some content. It also means embedded tweets will persist, even if removed from Twitter (since it's just local content). It's even light/dark style aware!
+This is all rendered and styled localy, ensuring we're not hitting Twitter's tracking code just to show some content. It also means quoted tweets will persist, even if removed from Twitter (since it's just local content). It's even light/dark style aware!
 
 It does not (yet) support showing quote tweets, verified badges, automatic @-mentions, threads, or multiple images. If/when the need arises for those, we can add them, though. Profile images must be manually passed in, as well—ideally included with the regular assets for a post so all assets are staying local to the domain.

_sass/_colors.scss

@@ -85,10 +85,10 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-color: var(--black-700);
-    --fg-color: var(--silver-300);
+    --bg-color: var(--black-500);
+    --fg-color: var(--silver-100);
     --accent-color: var(--blueberry-300);
-    --secondary-bg-color: var(--black-500);
+    --secondary-bg-color: var(--black-700);
     --secondary-fg-color: var(--silver-300);
   }
 }