Update about page

gallery/templates/gallery/about.html

@@ -1,5 +1,6 @@
 {% extends "base_dark.html" %}
-{% load top_tags %}
+{% load static %}
+{% load stats %}
 
  <!-- Title -->
 {% block title %} Gallery : About{% endblock %}
@@ -7,17 +8,48 @@
  <!-- Content -->
 {% block content %}
 
-<div class="uk-margin-top uk-width-1-4@m">
-    <div class="uk-card uk-card-default uk-card-body uk-padding-small">
-        {% load static %}
-        <img src="{% static 'img/profile.png' %}" alt="Contact">
+{% gallery_stats as counts %}
 
-        <div class="uk-container uk-margin-small-top">
-            <a href="https://bsky.app/profile/nyymix.net" uk-icon="icon: bluesky"></a>
-            <a href="https://twitter.com/nyymix" uk-icon="icon: twitter"></a>
-            <a href="https://www.instagram.com/nyymix/" uk-icon="icon: instagram"></a>
+<div class="uk-container uk-margin-top">
+    <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-padding-small uk-text-center">
+        <h3 class="uk-card-title uk-text-bold">{{ about.title }}</h3>
+        
+        <img class="uk-border-circle uk-box-shadow-small uk-margin-small" 
+             src="{% static about.profile_image %}" 
+             alt="Nyymix profiilikuva" width="120">
+        
+        <p class="uk-text-muted uk-margin-small">
+            {{ about.description }}
+        </p>
+
+
+        <p class="uk-text-muted uk-margin-small">
+            Contact: 
+            <a href="mailto:{{ about.contact_email }}">
+                {{ about.contact_email }}
+            </a>
+        </p>
+
+
+        <div class="uk-flex uk-flex-center uk-child-width-auto uk-margin-small-top" uk-grid>
+            {% if about.bluesky_url %}
+                <a href="{{ about.bluesky_url }}" uk-icon="icon: bluesky" uk-tooltip="Bluesky"></a>
+            {% endif %}
+            {% if about.twitter_url %}
+                <a href="{{ about.twitter_url }}" uk-icon="icon: twitter" uk-tooltip="Twitter"></a>
+            {% endif %}
+            {% if about.instagram_url %}
+                <a href="{{ about.instagram_url }}" uk-icon="icon: instagram" uk-tooltip="Instagram"></a>
+            {% endif %}
         </div>
 
+        <hr class="uk-divider-icon">
+
+        <div class="uk-text-small uk-text-muted">
+            <p>
+                <strong>{{ counts.0 }}</strong> <a href="{% url 'gallery:albums_url' %}">Albums</a> (public {{ counts.1 }}), 
+                <strong>{{ counts.2 }}</strong> <a href="{% url 'gallery:photos_url' %}">Photos</a></p>
+        </div>
     </div>
 </div>
 

gallery/templates/gallery/photo_detail.html

@@ -42,7 +42,7 @@
     
     </div>
 
-    <div class="uk-align-center uk-container-large">
+    <div class="uk-align-center uk-container-large uk-padding-medium">
 
         <ul uk-accordion>
             <li class="uk-open">