Change social page to show post media, change home squares border opacity and change social page styling.

site/_data/i18n.cjs

@@ -96,7 +96,8 @@ module.exports = {
     mrnandoChannel: "Mr. Nando's channel",
     liked: "liked",
     changes: "changes",
-    readingTime: "Reading time"
+    readingTime: "Reading time",
+    mastodonPageDescription: "This is an archive of all my Mastodon posts."
   },
   pt: {
     language: "português",
@@ -168,6 +169,7 @@ module.exports = {
     mrnandoChannel: "Canal do Mr. Nando",
     liked: "curtiu",
     changes: "mudanças",
-    readingTime: "Tempo de leitura"
+    readingTime: "Tempo de leitura",
+    mastodonPageDescription: "Essa página lista todas as minhas postagens do Mastodon."
   }
 };

site/index.njk

@@ -193,7 +193,9 @@ layout: base.njk
             <hr style="margin-bottom: .4em;">
         </div>
 
-        <a href="https://www.youtube.com/@mrnandokk">{{ i88x31("mrnandokk.gif", i18n[langKey].mrnandoChannel, false) }}</a>
+        <div class="centeredItemsBox">
+            <a href="https://www.youtube.com/@mrnandokk">{{ i88x31("mrnandokk.gif", i18n[langKey].mrnandoChannel, false) }}</a>
+        </div>
     </div>
 
     <div id="homeWebrings">

site/social.njk

@@ -13,19 +13,30 @@ title: Adrian Victor:Social
             <h1 class="nomargin negativeMargin"><a class="textColored noDecoration" href="https://mstdn.social/@tenkuma">@tenkuma</a></h1>
             <hr class="nomargin">
             <img src="{{ '/static/images/profile.jpg' | url }}">
-            <hr class="nomargin">
         </div>
     </div>
     {% include 'widgets/internetometer-aside.html' %}
 </aside>
 <main>
+    <p>{{ i18n[langKey].mastodonPageDescription }}</p>
     <ul>
       {% for post in mastodon.posts %}
         <hr class="nomargin">
         <div class="mastodonPost">
-            {{ post.content | safe }}
-            <p><a class="postLink" href="{{ post.source_url }}">{{ post.date }}</a></p>
+            <div class="mastodonPostContent">
+                {{ post.content | safe }}
+                {% if post.media %}
+                <div class="mastodonMediaBox">
+                    <div>
+                        {% for media in post.media %}
+                            <a href="{{ media.image }}"><img class="mastodonMedia" src="{{ media.image }}" {% if media.alt %}alt="{{ media.alt }}"{% endif %}></a>
+                        {% endfor %}
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+            <p class="mastodonLink"><a class="postLink" href="{{ post.source_url }}">{{ post.date }}</a></p>
         </div>
-      {% endfor %}
+        {% endfor %}
     </ul>
 </main>