Add devopsdays branding and modern admin theme

mattstratton · claude · mattstratton · commit 92ee17e59fab · 2026-04-10T22:18:19.000-05:00
Public site:
- devopsdays brand colors (#0082AB blue, gray gradient)
- Brain logo in navbar and footer
- Roboto font (matching current site)
- Gradient masthead on homepage and event pages
- Bold uppercase tracking-wider headings (devopsdays style)

Admin:
- django-unfold admin theme with custom sidebar navigation
- devopsdays primary color applied to admin UI
- Organized sidebar: Events, Sponsors, Speakers, Content, Users

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/apps/events/admin.py b/apps/events/admin.py
@@ -1,29 +1,30 @@
 from django.contrib import admin
+from unfold.admin import ModelAdmin, TabularInline
 
 from .models import City, Event, EventPage, TeamMember, ProgramEntry
 
 
 @admin.register(City)
-class CityAdmin(admin.ModelAdmin):
+class CityAdmin(ModelAdmin):
     list_display = ["display_name", "slug", "country"]
     search_fields = ["display_name", "slug", "country"]
     prepopulated_fields = {"slug": ("display_name",)}
 
 
-class EventPageInline(admin.TabularInline):
+class EventPageInline(TabularInline):
     model = EventPage
     extra = 0
     fields = ["page_type", "title", "slug", "is_visible", "sort_order"]
 
 
-class TeamMemberInline(admin.TabularInline):
+class TeamMemberInline(TabularInline):
     model = TeamMember
     extra = 0
     fields = ["name", "employer", "twitter", "github", "linkedin", "sort_order"]
 
 
 @admin.register(Event)
-class EventAdmin(admin.ModelAdmin):
+class EventAdmin(ModelAdmin):
     list_display = ["__str__", "year", "city", "status", "start_date", "sponsors_accepted"]
     list_filter = ["status", "year", "sponsors_accepted"]
     search_fields = ["slug", "city__display_name", "city__slug"]
@@ -64,22 +65,22 @@ class EventAdmin(admin.ModelAdmin):
 
 
 @admin.register(EventPage)
-class EventPageAdmin(admin.ModelAdmin):
+class EventPageAdmin(ModelAdmin):
     list_display = ["event", "page_type", "title", "is_visible", "sort_order"]
     list_filter = ["page_type", "is_visible"]
     search_fields = ["title", "event__slug"]
     autocomplete_fields = ["event"]
 
 
 @admin.register(TeamMember)
-class TeamMemberAdmin(admin.ModelAdmin):
+class TeamMemberAdmin(ModelAdmin):
     list_display = ["name", "event", "employer"]
     search_fields = ["name", "event__slug"]
     autocomplete_fields = ["event"]
 
 
 @admin.register(ProgramEntry)
-class ProgramEntryAdmin(admin.ModelAdmin):
+class ProgramEntryAdmin(ModelAdmin):
     list_display = ["display_title", "event", "date", "start_time", "end_time", "entry_type"]
     list_filter = ["entry_type", "date"]
     search_fields = ["custom_title", "event__slug"]
diff --git a/apps/pages/admin.py b/apps/pages/admin.py
@@ -1,17 +1,18 @@
 from django.contrib import admin
+from unfold.admin import ModelAdmin
 
 from .models import BlogPost, StaticPage
 
 
 @admin.register(BlogPost)
-class BlogPostAdmin(admin.ModelAdmin):
+class BlogPostAdmin(ModelAdmin):
     list_display = ["title", "author", "published_at", "is_published"]
     list_filter = ["published_at"]
     search_fields = ["title", "author"]
     prepopulated_fields = {"slug": ("title",)}
 
 
 @admin.register(StaticPage)
-class StaticPageAdmin(admin.ModelAdmin):
+class StaticPageAdmin(ModelAdmin):
     list_display = ["title", "slug", "updated_at"]
     search_fields = ["title", "slug"]
diff --git a/apps/people/admin.py b/apps/people/admin.py
@@ -1,17 +1,18 @@
 from django.contrib import admin
+from unfold.admin import ModelAdmin
 
 from .models import Speaker, Talk
 
 
 @admin.register(Speaker)
-class SpeakerAdmin(admin.ModelAdmin):
+class SpeakerAdmin(ModelAdmin):
     list_display = ["name", "event"]
     search_fields = ["name", "slug", "event__slug"]
     autocomplete_fields = ["event"]
 
 
 @admin.register(Talk)
-class TalkAdmin(admin.ModelAdmin):
+class TalkAdmin(ModelAdmin):
     list_display = ["title", "event", "talk_type"]
     list_filter = ["talk_type", "event__year"]
     search_fields = ["title", "slug", "event__slug"]
diff --git a/apps/sponsors/admin.py b/apps/sponsors/admin.py
@@ -1,25 +1,26 @@
 from django.contrib import admin
+from unfold.admin import ModelAdmin
 
 from .models import Sponsor, SponsorLevel, EventSponsor
 
 
 @admin.register(Sponsor)
-class SponsorAdmin(admin.ModelAdmin):
+class SponsorAdmin(ModelAdmin):
     list_display = ["name", "slug", "url"]
     search_fields = ["name", "slug"]
     prepopulated_fields = {"slug": ("name",)}
 
 
 @admin.register(SponsorLevel)
-class SponsorLevelAdmin(admin.ModelAdmin):
+class SponsorLevelAdmin(ModelAdmin):
     list_display = ["label", "event", "slug", "max_sponsors", "sort_order"]
     list_filter = ["event__year"]
     search_fields = ["label", "event__slug"]
     autocomplete_fields = ["event"]
 
 
 @admin.register(EventSponsor)
-class EventSponsorAdmin(admin.ModelAdmin):
+class EventSponsorAdmin(ModelAdmin):
     list_display = ["sponsor", "event", "level"]
     list_filter = ["level__label", "event__year"]
     search_fields = ["sponsor__name", "event__slug"]
diff --git a/apps/users/admin.py b/apps/users/admin.py
@@ -1,18 +1,19 @@
 from django.contrib import admin
 from django.contrib.auth.admin import UserAdmin as BaseUserAdmin
+from unfold.admin import ModelAdmin, TabularInline
 
 from .models import User, EventPermission
 
 
-class EventPermissionInline(admin.TabularInline):
+class EventPermissionInline(TabularInline):
     model = EventPermission
     fk_name = "user"
     extra = 1
     autocomplete_fields = ["event"]
 
 
 @admin.register(User)
-class UserAdmin(BaseUserAdmin):
+class UserAdmin(BaseUserAdmin, ModelAdmin):
     list_display = ["email", "username", "is_core_team", "is_active", "last_login"]
     list_filter = ["is_core_team", "is_active", "is_staff"]
     search_fields = ["email", "username", "first_name", "last_name"]
@@ -23,7 +24,7 @@ class UserAdmin(BaseUserAdmin):
 
 
 @admin.register(EventPermission)
-class EventPermissionAdmin(admin.ModelAdmin):
+class EventPermissionAdmin(ModelAdmin):
     list_display = ["user", "event", "role", "granted_by", "created_at"]
     list_filter = ["role"]
     autocomplete_fields = ["user", "event", "granted_by"]
diff --git a/config/settings.py b/config/settings.py
@@ -21,6 +21,7 @@
 ALLOWED_HOSTS = env("DJANGO_ALLOWED_HOSTS")
 
 INSTALLED_APPS = [
+    "unfold",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
@@ -168,6 +169,77 @@
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
+# Django Unfold admin theme
+UNFOLD = {
+    "SITE_TITLE": "devopsdays admin",
+    "SITE_HEADER": "devopsdays",
+    "SITE_SYMBOL": "calendar_month",
+    "COLORS": {
+        "primary": {
+            "50": "#e6f5fa",
+            "100": "#b3e0ed",
+            "200": "#80cce0",
+            "300": "#4db7d3",
+            "400": "#26a8c9",
+            "500": "#0082AB",
+            "600": "#006d8f",
+            "700": "#005873",
+            "800": "#004357",
+            "900": "#002e3b",
+            "950": "#001a22",
+        },
+    },
+    "SIDEBAR": {
+        "navigation": [
+            {
+                "title": "Events",
+                "icon": "calendar_month",
+                "items": [
+                    {"title": "Events", "link": "/admin/events/event/", "icon": "event"},
+                    {"title": "Cities", "link": "/admin/events/city/", "icon": "location_city"},
+                    {"title": "Event Pages", "link": "/admin/events/eventpage/", "icon": "article"},
+                    {"title": "Team Members", "link": "/admin/events/teammember/", "icon": "group"},
+                    {"title": "Program Entries", "link": "/admin/events/programentry/", "icon": "schedule"},
+                ],
+            },
+            {
+                "title": "Sponsors",
+                "icon": "handshake",
+                "items": [
+                    {"title": "Sponsors", "link": "/admin/sponsors/sponsor/", "icon": "business"},
+                    {"title": "Sponsor Levels", "link": "/admin/sponsors/sponsorlevel/", "icon": "star"},
+                    {"title": "Event Sponsors", "link": "/admin/sponsors/eventsponsor/", "icon": "link"},
+                ],
+            },
+            {
+                "title": "Speakers & Talks",
+                "icon": "mic",
+                "items": [
+                    {"title": "Speakers", "link": "/admin/people/speaker/", "icon": "person"},
+                    {"title": "Talks", "link": "/admin/people/talk/", "icon": "podium"},
+                ],
+            },
+            {
+                "title": "Content",
+                "icon": "edit_note",
+                "items": [
+                    {"title": "Blog Posts", "link": "/admin/pages/blogpost/", "icon": "rss_feed"},
+                    {"title": "Static Pages", "link": "/admin/pages/staticpage/", "icon": "description"},
+                ],
+            },
+            {
+                "title": "Users & Auth",
+                "icon": "admin_panel_settings",
+                "items": [
+                    {"title": "Users", "link": "/admin/users/user/", "icon": "person"},
+                    {"title": "Event Permissions", "link": "/admin/users/eventpermission/", "icon": "key"},
+                    {"title": "Groups", "link": "/admin/auth/group/", "icon": "groups"},
+                ],
+            },
+        ],
+    },
+}
+
 # Production security settings
 if not DEBUG:
     SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
diff --git a/requirements.txt b/requirements.txt
@@ -10,4 +10,5 @@ inertia-django==1.2.0
 Pillow==11.1.0
 markdown==3.7
 whitenoise==6.8.2
+django-unfold==0.44.0
 PyYAML==6.0.2
diff --git a/static/img/devopsdays-brain.png b/static/img/devopsdays-brain.png
diff --git a/templates/public/base.html b/templates/public/base.html
@@ -1,3 +1,4 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en" class="h-full">
 <head>
@@ -6,54 +7,64 @@
     <title>{% block title %}devopsdays{% endblock %}</title>
     <meta name="description" content="{% block meta_description %}devopsdays is a worldwide series of community-run conferences covering topics of software development, IT infrastructure operations, and the intersection between them.{% endblock %}">
 
-    <!-- Tailwind via CDN for the POC — will be built via Vite in production -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
-                        'dod-blue': '#1a4e8a',
-                        'dod-green': '#39b54a',
-                        'dod-dark': '#1a1a2e',
+                        'dod': {
+                            '50': '#e6f5fa',
+                            '100': '#b3e0ed',
+                            '200': '#80cce0',
+                            '300': '#4db7d3',
+                            '400': '#26a8c9',
+                            '500': '#0082AB',
+                            '600': '#006d8f',
+                            '700': '#005873',
+                            '800': '#004357',
+                            '900': '#002e3b',
+                        },
+                        'dod-gray': '#bfbfc1',
+                        'dod-ignite': '#00C342',
+                        'dod-openspace': '#FF8300',
                     },
                     fontFamily: {
-                        sans: ['Inter', 'system-ui', 'sans-serif'],
-                        mono: ['JetBrains Mono', 'monospace'],
+                        sans: ['Roboto', 'system-ui', 'sans-serif'],
                     },
                 }
             }
         }
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
 
     {% block extra_head %}{% endblock %}
 </head>
