chore: Issue 836 Update Theme to include F5 branding (#64)

JTorreG · ADubhlaoich · web-flow · commit c7656163d5cb · 2024-05-30T18:23:41.000+01:00
* chore: update branding

* fix: update CSS to match F5.com

* feat: Update NGINX links and refs to F5, remove RSS feed link

---------

Co-authored-by: Alan Dooley &lt;a.dooley@f5.com&gt;
diff --git a/assets/css/f5-hugo.css b/assets/css/f5-hugo.css
@@ -549,11 +549,15 @@ footer a:hover,
 }
 
 .site-info.footer-text p {
-  font-weight: 300;
-  font-size: 12px;
+  font-weight: 400;
+  font-size: 13px;
   line-height: 16px;
 }
 
+.site-info.footer-text a {
+   padding-right: 20px;
+}
+
 .footer-head {
   font-weight: 700;
   color: #cccccc;
@@ -1557,4 +1561,9 @@ li.nav-item a.nav-link {
   display: inline-block;
   max-width: 100%;
   min-width: 100%;
+}
+
+.f5-logo-footer {
+   height: 32px;
+   width: 32px;
 }
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -8,47 +8,46 @@
           </div>
 
           {{ if not ( in .Site.Params.buildtype "package" ) }}
-          <div class="col-md d-flex footer-text"> 
+          <div class="col-md d-flex footer-text">
             <div class="col-xl d-none d-md-block align-self-center text-semibold align-right">
               <span>Found a bug? Looking for something new?</span>
-            </div>   
+            </div>
             <div class="col-lg d-none d-md-block pl-0">
               <button class="button footer-button"><a href="https://docs.nginx.com/feedback/" alt="Select to open the submit feedback form">Let Us Know</a></button>
-            </div>    
+            </div>
           </div>
           {{ end }}
 
         </div>
 
-        
+
         {{ if not ( in .Site.Params.buildtype "package" ) }}
-        <div class="row d-print-none d-none d-md-flex"> 
+        <div class="row d-print-none d-none d-md-flex">
           <div class="col-md-3 d-none d-md-block">
             <span class="footer-head">Company</span>
             <ul class="footer-text">
-              <li><a href="https://www.nginx.com/about" target="_blank" alt="Select to learn about NGINX, an F5 company">About F5 NGINX</a></li>
-              <li><a href="https://www.nginx.com/events" target="_blank" alt="Select to learn about NGINX events">Events</a></li>
+              <li><a href="https://www.f5.com/go/product/welcome-to-nginx" target="_blank" alt="Select to learn about F5 NGINX">About F5 NGINX</a></li>
+              <li><a href="https://www.f5.com/company/events" target="_blank" alt="Select to learn about F5 events">Events</a></li>
             </ul>
             <br />
             <span class="footer-head">Resources</span>
             <ul class="footer-text">
-              <li><a href="https://www.nginx.com/blog/" target="_blank" alt="Select to visit the NGINX blog" >Blog</a></li>
-              <li><a href="https://www.nginx.com/resources/faq/" target="_blank" alt="Select to visit the NGINX frequently asked questions page" >FAQ</a></li>
-              <li><a href="https://www.nginx.com/services/" target="_blank" alt="Select to learn about NGINX Support">Professional Services</a></li>
-              <li><a href="https://www.nginx.com/learn/nginx-training/" target="_blank" alt="Select to learn about NGINX training offerings" >Training</a></li>
+              <li><a href="https://www.f5.com/company/blog/nginx" target="_blank" alt="Select to visit the F5 NGINX blog" >Blog</a></li>
+              <li><a href="https://www.f5.com/go/faq/nginx-faq" target="_blank" alt="Select to visit the F5 NGINX frequently asked questions page" >FAQ</a></li>
+              <li><a href="https://www.f5.com/services" target="_blank" alt="Select to learn about F5 NGINX Support">Professional Services</a></li>
+              <li><a href="https://www.f5.com/learn/training" target="_blank" alt="Select to learn about F5 training offerings" >Training</a></li>
             </ul>
-          </div>  
+          </div>
 
           <div class="col-md-3 d-none d-md-block">
             <span class="footer-head">Products</span>
               <ul class="footer-text">
-                  <li><a title="NGINX Plus" aria-label="NGINX Plus" href="https://www.nginx.com/products/nginx/">NGINX Plus</a></li>
-                  <li><a title="NGINX App Protect" aria-label="NGINX App Protect" href="https://www.nginx.com/products/nginx-app-protect/">NGINX App Protect</a></li>
-                  <li><a title="NGINX Amplify" aria-label="NGINX Amplify" href="https://www.nginx.com/products/nginx-amplify/">NGINX Amplify</a></li>
-                  <li><a title="NGINX Management Suite" aria-label="NGINX Management Suite" href="https://www.nginx.com/products/nginx-management-suite/">NGINX Management Suite</a></li>
-                  <li><a title="NGINX Ingress Controller" aria-label="NGINX Ingress Controller" href="https://www.nginx.com/products/nginx-ingress-controller/">NGINX Ingress Controller</a></li>
-                  <li><a title="NGINX Service Mesh" aria-label="NGINX Service Mesh" href="https://www.nginx.com/products/nginx-service-mesh/">NGINX Service Mesh</a></li>
-                  <li><a title="NGINX Unit" aria-label="NGINX Unit" href="https://www.nginx.com/products/nginx-unit/">NGINX Unit</a></li>
+                  <li><a title="F5 NGINX Plus" aria-label="F5 NGINX Plus" href="https://www.f5.com/products/nginx/nginx-plus">F5 NGINX Plus</a></li>
+                  <li><a title="F5 NGINX App Protect" aria-label="F5 NGINX App Protect" href="https://www.f5.com/products/nginx/nginx-app-protect">F5 NGINX App Protect</a></li>
+                  <li><a title="F5 NGINX Instance Manager" aria-label="F5 NGINX Instance Manager" href="https://www.f5.com/products/nginx/instance-manager">F5 NGINX Instance Manager</a></li>
+                  <li><a title="F5 NGINX Ingress Controller" aria-label="F5 NGINX Ingress Controller" href="https://www.f5.com/products/nginx/nginx-ingress-controller">F5 NGINX Ingress Controller</a></li>
+                  <li><a title="F5 NGINX Gateway Fabric" aria-label="F5 NGINX Gateway Fabric" href="https://www.f5.com/products/nginx/nginx-gateway-fabric">F5 NGINX Gateway Fabric</a></li>
+                  <li><a title="F5 NGINXaaS for Azure" aria-label="F5 NGINXaaS for Azure" href="https://www.f5.com/products/nginx/f5-nginxaas-for-azure">F5 NGINXaaS for Azure</a></li>
               </ul>
           </div>
 
@@ -60,8 +59,7 @@
               <li><a title="NGINX Amplify" aria-label="NGINX Amplify" href="https://github.com/nginxinc/nginx-amplify-agent"><span class="inner">NGINX Amplify</span></a></li>
               <li><a title="NGINX Agent" aria-label="NGINX Agent" href="https://github.com/nginx/Agent"><span class="inner">NGINX Agent</span></a></li>
               <li><a title="NGINX Kubernetes Ingress Controller" aria-label="NGINX Kubernetes Ingress Controller" href="https://github.com/nginxinc/kubernetes-ingress"><span class="inner">NGINX Kubernetes Ingress Controller</span></a></li>
-              <li><a title="NGINX Microservices Reference Architecture" aria-label="NGINX Microservices Reference Architecture" href="https://github.com/nginxinc/mra-ingenious"><span class="inner">NGINX Microservices Reference Architecture</span></a></li>
-              <li><a title="NGINX Crossplane" aria-label="NGINX Crossplane" href="https://github.com/nginxinc/crossplane"><span class="inner">NGINX Crossplane</span></a></li>
+              <li><a title="NGINX Gateway Fabric" aria-label="NGINX Gateway Fabric" href="https://github.com/nginxinc/nginx-gateway-fabric"><span class="inner">NGINX Gateway Fabric</span></a></li>
           </ul>
           </div>
 
@@ -75,16 +73,15 @@
                     LinkedIn</a></li>
                   <li><a href="https://www.youtube.com/user/NginxInc" title="youtube" aria-label="youtube" target="_blank" rel="noreferrer" alt="NGINX Youtube Channel"><i class="fa-brands fa-square-youtube" aria-hidden="true"></i>
                     YouTube</a></li>
-                  <li><a href="https://www.nginx.com/feed/" title="rss" aria-label="rss" target="_blank" ><i class="fa fa-rss-square" aria-hidden="true"></i>
-                    RSS</a></li>
                 </ul>
           </div>
         </div>
         {{ end }}
         <div class="site-info footer-text">
 
             <div class="text-center">
-            <p>Copyright © F5, Inc. All rights reserved.<br><a href="https://www.f5.com/company/policies/trademarks" rel="noopener" target="_blank">Trademarks</a> | <a href="https://www.f5.com/company/policies" rel="noopener" target="_blank">Policies</a> | <a href="{{ .Site.BaseURL }}/ossc">Open Source Components</a> | <a href="https://www.f5.com/company/policies/privacy-notice" rel="noopener" target="_blank">Privacy</a> | <a href="https://www.f5.com/company/policies/F5-California-privacy-summary" rel="noopener" target="_blank">California Privacy</a> | <a href="https://www.f5.com/company/policies/privacy-notice#no-sell" rel="noopener" target="_blank">Do Not Sell My Personal Information</a> | <span id="teconsent"></span></p>
+            <p><a href="https://www.f5.com/"><img class="f5-logo-footer" src="{{.Site.BaseURL}}/images/icons/Logo_F5.svg" alt="F5 logo"></a>
+               ©2024 F5, Inc. All rights reserved.</p><p><a href="https://www.f5.com/company/policies/trademarks" rel="noopener" target="_blank">Trademarks</a>  <a href="https://www.f5.com/company/policies" rel="noopener" target="_blank">Policies</a> <a href="{{ .Site.BaseURL }}/ossc">Open Source Components</a>  <a href="https://www.f5.com/company/policies/privacy-notice" rel="noopener" target="_blank">Privacy</a>  <a href="https://www.f5.com/company/policies/F5-California-privacy-summary" rel="noopener" target="_blank">California Privacy</a>  <a href="https://www.f5.com/company/policies/privacy-notice#no-sell" rel="noopener" target="_blank">Do Not Sell My Personal Information</a>  <span id="teconsent"></span></p>
             </div>
 
         </div><!-- /.site-info -->
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -28,7 +28,7 @@
 
     <ul class="navbar navbar-nav">
         <li class="nav-item-explore active">
-          <button class="button navbar-button"><a href="https://www.nginx.com/products/" alt="Explore all products on nginx.com" target="_blank">Explore All Products</a></button>
+          <button class="button navbar-button"><a href="https://www.f5.com/products" alt="Explore all products on f5.com" target="_blank">Explore All Products</a></button>
         </li>     
     </ul>
   </div>
diff --git a/static/images/icons/Logo_F5.svg b/static/images/icons/Logo_F5.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-19099 -5059.693 41.07 40">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: none;
+      }
+
+      .cls-1 {
+        clip-rule: evenodd;
+      }
+
+      .cls-3 {
+        clip-path: url(#clip-path);
+      }
+
+      .cls-4 {
+        clip-path: url(#clip-path-2);
+      }
+
+      .cls-5 {
+        fill: #e71b2a;
+      }
+
+      .cls-6 {
+        clip-path: url(#clip-path-3);
+      }
+
+      .cls-7 {
+        clip-path: url(#clip-path-5);
+      }
+
+      .cls-8 {
+        clip-path: url(#clip-path-6);
+      }
+
+      .cls-9 {
+        clip-path: url(#clip-path-7);
+      }
+
+      .cls-10 {
+        clip-path: url(#clip-path-8);
+      }
+
+      .cls-11 {
+        fill: #fff;
+      }
+
+      .cls-12 {
+        clip-path: url(#clip-path-10);
+      }
+
+      .cls-13 {
+        clip-path: url(#clip-path-12);
+      }
+
+      .cls-14 {
+        fill: #e2163d;
+      }
+    </style>
+    <clipPath id="clip-path">
+      <path id="Path_60" data-name="Path 60" class="cls-1" d="M211.766-6735.594h.272v-.607h.215a.618.618,0,0,1,.3.051.379.379,0,0,1,.146.354v.124l0,.047a.122.122,0,0,1,0,.018c0,.008,0,.011.007.013h.253l-.009-.017a.174.174,0,0,1-.014-.079c0-.043,0-.081,0-.114v-.115a.424.424,0,0,0-.085-.24.394.394,0,0,0-.269-.153.629.629,0,0,0,.223-.072.338.338,0,0,0,.152-.307.38.38,0,0,0-.239-.391,1.2,1.2,0,0,0-.422-.055h-.541Zm.775-.831a.725.725,0,0,1-.259.034h-.244v-.562h.233a.693.693,0,0,1,.327.06.237.237,0,0,1,.1.225A.24.24,0,0,1,212.541-6736.425Zm.793-.929a1.375,1.375,0,0,0-1-.409,1.353,1.353,0,0,0-.991.409,1.349,1.349,0,0,0-.411,1,1.349,1.349,0,0,0,.407,1,1.344,1.344,0,0,0,.995.415,1.361,1.361,0,0,0,1-.415,1.369,1.369,0,0,0,.413-1A1.363,1.363,0,0,0,213.334-6737.354Zm-.143.14a1.155,1.155,0,0,1,.354.857,1.176,1.176,0,0,1-.354.861,1.165,1.165,0,0,1-.859.356,1.172,1.172,0,0,1-.858-.356,1.193,1.193,0,0,1-.352-.861,1.171,1.171,0,0,1,.352-.857,1.166,1.166,0,0,1,.858-.359A1.157,1.157,0,0,1,213.191-6737.214Z" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-2">
+      <path id="Path_59" data-name="Path 59" class="cls-2" d="M0-6709H1920v-142H0Z" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-3">
+      <path id="Path_71" data-name="Path 71" class="cls-1" d="M176-6772.693h40v40H176Z" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-5">
+      <rect id="Rectangle_4" data-name="Rectangle 4" class="cls-2" width="40" height="41" transform="translate(176 78)"/>
+    </clipPath>
+    <clipPath id="clip-path-6">
+      <path id="Path_69" data-name="Path 69" class="cls-1" d="M212.507-6763.986c-.245,1.014-.374,2.063-.61,3.137-3-.389-6.524-.674-10.482-.813-.318,1-.618,1.987-.962,3.061,6.622.406,9.841,2.151,11.749,4.209a8.648,8.648,0,0,1,2.143,6.511,9.466,9.466,0,0,1-3.864,7.284,13.468,13.468,0,0,1-6.746,2.566c-3.031.227-7.085-.494-7.947-1.023-.519-1.181-1.031-2.372-1.581-3.67a.636.636,0,0,1,.16-.889c.59-.565,1.158-1.113,1.753-1.691.264-.258.556-.5.778-.129.816,1.258,1.579,2.411,2.345,3.562.87,1.282,2.193,2.45,5.086,2.256a4.828,4.828,0,0,0,4.477-4.08c.213-3.743-3.576-6.4-13.425-7.25,1.889-5.708,3.732-11.231,5.205-15.621,2.34.108,4.506.3,6.575.566,1.531.2,2.953.551,4.378.716A19.953,19.953,0,0,0,196-6772.693a20,20,0,0,0-20,20,19.909,19.909,0,0,0,3.893,11.852c.847.006,1.434-.183,1.5-.549a5.986,5.986,0,0,0-.054-1.569,91.926,91.926,0,0,1-.391-12.409c-1.014.044-1.924.09-2.8.141.036-.785.078-1.529.141-2.3.862-.082,1.776-.155,2.779-.239.043-.677.092-1.331.15-1.992.45-4.05,4.716-6.528,8.268-7.485a17.529,17.529,0,0,1,3.3-.544c.273-.009.568-.019.862-.019a3.66,3.66,0,0,1,1.956.39c.766.574,1.524,1.145,2.329,1.782.081.108.168.278-.032.574-.37.432-.727.846-1.1,1.29-.216.263-.576.193-.878.112-.634-.325-1.244-.623-1.862-.922a8.059,8.059,0,0,0-3.571-.962,2.063,2.063,0,0,0-1.666,2.016c-.111,1.715-.186,3.474-.249,5.379,2.238-.064,4.469-.1,6.824-.113,0,.536,0,1.027,0,1.575-.767.344-1.492.691-2.262,1.042-1.588.017-3.1.03-4.621.057-.07,4.532,0,9.046.2,13.22a5.719,5.719,0,0,0,.252,1.7c.217.538,1.466.953,4.184,1.106.01.473.024.919.038,1.378a84.853,84.853,0,0,1-12.081-1.165,19.951,19.951,0,0,0,14.9,6.663,20,20,0,0,0,20-20,19.9,19.9,0,0,0-3.493-11.293" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-7">
+      <path id="Path_68" data-name="Path 68" class="cls-2" d="M176-6732h40v-41H176Z" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-8">
+      <path id="Path_66" data-name="Path 66" class="cls-1" d="M179.985-6740.435q.564.779,1.2,1.5a82.7,82.7,0,0,0,11.988,1.175c-.015-.463-.028-.913-.038-1.39-2.7-.155-3.936-.572-4.151-1.114a5.851,5.851,0,0,1-.25-1.709c-.2-4.208-.269-8.76-.2-13.328,1.51-.027,3.01-.039,4.586-.057.764-.353,1.482-.7,2.244-1.05,0-.553,0-1.048,0-1.588-2.336.012-4.55.049-6.771.113.062-1.919.137-3.692.247-5.422a2.07,2.07,0,0,1,1.653-2.032,7.9,7.9,0,0,1,3.544.969c.613.3,1.218.6,1.846.929.3.083.656.153.872-.112.373-.448.727-.865,1.094-1.3.2-.3.113-.469.032-.579-.8-.642-1.551-1.217-2.311-1.8a3.591,3.591,0,0,0-1.942-.393c-.291,0-.584.011-.855.019a17.162,17.162,0,0,0-3.272.55c-3.525.964-7.757,3.462-8.2,7.544-.057.667-.105,1.327-.148,2.009-1,.085-1.9.158-2.757.241-.062.782-.1,1.531-.14,2.322.867-.051,1.77-.1,2.776-.142a94.142,94.142,0,0,0,.388,12.51,6.137,6.137,0,0,1,.054,1.582c-.062.368-.646.559-1.486.553" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-10">
+      <path id="Path_63" data-name="Path 63" class="cls-1" d="M214.294-6747.71a8.723,8.723,0,0,0-2.144-6.547c-1.909-2.068-5.131-3.822-11.758-4.231.345-1.079.646-2.068.964-3.078,3.962.14,7.487.427,10.489.818.237-1.08.365-2.136.611-3.154q-.459-.674-.97-1.305c-1.427-.166-2.85-.524-4.382-.72-2.07-.268-4.238-.46-6.579-.569-1.474,4.414-3.318,9.966-5.21,15.705,9.858.857,13.649,3.525,13.435,7.29a4.839,4.839,0,0,1-4.48,4.1c-2.894.2-4.219-.979-5.089-2.267-.766-1.157-1.53-2.317-2.345-3.582-.222-.372-.515-.13-.778.13-.6.581-1.164,1.132-1.754,1.7a.643.643,0,0,0-.161.9c.551,1.3,1.064,2.5,1.583,3.69.863.532,4.919,1.256,7.952,1.028a13.424,13.424,0,0,0,6.751-2.58,9.531,9.531,0,0,0,3.866-7.323" transform="translate(0 6851)"/>
+    </clipPath>
+    <clipPath id="clip-path-12">
+      <path id="Path_74" data-name="Path 74" class="cls-1" d="M181.071-6739.453h0Z" transform="translate(0 6851)"/>
+    </clipPath>
+  </defs>
+  <g id="Logo_F5" transform="translate(-19239 -5138)">
+    <g id="Group_604" data-name="Group 604" transform="translate(-36)">
+      <g id="Group_153" data-name="Group 153" class="cls-3">
+        <g id="Group_152" data-name="Group 152" class="cls-4">
+          <path id="Path_58" data-name="Path 58" class="cls-5" d="M205.93-6729.947h12.817v-12.817H205.93Z" transform="translate(0 6851)"/>
+        </g>
+      </g>
+      <g id="Group_162" data-name="Group 162" class="cls-6">
+        <g id="Group_161" data-name="Group 161" class="cls-4">
+          <g id="Group_160" data-name="Group 160" class="cls-7">
+            <g id="Group_159" data-name="Group 159" class="cls-8">
+              <g id="Group_158" data-name="Group 158" class="cls-9">
+                <path id="Path_67" data-name="Path 67" class="cls-5" d="M171-6727.693h50v-50H171Z" transform="translate(0 6851)"/>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g id="Group_157" data-name="Group 157" class="cls-10" transform="translate(-36)">
+      <g id="Group_156" data-name="Group 156" class="cls-4">
+        <path id="Path_64" data-name="Path 64" class="cls-11" d="M173.253-6732.763h29.718v-39.859H173.253Z" transform="translate(0 6851)"/>
+      </g>
+    </g>
+    <g id="Group_155" data-name="Group 155" class="cls-12" transform="translate(-36)">
+      <g id="Group_154" data-name="Group 154" class="cls-4">
+        <path id="Path_61" data-name="Path 61" class="cls-11" d="M189.028-6732.763H219.31V-6771.5H189.028Z" transform="translate(0 6851)"/>
+      </g>
+    </g>
+    <g id="Group_164" data-name="Group 164" class="cls-13">
+      <g id="Group_163" data-name="Group 163" class="cls-4">
+        <path id="Path_72" data-name="Path 72" class="cls-14" d="M176.07-6734.453h10v-10h-10Z" transform="translate(0 6851)"/>
+      </g>
+    </g>
+  </g>
+</svg>
