content update

blog/templates/blog/blog_index_page.html

@@ -5,22 +5,27 @@
 {% block body_class %}template-blogindexpage{% endblock %}
 
 {% block content %}
+    <section class="flex flex-col items-center justify-center h-full mx-4">
         <h1>{{ page.title }}</h1>
 
         <div class="intro">{{ page.intro|richtext }}</div>
+    </section>
 
+    <section class="flex flex-col h-full mx-4">
         {% for post in blogpages %}
             {% with post=post.specific %}
+                <article class="w-full flex flex-col items-center">
                     <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
 
-        <!-- Add this: -->
                     {% with post.main_image as main_image %}
-            {% if main_image %}{% image main_image fill-160x100 %}{% endif %}
+                        {% if main_image %}{% image main_image width-400 class="blog" %}{% endif %}
                     {% endwith %}
 
+
                     <p>{{ post.intro }}</p>
-        {{ post.body }}
+                </article>
             {% endwith %}
         {% endfor %}
+    </section>
 
 {% endblock %}

blog/templates/blog/blog_page.html

@@ -5,6 +5,8 @@
 {% block body_class %}template-blogpage{% endblock %}
 
 {% block content %}
+    <section class="flex flex-col items-center justify-center h-full mx-4">
+        <article class="mb-16">
             <h1>{{ page.title }}</h1>
             <p class="meta">{{ page.date }}</p>
 
@@ -14,8 +16,16 @@
                     <ul>
                         {% for author in authors %}
                             <li style="display: inline">
-                        {% image author.author_image fill-40x60 style="vertical-align: middle" %}
+                                <div class="group block flex-shrink-0">
-                        {{ author.name }}
+                                    <div class="flex items-center">
+                                        <div>
+                                            {% image author.author_image fill-64x64 class="inline-block h-14 w-14 rounded-full" %}
+                                        </div>
+                                        <div class="ml-3">
+                                            <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900"> {{ author.name }}</p>
+                                        </div>
+                                    </div>
+                                </div>
                             </li>
                         {% endfor %}
                     </ul>
@@ -24,6 +34,7 @@
 
             <div class="intro">{{ page.intro }}</div>
 
+            <div class="blog-content">
                 {{ page.body }}
 
                 <div class="flex">
@@ -34,21 +45,27 @@
                         </div>
                     {% endfor %}
                 </div>
-
+            </div>
-    <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
 
         {% with tags=page.tags.all %}
                 {% if tags %}
                     <div class="tags">
-                <h3>Tags</h3>
+                        <h3 class="sr-only">Tags</h3>
-                <ul>
+                        <ul class="flex">
                             {% for tag in tags %}
                                 <li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
                             {% endfor %}
                         </ul>
                     </div>
                 {% endif %}
-
             {% endwith %}
 
+        </article>
+
+        <nav class="w-full">
+            <a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
+        </nav>
+
+    </section>
+
 {% endblock %}

home/templates/home/home_page.html

@@ -4,7 +4,8 @@
 {% block body_class %}{% endblock %}
 
 {% block content %}
-    <section class="flex flex-col items-center justify-center h-full">
+    <section class="flex flex-col items-center justify-center h-full mx-4">
+        <div class="mx-auto max-w-3xl text-base leading-7">
             <h1>{{ page.title }}</h1>
             {% image page.image fill-480x320 %}
             <p>{{ page.hero_text }}</p>
@@ -13,7 +14,10 @@
                     {% firstof page.hero_cta page.hero_cta_link.title %}
                 </a>
             {% endif %}
+        </div>
     </section>
 
+    <div class="w-full px-2 lg:px-4">
         {{ page.body|richtext }}
+    </div>
 {% endblock content %}

iamkonstantin_web/templates/base.html

@@ -41,15 +41,15 @@
 
 <body class="flex h-full bg-zinc-50 dark:bg-black {% block body_class %}{% endblock %}">
 <div class="fixed inset-0 flex justify-center sm:px-8">