-<body class="h-full bg-gray-50 font-sans text-gray-900">
+<body class="h-full bg-white font-sans text-gray-800">
 
     <!-- Navigation -->
-    <nav class="bg-dod-dark text-white shadow-lg">
+    <nav class="bg-white border-b-2 border-dod-500">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex items-center justify-between h-16">
                 <div class="flex items-center space-x-8">
-                    <a href="/" class="text-xl font-bold tracking-tight">
-                        <span class="text-dod-green">devopsdays</span>
+                    <a href="/" class="flex items-center space-x-2">
+                        <img src="{% static 'img/devopsdays-brain.png' %}" alt="" class="h-8">
+                        <span class="text-xl font-black uppercase tracking-wide text-dod-500">devopsdays</span>
                     </a>
                     <div class="hidden md:flex space-x-6">
-                        <a href="/events/" class="text-gray-300 hover:text-white transition text-sm font-medium">Events</a>
-                        <a href="/blog/" class="text-gray-300 hover:text-white transition text-sm font-medium">Blog</a>
-                        <a href="/about/" class="text-gray-300 hover:text-white transition text-sm font-medium">About</a>
-                        <a href="/organizing/" class="text-gray-300 hover:text-white transition text-sm font-medium">Organizing</a>
-                        <a href="/speaking/" class="text-gray-300 hover:text-white transition text-sm font-medium">Speaking</a>
+                        <a href="/events/" class="text-sm font-bold uppercase tracking-wider text-dod-500 hover:text-dod-700 transition">Events</a>
+                        <a href="/blog/" class="text-sm font-bold uppercase tracking-wider text-dod-500 hover:text-dod-700 transition">Blog</a>
+                        <a href="/about/" class="text-sm font-bold uppercase tracking-wider text-dod-500 hover:text-dod-700 transition">About</a>
+                        <a href="/organizing/" class="text-sm font-bold uppercase tracking-wider text-dod-500 hover:text-dod-700 transition">Organizing</a>
+                        <a href="/speaking/" class="text-sm font-bold uppercase tracking-wider text-dod-500 hover:text-dod-700 transition">Speaking</a>
                     </div>
                 </div>
                 <div class="flex items-center space-x-4">
                     {% if user.is_authenticated %}
