sredevopsorg · ngeorger · Jul 16, 2026 · Jul 16, 2026 · Jul 16, 2026 · Jul 16, 2026
diff --git a/README.md b/README.md
@@ -10,12 +10,9 @@
 
 ## v2 To Do
 
-- Fix primary menu navigation, breaking in mobile views and small screens []
-- Improve responsive design for secondary navigation elements []
-
-### Known issues (tracked separately, not prioritized)
-- `home-br.hbs` inherits `default.hbs` (English shell, `lang="en"`) — there's no `default-br.hbs` yet, so `/br/` pages don't get proper `lang="pt"`/OG-locale metadata despite `locales/pt.json` existing. Needs a dedicated Portuguese layout shell per the multi-locale pattern documented above.
-
+- [x] Fix primary menu navigation, mobile views and small screens doesn't render correctly
+- [ ] Improve responsive design for secondary navigation menu
+- [ ] Create login and search forms for the main navigation menu, as optional features (Ghost Docs: <https://docs.ghost.org/themes/custom-settings>)
 
 ## 🌐 Multi-Locale Architecture
 

diff --git a/assets/built/main.css b/assets/built/main.css
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -15,15 +15,32 @@
 /* Ghost Navigation Override */
 .nav {
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
+.nav li {
+  width: 100%;
+}
+
 .nav li a {
-  @apply text-gray-400 font-medium transition-colors hover:text-white;
+  @apply block w-full text-gray-400 font-medium transition-colors hover:text-white;
+}
+
+@media (min-width: 768px) {
+  .nav {
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .nav li {
+    width: auto;
+  }
 }
 
 /* --- Comfortable Reading Experience (Replaces default `prose`) --- */

diff --git a/custom-es.hbs b/custom-es.hbs
@@ -80,7 +80,7 @@
     {{#if comments}}
     <div class="gh-comments">
       {{#if @member}}{{comments count=false mode=dark title="Opiniones?"}}
-      {{else}}{{> "social-sso"}}{{comments count=false mode=dark title=" "}}
+      {{else}}{{comments count=false mode=dark title=" "}}
       {{/if}}
     </div>
     {{/if}}

diff --git a/custom-notocbot.hbs b/custom-notocbot.hbs
@@ -80,7 +80,7 @@
     {{#if comments}}
     <div class="gh-comments">
       {{#if @member}}{{comments count=false mode=dark title="Opiniones?"}}
-      {{else}}{{> "social-sso"}}{{comments count=false mode=dark title=" "}}
+      {{else}}{{comments count=false mode=dark title=" "}}
       {{/if}}
     </div>
     {{/if}}

diff --git a/default-br.hbs b/default-br.hbs
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="pt" class="dark">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{meta_title}}</title>
+
+    {{!-- Google Fonts --}}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+        rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="{{asset "built/prism-window.css"}}" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+
+    {{!-- Compiled Tailwind CSS --}}
+    <link rel="stylesheet" type="text/css" href="{{asset "built/main.css"}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset "built/tocbot.css"}}" />
+    {{ghost_head}}
+</head>
+
+<body class="bg-dark-bg text-dark-text antialiased font-sans">
+
+    {{> "header"}}
+
+    <main id="main-wrapper" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 relative mt-4">
+        {{{body}}}
+    </main>
+    {{> "footer"}}
+
+    {{ghost_foot}}
+
+    {{!-- Tocbot JS --}}
+    <script src="https://cdn.jsdelivr.net/npm/tocbot@4.36.8/dist/tocbot.min.js"></script>
+
+     {{!-- Load PrismJS from the file you provided --}}
+    <script src="{{asset "built/prism.js"}}"></script>
+
+    {{!-- Load main.js built file --}}
+    <script src="{{asset "built/main.js"}}"></script>
+
+
+</body>
+
+</html>
diff --git a/default-es.hbs b/default-es.hbs
@@ -12,7 +12,7 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap"
         rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=SUSE+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
         rel="stylesheet">
 
     <link rel="stylesheet" type="text/css" href="{{asset "built/prism-window.css"}}" />

diff --git a/default.hbs b/default.hbs
@@ -12,7 +12,7 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap"
         rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=SUSE+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
         rel="stylesheet">
 
     <link rel="stylesheet" type="text/css" href="{{asset "built/prism-window.css"}}" />

diff --git a/error-404.hbs b/error-404.hbs
@@ -19,9 +19,6 @@
         aria-label="Search site content"
         title="Press / to search"
     >
-        <svg class="w-5 h-5 text-light" role="img" aria-label="Search">
-            <use xlink:href="#icon-search"></use>
-        </svg>
         <span class="flex-grow text-left">Search</span>
         <kbd class="hidden px-2 py-1 text-xs rounded md:inline-block bg-darker">
             /

diff --git a/home-br.hbs b/home-br.hbs
@@ -1,23 +1,23 @@
-{{!< default}}
+{{!< default-br}}
 
 <div class="max-w-6xl mx-auto pb-12">
-
+    
     {{!-- Page Title & Description --}}
     <div class="mb-10 border-b border-gray-800 pb-6">
         <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">{{@site.title}}</h1>
         <p class="text-gray-400 mt-2 text-lg">{{@site.description}}</p>
     </div>
 
     {{!-- Featured Post --}}
-    {{> "featured-hero" tag="br"}}
+    {{> "featured-hero"}}
 
     {{!-- Post Grid --}}
     <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {{#foreach posts}}
-            {{> "post-card"}}
+            {{> "post-card-br"}}
         {{/foreach}}
     </section>
 
     {{!-- Pagination --}}
     {{pagination}}
-</div>
+</div>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "sredevopsorg-ghost-theme",
     "description": "Ghost v6 Theme for SREDevOps.org (https://www.sredevops.org) — Multi-locale, Tailwind CSS v3, responsive, dark-mode first and tag-based language filtering.",
     "demo": "https://www.sredevops.org",
-    "version": "2.0.6",
+    "version": "2.0.7",
     "engines": {
         "ghost": ">=6.0.0"
     },

diff --git a/partials/header.hbs b/partials/header.hbs
@@ -1,6 +1,6 @@
 <header class="sticky top-0 z-50 w-full bg-[#0d0e11]/80 backdrop-blur-md border-b border-white/10 py-3 min-h-[60px]">
   {{!-- Inner container to keep spacing consistent with the rest of the theme --}}
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
 
     <div class="flex items-center">
         {{#if @site.logo}}
@@ -27,7 +27,7 @@
     </div>
 
     {{!-- Mobile Menu Toggle --}}
-    <button id="mobile-toggle" class="text-gray-400 md:hidden"><i class="fas fa-bars text-xl"></i></button>
+    <button id="mobile-toggle" type="button" class="rounded-lg p-2 text-gray-400 transition-colors hover:text-white md:hidden" aria-label="Toggle navigation menu" aria-controls="mobile-menu" aria-expanded="false"><i class="fas fa-bars text-xl"></i></button>
 
     {{!-- Mobile Menu Overlay (Vertical items) --}}
     <nav id="mobile-menu"

diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -1,16 +1,16 @@
 {{#if isSecondary}}
-    <ul class="flex flex-wrap justify-center space-x-2" role="menu">
+    <ul class="flex flex-wrap justify-center gap-2" role="menu">
         {{#foreach navigation}}
             <li class="flex items-center gap-2 px-4 py-2" role="menuitem">
                 <a href="{{url absolute="true"}}">{{label}}</a>
             </li>
         {{/foreach}}
     </ul>
 {{else}}
-    <ul class="space-y-1 nav" role="menu">
+    <ul class="nav flex flex-col gap-2 w-full md:flex-row md:items-center md:gap-6" role="menu">
         {{#foreach navigation}}
-            <li class="{{link_class for=(url) class=(concat "nav-"slug)}} flex items-center gap-2 rounded-lg px-4 py-2 text-light hover:text-lighter hover:bg-dark" role="menuitem">
-                <a href="{{url absolute="true"}}" class="text-light hover:text-lighter">{{label}}</a>
+            <li class="{{link_class for=(url) class=(concat "nav-"slug)}} flex items-center rounded-lg px-0 py-2 text-left font-mono md:px-4 md:py-2" role="menuitem">
+                <a href="{{url absolute="true"}}" class="block w-full text-gray-400 transition-colors hover:text-white">{{label}}</a>
             </li>
         {{/foreach}}
     </ul>

diff --git a/partials/post-card-br.hbs b/partials/post-card-br.hbs
@@ -0,0 +1,23 @@
+<article
+  class="bg-dark-card border border-gray-700 rounded-xl overflow-hidden hover:border-gray-500 transition-colors group flex flex-col h-full">
+  {{#if feature_image}}
+  <a href="{{url}}" class="block aspect-[16/9] overflow-hidden">
+    <img src="{{img_url feature_image size="m"}}"
+      alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+      class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
+  </a>
+  {{/if}}
+  <div class="p-5 flex flex-col flex-grow">
+    {{#if primary_tag}}
+    <a href="{{primary_tag.url}}"
+      class="text-xs font-bold text-brand-purple uppercase tracking-wider mb-2 hover:underline font-mono">{{primary_tag.name}}</a>
+    {{/if}}
+    <h3 class="text-lg font-semibold text-white group-hover:text-brand-purple transition-colors leading-tight mb-2"><a
+        href="{{url}}">{{title}}</a></h3>
+    <p class="text-sm text-gray-400 flex-grow line-clamp-2">{{excerpt words="20"}}</p>
+    <div class="flex items-center justify-between text-xs text-gray-500 mt-4 pt-3 border-t border-gray-800">
+      <span>{{date published_at format="DD/MM/YYYY"}}</span>
+      <span>{{reading_time minute="Menos de un minuto" minutes="% minutos aprox."}}</span>
+    </div>
+  </div>
+</article>
diff --git a/partials/social-sso.hbs b/partials/social-sso.hbs
diff --git a/post.hbs b/post.hbs
@@ -65,7 +65,7 @@
 
   {{#is "post"}}
   <div class="mt-16 border-t border-gray-800 pt-8">
-    <h2 class="text-2xl font-bold text-white mb-6">Related content</h2>
+    <h2 class="text-2xl font-bold text-white mb-6">{{t "Related content"}}</h2>
     {{#get "posts" include="authors" filter="id:-{{id}}+tags:[{{primary_tag.slug}}]" limit="2" as |next|}}
     {{#if next}}
     <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -79,7 +79,7 @@
     {{#if comments}}
     <div class="gh-comments">
       {{#if @member}}{{comments count=false mode=dark title="Opinions?"}}
-      {{else}}{{> "social-sso"}}{{comments count=false mode=dark title=" "}}
+      {{else}}{{comments count=false mode=dark title=" "}}
       {{/if}}
     </div>
     {{/if}}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,13 +12,13 @@ module.exports = {
       fontFamily: {
         sans: ["Inter", "sans-serif"],
         mono: [
-          "SUSE Mono",
+          "Roboto Mono",
           "ui-monospace",
+          "monospace",
           "SFMono-Regular",
           "Consolas",
-          "Liberation Mono",
           "Menlo",
-          "monospace",
+          "Liberation Mono",
         ],
       },
       colors: {