-    <div class="flex w-full max-w-7xl lg:px-8">
+    <div class="flex w-full max-w-7xl px-0 md:px-4 lg:px-8">
         <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
     </div>
 </div>
 
-<div class="relative flex w-full">
+<div class="relative w-full sm:px-8">
     {% include "includes/header.html" %}
 
-    <main id="main" class="flex w-full">
+    <main id="main" class="max-w-7xl px-0 md:px-4 lg:px-8">
         {% block content %}{% endblock %}
     </main>
 

iamkonstantin_web/templates/includes/footer.html

@@ -1,24 +1,25 @@
 {% load navigation_tags %}
 
-<footer>
+<footer class="flex flex-col items-center w-full max-w-7xl px-0 md:px-4 lg:px-8">
-    <p>Hello 👋</p>
+    <p>Created in <span class="emoji">🇪🇺</span> by <a href="https://social.headbright.eu/@konstantin">Konstantin</a></p>
 
+    <nav>
         {% with linkedin_url=settings.base.NavigationSettings.linkedin_url github_url=settings.base.NavigationSettings.github_url mastodon_url=settings.base.NavigationSettings.mastodon_url %}
             {% if linkedin_url or github_url or mastodon_url %}
-            <p>
+                <ul class="flex space-x-8">
-                Follow me on:
+                    {% if mastodon_url %}
+                        <li><a href="{{ mastodon_url }}"><span class="emoji">🐘</span> Mastodon</a></li>
+                    {% endif %}
                     {% if github_url %}
-                    <a href="{{ github_url }}">GitHub</a>
+                        <li><a href="{{ github_url }}"><span class="emoji">🔬</span> GitHub</a></li>
                     {% endif %}
                     {% if linkedin_url %}
-                    <a href="{{ linkedin_url }}">Twitter</a>
+                        <li><a href="{{ linkedin_url }}"><span class="emoji">💼</span> LinkedIn</a></li>
                     {% endif %}
-                {% if mastodon_url %}
+                </ul>
-                    <a href="{{ mastodon_url }}">Mastodon</a>
-                {% endif %}
-            </p>
             {% endif %}
         {% endwith %}
+    </nav>
 
     {% get_footer_text %}
 </footer>

theme/static_src/src/styles.css

@@ -2,10 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    @font-face {
+    font-family: NotoEmoji;
+    font-weight: 400;
+    src: url("/static/fonts/NotoEmoji-Regular.ttf") format("truetype");
+  }
+}
+
 @layer components {
-    p > a,
+
-    nav > a,
+    .emoji {
-    li > a {
+       font-family: NotoEmoji;
+    }
+
+    a {
         @apply border-klavender border-b-2;
     }
 
@@ -29,6 +40,16 @@
         @apply my-2 mb-3 text-lg leading-relaxed;
     }
 
+    img.blog {
+        @apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg;
+    }
+
+    .blog-content img {
+        @apply rounded-xl bg-gray-50 object-cover rounded-2xl shadow-lg;
+    }
+
+
+
     @media print {
         h1 {
             @apply mt-6 mb-4 text-xl;
@@ -56,14 +77,14 @@
     }
 }
 
-.tags {
+.tags ul {
-    @apply flex flex-col;
+    @apply flex space-x-4 text-center text-lg;
 }
 
-.tags ul {
+ .tags li {
-    @apply flex space-x-4;
+        @apply flex-1 p-4 inline-flex items-center rounded-md bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
     }
 
  .tags a {
-    @apply border-b-0 inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
+     @apply border-b-0 w-full;
  }

theme/static_src/tailwind.config.js

@@ -78,7 +78,9 @@ module.exports = {
                     light: "#FBDAE4",
                     DEFAULT: "#EF7799",
                     dark: "#EF7799",
-                }
+                },
+                kbglight: "#FFFFF8",
+                kbgdark: "#333332"
             },
         },
         plugins: [