base setup

at_django_boilerplate/blogs/templates/blog_detail.html

@@ -0,0 +1,45 @@
+{% extends "public_base.html" %}
+{% load static %}
+{% block title %}{{ meta_title }}{% endblock %}
+
+{% block meta %}
+  <meta name="description" content="{{ meta_description }}">
+  <meta property="og:title" content="{{ meta_title }}">
+  <meta property="og:description" content="{{ meta_description }}">
+  <meta name="twitter:title" content="{{ meta_title }}">
+  <meta name="twitter:description" content="{{ meta_description }}">
+{% endblock %}
+
+{% block content %}
+<div class="max-w-4xl mx-auto px-6 py-16">
+
+  <!-- Back Button -->
+  <div class="mb-6">
+    <a href="{% url 'blogs_list' %}" 
+       class="inline-block px-4 py-2 bg-[#0097b2] text-white rounded-md hover:bg-[#007a94] transition-colors duration-300">
+      &larr; Back to Blogs
+    </a>
+  </div>
+
+  <article class="bg-white shadow-lg rounded-lg overflow-hidden">
+    <header class="px-8 pt-8 pb-6 border-b border-gray-200">
+      <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight leading-tight mb-2">
+        {{ blog.title }}
+      </h1>
+      <time class="text-gray-500 text-sm uppercase tracking-wide" datetime="{{ blog.published_on }}">
+        {{ blog.published_on|date:"F d, Y" }}
+      </time>
+    </header>
+
+    {% if blog.cover_image %}
+      <figure class="w-full h-96 overflow-hidden rounded-b-lg">
+        <img src="{{ blog.cover_image.url }}" alt="{{ blog.title }}" class="object-cover w-full h-full transition-transform duration-500 hover:scale-105" />
+      </figure>
+    {% endif %}
+
+    <section class="prose max-w-none px-8 py-10 text-gray-700">
+      {{ blog.content|linebreaks }}
+    </section>
+  </article>
+</div>
+{% endblock %}