-                        <a href="/manage/" class="text-sm text-gray-300 hover:text-white transition">Manage Events</a>
-                        <a href="/accounts/logout/" class="text-sm text-gray-400 hover:text-white transition">Logout</a>
+                        <a href="/manage/" class="text-sm font-medium text-dod-500 hover:text-dod-700 transition">Manage Events</a>
                     {% else %}
-                        <a href="/accounts/login/" class="text-sm bg-dod-green text-white px-4 py-2 rounded-md hover:bg-green-600 transition font-medium">Sign In</a>
+                        <a href="/accounts/login/" class="text-sm bg-dod-500 text-white px-4 py-2 rounded hover:bg-dod-600 transition font-bold uppercase tracking-wider">Sign In</a>
                     {% endif %}
                 </div>
             </div>
@@ -66,32 +77,35 @@
     </main>
 
     <!-- Footer -->
-    <footer class="bg-dod-dark text-gray-400 mt-16">
+    <footer class="bg-gray-50 border-t-2 border-dod-500 mt-16">
         <div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div>
-                    <h3 class="text-white font-semibold mb-3">devopsdays</h3>
-                    <p class="text-sm">A worldwide series of community-run conferences covering DevOps, software development, IT infrastructure operations, and the intersection between them.</p>
+                    <div class="flex items-center space-x-2 mb-3">
+                        <img src="{% static 'img/devopsdays-brain.png' %}" alt="" class="h-6">
+                        <span class="font-black uppercase tracking-wide text-dod-500">devopsdays</span>
+                    </div>
+                    <p class="text-sm text-gray-600">A worldwide series of community-run conferences covering DevOps, software development, IT infrastructure operations, and the intersection between them.</p>
                 </div>
                 <div>
