Polish header, homepage, and footer based on visual review

devGregA · claude · devGregA · commit 2cf6b5e061f4 · 2026-02-20T15:02:46.000-07:00
- Increase nav text size and add social links (GitHub, LinkedIn, YouTube, X) to header
- Restyle search button with solid background, icon, and keyboard shortcut indicator
- Reduce spacing between logo and nav row
- Change hero CTAs to brand-aligned colors (Fuji Blue primary, Dojo Black outline)
- Expand homepage to 8 symmetric tiles (4×2 grid) with title case headings
- Update tool count from 190+ to 200+
- Update footer tagline to align with brand messaging

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/docs/assets/scss/common/_custom.scss b/docs/assets/scss/common/_custom.scss
@@ -142,6 +142,28 @@ h1, h2, h3, h4, h5, h6,
   font-weight: 500; // Medium for buttons
 }
 
+.hero-actions .btn-outline-secondary {
+  --bs-btn-color: #191919;
+  --bs-btn-border-color: #191919;
+  --bs-btn-hover-bg: #191919;
+  --bs-btn-hover-border-color: #191919;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-bg: #333333;
+  --bs-btn-active-border-color: #333333;
+  --bs-btn-active-color: #fff;
+}
+
+[data-bs-theme="dark"] .hero-actions .btn-outline-secondary {
+  --bs-btn-color: #e0e0e0;
+  --bs-btn-border-color: #e0e0e0;
+  --bs-btn-hover-bg: #e0e0e0;
+  --bs-btn-hover-border-color: #e0e0e0;
+  --bs-btn-hover-color: #191919;
+  --bs-btn-active-bg: #cccccc;
+  --bs-btn-active-border-color: #cccccc;
+  --bs-btn-active-color: #191919;
+}
+
 // ============================================================
 // Version Selector
 // ============================================================
