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

.cache/mastodon.json

@@ -1,5 +1,5 @@
 {
-  "lastFetched": "2026-07-04T19:57:16.577Z",
+  "lastFetched": "2026-07-04T23:54:24.869Z",
   "posts": [
     {
       "date": "2026-07-03T01:51:37.604Z",

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

site/social.njk

@@ -13,18 +13,29 @@ 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">
+            <div class="mastodonPostContent">
                 {{ post.content | safe }}
-            <p><a class="postLink" href="{{ post.source_url }}">{{ post.date }}</a></p>
+                {% 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 %}
     </ul>

static/main.css

@@ -355,7 +355,7 @@ li.inlineList {
 .headerSquare,
 #defaultSquare {
     transition: 0.4s;
-    border: medium solid white;
+    border: thick solid rgba(255, 255, 255, 0.2);
     height: 3vw;
     overflow: hidden;
     width: 6vw;
@@ -382,6 +382,7 @@ li.inlineList {
     height: 6vw;
     box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.4), 0px -4px 10px rgba(0, 0, 0, 0.4);
     background-color: rgba(0, 0, 0, 0.3);
+    border-color: white;
 }
 
 .youtubeCardHolderHelper {
@@ -913,6 +914,12 @@ header div:first-child {
     color: white;
 }
 
+.centeredItemsBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .internetometerAside img {
     max-width: 100%;
 }
@@ -1071,9 +1078,56 @@ header div:first-child {
 }
 
 .mastodonPost {
-    background-color: rgba(0, 0, 0, 0.2);
-    padding: 1em;
     margin-bottom: 1em;
+    display: flex;
+    flex-direction: column;
+}
+
+.mastodonPostContent {
+    padding: 1em;
+}
+
+.mastodonPostContent, .mastodonLink {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.mastodonPost p {
+    margin-bottom: .2em;
+}
+
+.mastodonLink {
+    width: fit-content;
+    padding: .4em;
+    opacity: .8;
+    margin-left: auto;
+}
+
+.mastodonMedia {
+    max-height: 5em;
+    border: medium solid rgba(0, 0, 0, 0.2);
+}
+
+.mastodonMediaBox {
+    margin-top: 1em;
+}
+
+.mastodonMediaBox div {
+    display: flex;
+    overflow: scroll;
+}
+
+.mastodonMediaBox img {
+    transition: .2s;
+    opacity: .6;
+}
+
+.mastodonMediaBox img:hover {
+    opacity: 1;
+}
+
+#socialAside img {
+    border: thick solid rgba(255, 255, 255, 0.1);
+    border-top: none;
 }
 
 /* Animations */
@@ -1165,6 +1219,10 @@ header div:first-child {
         max-width: 50%;
     }
 
+    #socialAside h1 {
+        text-align: end;
+    }
+
     #homeSquares {
         flex-direction: row;
         align-content: center;