feat(layout): add Font Awesome image attribution icon to post header

Automatically generates a Pexels photo credit link from the image URL and displays a small info-circle icon in the bottom-right corner of the header image. Enhances ethical attribution while preserving the clean Spectral theme aesthetic.

Author: janhalen

_layouts/post.html

@@ -16,6 +16,8 @@
     <article id="main">
         <header style="position: relative; overflow: hidden;">
             {% if page.image %}
+                {% assign image_id = page.image | split: '/' | slice: -2, 1 | first %}
+                {% assign credit_url = "https://www.pexels.com/photo/" | append: image_id | append: "/" %}
                 <div style="
                     position: absolute;
                     top: 0; left: 0;
@@ -25,7 +27,20 @@
                     background-position: center;
                     filter: brightness({{ page.image_brightness | default: 0.5 }});
                     z-index: 0;
-                "></div>
+                ">
+                    <a href="{{ credit_url }}" target="_blank" title="Image credit on Pexels" style="
+                        position: absolute;
+                        bottom: 10px;
+                        right: 10px;
+                        z-index: 2;
+                        color: white;
+                        opacity: 0.9;
+                        font-size: 2rem;
+                        text-decoration: none;
+                    ">
+                        <i class="fa fa-camera" aria-hidden="true"></i>
+                    </a>
+                </div>
             {% endif %}
 
             <div style="position: relative; z-index: 1; padding: 2rem; color: {{ page.text_color | default: 'white' }};">