@@ -769,8 +791,8 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .navbar-nav.flex-grow-1 .nav-link {
-  font-size: 0.8125rem;
-  padding: 0.375rem 0.625rem;
+  font-size: 0.9rem;
+  padding: 0.375rem 0.75rem;
   border-radius: 0.25rem;
   white-space: nowrap;
 
@@ -795,29 +817,65 @@ h1, h2, h3, h4, h5, h6,
 // --- Search Button Refinement ---
 
 #searchToggleDesktop {
-  border: 1px solid #DCDCDC;
-  border-radius: 2rem;
-  padding: 0.25rem 1rem;
-  font-size: 0.8125rem;
-  color: #666666;
+  border: 1px solid #CDCDCD;
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.875rem;
+  font-size: 0.875rem;
+  color: #555555;
+  background: #f5f5f5;
+  gap: 0.25rem;
+  min-width: 13rem;
 
   &:hover {
     border-color: #1779C5;
     color: #1779C5;
+    background: #eef5fb;
   }
 
-  .fw-bold {
-    font-weight: 400 !important;
+  .search-kbd {
+    font-family: inherit;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    border: 1px solid #CDCDCD;
+    border-radius: 0.25rem;
+    padding: 0.05rem 0.4rem;
+    line-height: 1.4;
+    color: #888888;
+    background: #ffffff;
   }
 }
 
 [data-bs-theme="dark"] #searchToggleDesktop {
-  border-color: #333333;
+  border-color: #444444;
   color: #B3B3B3;
+  background: #2a2a2a;
 
   &:hover {
     border-color: #82B0D9;
     color: #82B0D9;
+    background: rgba(#1779C5, 0.15);
+  }
+
+  .search-kbd {
+    border-color: #555555;
+    color: #888888;
+    background: #333333;
+  }
+}
+
+// --- Header Social Links ---
+
+.header-social-links {
+  gap: 0.125rem;
+
+  .social-link {
+    padding: 0.25rem;
+    opacity: 0.6;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 }
 
diff --git a/docs/layouts/_partials/footer/footer.html b/docs/layouts/_partials/footer/footer.html
@@ -8,8 +8,8 @@
           <img src="/svgs/logo-darkmode.svg" class="logo-darkmode" alt="DefectDojo" width="150" />
         </a>
         <p class="text-muted small">
-          Open-source application security management.<br>
-          Streamline your AppSec workflows.
+          Security's secret weapon - unify &amp; automate AppSec.<br>
+          Open-source vulnerability management &amp; DevSecOps.
         </p>
       </div>
 
diff --git a/docs/layouts/_partials/header/header.html b/docs/layouts/_partials/header/header.html
@@ -131,41 +131,8 @@ <h5 class="offcanvas-title" id="offcanvasNavMainLabel">{{ site.Title }}</h5>
               <span class="ms-2 text-bs-body fw-bold">| docs</span>
             </a>
 
-            <!-- Search -->
-            <div class="flex-grow-1 d-none d-lg-flex justify-content-center align-items-center">
-
-              <!-- FlexSearch desktop -->
-              {{ partial "main/showFlexSearch" . }}
-              {{ $showFlexSearch := .Scratch.Get "showFlexSearch" -}}
-              {{ if $showFlexSearch -}}
-              <button type="button" id="searchToggleDesktop" class="btn btn-link nav-link p-2 d-none d-lg-block"
-                aria-label="Search website">
-                <span class="fw-bold">Search docs </span>
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24"
-                  height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
-                  stroke-linecap="round" stroke-linejoin="round">
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                  <circle cx="10" cy="10" r="7"></circle>
-                  <line x1="21" y1="21" x2="15" y2="15"></line>
-                </svg>
-              </button>
-              {{ end -}}
-
-              <!-- DocSearch desktop -->
-              {{ if site.Params.add_ons.docSearch -}}
-              <button type="button" id="searchToggleDesktop" class="btn btn-link nav-link mx-2 d-none d-lg-block"
-                aria-label="Search website">
-                <span class="fw-bold">Search docs </span>
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24"
-                  height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
-                  stroke-linecap="round" stroke-linejoin="round">
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                  <circle cx="10" cy="10" r="7"></circle>
-                  <line x1="21" y1="21" x2="15" y2="15"></line>
-                </svg>
-              </button>
-              {{ end -}}
-            </div>
+            <!-- Spacer -->
+            <div class="flex-grow-1 d-none d-lg-block"></div>
 
             <!-- Language dropdown -->
             {{ if eq site.Params.doks.multilingualMode true -}}
@@ -264,6 +231,41 @@ <h5 class="offcanvas-title" id="offcanvasNavMainLabel">{{ site.Title }}</h5>
 
             <!-- Right-aligned items -->
             <div class="d-flex align-items-center ms-lg-auto">
+
+              <!-- FlexSearch desktop -->
+              {{ partial "main/showFlexSearch" . }}
+              {{ $showFlexSearch := .Scratch.Get "showFlexSearch" -}}
+              {{ if $showFlexSearch -}}
+              <button type="button" id="searchToggleDesktop" class="btn btn-link nav-link d-none d-lg-flex align-items-center me-2"
+                aria-label="Search website">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search me-1" width="16"
+                  height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                  <circle cx="10" cy="10" r="7"></circle>
+                  <line x1="21" y1="21" x2="15" y2="15"></line>
+                </svg>
+                <span>Search</span>
+                <kbd class="search-kbd ms-2">/</kbd>
+              </button>
+              {{ end -}}
+
+              <!-- DocSearch desktop -->
+              {{ if site.Params.add_ons.docSearch -}}
+              <button type="button" id="searchToggleDesktop" class="btn btn-link nav-link d-none d-lg-flex align-items-center me-2"
+                aria-label="Search website">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search me-1" width="16"
+                  height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                  <circle cx="10" cy="10" r="7"></circle>
+                  <line x1="21" y1="21" x2="15" y2="15"></line>
+                </svg>
+                <span>Search</span>
+                <kbd class="search-kbd ms-2">/</kbd>
+              </button>
+              {{ end -}}
+
               <!-- Color mode toggler -->
               {{ if and (eq site.Params.doks.colorMode "auto") site.Params.doks.colorModeToggler -}}
               <button id="buttonColorMode" class="btn btn-link mx-auto nav-link p-0 ms-lg-2 me-lg-1" type="button"
@@ -285,10 +287,21 @@ <h5 class="offcanvas-title" id="offcanvasNavMainLabel">{{ site.Title }}</h5>
               </button>
               {{ end -}}
 
-              <!-- GitHub link (other social icons moved to footer) -->
-              <a class="nav-link social-link ms-lg-2" href="https://github.com/DefectDojo/django-DefectDojo" aria-label="GitHub">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg>
-              </a>
+              <!-- Social links — Tabler stroke icons -->
+              <div class="d-none d-lg-flex align-items-center header-social-links ms-lg-2">
+                <a class="nav-link social-link" href="https://github.com/DefectDojo/django-DefectDojo" aria-label="GitHub" rel="noopener">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg>
+                </a>
+                <a class="nav-link social-link" href="https://www.linkedin.com/company/defectdojo/" aria-label="LinkedIn" rel="noopener">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"/><path d="M8 11l0 5"/><path d="M8 8l0 .01"/><path d="M12 16l0 -5"/><path d="M16 16v-3a2 2 0 0 0 -4 0"/></svg>
+                </a>
+                <a class="nav-link social-link" href="https://www.youtube.com/@defectdojo" aria-label="YouTube" rel="noopener">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z"/><path d="M10 9l5 3l-5 3z"/></svg>
+                </a>
+                <a class="nav-link social-link" href="https://x.com/defectdojo" aria-label="X" rel="noopener">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4l11.733 16h4.267l-11.733 -16z"></path><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path></svg>
+                </a>
+              </div>
             </div>
 
             <!-- Navbar button mobile -->
@@ -299,7 +312,7 @@ <h5 class="offcanvas-title" id="offcanvasNavMainLabel">{{ site.Title }}</h5>
               }}</a>
             {{ end -}}
           </div>
-          <div class="w-100 mt-3">
+          <div class="w-100 mt-1">
             <ul class="navbar-nav flex-grow-1">
               {{ $current := index (split .RelPermalink "/") 1 }}
               {{ if eq $current "" }}{{ $current = "en" }}{{ end }}
diff --git a/docs/layouts/home.html b/docs/layouts/home.html
