...

source/_dynamic/about.md

@@ -46,7 +46,7 @@ Years later, after dozens of clients, authoring a [book about Access](https://ww
 
 I'm still first and foremost fascinated by the technology on building software, in particular in creating pleasing, but functional UI's, a user wants to works with, even if I spend my daily working time on management stuff. So it is not surprising that I sit at my laptop in my spare time, working on my private projects or trying out new technologies. I made by hobby a profession...
 
-If you want to talk about the old, recent or new times in IT,  [contact me](javascript:showContact();):  
+If you want to talk about the old, recent or new times in IT,  [contact me](javascript:dialog.contact();). 
 
 </section>
 
@@ -67,4 +67,9 @@ Find some of my photographs on
 **500px**
 [https://500px.com/p/kikon](https://500px.com/p/kikon)
 
-</section>
+<img src="/images/pixelfed.svg" style="float: left;margin-right: 18px;height: 44px;" alt="Pixelfed" />
+
+**Pixelfed**
+[https://pixelfed.social/kristofz](https://pixelfed.social/kristofz)
+
+</section>

themes/landscape/layout/_partial/post/syndication.ejs

@@ -6,7 +6,7 @@
     <div class="<%= class_name %>">
       <% post.syndication.forEach(function(syn){ %>
           <a class="syndication-link u-syndication fab fa-<%- syn.host.toLowerCase() %>" 
-            href="<%- syn.url %>" rel="syndication" target="_blank"></a>
+            href="<%- syn.url %>" title="<%- syn.host %>" rel="syndication" target="_blank"></a>
       <% }); %>
     </div>
   <% } %>

themes/landscape/layout/photo.ejs

@@ -144,7 +144,24 @@
       </li>
       <% } %>
     </ul>
-    <%- partial('_partial/post/permalink', { post: page, class_name: 'article-permalink' }) %>
+
+    <% 
+      page.syndication = [];
+      page.meta.custom.links.forEach(link => {
+        if (link.url) {
+          page.syndication.push({
+            host: link.site,
+            url: link.url
+          });
+        }
+      });
+    %>
+
+    <div class="section-footer">
+      <%- partial('_partial/post/syndication', { post: page, class_name: 'article-syndication' }) %>
+      <%- partial('_partial/post/permalink', { post: page, class_name: 'article-permalink' }) %>        
+    </div>
+  
   </section>
 
   <%- partial('_partial/post/interaction', { post: page, type: 'photo', comments: false }) %>

themes/landscape/source/css/_partial/article.styl

@@ -564,7 +564,8 @@
   // border-top-color: transparent
   margin-top: 1.5 * line-height
 
-.article-footer
+.article-footer, 
+.section-footer
   font-size: 0.85em
   line-height: line-height
   padding-top: line-height
@@ -580,6 +581,10 @@
     grid-template-rows: auto auto auto
     grid-template-areas: "tags" "syndication permalink" "golem"
 
+.section-footer
+  padding: 0
+  margin: -12px
+
 .article-tags { grid-area: tags }
 .article-permalink { grid-area: permalink }
 .article-syndication { grid-area: syndication }
@@ -617,7 +622,9 @@
     display: inline-block
     margin-right: 4px
   .syndication-link
-    padding: 0 10px 0 0;
+    padding: 0 16px 0 0;
+    @media mq-mobile
+      padding: 0 12px 0 0;
     &:before
       font-family: fa-icons
       font-size: 21px;
@@ -627,6 +634,12 @@
   & .fa-twitter:before
     content: icon-twitter
     color: color-twitter
+  & .fa-500px:before
+    content: icon-500px
+    color: color-500px
+  & .fa-pixelfed:before
+    content: icon-pixelfed
+    color: color-pixelfed
 
 .article-permalink,
 .article-syndication 

themes/landscape/source/css/_variables.styl

@@ -157,7 +157,7 @@ icon-download = "\f019"
 color-twitter = #1da1f2
 color-mastodon = #6364ff
 color-pixelfed = #000000
-color-500px = #0099e5
+color-500px = #000000
 color-linkedin = #0077b5
 color-xing = #026466
 color-github = #6e5494