-                    <h3 class="text-white font-semibold mb-3">Links</h3>
+                    <h3 class="font-bold uppercase tracking-wider text-dod-500 text-sm mb-3">Links</h3>
                     <ul class="space-y-2 text-sm">
-                        <li><a href="/about/" class="hover:text-white transition">About</a></li>
-                        <li><a href="/organizing/" class="hover:text-white transition">Organizing Guide</a></li>
-                        <li><a href="/conduct/" class="hover:text-white transition">Code of Conduct</a></li>
-                        <li><a href="/speaking/" class="hover:text-white transition">Speaking</a></li>
+                        <li><a href="/about/" class="text-gray-600 hover:text-dod-500 transition">About</a></li>
+                        <li><a href="/organizing/" class="text-gray-600 hover:text-dod-500 transition">Organizing Guide</a></li>
+                        <li><a href="/conduct/" class="text-gray-600 hover:text-dod-500 transition">Code of Conduct</a></li>
+                        <li><a href="/speaking/" class="text-gray-600 hover:text-dod-500 transition">Speaking</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white font-semibold mb-3">Community</h3>
+                    <h3 class="font-bold uppercase tracking-wider text-dod-500 text-sm mb-3">Community</h3>
                     <ul class="space-y-2 text-sm">
-                        <li><a href="https://github.com/devopsdays" class="hover:text-white transition">GitHub</a></li>
-                        <li><a href="https://social.devopsdays.org" class="hover:text-white transition">Mastodon</a></li>
+                        <li><a href="https://github.com/devopsdays" class="text-gray-600 hover:text-dod-500 transition">GitHub</a></li>
+                        <li><a href="https://social.devopsdays.org" class="text-gray-600 hover:text-dod-500 transition">Mastodon</a></li>
                     </ul>
                 </div>
             </div>
-            <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-center">
-                <p>&copy; devopsdays — a community conference series since 2009</p>
+            <div class="border-t border-gray-200 mt-8 pt-8 text-sm text-center text-gray-500">
+                <p>&copy; devopsdays &mdash; a community conference series since 2009</p>
             </div>
         </div>
     </footer>
diff --git a/templates/public/events/detail.html b/templates/public/events/detail.html
diff --git a/templates/public/events/list.html b/templates/public/events/list.html
diff --git a/templates/public/home.html b/templates/public/home.html
