Blog: unify label chips, footer; fix contrast

- Remove blog-specific footer. (See also: #2501, #2503)
- Fix markup that was invalidly reusing the same HTML ID for multiple
  elements.
- Use existing chips for blog categories instead of having separate
  styles for blog chips. This fixes some issues where the contrast of
  the blog category chips was not meeting WCAG contrast standards.
- Update yellow chip in light mode to meet WCAG AAA contrast standard.

blog/index.page.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { useTranslate, usePageSharedData } from "@portal/hooks";
 import moment from "moment";
-import { BlogFooter } from "@theme/components/Footer/BlogFooter";
 
 export const frontmatter = {
   seo: {
@@ -95,12 +94,11 @@ export default function Index() {
                   {translate(` ${moment(heroPost.date).format("DD YYYY")}`)}
                 </h4>
                 <div className="pb-8">
-                  <p
-                    id={`${heroPost.category_id}-badge`}
-                    className="category-badge"
+                  <div
+                    className={`d-inline-block mb-2 label blog-category-${heroPost.category_id}`}
                   >
                     {translate(`${heroPost.category}`)}
-                  </p>
+                  </div>
                 </div>
                 <h4 className="mb-8 h2-sm font-weight-bold">
                   <a href={`/blog/${heroPost.link}`}>
@@ -206,12 +204,11 @@ export default function Index() {
                       id={`${card.category_id}`}
                       className="mb-4"
                     />
-                    <p
-                      id={`${card.category_id}-badge`}
-                      className="category-badge"
+                    <div
+                      className={`d-inline-block label blog-category-${card.category_id}`}
                     >
                       {translate(card.category)}
-                    </p>
+                    </div>
                   </div>
                   <div>
                     <p id="card-date" className="mb-0">
@@ -240,7 +237,6 @@ export default function Index() {
           </div>
         </section>
       </div>
-      <BlogFooter />
     </div>
   );
 }